https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit
Next.js 14 starter kit with NextAuth, Prisma, and MongoDB. Uses TypeScript, React, Shadcn-UI, and Tailwind CSS. Includes protected routes, theme toggling, and a user account nav.
https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit
adapter github-auth google-auth lucide-icons mongodb nexjs next-auth next-themes oauth prisma shadcn-ui starter-kit starter-template tailwind-css typescript
Last synced: 6 months ago
JSON representation
Next.js 14 starter kit with NextAuth, Prisma, and MongoDB. Uses TypeScript, React, Shadcn-UI, and Tailwind CSS. Includes protected routes, theme toggling, and a user account nav.
- Host: GitHub
- URL: https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit
- Owner: 0mppula
- Created: 2024-08-23T17:15:17.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-26T06:09:19.000Z (about 1 year ago)
- Last Synced: 2025-02-14T01:24:18.248Z (8 months ago)
- Topics: adapter, github-auth, google-auth, lucide-icons, mongodb, nexjs, next-auth, next-themes, oauth, prisma, shadcn-ui, starter-kit, starter-template, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://nextjs-mongodb-prisma-adapter-starter-kit.vercel.app
- Size: 88.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://console.cloud.google.com/) project with an OAuth consent screen created.
- GitHub Provider: GitHub [OAuth App](https://github.com/settings/developers)
### Cloning the repository
1. Clone the repository into a new directory.
```shell
git clone https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit.git
```
2. Install the required dependencies
```shell
npm i
```
### Clone and rename the repository as your own
1. Clone the repository into a new directory.
```shell
git clone https://github.com/0mppula/nextjs-mongodb-prisma-adapter-starter-kit.git
```
2. Navigate into the new directory.
```shell
cd
```
3. Remove the existing Git history.
```shell
rm -rf .git
```
4. Initialize a new Git repository.
```shell
git init
```
5. Add the `` to your `package.json` files top level `name` before installing node modules.
```json
{
"name": "new-repo-name"
}
```
6. Install the required dependencies
```shell
npm i
```
### `.env` File Configuration
In the root of the project create an `.env` file and declare the following variables:
```ts
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
```shell
npx prisma db push
```
2. Generate Prisma Client for type safety across the app.
```shell
npx prisma generate
```
### Start the app
```shell
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.