A fully interactive customer-facing marketplace app built with React, inspired by Instacart and Uber Eats. Designed for the Ghanaian market with GH₵ currency support.
Edwaso is a modern grocery and lifestyle delivery platform that connects customers with local shops — including grocery stores, pharmacies, beauty studios, hair & wig boutiques, and convenience stores. Customers can browse products, place orders, track deliveries in real time, and manage their profiles — all from one elegant mobile-first interface.
- Location-aware delivery address selector
- Search bar with quick access to product & store search
- Hero promotional banner with promo code support
- Category filter pills (Produce, Dairy, Beauty, Hair/Wigs, Snacks, and more)
- Nearby store cards with ratings, delivery time & fees
- Featured product grid with add-to-cart functionality
- Skeleton loading states for smooth UX
- Store banner with branding, rating, delivery info
- In-store product search
- Category tab filtering
- Product grid with stock status indicators
- Live cart bar that appears when items are added
- Full product page with description, unit info & rating
- Sale badge and savings display
- Favorite / save to wishlist toggle
- Related products carousel
- Sticky Add to Cart / quantity control bar
- Real-time product and store search
- Recent searches history
- Browse by category grid
- Zero-results empty state
- Item quantity management (add / remove / delete)
- Free delivery progress indicator
- Promo code input — try EDWASO25 for 15% off
- Full order summary (subtotal, delivery, service fee, tax, discount)
- Persistent floating cart button across all screens
- Saved delivery address with change option
- Delivery type selector: Standard, Express ⚡, Scheduled 🗓️
- Payment methods: Card, Apple Pay, Google Pay, Edwaso Wallet, Cash
- Driver tip selector
- Full order summary before placing
- Animated order placement with loading state
- Live ETA countdown display
- Animated map with driver position
- Driver profile card with call & chat buttons
- Step-by-step order progress tracker (auto-advances every 3 seconds)
- Delivery confirmation screen with star rating prompt
- Active live order with tracking shortcut
- Full past order history with reorder option
- Save products with heart icon from any screen
- Dedicated favorites screen with full cart support
- User info with order count, rewards & saved items stats
- Saved delivery addresses (Home, Work)
- Linked payment methods
- Push notification & location preference toggles
- Sign out
| Store | Category | Delivery |
|---|---|---|
| 🛒 FreshMart Grocery | Grocery | Free |
| 💊 QuickPharm+ | Pharmacy | GH₵1.99 |
| 💄 Glow Beauty Studio | Beauty | GH₵2.49 |
| 👑 Luxe Hair & Wigs | Hair/Wigs | GH₵3.99 |
| 🏪 CornerMart 24/7 | Convenience | GH₵0.99 |
| 📱 TechHub Electronics | Electronics | GH₵2.49 |
20 products across categories: Produce, Dairy, Bakery, Beauty, Hair/Wigs, Personal Care, Snacks & Drinks.
/ Home
├── /search — Search products & stores
├── /store — Store detail & product browse
│ └── /product — Product detail page
├── /cart — Shopping cart
│ └── /checkout — Checkout & payment
│ └── /tracking — Live order tracking
├── /orders — Order history
├── /favorites — Saved products
└── /profile — User account & settings
| Layer | Technology |
|---|---|
| Framework | React 18 (JSX) |
| Styling | Inline CSS + CSS-in-JS (no external CSS framework) |
| Charts | Recharts |
| Fonts | Syne (headings) + DM Sans (body) via Google Fonts |
| Icons | Emoji-based (no icon library dependency) |
| State | React useState / useEffect hooks |
| Routing | Custom screen-based navigation (no React Router) |
| Currency | Ghana Cedi (GH₵) |
- Node.js 16+
- npm or yarn
# 1. Create a new React app
npx create-react-app edwaso
cd edwaso
# 2. Install dependencies
npm install recharts
# 3. Replace src/App.js with the edwaso-app.jsx file
cp edwaso-app.jsx src/App.jsx
# 4. Start the development server
npm startThe app will open at http://localhost:3000
- Go to codesandbox.io
- Click Create Sandbox → React
- Paste the contents of
edwaso-app.jsxintoApp.js - Add
rechartsin the Dependencies panel - Share the sandbox URL with anyone
# Install Vercel CLI
npm install -g vercel
# Deploy
vercel --prodedwaso/
├── src/
│ └── App.jsx # Entire app (single-file architecture)
├── public/
│ └── index.html
├── package.json
└── README.md
Note: This is a single-file prototype. For production, components should be split into separate files per screen and feature.
| Token | Value |
|---|---|
| Primary Green | #05A357 |
| Dark Green | #027A40 |
| Light Green | #E8F7EF |
| Orange (accent) | #F97316 |
| Background | #F7F8FA |
| Text Primary | #111827 |
| Text Secondary | #6B7280 |
| Border | #E5E7EB |
| Border Radius | 10px / 16px / 22px |
| Heading Font | Syne (800) |
| Body Font | DM Sans (400–700) |
| Code | Discount |
|---|---|
EDWASO25 |
15% off (up to GH₵10) |
- Backend API (Node.js + NestJS)
- PostgreSQL database with full schema
- Real authentication (JWT + Google/Apple OAuth)
- Stripe / Paystack payment integration
- Google Maps live driver tracking
- Firebase push notifications
- Vendor dashboard
- Driver app
- Admin analytics panel
- Multi-language support (English, Twi, Ga)
- Dark mode
The Edwaso logo features a woman carrying a basket of fresh fruits, set against the colors of the Ghana flag — representing the spirit of local African marketplace culture.
This project is a prototype built for demonstration purposes.
© 2026 Edwaso. All rights reserved.
Built with ❤️ for the Ghanaian market