🚀 Next.js Auth + Product CRUD App

A full-stack application built using Next.js App Router, implementing JWT Authentication and Product CRUD operations using modern technologies like Prisma, MongoDB, Redux Toolkit, and TanStack Query.

---

📌 Tech Stack

• ⚡ Next.js (App Router + API Routes)
• 🟦 TypeScript
• 🗄️ MongoDB Atlas
• 🔗 Prisma ORM
• 🧠 Redux Toolkit (Auth State)
• 📦 TanStack Query (Server State)
• 🎨 Tailwind CSS + shadcn/ui

---

📁 Project Structure

├── 📁 prisma/
│   └── 📄 schema.prisma
├── 📁 public/
│   ├── 🖼️ file.svg
│   ├── 🖼️ globe.svg
│   ├── 🖼️ next.svg
│   ├── 🖼️ vercel.svg
│   └── 🖼️ window.svg
├── 📁 src/
│   ├── 📁 app/
│   │   ├── 📁 (auth)/
│   │   │   ├── 📁 login/
│   │   │   │   └── 📄 page.tsx
│   │   │   └── 📁 register/
│   │   │       └── 📄 page.tsx
│   │   ├── 📁 admin/
│   │   │   ├── 📄 layout.tsx
│   │   │   └── 📄 page.tsx
│   │   ├── 📁 api/
│   │   │   ├── 📁 auth/
│   │   │   │   └── 📁 [...nextauth]/
│   │   │   │       └── 📄 route.ts
│   │   │   ├── 📁 login/
│   │   │   │   └── 📄 route.ts
│   │   │   ├── 📁 products/
│   │   │   │   ├── 📁 [id]/
│   │   │   │   │   └── 📄 route.ts
│   │   │   │   └── 📄 route.ts
│   │   │   └── 📁 register/
│   │   │       └── 📄 route.ts
│   │   ├── 📄 favicon.ico
│   │   ├── 🎨 globals.css
│   │   ├── 📄 layout.tsx
│   │   └── 📄 page.tsx
│   ├── 📁 components/
│   │   ├── 📁 ui/     #shadcn UI Components
│   │   │   ├── 📄 button.tsx
│   │   │   ├── 📄 card.tsx
│   │   │   ├── 📄 dialog.tsx
│   │   │   ├── 📄 input.tsx
│   │   │   ├── 📄 label.tsx
│   │   │   ├── 📄 magic-card.tsx
│   │   │   ├── 📄 pagination.tsx
│   │   │   ├── 📄 switch.tsx
│   │   │   └── 📄 table.tsx
│   │   ├── 📄 DynamicInput.tsx
│   │   ├── 📄 ProductDialog.tsx
│   │   └── 📄 Table.tsx
│   ├── 📁 generated/
│   ├── 📁 hooks/
│   │   └── 📄 useProducts.ts
│   ├── 📁 layout/
│   │   └── 📄 Navbar.tsx
│   ├── 📁 lib/
│   │   ├── 📄 auth.ts
│   │   ├── 📄 axios.ts
│   │   ├── 📄 jwt.ts
│   │   ├── 📄 prisma.ts
│   │   └── 📄 utils.ts
│   ├── 📁 reducer/
│   │   └── 📄 product.rducer.ts
│   ├── 📁 services/
│   │   ├── 📁 helpers/
│   │   │   ├── 📁 provider/
│   │   │   │   ├── 📄 QueryProvider.tsx
│   │   │   │   └── 📄 ReduxProvider.tsx
│   │   │   ├── 📄 global.helper.ts
│   │   │   └── 📄 redux.ts
│   │   ├── 📁 jsons/
│   │   │   ├── 📁 fields/
│   │   │   │   ├── 📄 auth.input.ts
│   │   │   │   └── 📄 product.input.ts
│   │   │   └── 📁 lottie/
│   │   └── 📁 validatons/
│   │       ├── 📄 loginSchema.ts
│   │       ├── 📄 productSchema.ts
│   │       └── 📄 registerSchema.ts
│   ├── 📁 store/
│   │   ├── 📁 slices/
│   │   │   └── 📄 auth.slice.ts
│   │   └── 📄 store.ts
│   ├── 📁 type/
│   │   ├── 📁 interface/
│   │   └── 📁 type/
│   │       ├── 📄 auth.type.ts
│   │       ├── 📄 components.type.ts
│   │       ├── 📄 global.type.ts
│   │       ├── 📄 product.type.ts
│   │       └── 📄 redux.type.ts
│   └── 📄 proxy.ts
├── ⚙️ .gitignore
├── 📝 README.md
├── ⚙️ components.json
├── 📄 eslint.config.mjs
├── 📄 next.config.ts
├── ⚙️ package-lock.json
├── ⚙️ package.json
├── 📄 postcss.config.mjs
└── ⚙️ tsconfig.json

---

🔐 Features

Authentication

• User Registration
• User Login
• JWT Token Generation
• Secure Route Handling

Product CRUD

• Create Product
• Get All Products
• Update Product
• Delete Product

---

🗄️ Database Models

👤 User

• name
• email (unique)
• phone
• password

📦 Product

• name
• desc
• price

---

⚙️ MongoDB Atlas

✅ Why MongoDB?

• NoSQL database → flexible schema
• Easy to scale
• Fast for CRUD operations
• Works well with JSON-based apps

🔧 Setup Steps

1. Go to MongoDB Atlas
2. Create a free cluster
3. Create database user (username & password)
4. Allow IP access (0.0.0.0/0 for development)
5. Copy connection string

DATABASE_URL="mongodb+srv://user:pass@cluster/db"

---

⚙️ Prisma ORM

✅ Why Prisma?

• Type-safe queries
• Auto-generated database client
• Cleaner and readable code
• Reduces runtime errors

🔧 Setup Steps

1. Install Prisma

npm install prisma @prisma/client
npx prisma init

2. Configure Environment

DATABASE_URL="your_mongodb_connection_string"

3. Define Schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id       String @id @default(auto()) @map("_id") @db.ObjectId
  name     String
  email    String @unique
  phone    String
  password String

   products Product[]
}

model Product {
 id          String   @id @default(auto()) @map("_id") @db.ObjectId
 name        String
 price       Float
 description String
 isPublish   Boolean  @default(false)

 createdAt   DateTime @default(now())

 userId String   @db.ObjectId
 user   User     @relation(fields: [userId], references: [id])
}

4. Generate Client

npx prisma generate

👉 Prisma works as a bridge between your API and MongoDB, making database operations simple and type-safe.

---

🔌 API Routes (Next.js Backend)

✅ Why API Routes?

• Built-in backend inside Next.js
• No need for separate server
• Easy integration with frontend
• Scalable structure

📂 API Structure

/api/register
/api/login
/api/products
/api/products/[id]

🔐 Auth APIs

➤ POST /api/register

• Create new user
• Store hashed password
• Return success message

➤ POST /api/login

• Validate user credentials
• Generate JWT token
• Return token + status Example Response:

{
  "statusCode": 200,
  "message": "Login successful",
  "token": "JWT_TOKEN",
  "user: {} //user details
}

📦 Product APIs

➤ GET /api/products

• Fetch all products

➤ POST /api/products

• Create new product

➤ PUT /api/products/:id

• Update product

➤ DELETE /api/products/:id

• Delete product

---

🧠 State Management

Redux Toolkit (Authentication)

• Stores user data & JWT token
• Handles login/logout globally
• Centralized state management

TanStack Query (Products)

• Fetch & cache API data
• Auto refetching
• Keeps UI in sync with server

---

🎨 UI & Styling

• Tailwind CSS → Utility-first styling
• shadcn/ui → Reusable UI components

---

🔐 Middleware (proxy.ts)

• Protects private routes
• Validates JWT token
• Redirects unauthorized users

---

🙋‍♂️ Author

Made with ❤️ by Tanmay Shil GitHub: @TanmayShil