How I Built MyMealMind — A Full Recipe Platform in Just Weeks with Bolt

#devchallenge #wlhchallenge #bolt #ai

WLH Challenge: Building with Bolt Submission

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

What I Built: MyMealMind

MyMealMind is a full-stack web platform where users can:

Save and organize their recipes (privately or publicly)
Explore the most loved meals from the community
Create their own digital cookbook
Upgrade to a Pro plan to unlock unlimited publishing, chef profile, and more

Live Site: https://mymealmind.online

Devpost: https://devpost.com/software/my-meal-mind-online

I built this solo to solve a real-life need — I was tired of losing recipes in screenshots, tabs, and notes. I wanted something beautiful, scalable, and practical — so I built it.

Tech Stack

Frontend: React, TypeScript, Tailwind CSS
Database & Auth: Supabase (PostgreSQL, RLS, Storage)
Payments: RevenueCat + Stripe
Hosting: Netlify (linked from Bolt)
Automation: Supabase Edge Functions
Platform: Bolt.new

Building with Bolt

Bolt was the engine behind this whole project. I was able to:

Develop quickly with built-in Supabase + Netlify + GitHub setup
- Bolt instantly scaffolded a full-stack project with built-in Supabase and database structure connected
- Netlify deployment was wired automatically, making it easy to preview new commits live
- GitHub repo tracking every commit with clean Git workflows for branching and pushing updates
Instantly preview changes with each commit
- Every change pushed to Git auto-deployed and previewed on Netlify-linked environments
- Seamless branch-based deployments with live URLs
Use Bolt to help with tricky logic and prompts
- Wrote helper functions, Supabase RLS policies, React form validation, conditional rendering
- Drafted UI logic for features like "like system", "favorites filter", and gated access
Keep secrets safe with easy .env handling
- Environment variables managed safely in Bolt, with different keys for test and production
- Clear separation between public and server-only secrets
- Stripe + RevenueCat keys handled cleanly without hardcoding
Project Structure Overview
- .bolt/ — Bolt-specific project data/config used for deployment and project scaffolding
- public/ — Static assets (images, favicon, Open Graph preview images)
- supabase/ — Supabase schema, RLS policies, and Edge Functions
- src/ — Main application codebase:
- components/ — Shared React components (Header, Footer, Sliders)
- context/ — Global providers for likes, auth state, pro status
- hooks/ — Custom reusable hooks (e.g. useProStatus, useAuth)
- pages/ — Main route files for login, register, community, dashboard
- types/ — TypeScript declarations for recipes, users, and plans
- utils/ — Integrations like RevenueCat, Supabase auth, Stripe, email
- App.tsx — Main app layout and route wrapper
- main.tsx — Root React DOM mount
- vite-env.d.ts — Type declarations for Vite environment
- index.html — Main HTML entry (Vite)
- tailwind.config.js — TailwindCSS design system
- postcss.config.js — PostCSS setup for Tailwind
- vite.config.ts — Vite bundler configuration
- tsconfig.*.json — TypeScript base and project configs
- package.json — Dependencies and script definitions
- .env.example — Environment variable template file