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
  • Table of Contents
  • Preview
  • Features
    • Storefront
    • User & Admin
    • UI/UX
  • Tech Stack
    • Core
    • Styling & UI
    • State & Data
    • Authentication & Authorization
    • Media & AI
    • Communication & Automation
    • Developer Experience
  • Project Structure
  • Best Practices

Preview

Home

Product Details

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

• 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.