overview.
A high-performance full-stack food commerce engine featuring real-time order tracking, secure payments, and a centralized admin interface for inventory control and analytics.
technical implementation.
Optimistic State Management
Implemented custom React hooks to synchronise order status across storefront and admin dashboard using optimized polling intervals and cache invalidation.
Secure Stripe Integration
Configured secure API webhooks to handle Stripe events, ensuring atomic database transactions for order creation only upon successful payment capture.
Cloud-Based Asset Management
Built a seamless image upload system utilizing Cloudinary to optimize image quality, compression, and delivery speeds for the restaurant's digital menu.
Dual-Interface Architecture
Separated customer ordering interface and business admin dashboards into isolated, security-hardened modules with role-based JWT verification.
key features.
- JWT-based Auth: Protected routing and secure sessions for both customers and admins
- Real-time Order Tracking: Live order status synchronization from kitchen to doorstep
- Stripe payment integration: Webhook handling for robust, secure order confirmation
- Comprehensive Admin Control: Manage menu items, verify orders, and view key revenue stats
- Persistent Shopping Cart: Cross-session cart recovery powered by local storage integration
- Cloudinary Media Upload: High-speed, optimized menu image hosting and delivery
screenshots.
Interactive and responsive menu layout with category filters and instant cart addition
Centralized admin hub for managing orders, revenue tracking, and menu inventory
Seamless cart checkout workflow with Stripe billing and order confirmation
challenges & solutions.
Challenge: Synchronizing state between customer and admin without WebSockets
Solution: Engineered a smart polling architecture with cache invalidation policies and optimistic UI updates, rendering live changes with low overhead.
Challenge: Preventing inventory mismatch during checkout
Solution: Implemented transactional database locking in MongoDB during payment initialization to temporarily hold stock before payment confirmation.
Challenge: Maintaining high mobile responsiveness for complex admin tables
Solution: Designed custom CSS grids and toggleable rows that collapse tabular data gracefully into card-based layouts on smaller mobile screens.
Challenge: Handling interrupted payment webhooks
Solution: Established a robust webhook retry receiver with transaction logging to recover and complete orders even if the user closes their browser prematurely.