OmniStore - An Online E-Commerce Shop
A feature-rich, scalable e-commerce solution built with the Next Js, featuring a complete shopping experience from product browsing to secure checkout with Stripe integration and an advanced admin dashboard.
General Info
- Client
- Personal Project
- Role
- Full-Stack Developer
- Status
- Completed
Front-End
Back-End
Tools
Project Overview
OmniStore is a comprehensive, production-ready e-commerce platform designed to provide a seamless and intuitive shopping experience for users and a powerful management system for administrators. This project was conceived as a full-stack application to demonstrate mastery over the JavaScript ecosystem, with a strong emphasis on performance, security, and scalability.
The goal was to create a robust and scalable online store that manages product listings, inventory, user authentication, and secure payment processing. The front end leverages Next.js to deliver a fast, interactive Single Page Application (SPA) with a seamless user experience.
Zustand is used for streamlined state management, efficiently handling cart functionality, user sessions, and filtering logic. The backend features a secure RESTful API built with Next.js, integrated with MongoDB via Mongoose to manage and persist product, user, and order data.
This project isn't just a simple storefront; it's a complete digital commerce solution designed to be deployed and used in a real-world business context.
Core Problem & Solution
The primary problem OmniStore addresses is the high barrier to entry for small to medium-sized businesses looking to establish a professional online presence. Custom e-commerce solutions can be prohibitively expensive, while off-the-shelf platforms often lack flexibility or charge high transaction fees.
OmniStore provides a powerful, open-source alternative that is both feature-complete and fully customizable. It gives businesses full control over their data, branding, and customer experience.
The solution encompasses:
- A user-facing storefront optimized for conversions
- An admin-facing dashboard that simplifies daily operations
- Full inventory and order lifecycle management
Key Features
🛍️ Dynamic Product Catalog
Products are fetched from the database and displayed in a clean, filterable, and searchable grid. Users can:
- Sort by price, category, and rating
- View detailed product pages
- Browse multiple images
- Read customer reviews
🛒 Advanced Shopping Cart
- Persistent cart functionality
- Add, remove, and update item quantities
- Real-time calculation of:
- Subtotals
- Taxes
- Shipping costs
🔐 Secure User Authentication
- JWT-based authentication system
- Login & registration
- Protected routes
- User profile management:
- Order history
- Shipping addresses
- Credential updates
💳 Integrated Payment Gateway
Secure payment processing implemented using the Stripe API.
- Supports multiple card types
- Secure tokenization via Stripe.js
- Card details never touch the application server
🧑💼 Comprehensive Admin Dashboard
- Full CRUD operations on products
- Inventory management
- Order status updates (Processing, Shipped, Delivered)
- User account management
📱 Responsive & Modern UI
- Fully responsive design
- Built with Tailwind CSS
- Optimized for mobile, tablet, and desktop
- Clean and conversion-focused UI
Technical Architecture & Deep Dive
Backend Architecture
The backend follows a classic client-server model built with:
- Next Js
- Mongoose (MongoDB)
- bcryptjs
- JWT
Key highlights:
- RESTful API structure (
/api/products,/api/users,/api/orders) - Schema validation using Mongoose
- Password encryption using
bcryptjs - JWT-based route protection with custom middleware
- Optimized database queries for scalability
Frontend Architecture
The frontend is a React SPA bootstrapped with Create React App.
Key technologies:
- Next.js – Improved SEO and high performance
- Framer Motion – Smooth and modern animations
- Zustand – Global state management
- Axios – HTTP client for API requests
- Stripe.js & React Stripe Elements – Secure payment processing
State slices include:
- Products
- Cart
- Authentication
- Orders
This architecture keeps components clean and focused on presentation logic.
In-App Preview
Admin Dashboard
Admin Dashboard
Dashboard Product List
Dashboard Order List
Dashboard Order Invoice
Development Process & Challenges
The development process followed agile principles:
- Designed and tested backend API endpoints using Postman
- Built frontend features incrementally
- Integrated Stripe securely
- Optimized database queries
Major Challenges
- Managing complex global state (cart + authentication)
- Handling Stripe transaction flows (success, failure, 3D secure)
- Ensuring secure authentication across protected routes
- Maintaining performance with growing datasets
Key Learnings
- Advanced state management with Zustand
- Secure full-stack authentication workflows
- Third-party API integration (Stripe)
- Designing scalable MongoDB schemas
- Writing maintainable and modular backend APIs
Challenges
The main challenge was managing the complex application state, especially for the shopping cart and user sessions across multiple components. Integrating the Stripe payment gateway securely and handling all possible transaction outcomes was another significant hurdle that required meticulous server-side and client-side logic.
What I Learned
This project was a deep dive into advanced state management with Zustand and Next Auth. I gained invaluable experience in building secure, full-stack applications, implementing third-party APIs like Stripe, and designing a scalable and efficient MongoDB database schema for a real-world application.