Skip to main content
Back to Elite Events

Elite Events Documentation

Technical documentation, guides, and API references for the Elite Events platform.

Development Guides/Development Guide

Development Guide

Complete overview of the Elite Events project architecture, setup, and development workflow.

Quick Start

Development Server

npm run dev  # Runs on http://localhost:3000

Building & Production

npm run build   # Production build
npm start       # Start production server
npm run lint    # Lint code

Database Commands

npx prisma generate      # Generate Prisma client
npx prisma migrate dev   # Run database migrations
npx prisma db seed       # Seed database with sample data
npx prisma studio        # Open database GUI (http://localhost:5555)

Project Overview

Elite Events is an e-commerce Next.js application built with:

  • Framework: Next.js 16 with App Router
  • Language: TypeScript
  • UI: React 19, Tailwind CSS
  • State Management: Redux Toolkit
  • Database: MySQL with Prisma ORM

Features:

  • Product catalog with filtering and search
  • Shopping cart and wishlist
  • Blog with posts
  • User account management
  • Checkout and orders

Architecture

Next.js App Router Structure

The app uses route groups to organize pages:

  • src/app/(site)/ - Main site route group
  • src/app/(site)/layout.tsx - Root layout with provider setup
  • All pages: src/app/(site)/(pages)/ and src/app/(site)/blogs/

State Management

Redux Toolkit manages global state with four slices:

  1. Cart (src/redux/features/cart-slice.ts)

    • Add, remove, update quantity, clear operations
    • Memoized selector selectTotalPrice for total value

  2. Wishlist (src/redux/features/wishlist-slice.ts)

    • Product wishlist functionality

  3. Quick View (src/redux/features/quickView-slice.ts)

    • Product quick view modal state

  4. Product Details (src/redux/features/product-details.ts)

    • Currently viewed product information

Store Configuration: src/redux/store.ts

  • Exports: useAppSelector, RootState, AppDispatch

Context Providers

React Context for UI state outside Redux:

  • QuickViewModalContext - Quick view modal visibility
  • CartSidebarModalContext - Cart sidebar modal
  • PreviewSliderContext - Image preview slider

Provider Hierarchy (from src/app/(site)/layout.tsx):

ReduxProvider
  └─ CartModalProvider
     └─ ModalProvider
        └─ PreviewSliderProvider
           └─ App Components

Component Organization

Components organized by four main directories:

  1. Feature Components (src/components/features/)

    • account/ - User account, orders
    • auth/ - Sign in, sign up
    • blog/ - Blog grid, details, sidebar
    • cart/ - Cart, sidebar modal, wishlist
    • checkout/ - Billing, shipping, payment, orders
    • home/ - Hero, categories, best sellers, testimonials
    • shop/ - Product grid, details, sidebar

  2. Layout Components (src/components/layout/)

    • Header/ - Site navigation
    • Footer/ - Site footer
    • ScrollToTop/ - Scroll button

  3. Shared Components (src/components/shared/)

    • BrandLogo/, IconButton/, Newsletter/, PreLoader/, QuickViewModal/, PreviewSlider/

  4. UI Components (src/components/ui/)

    • icons/ - SVG icons
    • links/ - Link components

Each feature folder exports an index.ts for clean imports.

Types

Centralized in src/types/:

  • product.ts - Product with title, price, discountedPrice, reviews, images
  • blogItem.ts - Blog post
  • category.ts - Category
  • testimonial.ts - Testimonial
  • Menu.ts - Navigation menu

Database

MySQL with Prisma ORM

Setup Files:

  • Schema: prisma/schema.prisma (12 models: User, Product, ProductImage, Category, BlogPost, Order, OrderItem, Cart, Wishlist, Review, Testimonial, Address)
  • Client: src/lib/prisma.ts (singleton instance)
  • Migrations: prisma/migrations/
  • Seed: prisma/seed.ts

Legacy Static Data (used for seeding):

  • src/components/features/shop/ShopGrid/shopData.ts - Products
  • src/components/features/blog/BlogGrid/blogData.ts - Blog posts
  • src/components/features/home/Categories/categoryData.ts - Categories
  • src/components/features/home/Testimonials/testimonialsData.ts - Testimonials
  • src/context/menuData.ts - Navigation menu

API Routes

RESTful API in src/app/api/:

Products:

  • GET /api/products - List (pagination, category/price filters, search)
  • GET /api/products/[id] - Get single product
  • POST /api/products - Create (admin)
  • PATCH /api/products/[id] - Update (admin)
  • DELETE /api/products/[id] - Delete (admin)

Categories:

  • GET /api/categories - List all
  • POST /api/categories - Create (admin)

Blog:

  • GET /api/blog - List (pagination, search)
  • POST /api/blog - Create (admin)

Cart (authentication required):

  • GET /api/cart - Get user's items
  • POST /api/cart - Add item
  • PATCH /api/cart/[id] - Update quantity
  • DELETE /api/cart/[id] - Remove item

Wishlist (authentication required):

  • GET /api/wishlist - Get user's items
  • POST /api/wishlist - Add item
  • DELETE /api/wishlist/[id] - Remove item

API Responses:

  • Products and blog posts include pagination metadata
  • Errors: { error: "message" } with appropriate status codes
  • Products transformed to match frontend type

Styling

  • Tailwind CSS - tailwind.config.ts
  • Colors: blue (primary), green, red, yellow, dark, gray, meta
  • Font: Euclid Circular A (in src/app/css/euclid-circular-a-font.css)
  • Main Styles: src/app/css/style.css
  • Breakpoints: xsm (375px), lsm (425px), 3xl (2000px)

Path Aliases

TypeScript in tsconfig.json:

  • @/* → src/*

Key Patterns

Combination of Context API and Redux:

  • Context controls visibility (open/close)
  • Redux stores display data
  • Example: QuickViewModal reads from quickViewReducer, dispatches to cartReducer

Cart Operations

Items tracked with quantity:

  • Existing item → increment quantity
  • New item → add with initial quantity
  • Actions: addItemToCart, removeItemFromCart, updateCartItemQuantity

Image Handling

Products use dual-image structure:

  • thumbnails[] - Sidebar/gallery images
  • previews[] - Main display images
  • Preview functionality uses PreviewSliderContext

Route Groups

Pages nested under (site) route group:

  • Shared layout without affecting URLs
  • Centralized provider setup
  • Consistent header/footer

Development Notes

  • Client-side rendering for interactive features (cart, modals)
  • PreLoader displays 1 second on initial mount
  • All client components need "use client" directive
  • Uses Next.js Image component for optimization
  • React 19 features available

Data Fetching

Three approaches available:

Option 1: Custom Hooks (Recommended for components)

import { useProducts } from "@/hooks/useProducts";

const { products, loading, error } = useProducts({ limit: 10 });

Option 2: Redux with API (Global state)

import { useDispatch } from "react-redux";
import { fetchCart, addToCartAsync } from "@/redux/features/cartSliceApi";

dispatch(fetchCart());
dispatch(addToCartAsync({ productId: 1, quantity: 2 }));

Option 3: Direct API Calls (Server components)

import { getProducts } from "@/lib/api/products";

const { products } = await getProducts({ page: 1, limit: 10 });

Available Hooks

  • useProducts(filters) - Products with pagination/filtering
  • useCategories(includeProductCount) - Categories
  • useBlogPosts(filters) - Blog posts with pagination

Testing

See TESTING_GUIDE.md for testing approach and examples.

API Integration

See API_INTEGRATION_GUIDE.md for detailed API usage patterns.

Security

See SECURITY.md for security guidelines and practices.

Documentation | Elite Events | Philip Rehberger