How I designed and built a PWA using AI The client wanted a mobile...
Prajwal Tomar@PrajwalTomar_
51 views
Feb 23, 2025
~5 min read
Advertisement
1
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 is how I designed, built, and launched it using AI.
The client wanted a mobile app, but I recommended a PWA for faster development and lower costs.
Here is how I designed, built, and launched it using AI.
2
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.
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.
3
2/ Why PWA Instead of Native Apps
Instead of building a 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.
Instead of building a 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.
4
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.
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.
5
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.
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.
6
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."
AI 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.
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."
AI 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.
7
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.
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.
8
7/ Building the App Using UX Pilot and @lovable
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.
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.
9
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.
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.
10
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 PWS, 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.
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 PWS, 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.
11
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.
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.
12
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.
This was back in November. Now, you can use @CodeGuidedev to generate features even faster.
This was back in November. Now, you can use @CodeGuidedev to generate features even faster.
