You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A modern, responsive storefront built with Next.js 16, React 19, and Tailwind CSS 4. Features a complete shopping experience including product browsing, cart management, Stripe checkout, order history, and secure authentication via NextAuth.
Server & Client Components — Pages use Next.js server components by default; interactive widgets (forms, carousels, cart actions) are client components
API Proxy Layer — A configured Axios instance (apiClient.ts) auto-attaches the JWT from the NextAuth session on every request, supporting both server-side (getServerSession) and client-side (getSession) contexts
Middleware Route Protection — proxy.ts uses NextAuth's withAuth middleware to protect all routes except /login, /register, and public Next.js internals
Cloudinary Image Support — next.config.ts whitelists Cloudinary, Unsplash, and Pixabay domains for next/image optimization
The backend API running at http://localhost:4000 (see backend README)
A Stripe account (for the publishable key)
Installation
# Navigate to the frontend directorycd store_ui
# Install dependencies
pnpm install
# Copy and configure environment variables
cp .env.example .env.local
# Edit .env.local with your values (see below)# Start the development server
pnpm run dev
The app will be available at http://localhost:3000.
🔐 Environment Variables
Create a .env.local file using .env.example as a template:
Secret used to sign/encrypt JWTs (generate with openssl rand -base64 32)
✅
NEXT_PUBLIC_BACKEND_URL
Full base URL of the NestJS backend API
✅
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
Stripe publishable key for client-side payment forms
✅
🗺️ Pages & Routes
Route
Access
Description
/
🔒 Protected
Homepage — new arrivals product slider
/login
🌐 Public
Login form (NextAuth credentials)
/register
🌐 Public
User registration form
/products
🔒 Protected
Product catalog listing
/products/[productId]
🔒 Protected
Product detail page (images, description, add to cart, reviews)
/cart
🔒 Protected
Shopping cart with item management
/check-out
🔒 Protected
Checkout page with Stripe payment form
/orders
🔒 Protected
Order history
🔒 Protected routes require authentication. Unauthenticated users are automatically redirected to /login.
🔑 Authentication
Flow
sequenceDiagram
participant User as Browser
participant Form as Login Form (Client)
participant NA as NextAuth API Route
participant BE as Backend API
User->>Form: Enter email & password
Form->>NA: signIn("credentials", {email, password})
NA->>BE: POST /api/v1/auth/login
BE-->>NA: { user, token }
NA->>NA: JWT callback → store accessToken
NA->>NA: Session callback → expose to client
NA-->>Form: Success
Form->>User: Redirect to homepage
Note over User, BE: All subsequent API requests include<br/>Authorization: Bearer <token>
Loading
Key Implementation Details
Provider: CredentialsProvider — sends email + password to the backend's /auth/login endpoint
Strategy: JWT-based sessions (no database session store)
Token Handling: The backend's access token is stored in the NextAuth JWT and exposed via the session object
Auto-attach: The Axios interceptor in apiClient.ts automatically reads the session and attaches the Authorization: Bearer header to every API request
Type Safety: next-auth.d.ts extends the User, Session, and JWT types to include the custom accessToken field
Middleware: proxy.ts uses withAuth to protect all routes except /login, /register, and Next.js internals