Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

How I Built Good Supplements for my client in 2 Weeks Using + Cursor 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.

85,377 Aufrufe • vor 1 Jahr •via X (Twitter)

14 Kommentare

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

5. Build the Landing Page Using @lovable_dev 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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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.

Profilbild von Prajwal Tomar
Prajwal Tomarvor 1 Jahr

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_dev 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.

Profilbild von Arnold
Arnoldvor 1 Jahr

I've done nearly 20,000 workouts in my life, and I've seen what works for all levels. I created a free workout guide to show you what works, whether you're a beginner or advanced.

Ähnliche Videos