RandomMenu

• 

  Weekly Recipe Menu

• 

  Own Recipes

Inspiration

The daily question, "What should we cook tonight?" is a universal friction point in every household. Whether it's a family of four or a flatshare of busy students, the mental load of deciding, coordinating, and managing ingredients often leads to repetitive meals or expensive takeout. I was inspired to build RandomMenu to turn this decision fatigue into a collaborative game. I wanted a tool that didn't just store recipes, but actively "served" them to us based on what we already love, while making it effortless to share that inspiration with the people we live with and love.

What it does

RandomMenu is a collaborative ecosystem for meal discovery and automated planning:

• Automated Planning: Generate a full week of meals with a single tap. The system intelligently picks from personal libraries, group collections, or a curated public pool.
• Collaborative Kitchens: Create groups where members can contribute recipes, vote on favorites, and sync their weekly menus in real-time.
• Granular Control: Regenerate individual days or manually select specific cravings for ultimate flexibility.
• Search & Discovery: A weighted search system helps find recipes based on popularity and relevance.

How I built it

As I participated in numerous job interviews last year, I asked many start ups for their tech stack. This inspired me and motivated me to build an app with a very similar tech stack, so I chose a modern, high-performance stack to ensure a "native app" feel on the web:

• Next.js 15+ (App Router): Leveraged for its robust routing and server-assisted features.
• Firebase/Firestore: Used as a real-time reactive database with a denormalized permission system for efficient sharing logic.
• Tailwind CSS 4: For a vibrant, mobile-first design system with rich glassmorphism effects.
• Framer Motion: Powering smooth layout transitions and micro-animations.
• Logic & Math: The randomization logic ensures variety by shuffling the recipe pool: $$P(R_i) = \frac{1}{N}$$ where $N$ is the number of recipes in the filtered pool. For search, I implemented a custom scoring algorithm: $$\text{searchScore} = \text{averageRating} \times \log_{10}(\text{ratingCount} + 1)$$ This ensures that a recipe with many good ratings is prioritized over one with a single perfect rating. Of course, this app was entirely built in Antigravity with Gemini 3 Flash and Gemini 3 Pro.

Challenges I ran into

One of the biggest hurdles was implementing Cross-Collection Security Rules in Firestore. I wanted groups to share recipes, but Firestore rules have limits on lookup depth. I solved this by implementing an "Aggressive Sync" strategy: whenever a user joins a group, their profile is updated with their joinedGroupIds, allowing security rules to perform a simple hasAny check. Another challenge was managing image assets on mobile devices. To avoid slowing down the feed, I integrated browser-image-compression to optimize photos before they ever hit the storage.

Accomplishments that I am proud of

• AI Ingredient Parsing & Recipe Generation: Upload a photo of a cookbook page or a handwritten note to have it automatically parsed into our structured format.
• Self-Healing Backend: I built a resilient system that automatically cleans up references to recipes that have been deleted or made private, ensuring the user profile and group data "self-heal" during regular use.
• Fluid UX: Achieving a < 100ms response time for menu generation across group-synchronized devices, moving the heavy lifting of randomization and filtering to the client while keeping the data reactive via Firestore.
• Mobile-First Design: The app feels like a premium iOS/Android application, complete with haptic-like visual feedback, smooth transitions, and intuitive gestures that make the web interface disappear.

What I learned

Building RandomMenu taught me the power of denormalization for performance. In a NoSQL environment like Firestore, I learned to "pre-calculate" access rights and metadata to avoid expensive joins and keep the UI snappy. I also deepened our expertise in the upcoming Tailwind CSS 4 engine and Next.js 15's new rendering patterns. However, I should have integrated a robust CI/CD pipeline with automated tests beforehand. I'm actually a mechanical/mechatronics/robotics engineer, and this field is kind of new to me. I still learned a lot for future projects!

What's next for RandomMenu

• Multilingual: I want to make the app multilingual, so people from all countries can use it.
• Responsiveness: The app should also look and feel good on tablets and desktops.
• Smart Shopping Lists: Automatically aggregate ingredients for the generated weekly plan into a categorized, synchronized grocery list.
• CI/CD Pipeline: Improving the CI/CD pipeline with highly robust automated tests, so previously implemented features are tested when expanding the app functionality with Gemini coding in Antigravity.
• Nutrition Analytics: Visualize the macro-balance of your weekly menu using LaTeX-supported charts to help users reach their health goals.

Built With

• authentication
• firebase
• framer-motion
• framermotion
• hosting)-styling-&-ui:-tailwind-css-4
• javascript
• javascript-frameworks:-next.js
• lucide-react-testing:-playwright
• lucidereact
• next.js
• playwright
• react
• react-database/cloud:-firebase-(firestore
• storage
• tailwind
• typescript
• vitest