Next-Prisma-Starter

Next-Prisma-Starter is a boilerplate project designed to help you quickly set up a well-organized development environment for building web applications using Next.js, Prisma, Redux Toolkit, RTK Query, and Tailwind CSS for styling. This starter template provides a solid foundation for your projects, making it easier to get started with popular technologies and best practices.

Tech Stack

• Next.js: A popular React framework for building server-rendered and statically generated applications.
• Prisma: A modern database toolkit for Node.js and TypeScript, making database access and management more efficient and developer-friendly.
• Redux Toolkit: A library that simplifies state management in React applications, enabling you to write scalable and maintainable code.
• RTK Query: A powerful data-fetching library that simplifies fetching, caching, and updating data in your React components.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces with minimal CSS code.

Getting Started

To get started with Next-Prisma-Starter, follow these steps:

1. Add the .env.local file:

DATABASE_URL="postgresql://ofmi:ofmi@localhost:5050/ofmi"
NEXT_PUBLIC_NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_JWT_SECRET="secret"
NEXTAUTH_SECRET="secret"
OFMI_EMAIL_SMTP_HOST=stmp host
OFMI_EMAIL_SMTP_USER=email
OFMI_EMAIL_SMTP_PASSWORD=password
OFMI_EMAIL_SMTP_PORT=465
VERIFICATION_EMAIL_SECRET=emailsecret
VERIFICATION_TOKEN_EXPIRATION=1d

2. Run postgres locally. In the root of the project run:

docker compose up

This is the current DB design

3. Modify the DB If you need to change the DB (add a new table), modify the prisma/schema.prisma file and then run

   yarn migrate:dev

4. Run Migrations: Apply database migrations to create the database schema.

   yarn migrate:dev

   For an existing schema you can update it without creating a migration folder with following command:

   yarn push

5. Seed Database: To seed your database with dummy data.

   yarn seed

   also you can set limit of dummy data you need from the config file located at src/config/default.ts

6. Start the Development Server: Start the Next.js development server.

   yarn dev

7. Open Your App: Your application should now be running at http://localhost:3000. You can start building your project by modifying the source code located in the src directory.

Folder Structure

Next-Prisma-Starter follows a well-organized folder structure to keep your codebase clean and maintainable. Here's a brief overview:

• src: Contains the application's source code, including pages, components, Redux Toolkit setup, and React Query API endpoints.
• prisma: Contains Prisma-related files, including the database schema (schema.prisma) and migrations.
• public: Public assets such as images and fonts can be placed in this directory.
• styles: Styling files, including Tailwind CSS configurations and global styles.
• pages: Next.js pages for routing and rendering components.
• api: Custom API routes for server-side logic.

next-prisma-starter/
├── prisma/
├── public/
├── src/
│   ├── config/
│   ├── pages/
│   ├── redux/
│   │   ├── api/
│   │   ├── features/
│   ├── styles/
│   ├── types/
│   └── utils/
├── ...
├── package.json
├── tsconfig.json
├── ...

Documentation

For more detailed documentation on how to use Next-Prisma-Starter and its features, refer to the Wiki.

License

This project is licensed under the MIT License. Feel free to use, modify, and distribute it as needed for your projects. Please refer to the LICENSE file for more information.

Contributions

Contributions are welcome! If you have suggestions, bug reports, or want to contribute to this project, please open an issue or create a pull request.

Happy coding with Next-Prisma-Starter! 🚀

StandardJS

Install the StandardJS extension.

Activate Auto Fix On Save in the VSCode settings.