Little Shop - Static-Site Generation (SSG)

Little Shop is a full-stack e-commerce prototype built as the Static-Site Generation implementation. It uses Next.js to pre-render selected pages during the build while keeping interactive and account-specific workflows connected to API routes.

Thesis context

My thesis compares three approaches to modern web development by implementing the same e-commerce application three times:

Approach	Application	Rendering strategy	Repository
SPA	Tiny Shop	The browser renders the interface after loading the JavaScript application	View SPA implementation
SSR	Small Shop	The server renders HTML for each request	View SSR implementation
SSG	Little Shop	Pages are pre-rendered during the build	This repository

The three applications intentionally have closely matched features and visual designs. This keeps the application domain and user interface stable so that the rendering strategy remains the main comparison variable.

The comparison considers flexibility, performance, data fetching, security, learning curve, popularity, and SEO.

View the thesis poster

How the SSG version works

Next.js uses getStaticProps() to prepare page data during the build and getStaticPaths() to generate routes for data-driven pages. The browser receives pre-rendered HTML, while cart, authentication, checkout, order, review, and administration workflows continue through client-side interactions and API routes.

flowchart LR
    Data[(MongoDB)] -->|Build-time query| Build[Next.js build]
    Build --> Pages[Pre-rendered pages]
    Pages --> User[Browser]
    User -->|Dynamic request| API[Next.js API routes]
    API --> Data

Loading

Screenshots

Product catalogue

Checkout and PayPal integration

Features

• Build-time generation for selected catalogue and data-driven pages
• Product catalogue and product detail pages
• Search, category filtering, rating filtering, sorting, and pagination
• Shopping cart with stock validation
• User registration, sign-in, profile management, and order history
• Shipping, payment, order review, and checkout workflow
• PayPal payment integration
• Product ratings and customer reviews
• JWT-based authentication
• Admin dashboard with sales summary charts
• Product, order, and user administration
• API routes for dynamic and account-specific operations
• MongoDB persistence through Mongoose models

Technology stack

Area	Technologies
Framework	Next.js 11, React 17
Rendering	Static-Site Generation with getStaticProps() and getStaticPaths()
Interface	Material UI, Emotion
Backend	Next.js API routes, next-connect
Data	MongoDB, Mongoose
Authentication	JSON Web Token, bcrypt.js, cookies
Payments	PayPal React SDK
Forms and feedback	React Hook Form, Notistack
Admin analytics	Chart.js

Local setup

Prerequisites

• Node.js and npm
• Local MongoDB or a MongoDB Atlas connection
• Optional PayPal sandbox client ID

1. Clone the repository

git clone https://github.com/fhjoy/ssg.git
cd ssg

2. Configure environment variables

Create .env.local in the project root:

MONGODB_URI=mongodb://localhost/little-shop
JWT_SECRET=replace_with_a_private_secret
PAYPAL_CLIENT_ID=your_paypal_sandbox_client_id

3. Install and start the application

npm install
npm run dev

Open http://localhost:3000.

4. Seed sample data

Open http://localhost:3000/api/seed once before exploring the application.

Development accounts:

Role	Email	Password
Administrator	admin@example.com	123456
Customer	user@example.com	123456

These credentials are for local demonstration only.

Generate and run the production build

After the database contains the required build-time data:

npm run build
npm start

SSG characteristics explored

Strengths

• HTML is prepared before a visitor requests the page
• Generated pages can be cached and distributed efficiently
• Public content is available without waiting for client-side rendering
• Pre-rendered content supports SEO and link previews

Trade-offs

• Content can become outdated until the application is rebuilt
• Build time grows as the number of generated routes increases
• Frequently changing or user-specific data still needs APIs and client-side logic
• Dynamic paths require an explicit generation and fallback strategy

Project status

This repository is an academic prototype created in 2022 for a controlled architecture comparison. It is preserved as evidence of the implementation and research process, not as a production storefront. Dependencies should be reviewed and upgraded before production use.