{"id":30358127,"url":"https://github.com/dakdevs/boilerplate","last_synced_at":"2025-08-19T09:12:02.492Z","repository":{"id":98721175,"uuid":"534767135","full_name":"dakdevs/boilerplate","owner":"dakdevs","description":"NextJS + NextAuth.js + tRPC + Prisma + Tailwind + Auth0 Boilerplate","archived":false,"fork":false,"pushed_at":"2022-09-12T16:27:47.000Z","size":295,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T07:51:08.779Z","etag":null,"topics":["auth0","boilerplate","next-auth","nextjs","prisma","react","tailwind","trpc"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dakdevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-09T18:48:00.000Z","updated_at":"2025-01-04T03:34:03.000Z","dependencies_parsed_at":"2023-05-24T23:00:27.456Z","dependency_job_id":null,"html_url":"https://github.com/dakdevs/boilerplate","commit_stats":null,"previous_names":["dakdevs/boilerplate"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/dakdevs/boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dakdevs%2Fboilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dakdevs%2Fboilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dakdevs%2Fboilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dakdevs%2Fboilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dakdevs","download_url":"https://codeload.github.com/dakdevs/boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dakdevs%2Fboilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271128811,"owners_count":24703879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth0","boilerplate","next-auth","nextjs","prisma","react","tailwind","trpc"],"created_at":"2025-08-19T09:11:57.346Z","updated_at":"2025-08-19T09:12:02.482Z","avatar_url":"https://github.com/dakdevs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJS + NextAuth.js + tRPC + Prisma + Tailwind + Auth0 Boilerplate\n\n## Relevant Technology Documentation\n- NextJS - https://nextjs.org/docs\n- NextAuth.js - https://next-auth.js.org/getting-started/introduction\n- tRPC - https://trpc.io/docs/v9/\n- Prisma - https://www.prisma.io/docs/\n- Tailwind - https://tailwindcss.com/docs/\n- Auth0 - https://auth0.com/docs/\n\n## Project Structure\n```\napp/\n├─ client/              # React Client Files\n│  ├─ components        # React Shared Components\n│  ├─ contexts          # React Contexts\n│  ├─ hooks             # React Hooks\n│  ├─ icons             # FontAwesome Icon Management\n│  ├─ layouts           # Page Layout Components\n│  ├─ lib               # Libraries\n│  ├─ modules           # Modules containing components of specific concerns\n├─ pages/               # NextJS Pages\n├─ prisma/              # Prisma Schema + Migrations\n├─ public/              # NextJS Public Folder\n├─ server/              # Server Files\n│  ├─ controllers/      # tRPC Routers\n│  ├─ db/               # DB Files\n│  ├─ services/         # Service Files\n├─ styles/              # Core CSS Files\n├─ docker-compose.yml   # Docker Compose for Development\n├─ .env.example         # Example .env File\n├─ .gitignore           # Git Ignore\n├─ next.config.js       # NextJS Configuration\n├─ postcss.config.js    # PostCSS Configuration\n├─ .eslintrc            # ESLint\n├─ package.json         # Node Package JSON\n├─ tsconfig.json        # Typescript Configuration\n├─ config.ts            # Application Config (Env Vars)\n├─ next-env.d.ts        # NextJS TS File\n├─ react.d.ts           # React Global TS Types. No more importing FC and added an FCC for children.\n├─ .npmrc               # NPM RC for Private Packages\n```\n\n## Getting Started\n\n### Prerequisites\n- Docker Desktop v4.11.1 (84025) - ([Download](https://www.docker.com/products/docker-desktop/))\n\n### Running the application in Docker\n#### 1. Create your `.env` file with the required values:\nSee [Auth0 Setup Section](#auth0-setup) to set-up your Auth0 account properly and retrieve these values.\n\n#### 2. Start the application with:\n```bash\nyarn up\n```\n\n#### 3. Run the initial migrations\n_This command can be used to migrate the database at anytime._\n```bash\nyarn migrate\n```\nNotes:\n- Restarting the application will _not_ run migrations automatically, you must run them manually.\n- Migrations will not auto-run on hot reload.\n\n#### 4. Viewing the dev site\nOnce everything is running you can visit the application at:\n- App: http://localhost:3000\n- Studio: http://localhost:5555\n\n#### 5. Viewing logs\nYou can view logs with the following commands:\n\nApp logs only:\n  ```bash\n  yarn logs app\n  ```\n_`app` can be replaced with any of the other Docker container name._\n\nAll logs:\n  ```bash\n  yarn logs\n  ```\n\n### Useful Info\n\n#### Connecting to Postgres with your favorite Postgres Client\nOnly useful if you don't want to use the already provided Prisma Studio container.  \n_Some of these values can be overridden by a `.env` environment variable._\n| **Field** | **Value**   | **Overridable Via** |\n|-----------|-------------|---------------------|\n| Host      | `localhost` |                     |\n| Port      | `5432`      | `POSTGRES_PORT`     |\n| Database  | `myapp`     | `POSTGRES_DATABASE` |\n| Username  | `admin`     | `POSTGRES_USERNAME` |\n| Password  | `admin`     | `POSTGRES_PASSWORD` |\n\n#### Other useful commands\n_Omitting `container_name` will run the command on all containers._\n```bash\nyarn restart {container_name}\n```\n\n```bash\nyarn stop {container_name}\n```\n\n## Docker Containers\n- **app** - NextJS Application\n  - Port `3000` - Application\n  - Port `9229` - Debugger\n- **studio** - Prisma Studio\n  - Port `5555` - Studio\n- **postgres** - PostgreSQL DB\n  - Port `5432` - DB\n\n## Notable Packages Pre-installed\n\n### `@heroicons/react` ([NPM](https://www.npmjs.com/package/@heroicons/react)) ([Github](https://github.com/tailwindlabs/heroicons)) ([Docs](https://heroicons.com/))\nThis is the package to use HeroIcons with React\n\n### `classnames` ([NPM](https://npmjs.com/package/classnames)) ([Github](https://github.com/JedWatson/classnames))\nThis is used to manage the state of class names in React components.\n\n#### Example use:\n```tsx\nimport classnames from 'classnames'\n\nconst MyComponent: FCC\u003cProps\u003e = (props) =\u003e {\n  const classList = classnames([\n    'flex', 'justify-center', 'items-center', 'appearance-none',\n    'select-none', 'w-full', 'p-2', 'tap-highlight-none',\n    // Text\n    'font-medium', 'text-black',\n    // Focus\n    'focus:outline-none', 'focus:ring',\n    // Ring\n    'ring',\n    // Disabled\n    'disabled:bg-gray-300', 'disabled:ring-gray-300', 'disabled:cursor-not-allowed', 'disabled:text-gray-400',\n    // Scale on click\n    'scale-on-click',\n    'rounded-sm',\n  ], {\n    'h-10': !props.small,\n    'h-8 md:h-6': props.small,\n  }, {\n    // Primary\n    'bg-amber-300': props.color === 'primary',\n    'ring-amber-300': props.color === 'primary',\n    'hover:bg-amber-400': props.color === 'primary',\n    'hover:ring-amber-400': props.color === 'primary',\n  }, props.className)\n  \n  return (\n    \u003cbutton className={classList}\u003eMy Button\u003c/button\u003e\n  )\n}\n\nMyComponent.defaultProps = {\n  small: false,\n  color: 'primary',\n}\n\ntype Props = {\n  small?: boolean\n  color?: 'primary' | 'secondary'\n}\n\nexport default MyComponent\n```\n\n### `formik` ([NPM](https://npmjs.com/package/formik)) ([Github](https://github.com/jaredpalmer/formik)) ([Docs](https://formik.org/docs/overview))\nThis is used to manage the state of input forms in the application. Formik uses `joi`.\n\n### `joi` ([NPM](https://www.npmjs.com/package/joi)) ([Github](https://github.com/hapijs/joi)) ([Docs](https://joi.dev/api/))\nThis is used as validation for `formik`.\n\n### `zod` ([NPM](https://www.npmjs.com/package/zod)) ([Github](https://github.com/colinhacks/zod)) ([Docs](https://zod.dev/))\nThis is used as validation for tRPC. _Yea... two validation libraries... Will replace `joi` when we find a good forms library that supports `zod` natively._\n\n### `usehooks-ts` ([NPM](https://npmjs.com/package/usehooks-ts)) ([Github](https://github.com/juliencrn/usehooks-ts)) ([Docs](https://usehooks-ts.com/))\nA library of useful React hooks.\n\n### `@headlessui/react` ([NPM](https://npmjs.com/package/@headlessui/react)) ([Github](https://github.com/tailwindlabs/headlessui)) ([Docs](https://headlessui.com/))\nA library of useful React components.\n\n## Linting\nRun the linter with:\n```bash\nyarn lint\n```\n\nRun the linter and fix all fixable issues:\n```bash\nyarn lint --fix\n```\n\nPrint all applied ESLint rules:\n```bash\nyarn ling:config\n```\n\n## NPM Scripts\n| **Script**       | **Description**                                                                                                                                                                                                                              |\n|------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `up`             | Starts the Docker project using Docker Compose.\u003cbr\u003eDocs: https://docs.docker.com/engine/reference/commandline/compose_up/                                                                                                                    |\n| `logs`           | Logs the Docker containers in the project using Docker Compose.\u003cbr\u003eDocs: https://docs.docker.com/engine/reference/commandline/compose_logs/                                                                                                  |\n| `stop`           | Stops one or more Docker containers.\u003cbr\u003eDocs: https://docs.docker.com/engine/reference/commandline/compose_stop/                                                                                                                             |\n| `restart`        | Restarts one or more Docker containers.\u003cbr\u003eDocs: https://docs.docker.com/engine/reference/commandline/compose_restart/                                                                                                                       |\n| `dev`            | Next.js command to start the development server. _You should never need to use this. It is used by the Docker environment to start the application._\u003cbr\u003eDocs: https://nextjs.org/docs/api-reference/cli#development                          |\n| `build`          | Next.js command to build the project. _You should never need to use this in development. This is used to generate the production build of the application._\u003cbr\u003eDocs: https://nextjs.org/docs/api-reference/cli#build                         |\n| `start`          | Next.js command to start the project in production mode. _You should never need to use this in development._\u003cbr\u003eDocs: https://nextjs.org/docs/api-reference/cli#production                                                                   |\n| `lint`           | Runs ESLint for the project.\u003cbr\u003eDocs: https://eslint.org/docs/latest/user-guide/command-line-interface                                                                                                                                       |\n| `lint:config`    | Shortcut to output all composed ESLint rules. Usually used with `grep` to find if an extension implements a rule already.\u003cbr\u003eDocs: https://eslint.org/docs/latest/user-guide/command-line-interface#-c---config                              |\n| `prisma`         | Shortcut to the Prisma CLI.\u003cbr\u003eDocs: https://www.prisma.io/docs/reference/api-reference/command-reference                                                                                                                                    |\n| `studio`         | Shortcut to run the Prisma Studio. _You should never need to run this locally. It is used by the Docker environment to start the studio container._\u003cbr\u003eDocs: https://www.prisma.io/docs/reference/api-reference/command-reference#studio     |\n| `generate`       | Shortcut to generate the Prisma SDK used as the DB Layer of the application. _This is automatically ran after any `migrate` command is ran locally._\u003cbr\u003eDocs: https://www.prisma.io/docs/reference/api-reference/command-reference#generate  |\n| `migrate`        | Shortcut to migrate the application's database during development. This command will also run `generate` to generate the appropriate Prisma SDK.  \u003cbr\u003eDocs: https://www.prisma.io/docs/reference/api-reference/command-reference#migrate-dev |\n| `migrate:prod`   | Shortcut to migrate the application's database during CI/CD deployment. _This command should never be used during development._\u003cbr\u003eDocs: https://www.prisma.io/docs/reference/api-reference/command-reference#migrate-deploy                 |\n| `docker:dev`     | Script used by the Docker environment to run the application in development mode. _This command should never need to be manually used._                                                                                                      |\n| `docker:migrate` | Script used by the Docker environment to run migrations from within the container. _This command should never need to be manually used. Use the `migrate` command._                                                                          |\n\n## Auth0 Setup\n- Create an Auth0 Account -\u003e https://auth0.com/signup\n- Under **Applications -\u003e Applications** select the **Default App**. _Feel free to rename this later._\n- In `.env` set `AUTH0_ISSUER` to the **Domain** with `https://` prefixed.\n- In `.env` set `AUTH0_CLIENT_ID` to the **Client ID**.\n- In `.env` set `AUTH0_CLIENT_SECRET` to the **Client Secret**.\n- Update the **Application Type** to `Regular Web Application`.\n- Update the **Allowed Callback URLs** to:\n  ```\n  http://localhost:3000/api/auth/callback/auth0\n  ```\n- Click **Save Changes** at the bottom.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdakdevs%2Fboilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdakdevs%2Fboilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdakdevs%2Fboilerplate/lists"}