15-minute PWA with Glide (Method 1)

What is Glide?

Glide is a freemium online tool for creating a progressive web app whose data is backed by a Google Sheet. The tool has an easy to use visual interface for designing your app. Screen elements are highly customizable and has beautiful styles. I'd rather show you than just tell you, so let's dive in.

Making a Glide App 

The fastest way to create a Glide app is to use pre-made templates. I shall call this "Method 1". In another post, I will share the 2nd method, which is to start with a Google Sheet.

Step 1: Register for free

Sign-up for free to get basic features and limits.

Step 2: Select a Template

Browse for free templates. For this example, let's use a simple budget tracker. Click on the template, then on the next screen, click "Copy app for free".

Step 3: Customize the UI

Upon copying the app, you will be directed to the layout editing screen. The left panel allows you to navigate between the tabs in your app. The middle panel shows a preview of your app, and also allows selection of specific UI elements on the app. There are icons at the bottom to switch from play (preview) mode or select mode. Finally, the right panel provides various customization options for the selected component.

There's not much to customize anymore with a pre-made template. But here are a few minor tweaks you can try:

1. Try changing the color theme. Go to Settings by clicking the hexagonal nut icon at the top. Select Appearance. Then customize the theme, accent color, typography, and others.
2. Show, hide or add a tab. Go back to app preview by clicking the mobile phone icon. On the left panel, hover over a tab and click the eye icon to show or hide that tab. Or click the plus icon to add a new tab.
3. Change the layout of a tab. This could potentially be a drastic change, so try it out on a new tab, rather than the pre-existing Home, Expenses, and Categories tabs. On the left panel, select one of the layout styles: List, Tiles, Calendar, Map, Checklist, Cards, Swipe, and Details.

Step 4: Customize data  

Again, with a pre-made template, there's not much to customize anymore with the data. You can use the sheet as is, and it would work just great. But if you're interested, you can click on the spreadsheet icon at the top to view the data table behind your app. You can even find a link to the actual Google Sheet at the bottom left.

Step 5: Publish

Once you're satisfied with the customizations, it's time to see the app in action. Click the Publish button at the top right. You will then get a link and QR code for your app. You can customize the link to make it more memorable, if you want. The app is best viewed on a mobile device, so try scanning the QR code with your phone to open the app in your mobile browser. (If you open this link on a desktop browser, the app will take up only about 1/3 of the page. The rest is a link and QR code for sharing the app, and also a link to copy the app.)

Real-life applications

Personally, I've used Glide to boost my productivity. Specifically, I've created:

1. An app launcher specifically made to fit in Vivaldi's side panels for quick access.
2. An online event management app to manage attendees and the event program.
3. A team task tracker.
4. A mobile notifications center -- with some integrations with MacroDroid and Google Apps Script.
5. And many more possibilities

What would you create with a powerful tool like this? 

*All user interface content shown in screenshots are fully owned by Glide.