The Problem
Customers interested in purchasing laptops from Emmy Investments had to visit the physical store in Lagos (Apapa) before they could browse available products or make a purchase. This limited the business to walk-in customers and made it difficult for people outside Lagos to shop.
The Solution
Designed and developed a complete e-commerce platform that lets customers browse the laptop catalog, view detailed specifications, create accounts, authenticate, and place orders online securely using Paystack, with delivery to their door (if the user paid for a dispatch), removing the need to travel to shop at all. Administrators can manage inventory, products, and customer data from a centralized, secure dashboard.
Overview
Project Overview
A full-stack e-commerce platform built with Next.js and FastAPI that streamlines laptop discovery, inventory management, customer authentication, and online purchasing while providing administrators with powerful management tools.
System Design
System Architecture
Frontend
Backend
Database
Deployment
Security
Authentication Flow
User registers an account
Password is securely hashed using bcrypt
User logs in with email and password
FastAPI validates credentials
JWT access token is generated
Frontend stores authentication token
Protected API requests include the JWT token
Backend validates token before granting access
Request Lifecycle
API Request Flow
User opens the website
Frontend requests laptop catalog from FastAPI
Backend retrieves products from PostgreSQL
Laptop data is returned as JSON
User views laptop details
Authenticated users place an order
Backend validates request and stores order
Frontend receives success response and updates the UI
Data Layer
Database Design
Users
- id
- full_name
- phone_number
- password_hash
- address
- created_at
Administrators
- id
- full_name
- password_hash
- role
- created_at
Laptops
- id
- name
- brand
- description
- price
- stock_quantity
- image_url
- created_at
Orders
- id
- user_id
- total_price
- status
- payment_status
- delivery_status
- created_at
OrderItems
- id
- order_id
- laptop_id
- quantity
- unit_price
Deliveries
- id
- order_id
- delivery_address
- delivery_status
- tracking_number
- delivered_at
Capabilities
Key Features
Laptop Catalog
Browse available laptops with detailed specifications and pricing.
Authentication
Secure user registration and login using JWT authentication.
Search & Filtering
Quickly locate laptops by brand and category.
Product Details
Dedicated pages with complete specifications for every laptop.
Admin Dashboard
Manage products, inventory, and customer records from one interface.
Responsive Design
Optimized experience across desktop, tablet, and mobile devices.
Under The Hood
Engineering Challenges
Challenge
Frontend–Backend Integration
Resolution
Designed a clean REST API contract that kept the frontend independent from backend implementation details.
Challenge
Authentication Security
Resolution
Implemented JWT authentication with password hashing to protect user accounts and restricted endpoints.
Challenge
State Synchronization
Resolution
Used Zustand to efficiently synchronize authentication state and product data throughout the application.
Challenge
Scalable Codebase
Resolution
Organized the project into reusable components and modular backend routes to simplify future feature development.
Decision Record
Technical Decisions
Chose
Next.js App Router
Over
React
Why
Selected for improved routing, performance optimization, and better developer experience.
Chose
FastAPI
Why
Chosen because of its high performance, automatic API documentation, and strong typing support.
Chose
PostgreSQL
Over
MySQL
Why
Used for reliable relational data storage with strong consistency.
Chose
Zustand
Why
Preferred over larger state management libraries due to its lightweight API and simplicity.
Chose
Tailwind CSS
Over
styled-components
Why
Enabled rapid UI development while maintaining a consistent design system.
Retrospective
Lessons Learned
- 01
Building a full-stack application requires careful API planning before frontend development begins.
- 02
Separating business logic from presentation improves maintainability.
- 03
Reusable UI components significantly reduce duplicated code.
- 04
JWT authentication is simple but requires proper token validation on every protected endpoint.
- 05
Database structure should be designed early to support future scalability.
- 06
Consistent API response formats make frontend integration much easier.
Visual Tour
Screenshots
Walkthrough
Project Walkthrough
This walkthrough demonstrates the core workflow of the application.
🌍 Live Project
Documentation
Case Study
Read the complete case study documentation below.
Loading document...
By The Numbers
Project Statistics
21
Pages Built
16
REST API Endpoints
100%
Responsive
JWT
Authentication
Full Stack
Architecture
Vercel + Render
Deployment