my personal t3 stack app boilerplate that using repository pattern
This project is built using the T3 stack App with additional features like shadcn UI components and a repository design pattern for tRPC routers.
.
├── src/
│ ├── app/
│ │ ├── _components/
│ │ │ ├── discord-login-button.tsx
│ │ │ ├── latest-posts.tsx
│ │ │ ├── signin-form.tsx
│ │ │ ├── signup-form.tsx
│ │ │ └── navbar/
│ │ │ | ├── navbar-wrapper.tsx (server component that will consumes session from the server)
│ │ │ | └── navbar.tsx
│ │ ├── api/
│ │ │ └── trpc/
│ │ │ | └── [trpc]/
│ │ │ | └── route.ts (the main route api that will do HTTP request to trpc server)
│ │ │ └── auth/
│ │ │ └── [...nextAuth]/
│ │ │ └── route.ts (for nextAuth)
│ │ ├── posts/
│ │ │ └── page.tsx
│ │ ├── signin/
│ │ │ └── page.tsx
│ │ ├── signup/
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/
│ │ └── ui/
│ │ │ └── shadcn-components-are-here...
│ ├── server/ (trpc backend - will use nextjs backend server)
│ │ ├── api/
│ │ │ ├── routers/
│ │ │ │ ├── auth/
│ │ │ │ | └── auth.service.ts
│ │ │ │ ├── post/
│ │ │ │ | ├── post.repository.ts
│ │ │ │ | ├── post.service.ts
│ │ │ │ | └── post.router.ts
│ │ │ │ ├── user/
│ │ │ │ | ├── user.repository.ts
│ │ │ │ | ├── user.service.ts
│ │ │ │ | └── user.router.ts
│ │ │ │ └── your-trpc-route/
│ │ │ ├── root.ts
│ │ │ └── trpc.ts
│ │ ├── common/ (utils for your trpc service or repository)
│ │ │ └── base-repository.ts
│ │ ├── auth.ts
│ │ ├── db.ts
│ ├── trpc/ (trpc client setup)
│ │ ├── react.tsx (tRPC provider that consumes the shared query-client.ts)
│ │ ├── server.ts (the entrypoint for using tRPC in Server Components)
│ │ └── query-client.ts (the query client that tRPC uses to cache and deduplicate data in client components)
│ └── env.js (@t3-oss/env-nextjs. please open .env.example for more details)
├── drizzle/
│ └── generated-sql-file
├── public/
│ └── favicon.ico
├── drizzle.config.ts
├── .env.example
├── .eslintrc.json
├── .gitignore
├── docker-compose.yml
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── postcss.config.cjs
├── prettier.config.cjs
├── README.md
├── start-database.sh
├── tailwind.config.ts
└── tsconfig.json
Clone the repository:
git clone https://github.com/dodycode/nextjs-trpc-boilerplate.git
cd nextjs-trpc-boilerplate
Install dependencies: Using pnpm (recommended):
pnpm install
Or using npm:
npm install
Set up your environment variables:
.env.example
to .env
.env
Set up the database: First, start the database container:
./start-database.sh
Then, generate the database schema: Using pnpm:
pnpm db:generate
Or using npm:
npm run db:generate
Now, create the initial migration and apply it: Using pnpm:
pnpm db:migrate
Or using npm:
npm run db:migrate
Start the development server: Using pnpm:
pnpm dev
Or using npm:
npm run dev
The server should now be running on http://localhost:3000
.
This project uses Drizzle ORM for database management. Here are the available scripts and when to use them:
Using pnpm:
pnpm db:generate
: Generate Drizzle migration files (run this after making changes to your schema)pnpm db:migrate
: Run Drizzle migrations (use this for the initial setup and when you want to apply migrations)pnpm db:push
: Push schema changes to the database (use this during development to quickly apply schema changes)pnpm db:studio
: Open Drizzle Studio for database managementUsing npm:
npm run db:generate
: Generate Drizzle migration filesnpm run db:migrate
: Run Drizzle migrationsnpm run db:push
: Push schema changes to the databasenpm run db:studio
: Open Drizzle Studio for database management/src/server/db/schema/
pnpm db:generate
or npm run db:generate
to create a new migrationpnpm db:push
or npm run db:push
to apply the changes to your development databaseFor production or when you need to keep track of migrations:
pnpm db:generate
or npm run db:generate
pnpm db:migrate
or npm run db:migrate
to apply the migrationsRemember to commit the generated migration files to your version control system.
The project uses tRPC for API routes, with a repository pattern and service layer:
src/server/api/routers/your-route-name
: will contains tRPC router, repository classes for data access, service classes for business logic.Example usage in a tRPC router:
import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";
import { yourService } from "./yourmodel.service";
export const yourRouter = createTRPCRouter({
getData: publicProcedure.query(async () => {
const service = new YourService();
return service.getData();
}),
});
You can check my user and post router as reference.
This project uses NextAuth.js for authentication. Configure your providers in src/server/auth.ts
.
The project uses shadcn UI components. You can find and customize these components in src/components/ui/
.
Using pnpm:
pnpm dev
: Start the development serverpnpm build
: Build the application for productionpnpm start
: Start the production serverpnpm lint
: Run ESLint to check for code quality issuesUsing npm:
npm run dev
: Start the development servernpm run build
: Build the application for productionnpm start
: Start the production servernpm run lint
: Run ESLint to check for code quality issuesThe project includes a start-database.sh
script to set up a Docker container for the database. This script:
.env
fileTo use it, ensure you have Docker installed and run:
./start-database.sh
Contributions are welcome! Please feel free to submit a Pull Request.