Thread by @PrajwalTomar_

How I designed and built a PWA using AI

The client wanted a mobile app, but I recommended a PWA for faster development and lower costs.

Here’s how I designed, built, and launched it using AI ↓

1/ Planning the Idea With AI

Every project starts with a clear understanding of the problem, solution, and audience.

I used @ChatGPTapp to turn the client’s rough idea into a structured brief.

Prompt:
“I’m starting a team productivity tracker for remote teams. It should help managers track work hours, task completion, and team efficiency. Convert this into a concise project brief.”

ChatGPT structured it into:
- Problem: Teams struggle to track and improve their daily work
- Solution: A web-based productivity tracker with AI-generated insights
- Target Users: Remote teams handling multiple projects

Having a well-defined brief saved time and avoided confusion later.

2/ Why PWA Instead of Native Apps

Instead of building native apps, I went with a PWA because it works on desktop and mobile with one codebase.

- Users can install it like an app without needing an app store
- It is cheaper and faster to build
- Updates happen instantly without app store delays
- AI today is better suited for building PWAs than native apps

For startups testing an idea, a PWA is the best option.

3/ Generating Features With AI

Next, I used AI to generate and refine the app’s features.

Prompt:
“Based on this project brief, list the must-have features for a productivity tracker PWA. Give real-world examples if possible.”

AI suggested:

- Task logging with priority levels
- AI-powered daily reports on productivity
- Shared dashboards for team collaboration
- Offline access for seamless task tracking

After refining the list, I had a clear development roadmap.

4/ Structuring the Site Map

With features set, I asked ChatGPT to map out the app’s page structure and navigation flow.

Prompt:
“Provide a structured site map for this productivity tracker, including primary pages, their hierarchy, and how they connect.”

The result:
- Home: Overview of team progress
- Dashboard: Work hours, tasks, AI insights
- Task Management: Add, update, and categorize tasks
- Team Collaboration: View shared progress

A clear structure avoided confusion when building the UI.

5/ Designing the UI Layout

Before opening UX Pilot, I asked ChatGPT to describe the homepage layout in plain text.

Prompt:
“Describe the structure for the homepage, from top to bottom, including layout and content blocks.”

It suggested:

- Navigation bar with logo and quick links
- Hero section showing today’s productivity summary
- Task overview with completion progress
- AI-powered insights on team efficiency

Now repeat this step for each page in the sitemap and generate a detailed description. The more detailed, the better.

6/ Designing the UI With UX Pilot

Usually, I skip UI design and go straight to Lovable, but this time the client needed high-fidelity UI screens. So, I used UX Pilot to generate them efficiently.

- used AI prompts to set the style and layout, ensuring a minimal and clean design
- inputted textual descriptions of each screen one by one, including the dashboard, task manager, and team collaboration pages
- UX Pilot generated polished designs purely based on these descriptions
- experimented with multiple fonts using a single click to find the best fit
- I was happy with the results, but if needed, the designs could be exported to Figma for manual refinements

At the end of this process, all high-fidelity UI screens for the PWA were created, and the client was happy with the outcome.

7/ Building the App Using UX Pilot and @lovable_dev

With the high-fidelity UI screens ready, I took full advantage of UX Pilot’s built-in code generation.

- copied the generated code directly from UX Pilot for each screen
- pasted the project brief along with this code into Lovable
- uploaded screenshots of the high-fidelity UI designs for reference
- went through each screen one by one and converted them into a functional PWA in Lovable
- repeated this process for all UI screens, ensuring everything matched the original design

By following this approach, I rapidly transformed the high-fidelity UI into a working PWA without writing even a single line of code.

8/ Setting Up the Backend With @supabase

For the backend, I used Supabase, and setting it up was straightforward.

Lovable makes it really easy to integrate Supabase, so I had authentication, the admin panel, and other backend features running in no time.

With Lovable’s seamless integration, Supabase handled all backend operations efficiently. Within a short time, the backend was fully functional, allowing me to focus on refining the user experience.

9/ Taking the PWA Into Cursor for Advanced Features (Optional)

If needed, you can take this PWA into Cursor to add more advanced backend features and optimize the code further.

- You can use it to enhance database queries, improve API efficiency, and add custom functionalities
- For this PWA, these extra backend features were not necessary, so I did not use Cursor

The combination of Lovable and Supabase was enough to meet all the client’s requirements efficiently.

10/ Deploying and Hosting the App

Once the app was built, I hosted it on Lovable and shared the Lovable URL with the client for review. This made it easy for them to test the PWA before final deployment.

After approval, I connected a custom domain using Netlify and added a PWA manifest. This allowed users to install the app on their mobile devices just like a native app.

Finally, I ran final tests to ensure everything worked smoothly.

Note: The PWA in this thread is just an example, not a real-world MVP. I can’t share the actual one due to NDA, but you can follow the exact same steps to design and build yours.