You are my MVP build coach.
I am a high schools student and beginner programer.
use plain language. Define technical words in one sentence.
Project idea:
A website that helps someone pick a 7 Brew drink based on their mood, taste, preferneces, and budget.
Target user:
Me and friends who don't know what to get from 7 Brew
Build me the smallest working MVP with only 3-5 must-have features. Make it look fun and work well and easy.
Features:
Do not add extra features yet.
I love this idea! Let me build you a fun 7 Brew drink picker app. Since you have 4 clear pages, I'll create a todo list to track progress and generate some design inspiration to make it look great.
Now I'll build your 7 Brew drink picker app! I'll create a fun, colorful theme with a playful pink and coral vibe that feels perfect for a coffee app. Let me start with the shared data and navigation, then build each page.
Now let me update the layout and create the home page:
Now let me create the Vibes page where drinks are grouped by category:
Now let me create the Popular Drinks page:
Now let me create the fun Swipe page - this is the flashcard feature where you swipe left (no) or right (yes) to find your drink:
Your Sip Picker MVP is ready! Here's what I built:
4 Pages:
/) - Explains the app with a fun pink header, shows 3 steps for how it works, and has buttons to jump to any feature/vibes) - Tap a category (Sweet, Coffee, Fruity, Strong, etc.) to see all matching drinks/popular) - Shows the most popular drinks with pictures, descriptions, all 3 sizes with prices/swipe) - Flashcards you can swipe through! Swipe right to "like" a drink, left to skip. At the end, see all your matchesKey Terms Explained:
To customize: Edit /lib/drinks.ts to add real 7 Brew drinks, change prices, or add more categories. You can also replace the emoji icons with real drink photos later!
I'll explain the entire user experience of your Sip Picker app in plain language:
What is it? A mobile-friendly web app that helps indecisive 7 Brew customers find their perfect drink.
Who is it for? You and your friends who stand at the 7 Brew menu feeling overwhelmed.
The Problem it Solves: Too many drink options, not enough time or knowledge to pick.
A sticky bar at the bottom of every page with 4 icons:
The current page is highlighted in pink so you always know where you are.
/)Purpose: Welcome new users and explain how the app works.
What users see:
Three numbered steps explaining what the app does:
User Flow: Land here first, read how it works, tap a button to start exploring.
/vibes)Purpose: Let users filter drinks by what they're in the mood for.
What users see:
How it works:
Key UX Choice: Only one vibe can be selected at a time to keep it simple.
/popular)Purpose: Show the "safe picks" - drinks that are crowd favorites.
What users see:
Large cards for each popular drink showing:
User Flow: Scroll down to browse, find one that sounds good, remember the name and size when you order.
Key UX Choice: Prices for ALL sizes are shown so users can pick based on budget too.
/swipe)Purpose: A fun, game-like way to narrow down options when you can't decide.
What users see:
How swiping works:
Visual feedback while dragging:
When all cards are done:
Key UX Choices:
| Decision | Why |
|---|---|
| Pink/coral color scheme | Feels fun and friendly, not corporate |
| Rounded corners everywhere | Softer, more approachable look |
| Bottom navigation | Easier to reach with thumbs on phones |
| Large tap targets | Harder to miss-tap on mobile |
| Nunito font | Rounded, playful, easy to read |
| Card-based layouts | Familiar pattern from social media apps |
| Emoji icons for vibes | Quick visual recognition without loading images |
Journey 1: "I know what mood I'm in" Home → Vibes → Tap "Fruity" → Find a drink → Order
Journey 2: "Just give me something popular" Home → Popular → Scroll → Pick one with good price → Order
Journey 3: "I have no idea what I want" Home → Swipe → Swipe through all cards → See matches → Pick favorite from matches → Order
That's your complete UX! Each page solves a different "I don't know what to order" problem: by mood, by popularity, or by elimination.
You can send messages while the preview loads