How I Built Good Supplements for my client in 2 Weeks Using...
Prajwal Tomar@PrajwalTomar_
40 views
Feb 10, 2025
~5 min read
Advertisement
1
How I Built Good Supplements for my client in 2 Weeks Using @lovable + @cursor_ai
Good Supplements is a platform for biohackers and wellness enthusiasts to discover, organize, and share supplement stacks.
Here’s how I built this entire MVP step by step.
Good Supplements is a platform for biohackers and wellness enthusiasts to discover, organize, and share supplement stacks.
Here’s how I built this entire MVP step by step.
0:43
2
1. Start With a Solid Project Brief
Before writing a single line of code, I defined:
- What’s the product? A supplement discovery and tracking platform
- Who’s it for? Health-conscious individuals and biohackers
- What problem does it solve? Helps users organize and share supplement stacks efficiently
Prompt:
"I’m building a web app called GoodSupplements that helps users organize supplement stacks and share them with the community. Can you help me draft a structured project brief?"
A clear project brief is essential for guiding every decision.
Before writing a single line of code, I defined:
- What’s the product? A supplement discovery and tracking platform
- Who’s it for? Health-conscious individuals and biohackers
- What problem does it solve? Helps users organize and share supplement stacks efficiently
Prompt:
"I’m building a web app called GoodSupplements that helps users organize supplement stacks and share them with the community. Can you help me draft a structured project brief?"
A clear project brief is essential for guiding every decision.
3
2. Generate Features With ChatGPT
Once the brief was clear, I turned to ChatGPT to break down the key features.
Prompt:
"Here’s the project brief: [Insert Brief]. Generate a list of key features and technical requirements for this MVP."
The core features identified:
- User Accounts – Signup, profile management, and dashboards
- Supplement Discovery – Search by name, category, and benefits
- Custom Stacks – Create, edit, and manage supplement combinations
- Community Engagement – Like, bookmark, and share stacks
- Supplement Detail Pages – Ingredients, reported effects, and user reviews
This gave me a structured foundation to work with.
Once the brief was clear, I turned to ChatGPT to break down the key features.
Prompt:
"Here’s the project brief: [Insert Brief]. Generate a list of key features and technical requirements for this MVP."
The core features identified:
- User Accounts – Signup, profile management, and dashboards
- Supplement Discovery – Search by name, category, and benefits
- Custom Stacks – Create, edit, and manage supplement combinations
- Community Engagement – Like, bookmark, and share stacks
- Supplement Detail Pages – Ingredients, reported effects, and user reviews
This gave me a structured foundation to work with.
4
3. Draft the PRD
Now, I organized the features into a structured PRD using the MoSCoW framework:
- Must-Have: User accounts, supplement search, stack creation, likes/bookmarks
- Should-Have: Community recommendations, personalized suggestions
- Could-Have: AI-powered supplement recommendations (future feature)
- Won’t-Have: Real-time chat, advanced analytics (not in MVP)
Prompt:
"Here’s a list of features: [Insert feature list]. Use the MoSCoW framework to prioritize features for an efficient MVP launch."
A clear PRD prevents scope creep and keeps development focused.
Now, I organized the features into a structured PRD using the MoSCoW framework:
- Must-Have: User accounts, supplement search, stack creation, likes/bookmarks
- Should-Have: Community recommendations, personalized suggestions
- Could-Have: AI-powered supplement recommendations (future feature)
- Won’t-Have: Real-time chat, advanced analytics (not in MVP)
Prompt:
"Here’s a list of features: [Insert feature list]. Use the MoSCoW framework to prioritize features for an efficient MVP launch."
A clear PRD prevents scope creep and keeps development focused.
5
4. Map Out the UI & Pages
Once the PRD was finalized, I mapped out the UI screens.
Prompt:
"Based on this PRD and core features, list all the pages required for this MVP."
GoodSupplements needed:
- Landing Page: Introduction and signup
- Dashboard: User’s saved stacks, liked stacks
- Supplement Search: Explore the supplement database
- Stack Builder: Create and manage supplement stacks
- Supplement Detail Page: View information, reviews, and add to stack
This ensured a structured UI flow before development began.
Once the PRD was finalized, I mapped out the UI screens.
Prompt:
"Based on this PRD and core features, list all the pages required for this MVP."
GoodSupplements needed:
- Landing Page: Introduction and signup
- Dashboard: User’s saved stacks, liked stacks
- Supplement Search: Explore the supplement database
- Stack Builder: Create and manage supplement stacks
- Supplement Detail Page: View information, reviews, and add to stack
This ensured a structured UI flow before development began.
6
5. Build the Landing Page Using @lovable
Now, I moved to Lovable to generate the first version of the UI.
Prompt:
"Here’s the project brief: [Insert Brief]. Use this landing page structure: [Insert Structure] to create a clean, modern, and responsive design."
- Lovable generated the UI code from descriptions.
- I started with the landing page since it sets the tone for the platform.
- After generation, I refined the layout and design.
Now, I moved to Lovable to generate the first version of the UI.
Prompt:
"Here’s the project brief: [Insert Brief]. Use this landing page structure: [Insert Structure] to create a clean, modern, and responsive design."
- Lovable generated the UI code from descriptions.
- I started with the landing page since it sets the tone for the platform.
- After generation, I refined the layout and design.
7
6. Perfect the Landing Page First
The landing page is the first impression, so I spent time refining it:
- Improved typography, spacing, and responsiveness
- Ensured a clean, minimalistic UI
- Matched the trust-driven, data-focused design
Once it felt right, I applied the same workflow to other pages.
The landing page is the first impression, so I spent time refining it:
- Improved typography, spacing, and responsiveness
- Ensured a clean, minimalistic UI
- Matched the trust-driven, data-focused design
Once it felt right, I applied the same workflow to other pages.
8
7. Generate & Refine UI for All Pages
I repeated this process for each page:
- Generated a structure using ChatGPT
- Fed it into Lovable to generate the UI
- Used prompts to refine layouts
Example prompt:
"Reduce padding, align buttons, and improve contrast on the Stack Builder page."
This iterative approach helped polish the entire UI.
I repeated this process for each page:
- Generated a structure using ChatGPT
- Fed it into Lovable to generate the UI
- Used prompts to refine layouts
Example prompt:
"Reduce padding, align buttons, and improve contrast on the Stack Builder page."
This iterative approach helped polish the entire UI.
9
8. Build Out the Full MVP UI
I didn’t move to Cursor until the entire UI was ready.
This ensured:
- A clear frontend structure before adding logic
- Fewer distractions when working on the backend
Once the UI was finalized, I got to Supabase integration.
I didn’t move to Cursor until the entire UI was ready.
This ensured:
- A clear frontend structure before adding logic
- Fewer distractions when working on the backend
Once the UI was finalized, I got to Supabase integration.
10
9. Supabase Integration With Lovable
Before moving to Cursor, I used Lovable to integrate Supabase for:
- User authentication
- Storing user-created supplement stacks
- Managing likes, bookmarks, and shared stacks
Lovable makes adding Supabase integration easy by handling setup and connecting the database quickly.
Before moving to Cursor, I used Lovable to integrate Supabase for:
- User authentication
- Storing user-created supplement stacks
- Managing likes, bookmarks, and shared stacks
Lovable makes adding Supabase integration easy by handling setup and connecting the database quickly.
11
10. Build 80-90% of the MVP in Lovable
I try to build as much of the MVP as possible in Lovable, around 80-90%, before moving to Cursor.
This allows:
- Faster iteration on UI and frontend logic
- A smoother transition into backend development
- Less rework once the backend is integrated
I try to build as much of the MVP as possible in Lovable, around 80-90%, before moving to Cursor.
This allows:
- Faster iteration on UI and frontend logic
- A smoother transition into backend development
- Less rework once the backend is integrated
12
11. Use Cursor for Advanced Backend & Refinements
Cursor is where I:
- Implemented advanced backend logic
- Optimized API responses to handle large supplement data
- Refined UI responsiveness and state management
The biggest challenge was handling large API responses. Cursor helped me optimize queries and data fetching to keep performance smooth.
Some frontend optimizations I made:
- Lazy loading supplement images and descriptions
- Infinite scroll for supplement search results
- Debounced search input to reduce unnecessary API calls
- Efficient caching to minimize redundant requests
This kept the UI fast and responsive.
Cursor is where I:
- Implemented advanced backend logic
- Optimized API responses to handle large supplement data
- Refined UI responsiveness and state management
The biggest challenge was handling large API responses. Cursor helped me optimize queries and data fetching to keep performance smooth.
Some frontend optimizations I made:
- Lazy loading supplement images and descriptions
- Infinite scroll for supplement search results
- Debounced search input to reduce unnecessary API calls
- Efficient caching to minimize redundant requests
This kept the UI fast and responsive.
13
12. Deploy & Plan for Future Features
With the MVP built, I deployed it on @vercel to start collecting user feedback.
Next steps:
- AI-powered supplement recommendations
- Personalized stack suggestions
- Expanded supplement database & integrations
This ensured a structured launch while keeping the roadmap open for improvements.
With the MVP built, I deployed it on @vercel to start collecting user feedback.
Next steps:
- AI-powered supplement recommendations
- Personalized stack suggestions
- Expanded supplement database & integrations
This ensured a structured launch while keeping the roadmap open for improvements.
14
Key Takeaways
- Plan everything before opening @cursor_ai – AI tools work best with clear instructions.
- Build the UI first – Finalize the design before moving to backend development.
- Use @lovable for UI + @supabase integration – It simplifies frontend development.
- Cursor is best for advanced backend development – Optimize API responses early to prevent slowdowns.
- Deploy fast with @vercel – Quick, hassle-free deployment.
Good Supplements went from idea to functional MVP in 2 weeks.
- Plan everything before opening @cursor_ai – AI tools work best with clear instructions.
- Build the UI first – Finalize the design before moving to backend development.
- Use @lovable for UI + @supabase integration – It simplifies frontend development.
- Cursor is best for advanced backend development – Optimize API responses early to prevent slowdowns.
- Deploy fast with @vercel – Quick, hassle-free deployment.
Good Supplements went from idea to functional MVP in 2 weeks.
