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 data type 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.

So we start here with a fresh Bubble app and I'm just going to go ahead and skip the application assistant 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.

Designing a header navigation bar

So let me add in a group. This is going our menu bar, gonna be a row, make the width 100%. I'm also going to increase the width of the editor here. Yep. 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. So 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 would be, let's go with a fairly standard size like that. I'm going to make this... what color do we have here? Oh, it's like an off-grower, like a really dark... just go something like that. Cool. And let's add in a logo. So I'll call this "IMDB Clone with Bubble". I need to make it white so we can see it. Let's get a fixed width, say something like that. Get rid of the min height, the zero. Now we can center it.

Inner container

This inner container, its height will be dictated by the outer group, so make that with height 100%. So now the height is set by fit height content but min height of 85. That's looking good. 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' as a style preset. Oh, it's overwritten it, right, there we go, change that back. Now I'm not getting the options that I want to layout here that's because the group it's contained in is fixed layout. If you take anything from the opening few seconds of this video fixed layout no no no fixed layouts cause headaches and frustrations and things not working how you expect we want to use rows and columns. zero, place it in the middle. What was there? Watchlist and sign in. Let's just go with that for the app watch. Watchlist. The width on this, we want to make this fit to content and get rid of a min-width so that it's snug. I'm 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. 20 in there 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, let's preview. Okay you can see if I expand open we've got our nice contained beginning of our IMDb clone.

How to learn Bubble.io

Now before I go any further if you're 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, planetnocode.com. There you can find videos that you cannot find on YouTube.

Responsive web design

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 an hour, I will just create a list of videos here. So 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 224. 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. Because I like to build with responsivity in mind, a responsive design is one where if the fact we can demo here we go into the responsive 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 unneat.

Creating a new data type for Movies

Right, let's add in some data types. So what does I'm to be have? Well, I'm to be mainly has...well they have movies and TV. I think for the sake of this I'm just going to call it movies. And what does a movie have? Movie has a title which is of type text. A movie will have a release date. It's going to be of type date. And obviously I've done a types go into everything here. 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. I can't do a list of numbers and then an average because Bubble doesn't accept duplicates in a list. So I think I'll just say there's a number keep it nice and simple. We have other videos covering using the star rating plugin which will go into much more detail of how to do averages but for now I'll just say rating and let's do something that's going to establish database relationships. Let's have a person field because they could be a director, they could be an actor depending on the film that they're in. So we'll have a person and the person will have a name field and then movie will have a director field and that's going be of type Person. 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. Right, let's start designing our layout of movies. So at the very least we want to have a list of movies.

Repeating group of Movies

So I'll say movie and data source is going to be 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. That's because I've not got any privacy rules set up. So all my data is public in the movie database, and that's fine for what I'm doing here. I'm going to set the width to 100% so that it fills up my inner container here. I'm going Relabel this in a container and I think we could probably have... we don't need a fixed number of rows. Columns, let's have two columns. 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. 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. And I'm putting things in the group because I 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. So, in fact, I'm going to make this into a row. Width, again, 100%. Love making things 100%. Keeps things really simple. I'm going to now add in an image. I'm going to give this a fixed width of, say, that's too small. There we go. 220. I'm going to round off the corners because I always think that looks quite good. Say 8. At the moment I don't have any dynamic... No, no, that's fine. Right, how do I display the image from my movie database into here. Well, I do it using the dynamic image field. My image is here, my repeating group is here, this is everything in my current cell. And so one way 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 sales movie. That then means when I go to image, I could either... Did it let me do current sale? No, it won't let me do current sale.

Right, I have to refer to current groups movie and then I can say current 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. Alt tags, very important for SEO, so let's put that in. So the current movie's title, and I'd say Pirates of the Caribbean and I'd say Pirates of the Caribbean poster. Okay, perfectly good alt tag.

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 the film. So, this will be a column and I'm going to put in a nice bit of gap here. This will be the title. So to do this really quickly I'm going to select one of the presets that Bubble gives us and I'll say Parent Groups Movie Title and then I'm going to make the width 100% so that it always fits perfectly snugly into my right hand column. I'm going to copy and paste this and then let's have a lower class header and this will be CurrentMoviesDirector. 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. And then lastly, I think to represent it, I'm going to add in a plugin and I'll add in a star rating plugin. Here we go. Make that last.

Star rating plugin

Okay, the reason the star rating plugin isn't giving me so many options, in fact, I basically have to set a fixed width width and fixed height is because it hasn't been updated for what 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 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 star I'd say parent group's movie rating. Now that's going to work assuming that my rating is a number between 0 and 5 because I've elected to have 5 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 0 and 5. There's one other thing we can add in the release date. So the parent group's movie release date and then I get the chance to format the date. 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. Then let's make this width 100%. Right, let's put some data in the database but while I notice it I'm gonna make this look a little bit better by putting a padding. Okay yeah let's preview it see what we've got we should have nothing because there is nothing in our database. So we can add in a form for users to submit content but in order to keep this video a bit I'm going to show you how you do it through the Bubble Editor.

Adding database entries in the Bubble editor

So we can go into AppData and we can add in a movie. I'm going to go with, let's just say, Batman. Let me look that up. Go onto the real IMDb. I'm actually thinking of the Christopher Nolan one. So that would be the release date. Should have checked where this should be printed before. It's 2005. So I'll pick a random date in 2005. Maybe if someone knows the exact release date of Batman Begins, you can put it down in the comments. 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 and download the poster. Ah, I'm going to be able to let me get away with that. In that case, I'll take a screenshot. Just save this really quick. And then I'm going to upload the poster. So 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, it's very good. Let's go 4.5. And now I want to add in a director. So to do that, I have to add a person. I'm probably going to butcher the spelling. Christopher Nolan. Create. And now I want to add Christopher Nolan to this field. If I just start typing in Christopher Nolan, nothing comes up. That's because everything in the Bubble database has a unique ID, which is shown here. This is the unique ID for the Batman film. But I want to be able to make more human associations between them, so I can use primary fields. And simply I can say that the person should be represented by the name, and in fact I can do movie here and say that it is by title. That now means that if I go back onto the director field here and start searching, I can choose Christopher Nolan because I've said how a person should be represented to me in the Bubble Editor when I'm modifying bits of the database. This makes no difference to how it's displayed to my users, I have to set that up myself, it saves me a little bit of time and frustration.

And I've not even had to refresh the page. Bubble only requires you to refresh the page if you change the elements on it, or plugins, or settings, that sort of thing. Changes to the database tend to come through immediately. If they don't, you can refresh the page. But anyway, we are seeing our first film in our IMDb clone that we're making with Bubble. I think we should add in another few films.

I'm going to skip ahead, see you in a moment. Okay, I've added two more films.

So that I can show you some ways we can filter and manipulate the data, I've added another Chris Nolan's, Tenant, and I've also added Barbie by Greta Gerwig. And I'm going to just increase the... just improve how the repeating group looks.

Improving the design of a repeating group

So, first of all, I'm going to get rid of the border around the outside. I think this is an annoying default that Bubble have added in, to be honest. I'm then going to make sure that there's always space between every film that's listed and one way of doing that is to use the separator. So I want to say, let's have 40 pixels space and you'll notice that the separator has a colour and now we've got this kind of bluish-grey line in between. Very easy to get rid of that, you just set the opacity to zero. And if I refresh... Okay, already looking better. We're going a little bit outside of how our IMDB lays things out, but I think I can illustrate some helpful things to you with Lert, which is I'm going to basically create a card for each film. So, I'm adding in some padding to the group that contains all of the details about the film. I'm going to give it a background color of white and I'm gonna make a little bit of border radius and then I'm gonna change the background color of the page to an off-gray just to highlight what I've done. Okay, it's coming together. it is not looking too bad. Now, what about filtering it? I've now got a range of data, I've got a range of dates, and I've got a range of directors. So let me show you a couple of ways that we can filter it.

Sorting a repeating group

Well, if you want to set a default, you know, give your users a particular look and a particular arrangement, we can go onto the search for movies and we could now say release date. And if I put it in descending yes and refresh we'll find that Barbie should be at the top because Barbie is the most recent film. One other trick that you might find useful if you're working with anything remotely like IMDb or like an app that is displaying data, hang on that's most apps, let me add in a drop-down and I will say 'filter by director' and so my directors are a dynamic choice because they're a list of people in my database and so I get that list of people by not using an option set, do a search for 'person', I then sort them by name and how do I want them displayed in my drop-down? Well, a little bit like primary fields, I pick a field, so this would be name, that makes the most sense. I'm going to move this up here and then give it, let's go for like a 32 off the bottom.

How to filter a repeating group with a dropdown

That's going to give me a drop-down with a list of people in my database. How do I filter my movies by that? Well, I can say director equals drop-down filter by... I'll type it there. Directory... too much thinking about software and not enough thinking about movies. Search for movies. I have that and I need to check this box here, ignore empty constraints, and that's because at the moment I think if I go and I refresh, I'm not going to have any results. That's because there is no result in, there is no data in the Director Picker, and so the constraint is returning no results. But Bubble has got this really handy feature, which is Ignore Empty Constraints. So now if I refresh it, and my dropdown is empty, I see all of my results. But if I was to go at Christopher Nolan, I'm only going to see the Christopher Nolan films. If I go Greta Goertwerk, then I'm only going to get Greta's films. Okay? Right, how are we doing for time? I'm going to show you a few more things about this IMDb clone with bubble. We're going to link through to a page all about the film.

Creating a page to show single movie

So I'll add in a new page. In fact, I'm going to duplicate this current page because much of the styling is going to be the same. So So clone from this page and then I shall call this movie. Now I'm going to go on a bit of a deleting spree. Here we go. Add in the title. So I'll make this H1 with 100%. So I'm setting up this page to be a template which any single movie data can be displayed into. Min height, let's get that back to zero. How do I do that? Well, I give the page a type of content of movie. In fact, I could even add a backup field in the URL so that the movie title appears in the URL. That's good for SEO. You can also manually set the slug, which is the end bit of the URL, like the final directory, when you create an item. But I'll just use the backup for now. And then, I basically, for convenience, I'm going to say that my type of content is movie, and that it's the current page's movie. And then now for text, I could either say current page's movie, or I could say parent group's movie. It doesn't matter. But I'm just going to go with current group's movie for convenience.

Let's hop back into index. Now I could probably just copy these, so I've used Shift to highlight more than one while clicking. I'm going to go back onto Movie, click here, paste. Haha, it's not like that. Right, I actually used the Element Tree to drop them in. Let's put the release date up top this time. Because I've gone from a repeating group cell displaying a movie to a group that also has a movie, Bubblers actually match things up automatically for me. Yeah, parent groups movie. That's not changed. The initial content fields haven't changed, or the default content that I've displayed here. Now, if I click preview, something interesting will happen, which is I get Lorem Ipsen. I've just recorded a video about Lorem Ipsen, but I'm going to give the same explanation here, which is this is dummy content.

What is Lorem Ipsum?

In fact, if I bring up the URL, we have "lorem ipsum" there. And that's because since I changed this page type of content to movie, Bubble knows that this page will display a movie. But while I'm in the editor and when I click preview, how does it know which movie to display? It doesn't. So it does its best to put placeholders and dummy text in there. This is how I would prefer to test it. I'm going to go back to my repeating Group on Index and I'm going to add in a Workflow. And this will be "go to page", "movie", and then the data to send is "current sales movie". If I just remove that for a moment, you'll notice I now have an issue. That's because when you set a page's type of content to a data type, so Bubble expects it to receive an entry from the database when you arrive on that page, it's going to make the field mandatory or required. I see a lot of people getting a little bit confused with type of content. Basically, unless you are displaying mainly a single entry from your database, you don't need to set type of content. For example, a settings page, you wouldn't need to set that as type of content user unless you wanted to be able to view other users' settings. If you just want to show current user settings, you don't need to set the page up to display more than, you know, to kind of be copying and pasting across more than one user. Anyway, that's a poor explanation.

Check out my other videos on those subjects. But this would allow me to go preview. And then if I click on Barbie, I go through to the Barbie page. We're missing the logo, we're missing not the logo, we're missing the poster. So, let's add an image. I'm going to display the image on the left-hand side, just like on IMDb.

So, I'm going to group these into a column, change the layout here into a row, move my image to the left, Put a bit of padding and set the dynamic image to current movies, poster. A little bit of border radius. Right, refresh that. So, now that I'm actually on the Barbie page, this is how I prefer to test pages with type of content, which is that I can make an update in the editor and then I refresh a page that has actually got an entry in my database ready to appear. So I've hit the 30 minute mark. Yeah, this is my 30 minute take on how you can build an IMDB clone in Bubble.

Summary

We've covered repeating groups, we've covered basic layout, we've covered how to go from from a repeating group to a single page. We've covered a little bit of styles and we've done a tiny bit of workflows, how to navigate from one page to another. If you'd like to see me expand upon this demo, please leave a comment below because I can always come back and pick up this app again and add new features. We really do read every comment and we try and respond and be as helpful as possible to each one. And remember, if you're serious about learning Bubble, you can head over to our website, where you'll find hundreds of Bubble tutorial videos just like this one to help accelerate your Bubble development journey and hopefully save you time and money. Bye.