Nextjs Mongodb Prisma Adapter Starter Kit

Nextjs Mongodb Prisma Adapter Starter Kit?

This application is a Next.js 14 starter kit for authentication, featuring NextAuth, Prisma Adapter, and MongoDB. It utilizes TypeScript, React, and Shadcn-UI, with styling provided by Tailwind CSS. Additionally, the starter kit includes protected routes, theme toggling, and a user account nav in the nav bar. Follow the instructions below to quickly get started with this repository and begin developing your app. If you find this project helpful, please consider starring ⭐ this repository!

---

How to Set Up the Project Locally

Prerequisites

• Node.js version 18.18 or higher
• MongoDB database
• Google Provider: Google Cloud project with an OAuth consent screen created.
• GitHub Provider: GitHub OAuth App

Cloning the repository

1. Clone the repository into a new directory.

   git clone https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit.git

2. Install the required dependencies

   npm i

Clone and rename the repository as your own

1. Clone the repository into a new directory.

   git clone https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit.git <new-repo-name>

2. Navigate into the new directory.

   cd <new-repo-name>

3. Remove the existing Git history.

   rm -rf .git

4. Initialize a new Git repository.

   git init

5. Add the <new-repo-name> to your package.json files top level name before installing node modules.

   {
   	"name": "new-repo-name"
   }

6. Install the required dependencies

   npm i

.env File Configuration

In the root of the project create an .env file and declare the following variables:

DATABASE_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
NEXTAUTH_SECRET=

Populate the variables with the corresponding data.

Setup Prisma

1. Push the changes from the Prisma schema to the database

   npx prisma db push

2. Generate Prisma Client for type safety across the app.

   npx prisma generate

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app
lint	Runs ESLint to check for errors and warnings. Errors will fail the build, but warnings will not.

---

Tech Stack

Technologies

• Next.js: A React framework enabling server-side rendering and static site generation for high-performance web applications.
• Tailwind CSS: A utility-first CSS framework for rapidly creating custom designs directly in your markup.
• MongoDB: MongoDB is an open-source NoSQL database that stores data in flexible, JSON-like documents, allowing for scalable, high-performance data management and real-time data processing.
• Prisma: A next-generation ORM for Node.js and TypeScript that simplifies database access and management with an intuitive query API.
• NextAuth: A complete open-source authentication solution for Next.js applications.
• Shadcn: Different component/UI libraries used for design

Framework

• Front-end Framework: Next.js (v13.4.12)

UI

• UI Library: shadcn-ui
• UI Styling: tailwindcss (v3.4.1) with tailwindcss-animate (v1.0.7)
• Theming: next-themes (v0.3.0)
• Icons: react-icons (v5.3.0) & lucide-react (v0.434.0)
• CSS Utility: clsx (v2.1.1)
• Class Variance Management: class-variance-authority (v0.7.0)

Backend & Authentication

• Prisma ORM: @prisma/client (v5.18.0) with prisma (v5.18.0) as a dev dependency
• User Authentication: next-auth (v4.24.7) with prisma-adapter (v1.0.7)
• TypeScript: (v^5)
• Type Definitions: @types/node (v^20), @types/react (^18), @types/react-dom (v^18)

---

License

This project is licensed under the MIT License.