🛒 Next Store

A modern, full-featured e-commerce application built with Next.js (App Router), TypeScript, and Tailwind CSS. Next Store offers a seamless shopping experience with persistent cart, user authentication, product reviews, AI-powered review summaries, and a robust admin dashboard. The platform leverages scalable technologies such as Zustand for state management, Prisma with Neon for the database, and Resend for secure email verification and notifications.

📚 Table of Contents

🛒 Next Store

🖼️ Preview

🏠 Home Home page

🛒 Product Details

🛍️ Cart Cart

🌞 Light Mode

✨ Features

🛍️ Storefront

🗂️ Product browsing by category
📄 Product detail pages
➕ Add products to the cart
🛒 Cart with persisted state
🧾 Generate orders

👤 User & Admin

🔑 User authentication and roles
👤 User profile and order history
⭐ Product reviews by users
🤖 AI-generated summary of reviews
🛠️ Admin section to manage orders, users, products, and hero slider

🎨 UI/UX

🌓 Theme switcher (light/dark/system)
📱 Responsive layout
🧩 Component-based UI

🛠️ Tech Stack

⚙️ Core

⚡ Framework: Next.js (App Router)
🟦 Language: TypeScript

🎨 Styling & UI

🎨 Styling: Tailwind CSS
🖼️ Icons: react-icons (Io5)
🌀 Component Animations: Framer Motion

🗄️ State & Data

🗃️ State Management: Zustand
🛢️ ORM: Prisma
🟩 Database: Neon (PostgreSQL)
📝 Form Validation: Zod, React Hook Form

🔐 Authentication & Authorization

🔒 Auth: NextAuth.js

🖼️ Media & 🤖 AI

🖼️ Image Hosting: Cloudinary
🤖 AI Summaries: Anthropic Claude

✉️ Communication & ⏰ Automation

✉️ Email: Resend (verification & notifications)
⏰ Scheduling/Cron: Vercel Cron

🧑‍💻 Developer Experience

🧪 Testing: Jest, React Testing Library (recommended)
🧹 Linting/Formatting: ESLint, Prettier, prettier-plugin-tailwindcss
⚙️ Environment Management: dotenv

📁 Project Structure

src/
  actions/                  # Server actions (business logic, DB, API, etc.)
  app/                      # Next.js app directory (routing, layouts, API endpoints)
    (auth)/                 # Auth pages (login, register)
    (shop)/                 # Shop pages (cart, category, checkout, product, etc.)
    api/                    # API routes (auth, cron, upload, etc.)
  components/               # Reusable UI and feature components
  config/                   # App-wide configuration (fonts, etc.)
  lib/                      # Utilities, adapters, and helpers
    adapters/               # e.g., bcrypt
    db/                     # Prisma client, schema, seed, migrations, data
    utils/                  # Utility functions (formatting, etc.)
  store/                    # Zustand stores (cart, theme, UI, address)
  types/                    # TypeScript types (product, user, etc.)

🏆 Best Practices

Single Responsibility: Each module, component, and function do one thing well.
Clear Naming: Descriptive names for files, functions, and variables.
Modular Design: Organized code by feature and responsibility for maintainability and scalability.
Validation & Security: All user input is validated (Zod) and sensitive actions require authentication.
Async/Await: All asynchronous operations use async/await for clarity and error handling.
Environment Variables: Secrets and configuration are managed via environment variables.
Error Handling: All actions and API routes handle errors gracefully and provide meaningful feedback.
No Over-Engineering: Only implemented features and abstractions as needed (YAGNI principle).
Consistent Styling: Tailwind CSS utility classes for a unified and modern UI.
Automated Cleanup: Scheduled tasks (Vercel Cron) to keep the database clean of unverified users/newsletters.

Next Store