The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Project Overview
Developed Foodi, a high-performance, enterprise-grade full-stack food delivery ecosystem designed to deliver a seamless, modern dining experience from kitchen to doorstep. Unlike typical static frontend prototypes, this is a complete production-ready MERN (MongoDB, Express, React, Node.js) application. The platform features a highly responsive, mobile-first customer storefront, a secure transactional pipeline integrated with Stripe, dual-layer authentication (Firebase + custom JWT), and a dedicated, role-based administrative dashboard for real-time order lifecycle governance and business analytics.
Key Features & Technical Implementation
Dual-Layer Authentication: Integrated Firebase Authentication for quick identity verification, paired with a custom server-side JWT (JSON Web Token) exchange mechanism to secure all private API endpoints.
Dynamic Catalog & State Management: Utilized React 18 and TanStack Query (React Query) for smart client-state fetching, background synchronization, and automatic caching of menu items and cart states, reducing database load.
Secure Payment Pipeline: Integrated Stripe Checkout API using the Stripe Payment Intents model, ensuring safe, PCI-compliant card processing with automatic backend transaction validation and database persistence.
Real-Time Order Tracking: Implemented a state-driven interactive timeline tracking the entire lifecycle of an order (Pending → Cooking → On the Way → Delivered) with dynamic UI updates.
Role-Based Admin Control Panel: Built a comprehensive dashboard featuring secure route guards, custom menu CRUD operations (with remote image hosting via ImgBB), real-time booking status managers, and user role administration.
Technologies Used
Frontend Stack: React 18 (Vite), React Router v6, TanStack Query (React Query), Axios
Backend & Database: Node.js, Express.js, MongoDB Atlas, Mongoose ODM
Authentication & Security: Firebase Auth, Custom JWT Middleware
Payment Integration: Stripe API & SDK
Styling & UI: Tailwind CSS, DaisyUI, React-Slick, SweetAlert2, React Toastify
Deployment & Hosting: Vercel (Monorepo configuration with /api/* rewrites)
Outcome
Delivered a secure, pixel-perfect, and fully functional MERN application featuring optimized rendering times and immediate cart state feedback. The deployment of a unified monorepo on Vercel guarantees clean routing and high scalability, resulting in a premium digital storefront that is fully ready to handle real-world commercial operations.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Lidar Drone Scanning, 3D Scroll Website
Top-notch design.
🏢 The Business & The "Greasy Hands" Dilemma:
We built DockFlow (Biscayne Marine OS) for Elena "Rico" Rossi, a solo mobile boat engine mechanic operating "Biscayne Mobile Marine" in Miami, Florida.
Elena drives a mobile workshop van to marinas and canal slips to repair high-performance boat engines (Yamaha, Mercury). But she faced a brutal daily dilemma:
The Greasy Hands Barrier: When working, both of her hands are covered in black engine grease inside noisy boat engine compartments. She physically cannot pick up her phone to answer customer calls.
The Traffic & No-Show Trap: Over 35% of boat owners would cancel after Elena had already driven 45 minutes across Miami bridge traffic in her work van.
Logistics Chaos: Between texting back and forth for marina security gate PINs, boat parking slip numbers, and checking if ocean tides were too shallow to run boat engines, Elena was losing 14+ hours every week just playing phone tag.
⚡ What We Built in Lovable:
We completely rebuilt the moment an inbound customer inquiry turns into a confirmed, paid booking without Elena ever touching her phone:
Marketing Landing Page (/): An executive business homepage with an interactive 3-slide hero carousel explaining the service, problems eliminated, and dockside repair guarantees.
Customer Fast-Track Booking (/book):
Real Microphone Voice Intake: Boaters stranded at a dock don't type long forms. They speak into their phone or record their engine's warning sound using HTML5 microphone capture, and the system extracts their boat specs and symptoms automatically.
Water Depth Safety Check: Verifies Biscayne Bay ocean tide levels (+1.8 ft flood tide) to ensure the water is deep enough to safely lower and test the boat engine without hitting mud.
Smart Neighborhood Routing: Groups appointments by marina cluster (Coconut Grove, Miami Beach) so Elena doesn't crisscross the city.
$175 Deposit Lock: Collects an upfront card deposit to eliminate no-shows.
Self-Service Reschedule & Cancel: Customers can reschedule or cancel in one tap without calling Elena.
Elena's Mission Control (/owner):
Sequential 1-2-3-4 Biscayne Bay route map.
Van Pre-Flight Inventory Matcher: Automatically checks Elena's van shelves (Bin 3B) for replacement cooling parts to guarantee 100% first-time fixes before she drives out.
One-tap status updates ("On the way", "Arrived", "Job Done") that send automated SMS updates to the customer.
Automatically archives completed repairs into a dedicated History & Invoices log.
Realtime Auto-Healing Waitlist Waterfall:
When a boater cancels last minute, a Supabase Realtime broadcast triggers an instant 5-minute countdown alert to the next standby boater in line (Capt. Marcus Vance), auto-filling the vacant spot with zero manual texting!
Miami Localization & Enterprise Polish:
Fully bilingual in English and Spanish (over 60% of South Florida boaters speak Spanish).
Light and Dark mode themes.
Powered by a scalable Supabase database backend.
📈 Measurable ROI:
⏱️ 14 Hours Saved Weekly in manual scheduling and phone tag.
🛡️ Zero No-Shows thanks to upfront card deposits.
🚗 2+ Hours Saved Daily in Miami bridge traffic via neighborhood clustering.
🔧 No Wasted Parts Runs with van inventory pre-flight matching.
Live App: https://dockflow-biscayne.lovable.app/
lovablechallengeFull Stack DevelopmentLow-Code/No-Code DevelopmentWeb DevelopmentLovableNext.jsSupabase
Amazing! Love the backstory and a female boat mechanic with greasy hands. Well done.
Same week, same 42 messages, played twice through the app's own scheduling engine.
Maya on her own: 13 customers lost, 9h 33m on her phone.
Maya with Snout: 0 lost, 1 minute, 9 more dogs.
You can run it yourself and play with the numbers: snout-booking.lovable.app/replay
Maya is made up, but her week isn't. She runs Suds & Snouts, one van, Austin. Her hands are wet all day, so she texts back late and people book someone else. She can't just put a calendar online either, because when she can come depends on where you live, how big your dog is, and the heat (no big dogs between 1 and 4).
So I built the part that answers for her.
Send it a messy text like "hiii can u do my doodle biscuit thurs after 3??". It works out the dog, the street and how long the groom takes, then tells you straight that Thursday after 3 won't work for a big doodle in that heat. And it gives you three times that do. One tap and you're booked.
On the website you pick a time on a map of the van's route, and slots right next to another stop are $10 cheaper.
Maya never types. She says "block Friday afternoon, van's in the shop" and Snout shows her what it's about to do (move two dogs, text both owners, offer the gap to the waitlist) before it does it. She can also write rules like "max 3 dogs on Tuesdays" and see which bookings they'd break.
Three things to try, no login needed:
Inbox, tap Kayla's message
Owner, say "I'm running 20 minutes late"
Replay, watch the week
Everything is built in Lovable. One scheduling engine runs all of it, including the replay, so the numbers at the top come from the same code that books the dogs.
Seeing the drop from thirteen lost customers to none in a minute really shows how the scheduling engine can replace endless phone juggling.