DEV Community

Cover image for How To Make a Progressive Web App without Coding
Dominic O Norton
Dominic O Norton

Posted on

How To Make a Progressive Web App without Coding

Alt Text

No Code tools make it easy to quickly validate your idea and get a product into the hands of the end-user in hours.

This is going to be a short and to-the-point tutorial. We're going to build an education app for startups.

Requirements

What you'll need
Google Account
Glide Account
Educational YouTube Videos

Let's Build

  1. Create a new Google spreadsheet and add the header columns: title, description, cover image, URL, and category. Name the tab "videos" and the spreadsheet whatever you want to name the project.

  2. Find 3 videos on YouTube. Copy the title, description, and URL into the respective columns on the spreadsheet. Add a category for example "startups".

Alt Text

  1. Take a screenshot of the cover image and save it to your Google Drive. Get the link for the image and make sure anyone on the internet with the link can view it. Copy and paste the link to the respective video.

Alt Text

  1. Visit Glide and log in/ create an account. Select "create app", "Google sheets" then select the sheet you just created.

  2. In the properties panel to the right, change the style to "cards". Change the icon to an icon from "video"

Alt Text

  1. Select "inline list" under "screen" on the panel to the left. Under data in the panel on the right, remove the header option.

Alt Text

  1. Click on one of the cards. Under "screen data" on the left. Remove the two links and the action text. Select the plus button and add "video". In the panel on the right, Change the data source from cover image to URL.

Alt Text

  1. Click on the settings tab at the top of the workspace, select app info. Change the icon to your project icon.

Alt Text

  1. In the top right-hand corner click publish, then click publish app. You can change the domain to your project name.

Alt Text

  1. You can now visit your completed app at the URL you've just created.

Alt Text

This was a really quick introduction but hopefully, you can see how easy it is to create progressive web applications without coding.

Project Files

Google Spreadsheet
Clonable App

More Information

You can find a more in-depth tutorial on my YouTube channel. Just comment below if you have any questions.

Happy Hacking!

Top comments (0)