How to create a IMDB clone in 30 mins

Creating an IMDB Clone with Bubble.io

In this Bubble tutorial video, I'm going to show you how you can create your very own IMDB clone, just like this. We're going to have repeating groups, we're going to be talking about database data types, we're going to be showing you how to link through from a repeating group like this, through to an individual page for a movie in this case, but this can be applied in all sorts of cases across MVPs and SaaS applications, how to filter content, we've got our own datatype called person and we're listing directors here so I can filter by different directors. So you ready? Hit like and subscribe. In this video, we're going to unpack all of this, let's get started.

Setting Up the Bubble App

So we start here with a fresh Bubble app and I'm just going to go ahead and skip the application assistance so that I start with a nice blank page. I'm going to start by putting some UI elements in there. So if I flick back onto IMDB, we've got a menu bar and we've got some movies.

Creating the Header

Let me add in a group, this is going to be our menu bar, going to be a row, make the width 100%. I'm also going to increase the width of the editor here. Yeah, right, if I go back to IMDB, we can see that the width is within a container. What I mean is that IMDB doesn't go right the way to the edges. Within this group, I need to place another group and this will also be of a row and I'll center this here. I'll center it. There's my group, my inner group. So I'll call this inner header and it needs to have a max width. So my max width will be, let's go with a fairly standard size like that.

Styling the Header

I'm going to make this... What color do we have here? Oh, it's like an off-grow. I like a really dark. Let's go something like that. Cool. And let's add in a logo. So I'll call this IMDB clone with Bubble. Need to make it white so we can see it. Let's go a fixed width, say something like that. Get rid of the min height, the zero. Now we can center it. This inner container, its height will be dictated by the outer group. So I make that width height 100%. So now the height is set by fit height content, but min height of 85. That's looking good.

Adding Header Links

My inner content, I'm going to set a space between. That shoots that over there. I'm then going to add in a group because that's going to be on my right, where we've got a couple of links. So I'll add those into here. I'm going to take a link element, make it bold, make it white. I'm going to save this as a preset, call it header link. That's a star preset. Oh, it's overwritten it. Right, there we go. Change that back. Now I'm not getting the options that I want in layout here. That's because the group it's contained in is fixed layout.

Avoiding Fixed Layouts

If you take anything from the opening few seconds of this video, fixed layouts, no, no, no. Fixed layouts cause headaches and frustrations and things not working how you expect. We want to use rows and columns. That's zero. Place it in the middle. What was that? Watch list and sign in. Let's just go with that for that. Watch list. The width on this, we want to make this fit to content and get rid of a min width. So it's snug. Going to copy and paste it. This will be sign in. We want a gap between them. I love using the apply gap spacing between elements. It helps everything be really uniform and neat. Let's put 20 in there.

Finalizing Header Layout

And then this also is not going to have a fixed width. It's going to have width like that. And then also its height is going to be 100%. Okay, and let's preview. Okay, you can see if I expand open, we've got our nice contained beginning of our IMDB client.

Introducing Planet No Code

Now before I go any further, if you are learning Bubble, whether you're a beginner or advanced, we've got hundreds of Bubble tutorial videos covering a whole wealth of topics, including the latest such as OpenAI, AI, image generation, all that sort of thing. You can find them exclusively on our website planetnodecode.com. There you can find videos that you cannot find on YouTube.

Creating the Body Container

Let's go back to the editor and I am now going to, I think in order for me to be able to fit something that has a good feature set in the time frame that I'm looking at, maybe around half now, I will just create a list of videos here. So first of all, I'm going to create a container for the body. Put that in the middle. Max width, 228. So let's just make this do 4. Okay, I'm also going to put in some padding on the side, on the right and the left. And I'm going to do the same here.

Designing for Responsiveness

Because I like to build with responsivity in mind, a responsive design is one where if the, in fact we can demo it here, we go into the Responsor tab. If the page width goes down, we still end up with something that looks good. Obviously, if we go to that part, that's more, it doesn't look good. We can put things in place for that. I probably have to swap to a mobile menu. But what I'm illustrating here is that we still have a nice 20 pixel gap down the side. We are not touching the edge of our page with our text, which tends to look quite, uh, unneat.

Setting Up Data Types

Um, right, uh, let's add in some data types. So what does i'm to be have? Well, i'm to be mainly has, um, well, they have movies and TV. I think for the sake of this, I'm just going to call it movies. Uh, and what does a movie have? Movie has a title, which is of type text. Uh, a movie will have a release date. It's going to be of type date. And obviously I've done a time scale into everything here. Uh, rating. Let's try and get a rating in place. Ah, so there, there isn't a field type for rating. It's going to be a number.

Creating Database Relationships

Uh, I can't do a list of numbers and then average because Bubble doesn't accept duplicates in a list. Uh, so I think I'll just leave as a number, keep it nice and simple. We have other videos covering using the star rating plugin, which will go into much more detail, have to do averages. But for now, uh, I'll just say, um, rating, uh, and, uh, let's do something that's going to establish database relationships. Let's have a, uh, let's have a person field because they could be a director, they could be an actor depending on the, the film that they're in. Uh, so we'll have a person and the person will have a name field, uh, and then movie will have a director field and that's going to be of type person.

Designing the Movie Layout

Now I could make this a list, it's going to make things a bit more complicated later on. That's not a problem if you need it. Right now, I'm just going to say a movie has got one director. I have to keep this simple. Um, right, let's start designing our layout of movies. So at the very least we want to have a list of movies. Um, so I'll say movie and data source is going to be do a search for movie and that's going to then return all of the data in the movie database in my Bubble app. Uh, that's because I've not got any privacy rules set up. Um, so all my data is public in the movie database and that's fine for what I'm doing here.

Setting Up the Repeating Group

Uh, I'm going to set the width to 100% so that it fills up my inner container here. We'll relabel this in a container. Uh, and I think we could probably have, uh, we don't need to fix some rows. Uh, columns, let's have two columns. Um, right. Oh, layout. Get rid of fixed. Right. So I'm going to add some movie details in to here. Oh, and there's one other thing that I want to add to movies. Movies need to have a poster and that's going to be a type image.

Adding Movie Details

Uh, right. So I'm putting a group. If I show you in my elementary into the first cell of my repeating group and that's how repeating groups work. The first cell acts as the template for all of the other cells, two, three, and four. Um, and I'm putting things in the group because I want to link the whole thing through to a page about that particular movie and rather than linking individual elements, I can link the whole thing by putting everything inside of a group. Uh, so in fact, I'm going to make this into a row. Uh, width again, 100%. Love making things 100%. Keeps things really simple.

Adding Movie Posters

Uh, I'm going to now add an image. Uh, the, I'm going to give this a fixed width of say, that's too small. There we go. Um, 100, 220. Uh, I'm going to round off the corners because I always think that looks quite good. Say eight. Um, at the moment I don't have any dynamic, uh, no, no, that's fine. Uh, right. How do I display the image from my movie database into here? Well, I do it using the, the dynamic image field. Um, my images here, my repeating group is here. This is everything in my current cell.

Displaying Dynamic Movie Data

Um, and so one way is to go about this is to pass data down. If you do this in a particular order, Bubble will automatically do this step for you, which is to say that this group is a movie and it's current cells movie. That then means when I go to image, I could either let me do carousel. No, it won't let me do carousel. Right. I have to refer to current groups movie and then I can say current moves, groups, movie poster. And because poster is an image type, I think I made it that. Yep. Poster is an image type Bubble accepts that. And that's why I've got blue text there because the type of data that I'm putting in and the type of data that Bubble is expecting match. If it didn't, it would be red.

Adding Alt Tags for SEO

Um, alt tags, very important for SEO. So let's put that in. Uh, so the current movie's title, uh, say parts to Caribbean. Uh, and I'd say parts to Caribbean poster. Okay. Perfectly good. Alt tag.

Adding Movie Details

Uh, right. Let's add in our title. So I'm going to have a right hand column and a left hand column. My left hand column is containing my poster and my right hand column is going to contain some facts about film. Uh, so this will be a column, uh, and I'm going to put in a nice bit of gap here. There we go. This will be the title. So to do this really quickly, I'm going to select one of the presets that Bubble gives us. Uh, and I'll say parent groups movie title. And then I'm going to make the width a hundred percent so that it always fits perfectly snugly into my right hand column.

Adding Director and Rating

I'm going to copy and paste this and then let's have a lower class header. Uh, and this will be current movies director. Remember director is a field that takes a person data type. And so now I get access to all of the person fields. So that gives me access to name. Uh, and then lastly, uh, I think to represent it, I'm going to add in a plugin and I'll add in a star rating plugin.

Configuring the Star Rating Plugin

Uh, here we go. Make that last. Uh, okay. The reason the star racing plugin isn't giving me so many options. In fact, I basically have to set a fixed width and a fixed height is because it hasn't been updated for what, uh, was called the new response engine, but it's been with us over a year. So just be aware that if you set up a plugin and you think, oh, the layout panel is missing some, some bits, it's because the plugin hasn't been updated, but we can work with this because I'll just go very small. That's still going to fit. How do I then set the content of the plugin? Well, I would say content of the, uh, star rating. I'd say parent groups movie rating. Now that's going to work assuming that my rating is a number between naught and five because I've elected to have five stars and I can have half steps as well. And then I'm going to disable the input. That just means that if someone puts their mouse over it, it doesn't look like it's ready to take a new entry. I'm simply displaying back a value between naught and five.

Adding Release Date

Uh, there was one other thing we can add in the release date. So the parent groups movie, uh, release date, and then I get the chance to format the date. Uh, there's a load of presets here and I will probably just go with that one. If you need it to be custom, you can go down to custom and let's make this with a hundred percent.

Adding Data to the Database

Right. Let's put some data in the database. Uh, but while I notice it, I'm going to make this look a little bit better by putting a padding. Okay. Um, yeah, let's preview it. See what we got. We should have nothing because there is nothing in our database. Um, so we can add in a form for users to submit content. Uh, but in order to keep this video a bit brief, I'm going to show you how you do it through the Bubble editor. Um, so we can go into app data and we can add a, a movie.

Adding a Movie to the Database

Uh, I'm going to go with, uh, let's just say, uh, Batman. Uh, let me look that up. Go onto the real IMDB. I'm actually thinking of the Christopher Nolan one. Um, so that would be, is the release date. Should have checked. Might as well be printed before. Um, it's 2005. Uh, so I'll pick a random date in 2005. Um, maybe, uh, if someone knows the exact release date of Batman Begins, uh, you can put it down in the comments. Um, cool. Uh, right. Direct will come back to poster. Let me go back. Well, let me add it to the database first and then I'm going to go back. Uh, and download the poster. I'm going to be something. Let me get away with that. In that case, I'll take a screenshot. Just save this really quick. And then, uh, I'm going to upload the posters. I'll go edit and I click upload and that's going to bring up the file browser on my computer. And I'll also add in a rating. Let's say Derek. Let's go 4.5.

Adding a Director to the Database

And now I want to add in a director. So to do that, I have to add a person. Um, I'm probably going to butcher the spelling. Christopher Nolan, uh, create. And now I want to add Christopher Nolan to this field. If I just start