A production-ready restaurant ordering system built with the MERN stack and integrated with Paystack for secure payment processing.
Live Demo: https://gleeful-frangollo-b44b48.netlify.app
Backend API: https://paystack-integration-goz9.onrender.com
Lagos Bites is a fullstack web application that allows users to browse meals, add items to a cart, place orders, and complete payment securely using Paystack.
The system demonstrates:
- Frontend state management and routing
- Backend data validation and business logic enforcement
- Secure server-side payment verification
- Production deployment with CORS configuration
- Environment-based configuration management
This project was built to simulate a real-world restaurant ordering workflow with proper architectural and security considerations.
lagos bites is a small restaurant rely on manual order collection through WhatsApp or phone calls. This leads to:
- Order miscommunication
- Manual payment confirmation
- No centralized tracking
- Poor user experience
Lagos Bites website provides a structured ordering system with secure online payments and server-side verification to eliminate these issues.
- Browse dynamic meal listings from MongoDB
- Add items to cart with persistent local state
- Secure checkout with Paystack payment integration
- Server-side payment verification before marking orders as paid
- JWT-based authentication
- Role-based access control (admin-only routes)
- View all orders in real time
- Filter orders by status (paid, pending, failed)
- Search by customer, phone, reference, or order ID
- Revenue aggregation from paid orders
- Protected metrics endpoint
The system includes a secure admin authentication layer:
- Passwords are hashed using bcrypt
- JWT tokens issued on successful login
- Token-based route protection middleware
- Role-based access control for admin endpoints
- Unauthorized access returns structured error responses
Admin routes:
- GET /api/admin/orders
- GET /api/admin/metrics
Meal prices are fetched directly from MongoDB during order creation. The backend does not trust client-submitted prices.
Even after successful Paystack popup payment, the transaction is verified server-side before marking the order as paid.
This prevents:
- Fake payment confirmations
- Client-side manipulation
- Reference tampering
All secrets and URLs are managed using environment variables. No API keys are exposed in version control.
- Backend deployed on Render
- Frontend deployed on Netlify
- CORS dynamically configured
- Preflight requests handled correctly
- React (Vite)
- React Router
- Fetch API
- LocalStorage for cart persistence
- Node.js
- Express
- MongoDB Atlas
- Mongoose
- Zod for request validation
- Paystack API
- Netlify (Frontend)
- Render (Backend)
/client → React frontend (Vite)
/server → Express backend API
cd server
npm install
npm run dev
cd client
npm install
npm run dev
PORT=5000
MONGO_URI=
PAYSTACK_SECRET_KEY=
CLIENT_ORIGIN=
VITE_API_BASE_URL=
VITE_PAYSTACK_PUBLIC_KEY=
- Order status updates (preparing, delivered)
- Sales visualization charts
- Refund handling workflow
- Staff role differentiation
- Inventory management integration
- Webhook reliability improvements
- update the interface for admin dashboard, and login
This project demonstrates fullstack engineering principles including API design, validation, security, third-party integrations, and production deployment.