24 hours Startup: Build an eCommerce Mobile App for Online Sneaker Store

Build an app using Stripe, Google Sheets, and Glide

Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)

As a product builder↗️, I built micro tools to solve my own problems. For example: article tool, event app, meal box app, finance tracker, SaaS tracker, Notion portfolio, and habit tracker.

Last week, one of my Product2kit customers who bought a no-code template asked if I can create a template for eCommerce use cases. I took his idea and came up with this online sneaker store. Here’s my app building process: 

1. Startup idea 👟🏃‍♂️🏀

Let’s name this mobile app — SneakerHypo, an online store for authentic sneaker brands with a community photo-sharing platform.

I ideated the sneaker store concept from Goat.com. I incorporated some of its branding elements in this app: bold, high-end, black-and-white, and minimalist design. Next, I came up with a list of app features:

Key functionalities 

  • List of sneaker brands

  • Filter by product categories & collections

  • Show recommended sneaker products

  • Product details (image, slideshow, price, brand name)

  • Select shoe sizes (men and women)

  • User comment section

  • Community photo-sharing (upload your sneaker outfits)

  • Add to cart 

  • Customer payment via Stripe

👉 Preview the mobile app or get template

2. Tools I use 🔨

Instead of spending months to build a working product, I have used these tools to quickly build the online sneaker eCommerce app:

Glide

A mobile app generator with app-like features. I use Glide to build the functional features including sign-in via Google, sneakers listing, upload style images, customize shoe sizes, add to cart, and payment integration.

Stripe

I set up Stripe with the Glide app to handle customer checkout and payment processing. Customers can enter shipping addresses to get their sneakers delivered.

Google Sheets

I use Google Sheets to create and store the mobile app database such as user data (i.e. email addresses, comment, photo upload) and app content (i.e. sneaker images, item listing, product price, product details). You can also edit the Glide app design and content via this spreadsheet:

Behance

Instead of designing the app from scratch, I use Behance for UI/UX inspiration. I filtered the search based on the keywords and colors I want:

Unsplash

I use Unsplash for high-quality free stock photos for all the sneaker images I used in this mobile app (i.e. product display, slideshow, and gallery).

👉 Preview the mobile app or get template

3. Map out the flow 🗺

The next step is to map out the user stories — how users will go through the steps in interacting with your app. This will help you visualize the app features, organize app screens, item listings, and category tags.

👉 Preview the mobile app or get template

4. Build the app features 🚀

Check out the result of the mobile app: 👉 Preview the mobile app

(1) Showcase the best sneakers on the home screen

The home🏠 screen includes the new arrivals, trending sneaker brands, and special collection series. I’ve also included a promo video on the storefront to create emotional connections with target customers.

(2) Explore sneakers, filter and save to favorite list

The “Search” screen will show all sneaker items and price tags. Users can also search for sneakers by product category (i.e. Lifestyle, New Pick, Performance, Timeless, Trending) and then save to ❤️ list.

(3) Product details, shoe sizes, checkout with Stripe

I have included sneaker images, slideshow, price, brand name, description for each product listing. Users can customize shoe 👟 sizes (men & women) before they place orders at the checkout.

(4) Find sneaker inspiration from community posts

This “Instagram-ish” feature: Users can browse inspiration or upload a photo with caption to post their favorite sneaker outfits on the “Community” section.

(5) User comment and recommended products

Users can leave a comment on a specific product to create a sense of community interaction on the app. I have also built a “similar product” listing to display relevant products based on category type.

5. No-code app template 📥

Get this cloneable app template. Now available on Product2kit — a digital shop that I built for product makers who want to create customizable apps from no-code templates. Edit app design/content without coding required.

👉 Preview the mobile app or get template

[1] Find me on Personal Site / Twitter / LinkedIn 🔥

[2] In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌

[3] Build products from no-code templates 🚀

I built a "Personal FAQ" Directory on how to get into Product/Tech.

Bonus: How to launch your FAQ page


Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)

As a product builder↗️, I built micro tools to solve my own problems. For example: article tool, event app, meal box app, finance tracker, SaaS tracker, and habit tracker.

I’ve been building in public, therefore, I often receive DMs who reached out for advice on how to transition into tech; how to start a consulting business; and how to build & launch products. 

I decided to curate this FAQ and answer all of them in a public directory. Hope you will find some ideas (not advice) if you’re looking to start a similar path.

1. Idea and solution 🤓

I’ve been reached out by Internet people who are curious about my thought process related to product building, content marketing, remote career, etc. 

I love sharing my experience on how I did it. Over time I realized there are frequently asked questions and I wanted to be more productive in helping others.

Therefore, I decided to solve this problem by building a Personal FAQ Directory

  • Batch similar questions and answer all of them in 1 place

  • Avoid repeating myself on writing the same answer

  • Provide thoughtful answers and scale this effort

  • When someone asks FAQ, share a direct link with the long answers

To begin, I list down the parts I want to build

  • A landing page to introduce the concept

  • AMA button (if people have additional questions)

  • Frequently Asked Questions

  • Newsletter signup form

  • Filter by category (Career, Product, Marketing, Remote Work)

👉 Check out Personal FAQ Directory

2. The toolkit🔨

Here are some of the no-code tools that I use to design, build, and launch the landing page, FAQ list, and email signup form.

Carrd

A simple and fully responsive page builder. I build the Personal FAQ homepage using Carrd. Instead of buying a custom domain for a random project, I published the site using a free .carrd.co URL. 

Airtable

A spreadsheet hybrid database creation tool. I use Airtable to create the FAQ table which includes a list of Questions and Answers. Then I embed the Airtable database on the FAQ homepage.

Substack

A newsletter tool and content publishing platform. I use Substack to embed the newsletter signup form on my FAQ directory website.

DrawKit

A free vector illustrations site. I use this site to search for free graphics that I can add on the FAQ homepage.

👉 Check out Personal FAQ Directory

3. Building the FAQ Directory 🚀

Once I’ve mapped out my problems, solutions, design ideas, product features, and nocode tools, I begin to work on the design and build the product. Here’re the key steps that I went through:

(1) Create the homepage using Carrd

The main section includes a logo, links, copy, a free graphic from DrawKit, and a personal Bio section. 

I also created a “Tweet me, AMA” button for users to ask additional questions publicly via Twitter, so I can collect these Qs and answer in this FAQ directory.

(2) Add the FAQ database using Airtable

I created a database in Airtable to include a list of frequently asked questions about getting into product and tech. Once I’ve finished writing the FAQ content, I embed the Airtable on the Carrd page by creating a new section.

You can also search the FAQ by category (Career path, Product launch, Remote work, etc.) that interests you:

👉 Check out Personal FAQ Directory

(3) Allow people to buy the FAQ Directory template

I added a “Purchase this template” button that links to a Gumroad page to handle the payment. Upon purchase, customers can copy the full Carrd website, design, Airtable FAQ list — and setup tutorial in the PDF.

(4) Add the newsletter signup form using Substack

I created a simple signup section to collect newsletter subscribers using Substack. Once users enter their email, they will start receiving product tutorials (like this one) in the future.

[1] Find me on Personal Site / Twitter / LinkedIn 🔥

[2] In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌

[3] Buy FAQ Directory website template 👉


Full list of Personal FAQ (Text Version)

This is a text-based version of the FAQ content on how to get into the product and tech industry. Alternatively, you can go to the Personal FAQ Directory

Why did you choose product building (and not software engineering) 👩‍💻 to get into tech?

I was a digital marketer and wanted to pivot my career into tech (1) to work with product companies and (2) start a startup. 

Product building immediately came to mind because it allows me to build startup MVPs, validate ideas, find product/market fit, and eventually develop further into a tech company. 

By building a portfolio of product work, I was able to position myself as someone who understands technology products and clients tend to reach out to me based on my portfolio. 

In other words, I never planned to become a software engineer or land a tech job. But learning to code/no code and transfer these skills into product/company building is my North star.

How did you learn nocode or product building? 😻

In the beginning, I started by hacking some tools and building something for myself. 

I started with WordPress, Airtable, and Carrd and built something simple: personal website, music tech directory, and job board — just to get familiar with product design and fast prototyping. 

My approach is to use what I already know to build what I need. I focus a lot on building (not learning) and only learn when it has immediate next steps, i.e. to execute something. For that reason, I don’t have any good recommendations for nocode courses.

How do you build 💪 the confidence to launch something publicly?

To me, the pain of not releasing stuff constantly is *extremely* painful than the “fear of not being good enough”. 

Whether it’s a blog post, app, public goal or project, I think of it as 1 vs. 0 where I focus more on hitting my “launch” or “publish” cadence: getting it out there and staying consistent with the plan. 

I love to think about getting it done in a minimum viable way, which is better than done perfectly. 

You can always iterate your work as you gain experience in building and launching things.

How do you handle client projects with far timezones? 🌍

I’ve been working remotely & globally with far timezone locations (12 to 15 hours difference) and I’m based in Kuala Lumpur, Malaysia. I think far timezones aren’t an issue if the companies have a solid understanding of global remote work operation.

We often use collaboration docs to “work together” such as making a decision, brainstorming and prioritizing. Even if we’re not in the same location, we still get things done productively.

In a remote work environment, I find it productive to combine both synchronous and asynchronous communication. I.e., Combine video and written communication — which is documenting tasks, meeting agenda, strategic planning, campaigns, contents and reporting. 

I often think ahead and write things down in Google Doc and Notion to reduce back-and-forth emails and unnecessary video calls. It’s also helpful to keep things in 1 place so that clients and their internal team can access updates without any confusion.

What nocode tools 😄 do you recommend?

Some of the no-code/low-code tools that I use: Glide, Carrd, Zapier, Airtable, Sheets, Typeform, Stripe, Loom, RapidAPI, Parabola, Django framework, Coda, Notion, WordPress. 

In terms of choosing the right tools, it’s important to understand what product you’re trying to build. 

Does it require a payment gateway, user login, membership, database, etc.? Then, evaluate each no-code tool to see which one can help you get the job done.

How do you manage your time ⏰ to follow through all your projects and stay consistent?

I have 2 business-related work areas: (1) client services (2) selling digital products and at the same time re-investing these $ resources to start a NewCo. 

During my spare time (usually weekends), I build fast prototyping, write content on Medium & Substack to build my audience, network and marketing.

In terms of time management, I would say: limit meetings, emails, back-and-forth replies unless they are work-related. Use time-blocking and each time block (morning, noon, evening) should have its sub-task. 

Practice deep hours work and extend workweek sprint, until you get a project launched/done. Avoid splitting yourself into too many interesting ideas & be focused.

How do you quickly think & execute product in 24 hours? 🚀

Most of the product ideas that I came up with are related to my personal needs that I’m familiar with. I start by thinking about the problems I want to solve; what are the use cases and key functionalities of the app. 

Once I understand who the users are, what values they will get from the product, I will plan the app design & flow before I get into the “actual” building process. 

Then I gather a list of tools that can help me achieve the prototype in one day.

How did you learn to code? 💻

Self-learning through Udemy, documentation, and YouTube. I learned to code in Python and Django using the book “Python Crash Course” and Django documentation. 

To practice my coding skill, I decided to document my #100DaysOfCode Challenge on Twitter (early 2019). It motivated me to code at least 1 hour a day. But halfway through my learning, I decided to put my “limited” coding skills to test. 

I used Django to build an app “I Lazy To Read” and launched on Product Hunt #1, Lifehacker, and tech blogs featured in 7 countries.

Why did you decide to transition from marketing into tech? 👋

I started my solo founder career in digital marketing, selling services to local SMB clients (i.e. paid Ads, content strategy & marketing training). I reached a point where I was burned out and did not enjoy my work. I was looking for something new.

I’ve always had a strong interest in the tech sector. Having no relevant tech skills, I decided to learn about product & coding. 

I eventually transitioned into tech by working as an independent consultant, helping tech startup clients across US/APAC with product communication & user base discovery strategy. 

My work is still related to marketing but now I’m able to touch on the aspect of product strategy and software startups which I love.

Any advice on how to launch on Product Hunt #1 successfully? 🏆

I wrote a detailed post on how I launched on Product Hunt #1 and the traction I received in the first 2 weeks. 

How can I get started in a Product career? 🤓

Technically speaking, I’m not working in the Product role. I started product building as a personal project while working as an independent contractor in product communication & user base discovery strategy helping early-stage tech cos. 

I perform marketing & community content strategies for product companies. 

In terms of getting a job related to Product position (Product Management, Product Design, Product Marketer, and Product Developer) — I’m not the best person to answer this.

Being physically in SEA ☀️, how do you build a global network and end up working across US/APAC clients remotely?

I credit this to personal branding, content marketing, and networking. In the beginning, I build projects, share my work publicly, build a Twitter audience, and create resources to keep myself accountable in product building.

Another goal of my public sharing is to meet like-minded product people, founders, and operators. Surprisingly, these efforts opened doors for my global remote career: I received a lot of inbound leads who came across my content and wanted to reach out for an opportunity to work together. 

Since then, I’ve become a big believer in globally distributed work and business opportunities regardless of where you’re physically based.

Networking, starting conversations, and building quality connections are important parts of the equation. It’s not about building the number of networks but the quality conversation in those relationships.

What strategy do you use to reach 1,000 💌 newsletter subscribers?

When I started the “Build & Launch” newsletter, my goal was to document my process about building things and keep myself accountable.

I’ve been focusing on 3 things: Content, Context & Connection. Make your content valuable, helpful, and useful. Tell good stories about your visions and the work you do. 

Build conversations around your writing & thought-process. When something is good and it resonates with your audience, people will share your work. My main distribution platform is Twitter, Medium & Substack.

👉 Check out Personal FAQ Directory

Build Your Portfolio using this Notion template

Track & showcase all your work in 1 place

Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)

As a product builder↗️, I built micro tools to solve my own problems. For example: article tool, event app, meal box app, finance tracker, SaaS tracker, and habit tracker.

Last year, I created a Notion portfolio tracker to track all my work, so that I can easily share resources with others. I’ve also made a v2.0 which I’m going to share here, including a Notion template that you can copy.

1. Portfolio Tracker v2.0 ✨

In the Portfolio Tracker v1.0 that I made back in 2019, my goal was to: 

  • Keep track of my projects, blogs, books, highlights, & social links

  • Keep myself accountable by sharing what I'm working toward publicly (make sure you do the work, no excuse!)

  • Invite conversation through resource-sharing (network with like-minded entrepreneurs & founders)

Since then, I’ve received shout-outs from people who built their portfolio using my Notion template: FGC Leader, Alex Naka & Kauress.

As my work expands, it started to grow into a resource directory. It gets harder to fit into the v1.0. That’s when I decided to create this v2.0.

What’s new in v2.0?

  • Bio and profile photo

  • Table of content

  • Category by section

  • Book list in full display

  • Left-to-right reading experience

  • Selected milestones & interviews

👉 Access my Portfolio Tracker v2.0 template

2. Set up Notion 😎

Let’s start building your portfolio tracker. Go to Notion and sign up for a free account, then:

  • Add a new Page in Notion

  • Name your doc title “Portfolio Tracker”

  • Select the “Empty With Icon”, the 1st option

For a wider layout, turn on the “Full Width” view from the top right corner:

👉 Access my Portfolio Tracker v2.0 template

3. Bio & profile picture 🖋

I created a Bio section to include a profile photo and a quick intro about what I work on and what I do.

To do this, divide the empty doc into 3 horizontal sections. Adjust the section size. In each section, type a “/” to add these block components for different content formats:

  • Add Image (to upload a profile photo)

  • Add Text (to write a personal Bio)

  • Add Table of contents (to hyperlink each portfolio section)

👉 Access my Portfolio Tracker v2.0 template

4. Table of content 📚

On the right side of the horizontal section in Step 3, I created a table of content as quick navigation for these portfolio sections:

  • 🚀Launched (prototypes & tools I built)

  • ✍️Blog post (product building tutorials)

  • 📚Book list (list of books sort by category tags)

  • 🌟Highlights (selected milestones & interviews)

  • 💌Social (list of my social media links)

To add a Table of Content

  • Click the “+” sign (hover anywhere in the doc)

  • Search and add a “Table of Content”

  • You won’t see any quick links unless you add some text using Heading 1, 2 or 3 in the Notion doc, i.e.:

👉 Access my Portfolio Tracker v2.0 template

5. Create the portfolio section 🖼

Let’s build out each of the portfolio sections. The way I design and organize all the portfolio content is to split up a 2-column, left-to-right layout:

  • Section title & description (on the left)

  • Display of portfolio content list (on the right)

Create a section title: 🚀 Launched

  • Add a Divider to separate this section from Bio & profile

  • Add a title text “Launched” using Heading 1 (it will show up in Table of Content)

  • Add some text to describe this section

👉 Access my Portfolio Tracker v2.0 template

6. Display a list of portfolio content 💛

Continue from Step 5, we’re going to create a list of content right next to the section title. This is the place where you list out your project and work.

Add a “Gallery” to organize the content list

  • Click the “+” sign (hover anywhere in the doc)

  • Search and add a “Gallery — Inline”

  • Drag and move this Gallery right next to the “Launched” section

Customize Gallery content

In the “Launched” section, I wanted to record all the projects I’ve built. Each project entry should include a description, website link, and preview image. 

Open any empty Gallery page, click “+ Add a property” and add these Property type into each slot:

  • Add “Text” property → (Description) to write a project description

  • Add “URL” property → (Link) to link a website URL

  • Add “Files & media” property → (Image) to upload the preview image

👉 Access my Portfolio Tracker v2.0 template

7. Style the Gallery display ❤️

By default, the uploaded preview image, project title or description won’t show up in the Gallery unless you customize the display. 

Go to “” icon near the top right “New” button of the Gallery. Select “Properties” from the dropdown. Then, configure these settings accordingly:

  • Card preview: Image

  • Card size: Small

  • Toggle on for: “Name” “Description” “Link”

Tips: To build out the rest of your portfolio sections (i.e. Blog post, Book, Highlight, Social), duplicate the previous content or repeat Step 5, 6 and 7.

👉 Access my Portfolio Tracker v2.0 template

8. Publish & share your portfolio 👌

To make your Notion portfolio public, go the “Share” button setting at the top right corner:

  • Share to the web: turn on 

  • Search engine indexing: turn on

  • Copy link (use this link to share your portfolio with others)

Duplicate my portfolio tracker

Open my portfolio link and you’ll see the “Duplicate” link at the top right corner.

So… which version do you prefer? The v1.0 or Portfolio Tracker v2.0? 

[1] Find me on Personal Site / Twitter / LinkedIn 🔥

[2] In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌

[3] If you’re feeling generous today, you can buy me a coffee ☕

24 hours Startup: Build a Meal Kit Delivery Startup & Mobile App.

Build a startup using Stripe, Google Sheets, Glide & Carrd

Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)

As a product builder↗️, I built micro tools to solve my own problems. For example: article tool, event app, portfolio tracker, finance tracker, SaaS tracker, and habit tracker.

I recently built a meal kit delivery startup for my ongoing experiment with fast prototyping. I built both the startup page & mobile app MVP. Here’re my processes & templates to create the functional tech product in 1 day.

1. Getting it right 🙌

One way to “de-risk” new ventures is to test & validate the idea in the market before actually building it.

You don’t want to spend $ on engineering hires early on to build something for 6 months that no one is going to use. Therefore, a minimum viable product (MVP) is your good friend.

An MVP should be viable enough to build it and functional enough for people to use it.

What makes a functional MVP?

  • Functional. A live product with a few initial features that are working, solving problems, and testing for your problem hypothesis. It should be more than just a website.

  • Viable to build. Able to build it fast for idea validation purposes without requiring (insert X amount of angel investment).

  • Traction. Able to gain early users’ traction such as signup, download, checkout, and payment.

  • Testing & feedback. Able to collect data points and user feedbacks to conclude whether the idea will succeed.

2. Startup idea 🥗

As a starting point, I ideated the meal kit startup idea from Blue Apron and HelloFresh

Meal Kit Go is a meal kit delivery service for fitness meal cooking plans that deliver fresh ingredients based on customized meal preferences to your doorstep. 

The startup landing page is designed to test marketing messaging, explain the value proposition, and drive awareness for the mobile app where users can use the actual MVP (browse meals, customize order, checkout).

Try the live demo

Some key features for the MVP

  • List of curated meal recipes

  • Recipe descriptions (calories, fresh ingredients, instructions)

  • Pricing of meal kit subscription plans

  • Customize meal preferences

  • Add to cart & show product details

  • Order form with the delivery address

  • Customer payment via Stripe

3. Tools I used 🔨

There are existing tools that can help you to build a *working* product in hours — not months. Here’s what I used to build the meal kit startup:

Carrd

A simple, lightweight & fully responsive page builder. I use Carrd to build, design, and launch the startup landing page. For prototyping purposes, I love using it because you don’t need a custom domain to publish the site to live.

👉 Try the meal kit startup (1) website | (2) mobile app

Glide

A mobile app generator with app-like features. I use Glide to build the mobile app for the meal kit startup where it allows users to sign-in via Google, browse recipes, customize meal plans, and place orders.

Stripe

I integrate Stripe with the Glide app to handle customer checkout and payment processing. It also allows user to enter their home address so we can deliver the meal kit to their doorstep.

Google Sheets

I use Google Sheets to create the mobile app databases and store information such as user registration (i.e. email addresses) and app content (i.e. meal recipes, image assets, subscription pricing, product order details).

Airtable

A spreadsheet hybrid database creation tool. I use it to build the application form on the landing page to collect lead information (i.e. name, email, bio, phone number) and store them as lead database.

4. Building functional features 🚀

One way to think about the initial features for your startup MVP is to map out the user journey. You visualize the action steps that a user would take to accomplish a goal. For example:

Transform the user journey into functional features

Once I map out the user journey, I start to work on the app functionality, design, and marketing messaging for the startup MVP. Here’re some key user steps of the Meal Kit Go startup website and mobile app:

(1) A landing page with mobile responsive design

Build the landing page to include key messaging, explain the meal kit concept, and drive awareness for the mobile app MVP.

👉 Try the meal kit startup (1) website | (2) mobile app

(2) Explore recipes and save to favorite list

Users can browse a list of meal recipes, learn more about the recipes (calories, fresh ingredients & cooking instruction) and save to favorite list.

(3) Browse a selection of cooking plans

There’re 3 weekly subscription options. Users can order 2x, 3x or 5x recipes per week and get the meal kit delivered.

(4) Customize order & add to cart

Users can customize their meal preferences based on their fitness goals (bodybuilding, protein meals, weight loss, and smoothies pack). We will curate relevant recipes and customize the meal kit accordingly.

(5) Edit cart, checkout with Stripe

Users should be able to see their cart orders with product description details, checkout, enter their delivery address and pay.

👉 Try the meal kit startup (1) website | (2) mobile app

[1] Find me on Personal Site / Twitter / LinkedIn 🔥

[2] In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌

[3] Get the Carrd & Glide app template 🟥

In 3 hours: Build a Mobile App (nocode) using Google Sheet & Glide

Using spreadsheets to build an app for virtual events

Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)

As a product builder↗️, I built micro tools to solve my own problems. For example: article tool, portfolio tracker, SaaS tracker, habit tracker, and finance tracker

I’m a fan of spreadsheets when it comes to prototyping. Today, I’ll share how I built this mobile app without code with an app template you can use.

1. Ideation stage 💡

Let’s name this app —RemoteConfy. A mobile app for virtual event organizers to manage event info, details, ticket sales, FAQ & customer support.

Users can view event schedules, purchase online tickets and email the organizer.

To begin, I list down the parts I want to build:

  • Overview of event info & details

  • Ticket type, pricing & payment

  • Speakers lineup, profile photo & bio

  • Event schedule, session time and topic

  • List of FAQs

  • Contact customer support

2. Getting started ⚒️

Go to Glide and create a free account. Then, go to Google Sheet and create a new file “virtual event database”. Once you log in and authenticate both accounts:

  • Create a new app in Glide from Google Sheet

  • Select the new spreadsheet file (copy & use this barebone sample)

  • You’ll see the app UI with the output data linked with the spreadsheet

3. Configure your spreadsheet 📊

Glide app will turn your spreadsheet and output the data on mobile UI. In other words, you’ll need to create & update the spreadsheet to populate these data to configure your app.

If you don’t want to start from scratch, you can copy my spreadsheet.

Create new sheets in the same file. Each sheet contains a database (in bracket) we need for the event app:

  • About (featured image, event title, description, links)

  • Speaker (name, company, photo, bio, session topic)

  • Partner (company name, logo)

  • Schedule (session time, topic, speaker name)

  • Tickets (tickets type, price, details, checkout)

  • FAQ (list of questions and answers)

  • Input FAQ (user full name, email & question)

👉 Try the app template (on mobile/web) here

4. Create app pages📱

We’ll need to create 4 separate app pages: About, Schedule, Speaker and FAQ. Each page will link to the relevant sheets & data we created in Step 3. 

Make sure you refresh the database “Reload sheet” in Glide. This will re-sync Glide output with the spreadsheet data you’ve updated.

Add new tabs in Glide

  • Go to “Tabs” on the left sidebar in Glide

  • Add a new tab (or rename), i.e. “About”

  • Point the data “Source” to the “About” sheet

Repeat the above steps for other Tabs (i.e. Schedule, Speaker, FAQ). You’ll need to make sure each Tab points to the right data source in the spreadsheet. For example:

5. Display event details 📆

Let’s build the “About” page. You can include cover image, event title, description, and buttons. Start by clicking “Layout” on the left sidebar in Glide. Style the screen layout using “Details” mode, then:

Add new “Components +”

  • E.g.: Image, Title, Basic Text, Button, Separator, Title, Rich Text (and other elements you see fit)

  • Each component represents a design block that’s linked with data from “About” sheet 

Format each “Component”

  • Let’s format the main event title & description

  • Add a “Title” component from “+” 

  • Point the data source to a sheet column (“event_title_title” “event_title_sub”)

Partially list out speakers and let users click “Show all” in a separate list:

  • Add an “Inline List” component on About page

  • Point the data source to a sheet (“Speaker”)

  • Pull out other Speaker data (name, company, photo)

6. Purchase event tickets 🎟

Continue on the “About” page. Now we want to create a ticket purchase button that links to different ticket orders (General vs. Expert Admission).

Here’re the logical steps and app views when a user clicks on “ticket” button:

  • Sees 2 types of tickets (Select Tickets view)

  • Clicks on the 1st ticket option (General Admission view)

  • Sees a “Purchase ticket” button (General Admission view)

  • Sees an external payment page (ticket checkout)

Add ticket button

  • Add a “Button” component on About page

  • Edit the button “Features”, select “Action” (“Link to screen”)

  • Point the data source to a sheet (“Tickets”)

Show 2 types of the ticket where users can choose from and expand for tickets info & pricing.

  • Style the screen layout using “List” mode

  • Pull out all data source related to tickets info (type, price, details)

Link ticket purchase button using Gumroad as checkout. Make sure you’ve set up Gumroad with General & Expert tickets.

  • On “General Admission” app view, add a “Button” component from “+”

  • Edit the button “Features”, select “Action” (“Open link”)

  • Point the “Target” to “tickets checkout” that contains Gumroad link

You can also use Glide’s built-in checkout, Stripe or PayPal as an alternative.

👉 Try the app template (on mobile/web) here

7. Event schedule ⏰

The schedule page will list out the event agenda and topics. To build the Schedule view, point the data source to the “Schedule” sheet. Here’s how to customize the mobile UI on Glide:

Configure the “Schedule” tab

  • Style the screen layout using “List” mode

  • Pull out data you want to display (topic, time)

Each session will show presentation title, time and speaker. Add these components:

  • “Title” component to include topic title, time and image cover

  • “Rich Text” component and name “SPEAKER”

  • “List Relation” component to link existing speakers database (this won’t work until we do the next step)

“List Relation” to link both Session topics <> Speakers’ topics database

Each session topic corresponds to a speaker who is presenting the topic. You can create a Speakers database (name, bio, topic, headshot) and re-use this database in the Schedule database.

  • Go to “Data” icon on the left sidebar in Glide

  • Go to the “Schedule” tab in the database

  • Add Column+ from the top right corner, edit below settings

👉 Try the app template (on mobile/web) here

8. Email customer support 💁‍♂️

This section can include frequently asked questions such as ticket purchase, refund and so on. To build this page, you can point the data source to the “FAQ” sheet and style the display accordingly.

Users may want to ask additional questions that are not included in the FAQ. Therefore, we can create a contact form for this purpose.

  • Add a “Form Button” component on FAQ page

  • Edit the button “Features”, select “Action” (“Show form”)

  • Point the form button to a data source “Input: FAQ”

  • Create 3 form fields (full name, email & question)

Every time a user submits their questions, the input data will automatically update in this spreadsheet “Input: FAQ”. For example:

👉 Try the app template (on mobile/web) here

[1] Find me on Personal Site / Twitter / LinkedIn 🔥

[2] In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌

[3] If you’re feeling generous today, you can buy me a coffee ☕

Loading more posts…