Categories & Sub-categories
Five top-level categories with their own sub-categories, shown as a themed carousel on the home page and as a sidebar filter in the shop.
Case StudyOffline
CARTOE-Commerce Marketplace
Multi-Vendor Marketplace
Fig. 01
Desktop · Laptop · Tablet · Phone
- 01Role
- Frontend Developer
- + Data modelling
- 02Duration
- Feb 2026
- First release
- 03Team
- 2 People
- Small team
- 04Status
- Offline
- Archived
Project Purpose
Why it exists
Carto is a multi-vendor online marketplace where shoppers browse products from many independent stores in one place. It covers the whole shopping loop — discovering products by category and price, comparing them, reading vendor profiles, filling a cart and reaching checkout — on top of a Supabase (Postgres) backend.
The goal was to build a realistic storefront end to end: relational data with vendors, categories and sub-categories, route-level data loading so pages paint with data already in hand, and a cart that survives a refresh.
Collaborators
The team
Menna Selim
Collaborator
Tools & Technologies
What it's built with
- 01React 19
- 02Vite
- 03Tailwind CSS
- 04Supabase
- 05TanStack Query
- 06React Router
- 07JavaScript
- 08Git
Features
What it does best
04
Core Features
Price & Category Filtering
Filters live in the URL query string, so a filtered shop view can be refreshed, bookmarked or shared and still show the same products.
Search Across Products & Vendors
One search box queries products and stores at the same time and returns a mixed result list that links straight to each page.
Persistent Cart
A Redux Toolkit cart with quantity controls and totals, saved to local storage so it survives a refresh.
More Features
Beyond the essentials
Daily Deals
Time-limited offers with the old price, the new price, how many items are left and a live expiry countdown.
Vendor Profiles
Each store has its own page with rating, customers, on-time shipping rate, address and a grid of the products it sells.
Product Comparison
Add products to a side-by-side table to compare price, rating and details before buying.
Accounts & Orders
Sign-up and login through Supabase Auth, plus a profile area with account details and an order history.
App Screens
Inside the product
Home
Home
Storefront Landing Page
A promo carousel, a category strip with tabs for each top-level category, featured vendors and the popular-products grid — all loaded before the page renders so there is no spinner flash.
- Route loaders
- TanStack Query
- Carousel
Discovery
Discovery
Shop With Filters
Every product in a responsive grid with a category sidebar and a price-range slider. Cards show the vendor, rating, old and new price and an add-to-cart button.
- URL filters
- Price range
- Relational joins
Product
Product
Product Details
Large product image, price with discount, stock, add-to-cart, wishlist and share buttons, then tabs for product info, vendor info and reviews — plus related products from the same category.
- Tabbed details
- Related products
- Reviews
Merchandising
Merchandising
Popular Products
A rating-sorted list of the best products, built from one Supabase query that pulls in each product’s vendor and category in the same request.
- Supabase embeds
- Sorted by rating
- Card grid
Marketplace
Marketplace
Vendor Profile
A storefront inside the marketplace: store logo, rating, customer count, on-time shipping rate, contact details and everything the vendor sells.
- Vendor stats
- Nested route
- Product grid
Checkout
Checkout
Cart & Order Summary
Quantity steppers, per-line totals, remove buttons and an order summary with shipping fee, delivery address check and coupon field. The cart lives in Redux and is mirrored to local storage.
- Redux Toolkit
- Local storage
- Order summary
Problems & How We Solved Them
Hard problems, solved
The problem
Pages flashing empty while data loaded
The solution
Each route has a loader that prefetches its queries into the TanStack Query cache before the page renders. Components then read the same query keys, so the first paint already has data and later visits come straight from the cache.
The problem
Showing products with their vendor and category
The solution
Products, vendors, categories and sub-categories live in separate tables. Instead of several round trips, queries use Supabase’s embedded relations to fetch a product together with its vendor and category in one request, and filters (category, sub-category, price range) are applied server-side.
The problem
Keeping the cart across refreshes
The solution
The cart is a Redux Toolkit slice that is initialised from local storage and written back on change, with reducers for add, remove, increase and decrease so totals stay consistent.
Outcomes
The results, by the numbers
0
Seeded products
0
Vendors
0
Top-level categories
0
Routed pages