Building a Progressive Web App in 48 Hours Using AI

Introduction to the Project

Frederik, a full-time freelancer, shares his experience of building a progressive web app in just 48 hours using AI. The project was built using Vanilla JavaScript and a Firebase Database. In this article, we will explore how Frederik approached this project, the tools he used, and the challenges he faced.

Learning to Code and Using AI

Frederik is a UX/UI designer and web designer who wants to learn how to code. He chose to use Scrimber V2, a tool that allows hands-on learning experience. With Scrimber V2, Frederik was able to learn how to code in Vanilla JS and set up a Firebase database. He utilized AI to build the app, which helped him to quickly generate code and focus on the design and functionality.

This is the initial screenshot of the project

The Idea and Design

The idea behind the app was to create a platform for Frederik and his friends to track their padle game scores and results. The app had to be built in Vanilla JS and use a Firebase real-time database. The design was created using Figma, and the app had to be functional and easy to use.

Building the App

Frederik used Scrimber V2 to generate the initial code and then implemented it in VS Code. He added the design and functionality, including a home screen, match details, and a player profile page. The app also included a admin dashboard where Frederik could add new matches and update the scores.

This is the screenshot of Scrimber V2 and VS Code

Challenges and Solutions

Frederik faced some challenges during the development process, including implementing the player profile page and adding the styling. He used AI to generate the code and then modified it to fit his needs. He also had to troubleshoot some issues with the app, but overall, the development process was relatively smooth.

This is the screenshot of the player profile page

Conclusion and Future Plans

In conclusion, Frederik successfully built a progressive web app in 48 hours using AI. The app is functional and easy to use, and Frederik plans to continue improving it. He encourages viewers to like and subscribe to his channel for more content and to let him know what kind of content they would like to see in the future.

This is the final screenshot of the app