Pizzac — Next.js Pizza Ordering Experience

A responsive pizza-menu and order-tracking assignment built with the Next.js App Router, Google OAuth, animated promotions, and interactive product customization.

Pizzac presents a complete restaurant storefront journey: sign in with Google, explore promotional offers, browse pizza and drink collections, customize an item, inspect a sample order, and manage the authenticated profile.

Open the live Vercel demo

flowchart LR
    V[Visitor] --> G[Google sign-in]
    G --> H[Personalized landing page]
    H --> P[Pizza menu]
    H --> D[Drinks menu]
    P --> C[Customize product]
    D --> C
    C --> O[Sample order and bill]
    O --> R[Profile and logout]

Loading

What the application covers

The project combines an authenticated storefront shell with responsive menus, promotional motion, product options, and a client-side order demonstration.

flowchart TB
    A((Pizzac))
    A --> AU[Authentication<br/>Google OAuth and JWT session]
    A --> L[Landing<br/>Offers, search, and bestsellers]
    A --> P[Pizza menu<br/>Veg and non-veg categories]
    A --> D[Drinks menu<br/>Soft drinks and specials]
    A --> C[Customization<br/>Base, size, and price]
    A --> O[Orders<br/>Quantity, filter, sort, and bill]
    A --> R[Profile<br/>Session name and logout]
    A --> M[Motion<br/>Carousels and image rotations]

Loading

Documentation map

The README provides the product view. These focused guides document how the implementation actually works.

flowchart LR
    R[README] --> A[Architecture<br/>Routes and boundaries]
    R --> F[Feature flows<br/>User journeys]
    R --> D[Auth and data<br/>OAuth, state, and models]
    R --> S[Setup and verification<br/>Environment and checks]
    R --> L[Learning<br/>Lessons and hardening]

Loading

Open	Focus
Architecture	App Router structure, client boundaries, shared components, route protection, and deployment
Feature flows	Sign-in, landing, menus, customization, orders, profile, and responsive behavior
Authentication and data	Google OAuth, JWT sessions, runtime messages, static catalogs, and client state
Setup and verification	Environment variables, Google configuration, local commands, and manual test map
What I learned	Next.js, authentication, responsive UI, animation, state, and production hardening

One customer journey

This sequence follows the implemented path from Google authentication to logout.

sequenceDiagram
    actor U as User
    participant S as Sign-in page
    participant N as NextAuth route
    participant G as Google OAuth
    participant A as Authenticated app
    participant C as Client state

    U->>S: Click Sign in with Google
    S->>N: signIn with callback /landing
    N->>G: Start OAuth authorization
    G-->>N: Verified Google profile
    N-->>S: Create JWT-backed session
    S-->>A: Redirect to landing
    U->>A: Browse pizza or drinks
    U->>C: Select base and size
    C-->>U: Recalculate displayed price
    U->>A: Open Orders
    A-->>U: Sample items, status, and bill
    U->>A: Open Profile and logout
    A->>N: signOut with callback /

Loading

Routes

Route	Purpose	Access
/	Sign-in screen and Google OAuth entry	Public
/signup	Demonstration signup interface	Public
/landing	Personalized offers, menu shortcuts, and bestsellers	Session checked in client
/pizza	Expandable veg and non-veg pizza catalogs	Session checked in client
/drinks	Expandable drinks and special-item catalogs	Session checked in client
/cart	Sample order table, quantity controls, filtering, sorting, and bill	Session checked in client
/profile	Session name, sample contact information, and logout	Session checked in client
/api/auth/[...nextauth]	NextAuth GET/POST handler	Framework endpoint

Stack

flowchart LR
    TS[TypeScript] --> N[Next.js 15<br/>App Router]
    N --> R[React 19]
    N --> A[NextAuth.js 4]
    A --> G[Google OAuth]
    R --> T[Tailwind CSS 3]
    R --> K[Keen Slider]
    R --> F[Framer Motion]
    R --> I[Lucide React]
    N --> V[Vercel]

Loading

Current implementation status

The project is a polished frontend assignment, not a complete commerce backend. The distinction matters when evaluating or extending it.

Area	Current behavior
Google authentication	Implemented through NextAuth and a JWT session
Email/password sign-in	Visual form only; the Sign In button does not authenticate
Signup	Visual form only; no account is created
Product catalogs	Static typed arrays stored in source files
Search	Styled inputs track focus but do not filter products
Product options	Base and size selections recalculate the displayed modal price
Add to Cart	Visual button only; it does not add the selected product
Orders/cart	Starts with three hardcoded sample orders held in component state
Quantity	Updates local sample-order quantities and calculated totals
Status and date controls	Filter and sort the local sample orders
Checkout	Pay Now is visual; there is no payment gateway or order submission
Profile	Google name is dynamic; address and phone are sample values
Persistence	No database, API-backed catalog, cart storage, or order history

Important

Protected pages redirect only after the client session hook reports an unauthenticated state. This is useful for the assignment experience but is not a server-side authorization boundary. Production-sensitive data and mutations must be protected on the server as described in Production hardening.

Quick start

npm install
npm run dev

Create an untracked .env.local with the Google OAuth values expected by the current source:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXT_AUTH=your-random-nextauth-secret
NEXTAUTH_URL=http://localhost:3000

Open http://localhost:3000. See Setup and verification for Google callback configuration and production notes.

Deployment

The checked-in demo is deployed on Vercel and was reachable during documentation review:

https://nextjs-pizza-app-five.vercel.app/

Configure the same environment values in Vercel and add the deployed callback URL to the Google OAuth client before testing authentication.

View complete system design

flowchart TB
    User[Pizza customer]

    subgraph Public[Public App Router pages]
        SignIn[/ Sign-in]
        Signup[/signup Demo signup]
    end

    subgraph Auth[Authentication]
        Handler[/api/auth route]
        NextAuth[NextAuth configuration]
        Google[Google OAuth]
        Session[JWT-backed session]
    end

    subgraph Protected[Client-checked storefront pages]
        Landing[/landing]
        Pizza[/pizza]
        Drinks[/drinks]
        Cart[/cart]
        Profile[/profile]
    end

    subgraph Components[Shared client components]
        Sidebar[LeftSidebar]
        Offers[HomeBigCards]
        Menu[MenuBar]
        Card[FoodCard and options modal]
    end

    subgraph Data[In-repository and client data]
        Catalogs[Pizza, drink, and special arrays]
        OrderState[Sample cart component state]
        ProfileData[Session name and sample contact data]
        Assets[Public food and promotion images]
    end

    User --> SignIn
    SignIn --> Handler
    Handler --> NextAuth
    NextAuth --> Google
    Google --> Session
    Session --> Landing
    Landing --> Pizza
    Landing --> Drinks
    Landing --> Cart
    Landing --> Profile
    Protected --> Sidebar
    Landing --> Offers
    Landing --> Menu
    Pizza --> Card
    Drinks --> Card
    Card --> Catalogs
    Cart --> OrderState
    Profile --> ProfileData
    Components --> Assets

Loading