E-commerce Platform
A full-stack e-commerce application with customer & admin roles, secure JWT authentication, product management, cart & checkout, inventory tracking and reporting — built for production-readiness.
Overview
This platform supports a complete merchant and customer workflow: product browsing, category filters, secure authentication, a persistent client cart, checkout with simulated payment confirmation (dev), and an admin area for inventory and order management. The backend issues JWTs and stores refresh tokens safely.
Authentication & Security
Customers and Administrators authenticate via JWTs issued by the ASP.NET Core backend. The frontend uses Next.js API proxy routes to set HttpOnly tokens (access & refresh) — this prevents sensitive tokens from being exposed to JavaScript while enabling secure server-side requests.
Product Catalog & Search
Products are organized by categories with server-side pagination and filters. Product pages include rich details—images, price, stock, and descriptions—and a client add-to-cart component for a fast shopping experience.
Cart & Checkout
Cart state is managed with Zustand and persisted to localStorage. The store hydrates client-side and synchronizes across tabs. Checkout creates orders through internal server routes and (in development) simulates payment confirmation to complete the flow.
Orders, Inventory & Admin
Customers can view order history and details. Admins access a protected dashboard to monitor sales, perform product CRUD (including bulk import), handle inventory adjustments, and print/export reports for a selected date range.
Reporting & Inventory Transactions
A dedicated admin reports section provides sales exports and inventory transaction history. Admins can create adjustments, view stock movement, and export order lists (with recipient, address, items, payment details) for accounting or audits.
Responsive & Accessible
The UI is responsive with a mobile-first layout and a desktop mode. Accessibility considerations include semantic HTML, keyboard-navigable forms, and sensible focus states.
Tech Stack
A modern full-stack architecture emphasizing security, performance, and developer productivity.
Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS
State: Zustand for cart & client state with localStorage persistence
Backend: ASP.NET Core (C#), Entity Framework Core, JWT authentication
Database: PostgreSQL
Auth: JWT (access + refresh), HttpOnly cookies via Next.js API proxy
Deployment: Vercel (frontend), Docker / Azure (backend)
Future Roadmap
Payment Gateway Integration
Integrate Stripe (or another PCI-compliant provider) for production payments, with webhook validation and reconciliation.
Advanced Admin Analytics
Add time-based analytics, cohort reports, sales funnels, and downloadable PDFs/CSV for finance teams.
Internationalization & Multi-Currency
Expand locale support, currency conversion, tax handling, and localized product content for regional markets.
Mobile & PWA
Provide a Progressive Web App for offline browsing & quick reordering; later extend to native mobile apps if needed.
Performance & SEO
Optimize images, add server-side caching for product lists, enhance schema markup for product pages, and implement a CDN for asset delivery.