Lazycoders.tech - we do the best no-code apps

Implementing no-code solutions into real world - Webflow, Airtable, Zapier ๐Ÿ”ฅ

case study

How to build an online movie course platform with Webflow, Airtable and Mongo

In this case study I am going to show you how to build a movie platform using Webflow, Airtable and Mongo.

How to build an online movie course platform with Webflow, Airtable and Mongo

In the last post we wrote about an HR marketplace and how we use Airtable and Webflow to work together without using CMS collections.

This time we're going to show you a video platform that allows users to register, watch free movies and then subscribe to a paid plan to have full access to premium videos and courses.

Platform goals and approaches

The goal is to create a MVP application that allows users to:

  • See a pretty-looking, converting landing page,
  • Register a new account
  • Log-in to their account,
  • Watch free videos after they are logged-in,
  • Subscribe to a paid plan to see premium videos,

As it is MVP and we don't know customer's behaviors we also need to track users, their behavior and how they use the platform.

Tools that we use

Webflow

  • Webflow as always! After our UX/UI designers finish the design, we are happy to use Webflow as it allows us to build a frontend quick. It also allows our client to edit text on their website.

Auth0

  • For customers sign-up, authentication and role management we are happy to use Auth0 as it's trusted by us and it can be quickly delivered to our customers,

Airtable

  • For a list of platform video categories we want to use Airtable as it allows our client to manage categories i.e. add a new category or edit the existing one,
  • Videos will be stored in Airtable as well as Categories. We want our client to manage on their own,

Sendermail

  • Transactional e-mails (welcome e-mail, reset password, thank you for subscribing the premium plan) will be supported using Mailersend platform

How about Zapier?

Zapier is a great tool to automate processes - that's for sure.

However, there are reasons why we sometimes don't use Zapier:

  • If we want to build Webhooks that should return a response and status,
  • If we're expecting a lot of triggers per day,
  • If we need to build more sophisticated logic,

How do we solve this? By using either n8n or pipedream.com.

  • Pipedream is a low-code platform that helps us to create great webhooks that send a response back,
  • N8N is a great open source solution that can be hosted on our servers and allows us to create unlimited and complicated workflows without paying for them. It also allows us to create Webhooks with back responses & statuses,

Tracking and measuring actions/conversions of the logged user

As mentioned above, we need to know what has been done by the logged user. A list of things that we want to store:

  • How many times the user used the application in the last 7 days,
  • What categories of videos are their best,
  • What kind of movies do they like,
  • What video has been watched more than once,
  • What video has been stopped and has not been finished by the user,

How to store those kind of data? We may use Google Analytics to create & track general goals, but those data would be anonymous.

We decided to create a dedicated Webhook (using N8N workflow) and we each time the user does any interesting action from the list above, we simply send a request to the N8N Webhook. The webhook stores the data in Mongo database and associate the action with the user.

A key is to connect external data sources to Webflow

If you haven't read our article about How do I connect Webflow and external databases (MySQL, Airtable, Redis) please do it ASAP ๐Ÿ˜Š

How to connect Webflow and databases

For us, Webflow is a game changer. It allows rapidly create professional landing pages, static websites, etc. However If you want to build a professional platform, you probably need a database and it's definitely not CMS Collections.

Webflow is a place to: 1) build HTML pages, 2) allows our client to manage his project and text on the website, And that's all. We don't expect anything more from Webflow. No databases, no data storage, file storage, etc.

Diagram of how Menta works

We have written a gateway that takes HTML pages from Webflow (+stores them locally), loads data from databases and then returns a response to the customer.

That allows us to create professional platforms by connecting to external databases like Mongo, MySQL, Google Cloud etc. How do we do that? Check here

Google Functions to display recommendations

If we have information about what users have seen in the platform if they watched video = X, why can't we do recommendations service? It's pretty straight-forward if we simply calculate number of views of videos by those customers, isn't it?

We will describe it more deeply in the next weeks!

My name is Mateusz and I'm from Poland.

I have developed many applications, as an IT consultant (Solution Architect, Team Leader or Senior developer), starting from small e-commerce applications build on top of PHP to bigger government-related applications (Java & PHP). I always try to deliver best approach, that can be scaled.

This blog not about hard-coding. This is about a new way, called no-code. I am here to show you how no-code can be used to build scalable, fast & reliable applications from scratch. This is the journey to show, that more than 80% MVPs should not take more than 4 weeks to get done!

Feel free to contact me if you have any question. I hope, that we will be able to meet in person one day and talk one day! ;-)