How I Built My MVP Directory FAST using Lovable and Cursor (Part 1)...
Prajwal Tomar@PrajwalTomar_
40 views
Dec 05, 2024
~2 min read
Advertisement
1
How I Built My MVP Directory FAST using Lovable and Cursor (Part 1)
I built an entire MVP directory, complete with a landing page and Supabase integration, in just 28 minutes.
Here’s how I did it. THREAD BELOW.
I built an entire MVP directory, complete with a landing page and Supabase integration, in just 28 minutes.
Here’s how I did it. THREAD BELOW.
4:51
2
1/ Start with a Crystal-Clear Prompt
The foundation of everything is the prompt. Explain exactly what you want:
- Color palette
- Design principles
- Layout
I went a step further. I used my custom GPT model, which generates prompts based on screenshots of the sites I want to draw inspiration from.
The clearer the prompt, the better the output.
The foundation of everything is the prompt. Explain exactly what you want:
- Color palette
- Design principles
- Layout
I went a step further. I used my custom GPT model, which generates prompts based on screenshots of the sites I want to draw inspiration from.
The clearer the prompt, the better the output.
3
2/ Find Design Inspiration
Every good project starts with inspiration.
For my MVP directory, I loved the design of @johnrush's GPT directory.
I took a full-page screenshot using GoFullPage extension, uploaded it to my custom GPT, and generated a detailed prompt.
This step alone saved hours of trial and error.
Every good project starts with inspiration.
For my MVP directory, I loved the design of @johnrush's GPT directory.
I took a full-page screenshot using GoFullPage extension, uploaded it to my custom GPT, and generated a detailed prompt.
This step alone saved hours of trial and error.
4
3/ Building in Lovable
Once I had my prompt, I headed to Lovable to bring the design to life:
- Pasted the prompt.
- Broke down tasks into smaller steps for better results.
- Used the selector feature to customize divs and apply styles directly.
Lovable made it incredibly easy to build out the landing page with minimal prompts.
Once I had my prompt, I headed to Lovable to bring the design to life:
- Pasted the prompt.
- Broke down tasks into smaller steps for better results.
- Used the selector feature to customize divs and apply styles directly.
Lovable made it incredibly easy to build out the landing page with minimal prompts.
5
4/ Supabase Integration Made Simple
Lovable comes with support for Supabase, making database integration effortless.
I simply prompted it to connect to Supabase for storing agency submissions. It worked seamlessly, created the table in Supabase, and also linked it to the web app.
Lovable comes with support for Supabase, making database integration effortless.
I simply prompted it to connect to Supabase for storing agency submissions. It worked seamlessly, created the table in Supabase, and also linked it to the web app.
6
5/ Refining and Exporting to GitHub
Once I was happy with the design, I refined a few elements directly in Lovable.
From there, I pushed everything to GitHub, which made it easy to pull the project into Cursor for further refinements.
Lovable's two-way sync with GitHub makes managing and editing your project locally seamless and efficient.
Once I was happy with the design, I refined a few elements directly in Lovable.
From there, I pushed everything to GitHub, which made it easy to pull the project into Cursor for further refinements.
Lovable's two-way sync with GitHub makes managing and editing your project locally seamless and efficient.
7
6/ Why Cursor Is Essential
Lovable is amazing for UI and basic integrations, but Cursor takes it further:
- Refining the UI and fixing issues.
- Performing manual code edits.
- Building complex features like user profiles or admin panels.
It’s the perfect balance of AI tools working together.
Lovable is amazing for UI and basic integrations, but Cursor takes it further:
- Refining the UI and fixing issues.
- Performing manual code edits.
- Building complex features like user profiles or admin panels.
It’s the perfect balance of AI tools working together.
8
7/ The Future of Building MVPs
Using tools like Lovable and Cursor, building MVPs has never been faster.
This directory would’ve taken days to build traditionally, but with this workflow, I completed it in under 30 minutes.
Using tools like Lovable and Cursor, building MVPs has never been faster.
This directory would’ve taken days to build traditionally, but with this workflow, I completed it in under 30 minutes.
9
What’s Next?
In Part 2, I’ll show you how I:
- Use Cursor to refine this further.
- Add features like an admin panel and agency profile pages.
Stay tuned, it’s coming in a day or two!
In Part 2, I’ll show you how I:
- Use Cursor to refine this further.
- Add features like an admin panel and agency profile pages.
Stay tuned, it’s coming in a day or two!
10
A Quick Note
This might not be the most polished demo out there (haha, I had to edit a 28-min clip down to under 5 mins).
But if you have any questions, feel free to ask, I’d love to share more about the process.
What do you think of this workflow? Would you try it? Let me know! 👇
This might not be the most polished demo out there (haha, I had to edit a 28-min clip down to under 5 mins).
But if you have any questions, feel free to ask, I’d love to share more about the process.
What do you think of this workflow? Would you try it? Let me know! 👇