An Airbnb-inspired, production-grade Flutter application for pre-ordering from local cloud kitchens, featuring a custom design system and premium micro-interactions.
Tech Stack
FlutterTechnology
RiverpodTechnology
SupabaseTechnology
FirebaseTechnology
Google MapsTechnology
App Gallery
Project Details
A comprehensive pre-order food delivery platform that acts as a direct bridge between local cloud kitchens and buyers.
Premium Airbnb-Style UI: Designed an immersive browsing experience showcasing curated kitchens with rich image carousels, full-bleed hero headers, and highly polished UI components.
Seamless User Journey: Engineered a frictionless flow encompassing animated onboarding, phone/OTP authentication, location-based serviceability checks, intuitive cart management, and secure checkout.
Robust Order Tracking: Implemented a detailed order management system providing users with visual status timelines, secure OTP-based delivery verification, and comprehensive order history.
Focus on Micro-Interactions: Elevated the user experience with delightful touches like spring-animated sticky cart bars, skeleton loaders for all network requests, animated quantity steppers, and post-payment success confetti.
Technical Overview
Built using a highly modular feature-first approach ensuring strict separation of concerns and an easily scalable codebase.
Centralized Custom Design System: Architected a pixel-perfect, production-ready design system with strict tokens for colors, typography, spacing, shadows, and haptics, strictly eliminating hardcoded UI values.
Advanced State & Routing: Leveraged Riverpod to handle complex global states (like persistent cart data and authentication) without relying on setState, and utilized GoRouter to manage a persistent bottom navigation shell with nested routes.
Custom Animations & Fluid Transitions: Built highly optimized custom animations including SlideUpRoute/FadeUpRoute page transitions, error-state shake feedback on OTP inputs, scroll-triggered app bars, and dynamic size expansions.
API-Ready Mock Data Layer: Designed an advanced mock data repository layer that perfectly mirrors exact production API response shapes and simulates network latency, ensuring zero UI rewrites are required when swapping to the live backend.
Responsive & Accessible: Ensured flawless rendering across various screen sizes (375px to 428px widths), implemented full Dark Mode support using AppTheme.dark, and adhered to accessibility standards with 44x44px minimum touch targets.