ESMate React Next is a production-ready SaaS template built with the latest technologies to help you launch your next idea in days, not weeks. It comes with a complete setup for authentication, payments, database, and all the tools you need for a modern web application.
This template is built with:
- Framework: Next.js – A complete React framework for production.
- Styling: Tailwind CSS – A utility-first CSS framework for rapid UI development.
- Authentication: Better Auth – A complete open-source authentication solution for Next.js applications.
- Authorization: RBAC – Built-in role-based access control and permission management.
- Payments: Stripe – A complete payment platform engineered for growth.
- Database: PostgreSQL – A powerful, open-source object-relational database system.
- ORM: Drizzle ORM – A lightweight and performant TypeScript ORM for Node.js and TypeScript.
- Linting: ESLint – A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- Formatting: Prettier – An opinionated code formatter.
- ✅ Complete authentication flow (Sign in, Sign up, Sign out)
- ✅ Authorization (RBAC) with built-in role-based access control
- ✅ Database integration with Drizzle ORM and PostgreSQL
- ✅ Stripe integration for subscriptions and payments
- ✅ Protected routes and API endpoints
- ✅ Modern UI with Tailwind CSS
- ✅ Code quality with ESLint and Prettier
- ✅ Docker setup for local development
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
-
Create a new project:
npx create-esmate --template react-next
Change into the new project directory:
cd [new-project-name] -
Install dependencies:
npm install
-
Set up environment variables:
Create a
.envfile by copying thesample.envfile:cp sample.env .env
Update the
.envfile with your credentials for the database, Stripe, and authentication providers. -
Start the database:
Use Docker Compose to start a PostgreSQL instance:
docker-compose up -d
-
Run database migrations:
Apply the database schema to your PostgreSQL instance:
npm run db:migrate
-
Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
npm run dev: Starts the development server.npm run build: Creates a production build of the application.npm run start: Starts the production server.npm run fix: Fix the codebase with Prettier & ESLint.npm run check: Check the codebase using ESLint & Prettier.npm run db:migrate: Applies database migrations.npm run db:studio: Opens the Drizzle Studio to manage your database.