eCommerce Platform
Rabrees
A full-stack eCommerce platform built to showcase products, manage carts and orders, and deliver a smooth checkout experience — with an admin-ready structure for catalog and order operations.
Type
Personal / Internal Project
Role
Full-Stack Developer
Timeline
2025 – 2026
Completion
100%
By the numbers
100+
Products supported
10+
Categories ready
Secure
JWT auth flow
Fast
Optimized UI/UX
The Problem
A store that needed speed, simplicity, and scale-readiness
Rabrees was created to solve a common eCommerce gap: many small stores either rely on generic templates or heavy platforms that are hard to customize. The goal was to build a clean, performant shopping experience with a backend that can scale into full catalog + order operations.
Slow and cluttered shopping experience
Many storefronts overwhelm users with poor navigation and heavy pages, leading to high drop-offs before checkout.
No structured product & inventory foundation
Without a proper data model, managing variants, categories, and pricing becomes messy and error-prone.
Checkout friction
Complex checkout steps and weak validation cause abandoned carts and failed orders.
Limited admin scalability
A store might start small, but without an admin-ready structure (products, orders, users), growth becomes painful.
The Solution
A modern eCommerce platform built like a product
Rabrees is structured around clear user flows: discover → filter → product detail → cart → checkout → order tracking. On the backend, the platform is designed with a clean API and extensible models to support admin features, promotions, inventory, and payments.
Product Catalog
Browse products with categories, pricing, images, and detail pages designed for quick decision-making.
Search, Filters & Sorting
Fast filtering by category and price, plus sorting to help users find what they want quickly.
Cart & Wishlist
Persistent cart experience with quantity updates, remove actions, and wishlist support for returning shoppers.
Secure Auth & Profiles
JWT-based authentication with user profiles, address management, and order history.
Checkout & Payments
Validated checkout flow with Stripe integration (card payments) and clear order confirmation states.
Admin-Ready Foundation
Clean models and endpoints for products, users, and orders — structured to evolve into a full admin dashboard.
Technology Stack
Built with the right tools
JavaScriptLanguage
ReactFrontend
Node.jsBackend
Express.jsBackend
MongoDBDatabase
Redux ToolkitState
Tailwind CSSStylingArchitecture
Full-stack (Client + API)
Rabrees/ ├── client/ # React storefront ├── server/ # Express API └── shared/ # (optional) shared constants/types
Development Journey
How it was built
Phase 01
Defining the shopping flow
I started by mapping the essential eCommerce journey: product discovery, product detail decision-making, cart edits, and frictionless checkout. The UI was built to stay clean, fast, and mobile-friendly.
Phase 02
Designing backend models & API
I designed core entities like Users, Products, Categories, Cart, and Orders with an API-first mindset. The structure supports future growth: coupons, inventory tracking, refunds, and admin operations.
Phase 03
State management & UI performance
Redux Toolkit was used to handle cart state, auth state, and product listing state. The UI focuses on snappy transitions, sensible loading states, and reusable components.
Phase 04
Payments & reliability
Stripe payment intent flows were integrated with clear success/failure handling. The backend ensures order creation is consistent and tied to payment state to prevent ghost orders.
Phase 05
Polish & scale roadmap
After the core flow worked end-to-end, the focus moved to polish: better filtering UX, image optimization, SEO improvements, and planning admin features like inventory and order fulfillment states.
Engineering Challenges
Hard problems, real solutions
Keeping cart state consistent across sessions
Problem
A cart should feel reliable even if the user refreshes, logs in/out, or switches devices.
Solution
Implemented cart persistence with a hybrid approach: local persistence for guests and user-linked cart storage post-login (with merge logic).
Preventing invalid checkout states
Problem
Users could reach checkout with incomplete address data, out-of-date totals, or invalid quantities.
Solution
Added server-side recalculation of totals plus strict validation on shipping info and cart items before creating payment intents/orders.
Media handling for product images
Problem
Uploading and serving product images can slow the experience and complicate storage.
Solution
Used Cloudinary for uploads and transformations, enabling optimized image delivery for listing vs. detail views.
Quality & Testing
Core flows verified end-to-end.
Testing focuses on high-impact commerce paths: authentication, cart operations, checkout validation, and order creation. Coverage expands as admin features grow.
| Method | Endpoint | Tests | Passing |
|---|---|---|---|
| POST | /auth/signup | 0 | 0 |
| POST | /auth/signin | 0 | 0 |
| GET | /products | 0 | 0 |
| POST | /cart | 0 | 0 |
| POST | /checkout/create-intent | 0 | 0 |
| POST | /orders | 0 | 0 |
Project Roadmap
What's done, what's next
Phase 1 · Completed
Phase 2 · Completed
Phase 3 · Future