A modern, full-stack e-commerce platform built for the Cameroon market — featuring a responsive React frontend and a Django REST Framework backend. Browse products, manage cart & wishlist, checkout with mobile money (demo mode), track orders, and receive email confirmations.
| Live demo | nextshop-ui.onrender.com |
| API | nexshop-shur.onrender.com/api |
| Repository | github.com/ClaraDEV-Fullstack/NexShop |
⚠️ Note: Free Render instances sleep after ~15 min idle. The UI loads from a static CDN; the API may take up to ~60s to wake on first visit.
- ✨ Features
- 🛠️ Tech Stack
- 📸 Screenshots
- 📁 Project Structure
- 🚀 Installation
- 🌐 Deploy on Render
- 📚 API Documentation
- 👨💻 Author
- Product catalog with categories, filters, sorting, and pagination
- Smart search and product detail pages with image galleries
- Related products, featured sections, and bestseller collections
- FCFA pricing tailored for the Cameroon market
- JWT login / register with Google OAuth 2.0
- User profile and settings
- Protected routes for checkout and dashboard pages
- Personal dashboard: orders, wishlist, notifications, settings
- Persistent shopping cart (Redux Toolkit)
- Multi-step checkout with shipping details
- Order history, order detail, and cancellation
- Wishlist (save for later)
- Orange Money and MTN Mobile Money checkout UI
- Demo mode (
PAYMENT_MODE=mock) for portfolio — no real charges - Production-ready CinetPay integration for live payments
- Product reviews and star ratings
- In-app notifications dashboard
- Order & payment confirmation emails via Brevo SMTP
- Toast alerts and animated payment success feedback
- Dockerized backend with Gunicorn
- Static React frontend on Render CDN (Vite build)
- Product images served from Supabase Storage
- Auto-seed catalog on empty production database
- Open Graph meta tags for rich link previews (WhatsApp, LinkedIn)
| Technology | Purpose |
|---|---|
| React 18 | UI library |
| Vite 6 | Build tool & dev server |
| Redux Toolkit | Auth, cart & global state |
| React Router v6 | Routing & protected routes |
| Tailwind CSS | Responsive UI & dark mode |
| Framer Motion | Animations |
| Axios | API client |
| @react-oauth/google | Google Sign-In |
| React Hot Toast | Notifications |
| Technology | Purpose |
|---|---|
| Django 6 | Web framework |
| Django REST Framework | REST API |
| SimpleJWT | Token authentication |
| PostgreSQL | Database |
| django-filter | Product filtering |
| drf-spectacular | OpenAPI / Swagger docs |
| Gunicorn + WhiteNoise | Production server |
| Technology | Purpose |
|---|---|
| Docker | Backend containerization |
| Render | Hosting (API + static frontend) |
| Supabase Storage | Product media CDN |
| Brevo (SMTP) | Transactional emails |
| CinetPay | Mobile money payments (live mode) |
| Google OAuth 2.0 | Social login |
NexShop/
├── backend/ # Django REST API
│ ├── accounts/ # Auth, profiles, Google OAuth
│ ├── products/ # Catalog, categories, images
│ ├── cart/ # Server-side cart logic
│ ├── orders/ # Order processing & emails
│ ├── payments/ # Mobile money / CinetPay
│ ├── reviews/ # Ratings & feedback
│ ├── wishlist/ # Saved products
│ ├── alerts/ # User notifications
│ └── nexshop/ # Settings, URLs, storage
├── frontend/ # React SPA (Vite)
│ ├── public/ # Static assets, og-image, _redirects
│ └── src/
│ ├── api/ # Axios client & endpoints
│ ├── store/ # Redux slices (auth, cart)
│ ├── pages/ # Route pages
│ └── components/ # Reusable UI
├── Dockerfile # Render backend image
├── docker-compose.yml # Local full-stack dev
├── render.yaml # Render Blueprint
└── nginx/ # Reverse proxy (local/prod)
- Python 3.11+
- Node.js 20+
- PostgreSQL (or Docker)
git clone https://github.com/ClaraDEV-Fullstack/NexShop.git
cd NexShopcd backend
python -m venv venv
source venv/bin/activate # Windows: .\venv\Scripts\activate
pip install -r requirements.txt
cp ../.env.example ../.env # Edit with your values
python manage.py migrate
python manage.py runserverAPI runs at http://localhost:8000
cd frontend
npm install
cp .env.example .env.local # Set VITE_API_URL and VITE_GOOGLE_CLIENT_ID
npm run devApp runs at http://localhost:5173
docker-compose up --build- Push to GitHub, then in Render → New → Blueprint → select this repo (
render.yamlis included). - Fill secret env vars after the blueprint is applied (see
.env.render.examplefor the full list).
| Service | Variable | Example |
|---|---|---|
| nexshop-api (backend) | ALLOWED_HOSTS |
nexshop-shur.onrender.com |
BACKEND_URL |
https://nexshop-shur.onrender.com |
|
FRONTEND_URL |
https://nextshop-ui.onrender.com |
|
CORS_ALLOWED_ORIGINS |
https://nextshop-ui.onrender.com |
|
CSRF_TRUSTED_ORIGINS |
https://nextshop-ui.onrender.com,https://nexshop-shur.onrender.com |
|
PAYMENT_MODE |
mock |
|
GOOGLE_OAUTH_CLIENT_ID |
(Google Cloud Console) | |
GOOGLE_OAUTH_CLIENT_SECRET |
(Google Cloud Console) | |
| nextshop-ui (frontend) | VITE_API_URL |
https://nexshop-shur.onrender.com/api |
VITE_GOOGLE_CLIENT_ID |
(same Client ID as backend) |
- Frontend is deployed as a Static Site (CDN-cached Vite build).
- Optional: ping
https://nexshop-shur.onrender.com/api/health/with UptimeRobot every 5 minutes to reduce cold starts.
Render free Web Services have no Shell. Product images are served from Supabase CDN.
Add to the backend environment:
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_KEY=<service_role key>
SUPABASE_BUCKET=media
AUTO_SEED_DB=trueRedeploy — the backend auto-seeds products and uploads images in the background (~5–10 min). Watch logs for AUTO_SEED_DB: seeding finished.
In Google Cloud Console, add authorized origins:
https://nextshop-ui.onrender.com
Interactive Swagger UI (when backend is running):
| URL | |
|---|---|
| Swagger UI | http://localhost:8000/api/docs/ |
| OpenAPI schema | http://localhost:8000/api/schema/ |
| Health check | https://nexshop-shur.onrender.com/api/health/ |
Clara Beri — ClaraDEV-Fullstack
- GitHub: @ClaraDEV-Fullstack
- LinkedIn: Clara Beri
- Portfolio: claradev.vercel.app
Built with ❤️ in Cameroon 🇨🇲