Full Stack E-Commerce (+ Dashboard)
Full-stack e-commerce with a custom-built UI component library
Overview
Bitex is a full-stack e-commerce platform built to demonstrate modern web development practices. The project features a complete storefront with product browsing, filtering, and a shopping cart, alongside an admin dashboard for managing products, categories, brands, and viewing traffic analytics.
A defining aspect of this project is the commitment to building all UI components from scratch — no external component libraries. Every interactive element, from the homepage image slider (with mouse drag and touch support) to the price range filter, checkboxes, dropdowns, and popups, is custom-built. This approach showcases deep understanding of React component patterns, DOM event handling, and CSS animations.
The admin dashboard provides a full content management system with hierarchical category management, product CRUD with category-specific specifications, brand management, and a traffic reporting system that tracks page visits, device resolutions, and product-level analytics.
Key Features
Storefront
- Interactive homepage slider built from scratch with mouse drag and touch input support
- Advanced product filtering by price range, brand, and availability
- Sorting options by name and price
- Shopping cart powered by Redux Toolkit with localStorage persistence
- Product gallery for showcasing product images
- Dynamically loaded categories from the database
- Custom skeleton loading screens (no external library)
- Fully responsive design with CSS animations
Admin Dashboard
- Credential-based authentication using NextAuth
- Hierarchical category and subcategory management (parent-child relationships)
- Category-specific product specifications system
- Product management with images, pricing, sale prices, and availability status
- Brand management (create, update, delete)
- Traffic reporting: page visits, device resolution tracking, and product-level analytics
Custom UI Components
- Price range slider with dual handles
- Custom checkboxes and dropdown menus
- Modal popups and notification system
- Homepage image carousel with drag and swipe gestures
- Skeleton loading placeholders
- All built from scratch without external UI component libraries
Tech Stack
Frontend
Backend
Database
Services
Architecture
The application follows a Next.js App Router architecture with a clear separation between the public store, admin dashboard, and authentication routes. Server Actions with Zod validation handle all data mutations, keeping the API layer type-safe and co-located with the UI.
Data is stored in MongoDB Atlas and accessed through Prisma ORM, providing a type-safe database layer. Authentication is handled by NextAuth with a credential-based provider and Prisma adapter. Product images are hosted on Cloudinary, and cart state is managed client-side with Redux Toolkit, persisted to localStorage for a seamless shopping experience across sessions.