The Movie DB No-code with Webflow and Wized | Part 1

Project Overview

The first part of the project “The Movie DB  No-code” aims to recreate the Popular Movies page using Webflow and Wized. TMDB is a comprehensive database containing ratings and details for all films.

Project Architecture

Let's begin with the project's architecture. This is a crucial step taken at the project's outset to align with the client. It can be likened to the blueprint of a house created by an architect. This allows us to see how all parts of the project communicate and identify potential issues before commencing development, creating the roadmap, sprints, and tasks.

The schema includes:

• General architecture, macro-architecture
• Database schema to visualize relationships between various entities

As you can see in the schema, I used:

• Webflow: for creating web interfaces
• Wized: for developing the entire front-end logic and retrieving data from the server through APIs
• For the back-end, I decided to use The Movie DB server, which exposes various APIs. You can find the complete list in their documentation. The current database schema consists of two entities: movies and categories. Since these entities have a many-to-many relationship, I created a third table to manage these relationships.

Optionally, if not already done by the designer, user flows are created to understand how the site should behave with various user interactions. Once the project is clear, detailed tasks can be created to expedite development.

Setup

To start development, create a project on Webflow, Wized, and register an account on TMDB's website to obtain the token required for executing calls to the TMDB server.

For the Wized project, I am using version NEXT, which utilizes embed 2.0—the latest version that will soon replace embed V1. I recommend using this version as well. The main difference between the two versions is that version 2 is more low-code, requiring JavaScript for many operations. In another article, I will explain the differences in more detail and why I believe this was the best decision.

Once the project is created, it can be linked to the Webflow project using the snippet to be inserted into the site's header.

Movie List

The first functionality to create is the movie list because it is the primary function of the project. Without it, the project cannot be used. Other functionalities are considered “secondary” as they serve to enhance the user experience but are not fundamental for operation. This is an essential task when building your MVP—recognizing functionalities and prioritizing them to enter the market quickly and begin validating your idea, rather than waiting for the entire project to be completed.

Firstly, we create the server call to retrieve the movie list to verify that the connection to the server works.

In the result section, we see the array with the movies; the connection is successful.

Inside the data store, variables are created to reuse information across various parts of the project. For now, I have created:

• Token: containing the token generated by TMDB
• Movies: to save the array with all the films that the "get_popular_movies" request returns. It is essential to save it in an external variable so that if we need to change the request in the future, we can replace only that point, and it will work as before if the response structure is the same.
• MoviesIterator: for rendering the list
• Image_baseUrl: Since the base URL for saving the image is always the same, I save it in a variable. It can be found in the TMDB documentation, and if we want different resolutions, we need to create different variables by changing the final part. In this case, I will always use the same resolution, so one variable is sufficient.

With the ^get_movies action, I activate the request created earlier when the page loads, and it automatically assigns the value of movies to the variable.

Then we can create elements on Webflow and convert some elements into Wized elements using the new Wized app.

Next, we create the action on Wized to render the movies into the elements we created earlier on Webflow.

Optimizations with ^wized-cloak

Before concluding, it is important to set up ^wized-cloak to prevent content flashing. The strategy is to override styles selecting the ^wized-cloak attribute.

Important: In my case, I write this in the global custom code. This way, it will be applied only on the live site, not in the designer. If we want to see the style in the designer as well, we need to write it inside an embed element.

In my case, I hide it with ^{display: none} and when Wized is loaded and the ^{get_popular_movies} call is executed, it will remove all ^wized-cloak attributes to restore the default styles we set on Webflow.

Next Steps

In the next part, we will complete the filter and load more functionalities.

If you don't want to miss the next article and other content on Webflow and Wized, you can subscribe below—no spam, and you can unsubscribe anytime :)

If, on the other hand, you want to convert your design or need to scale your Webflow project—for example, if you're reaching the limit of the Webflow CMS or need to synchronize with other platforms— take a look at NOCODEPRO AGENCY.