🛒 Lazuli Commerce

A production-ready full-stack e-commerce platform built with Next.js, TypeScript, and modern cloud technologies.

Lazuli Commerce simulates a real-world online retail system, supporting secure authentication, inventory-aware purchasing, payment processing, content management, and AI-enhanced user experiences.

The project was designed to demonstrate modern software engineering practices including full-stack development, scalable architecture, state management, third-party integrations, and production deployment workflows.

🌐 Live Demo

https://lazuli-web.vercel.app/

🚀 Engineering Highlights

Full-Stack Architecture

Designed and developed a complete e-commerce platform spanning frontend, backend, authentication, inventory management, payment processing, content administration, and deployment infrastructure.

Secure Payment Processing

Integrated Stripe Checkout with webhook-driven order processing to ensure reliable payment validation and event-based transaction handling.

Inventory Validation System

Implemented stock verification workflows that prevent overselling and ensure product availability is validated before purchase completion.

Authentication & User Management

Built secure authentication and session management using Clerk, including protected routes and personalised user experiences.

CMS-Driven Product Management

Integrated Sanity CMS to enable dynamic management of products and content without requiring code deployments.

AI-Powered Features

Implemented AI-assisted functionality to enhance user interactions and demonstrate integration with modern AI services.

Production Deployment

Deployed on Vercel with automated CI/CD workflows, enabling continuous deployment and rapid iteration.

🛠️ Technology Stack

Frontend

Next.js 15 (App Router)
React
TypeScript
Tailwind CSS
Zustand

Backend & Services

Server Actions
API Routes
Webhooks
Node.js Runtime

Authentication

Clerk

Payments

Stripe Checkout
Stripe Webhooks

Content Management

Sanity CMS

AI & Automation

AI-powered features
Server-side processing

Deployment

Vercel
GitHub

💡 Software Engineering Concepts Demonstrated

Full-Stack Development
Type-Safe Development
State Management
Authentication & Authorization
Payment Processing
Webhook Architecture
Server Actions
CMS Integration
AI Integration
Inventory Management
Component-Based Architecture
Responsive Design
CI/CD Deployment
Production Hosting
Scalable Project Structure

✨ Key Features

Customer Experience

Product catalogue with dynamic product pages
Responsive mobile-first design
Shopping cart functionality
Real-time inventory awareness
Secure checkout workflow
User account management

Commerce Functionality

Product inventory management
Stock validation before purchase
Order processing workflows
Payment confirmation through Stripe webhooks
CMS-driven content and product administration

Developer Features

Modular component architecture
Centralised state management with Zustand
Reusable UI components
Server-side rendering and optimisation
Environment-based configuration
Scalable code organisation

AI-Powered Inventory Insights

Developed an AI-assisted inventory analysis system that provides administrators with stock recommendations, inventory observations, and operational insights based on current product data.

The feature is designed to integrate with external LLM providers and can be enabled through API credentials, demonstrating practical experience integrating AI services into business applications.

🏗️ System Architecture

Lazuli Commerce
│
├── Frontend Layer (Next.js App Router)
│   │
│   ├── Product Catalogue
│   ├── Product Detail Pages
│   ├── Shopping Cart
│   ├── Checkout Experience
│   ├── User Dashboard
│   └── Authentication Flows
│
├── Component Layer
│   │
│   ├── Reusable UI Components
│   ├── Commerce Components
│   ├── Navigation Components
│   └── Shared Layout Components
│
├── State Management Layer
│   │
│   └── Zustand Store
│       ├── Cart State
│       ├── Product State
│       └── User Session State
│
├── Business Logic Layer
│   │
│   ├── Server Actions
│   ├── Inventory Validation
│   ├── Checkout Processing
│   ├── Order Management
│   └── AI-Powered Features
│
├── Authentication Layer
│   │
│   └── Clerk
│       ├── User Registration
│       ├── User Login
│       ├── Session Management
│       └── Route Protection
│
├── Payment Layer
│   │
│   └── Stripe
│       ├── Checkout Sessions
│       ├── Payment Processing
│       └── Webhook Events
│
├── Content Management Layer
│   │
│   └── Sanity CMS
│       ├── Product Data
│       ├── Content Management
│       └── Inventory Information
│
└── Deployment Layer
    │
    ├── GitHub
    ├── Vercel CI/CD
    └── Production Hosting

📂 Repository Structure

lazuli-web/
│
├── app/
│   ├── Routes
│   ├── Product Pages
│   ├── Checkout Flows
│   └── Server Components
│
├── components/
│   ├── Commerce Components
│   ├── Shared UI
│   └── Layout Components
│
├── lib/
│   ├── actions/
│   ├── ai/
│   ├── constants/
│   ├── hooks/
│   ├── store/
│   └── utilities
│
├── sanity/
│   ├── schemaTypes/
│   ├── queries/
│   └── CMS Configuration
│
├── public/
│
└── Configuration Files
    ├── Next.js
    ├── TypeScript
    ├── Tailwind
    ├── Sanity
    └── Deployment Config

🧠 Technical Challenges Solved

Payment Reliability

Implemented webhook-based payment verification to ensure orders are processed only after successful payment confirmation.

State Management

Designed a scalable cart architecture using Zustand to manage application state across multiple user flows.

Third-Party Service Integration

Integrated and coordinated multiple external services including Clerk, Stripe, Sanity CMS, and AI functionality within a unified application architecture.

Inventory Consistency

Implemented stock validation workflows to ensure accurate inventory management and prevent overselling.

Production Deployment

Configured deployment pipelines through Vercel to support automated releases and continuous delivery.

🚀 Running Locally

Clone the repository:

git clone https://github.com/harrywardy-cmd/lazuli-web.git

cd lazuli-web

Install dependencies:

npm install

Start the development server:

npm run dev

Open:

http://localhost:3000

🔐 Environment Variables

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

SANITY_PROJECT_ID=
SANITY_DATASET=

🎯 Why I Built This Project

Many portfolio projects focus on isolated technical concepts.

Lazuli Commerce was built to demonstrate how modern production systems combine frontend engineering, backend services, authentication, payment infrastructure, content management, AI functionality, deployment automation, and third-party integrations into a cohesive software product.

The project simulates the type of architecture, workflows, and engineering decisions commonly encountered in commercial software development environments.

🔮 Future Improvements

Order history dashboard
Product reviews and ratings
Wishlist functionality
Admin analytics dashboard
Multi-vendor marketplace support
Advanced AI shopping assistant
Automated inventory notifications
End-to-end testing suite

👨‍💻 Author

Harry Ward

Portfolio: https://harry-ward-portfolio.vercel.app
GitHub: https://github.com/harrywardy-cmd
LinkedIn: https://www.linkedin.com/in/harry-ward-b2b9b4319

⭐ If you found this project interesting, feel free to star the repository.

Name		Name	Last commit message	Last commit date
Latest commit History 45 Commits
.cursor		.cursor
app		app
components		components
lib		lib
public		public
sanity		sanity
.gitignore		.gitignore
README.md		README.md
biome.json		biome.json
components.json		components.json
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
postcss.config.mjs		postcss.config.mjs
proxy.ts		proxy.ts
sample-data.ndjson		sample-data.ndjson
sanity.cli.ts		sanity.cli.ts
sanity.config.ts		sanity.config.ts
sanity.types.ts		sanity.types.ts
schema.json		schema.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🛒 Lazuli Commerce

🌐 Live Demo

🚀 Engineering Highlights

Full-Stack Architecture

Secure Payment Processing

Inventory Validation System

Authentication & User Management

CMS-Driven Product Management

AI-Powered Features

Production Deployment

🛠️ Technology Stack

Frontend

Backend & Services

Authentication

Payments

Content Management

AI & Automation

Deployment

💡 Software Engineering Concepts Demonstrated

✨ Key Features

Customer Experience

Commerce Functionality

Developer Features

AI-Powered Inventory Insights

🏗️ System Architecture

📂 Repository Structure

🧠 Technical Challenges Solved

Payment Reliability

State Management

Third-Party Service Integration

Inventory Consistency

Production Deployment

🚀 Running Locally

🔐 Environment Variables

🎯 Why I Built This Project

🔮 Future Improvements

👨‍💻 Author

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages