In our previous blog article, we talked about how beneficial an IMDB-like web app would be. Considering how useful directories are in the digital world, it makes perfect sense why more entrepreneurs are investing in systems and programs that make it easy to expand your network.
And since what we’re trying to clone in this context is IMDB, we’re going to move forward with how we can successfully build an app similar to the film directory hub but without code.
In our first tutorial, we covered establishing your database, adding content to the platform, and previewing dynamic content. For the remainder of this particular topic, we’re talking about how to send data between pages, how to display content on the preview page, how to search for content, and how to display user-generated content.
Let’s start!
Sending data between pages
Similar to IMDB, the homepage we’ve developed only displays a preview of every media content we’ve uploaded. That means users will have to click a certain film to see more information. To make this possible, this particular data should come from your web app’s film page.
In the repeating group, you can build events reliant on the actions that are triggered in every row. This feature comes in handy when establishing your app’s navigational features.
To lead a user to a particular film page from the homepage, you’ll have to develop a workflow that a user can trigger when they click on the image.
In this context, you’ll choose “go to a page.”
Moving forward, you’ll have to supplement more data on the page to let Bubble know which media content to preview. To do this, choose “current cell’s film” to successfully display this.
Displaying content on the preview page
when the film page receives the data, you can seamlessly source the appropriate data and display only what’s relevant for the occasion.
Make sure that the data property matches the destination page to make sure the workflow is functional. Here, configure “film property” from the film page.
By determining the page’s content type, Bubble can conveniently send and source data from established sources.
When this is done, you can begin supplementing dynamic content into the fields that allow users to preview content. Simply pull this data from the current page’s film.
How to search for content
Staying faithful to the true IMDB fashion, users should be able to look for a specific film when they use the search bar. The search bar feature is an important aspect of your app to make easy the process of being able to find content based on their title.
When you’ve included the search bar in your IMDB clone, set the “film data type” as the data source, together with the title data field. Doing so ensures that your database entries are indexed and even provides search recommendations as a user is typing the title of the content.
Moving forward, you can lead a user to the appropriate film page when you develop the appropriate navigational workflow.
Begin by building a new event that a user can trigger when an element value is altered. In this context, the search bar is the element we’ll be working on.
From there, build a navigation event that allows you to establish your film page as the destination page.
Making and previewing reviews from users
The last feature we’ll want to include in our IMDB clone is the ability for users to leave comments and reviews for media content.
Begin by doing so when you supplement the appropriate input fields under the film page’s content.
Nearly done, a user will trigger this workflow when the “submit button” is clicked.
Similar to how the film page was created, the workflow for building and displaying reviews follows the same process. Only here, we’ll have to develop a “write a new review” option for the current page’s film.
Choose “create a new thing” then arrange the input fields according to your data fields.
When a review is done, we’ll optimize the repeating group element for every entry to display the review.
Here, the “current page’s film’s user reviews” will be the repeating group’s data source.
And similar to earlier processes, we’ll arrange the repeating group’s top cell to give a preview of the appropriate content. This includes the star rating, content, and user’s profile photo.
And just like that, we’ve built an IMDB clone without ever having to code!
With Bubble, anyone can develop apps in no time! Again, whether you want to build a movie directory or simply want to copy the process of developing a directory, Bubble is the perfect no-code provider to help you actualize your business app goals.
Do you have web apps you’d like to build? We’re the agency to partner with!
Give us a call, and we’ll help you out!
(Source and screenshots from https://bubble.io/blog/build-shopify-clone-no-code/)
