1 00:00:01,000 --> 00:00:04,000 Now to fill it all with some life, 2 00:00:04,000 --> 00:00:05,000 we need some data. 3 00:00:05,000 --> 00:00:08,000 We need some dummy events. 4 00:00:08,000 --> 00:00:10,000 Now later in this course, 5 00:00:10,000 --> 00:00:14,000 we will learn how we can fetch data from a database 6 00:00:14,000 --> 00:00:16,000 or from the file system. 7 00:00:16,000 --> 00:00:18,000 But we haven't learned about this yet. 8 00:00:18,000 --> 00:00:20,000 And therefore, for the moment, 9 00:00:20,000 --> 00:00:25,000 we'll just use a dummy JavaScript array as a data source 10 00:00:25,000 --> 00:00:29,000 but again, that will of course change throughout the course. 11 00:00:29,000 --> 00:00:31,000 Nonetheless, for the moment attached, 12 00:00:31,000 --> 00:00:36,000 you find a dummy-data JS file attached to this lecture, 13 00:00:36,000 --> 00:00:38,000 and you can download this file 14 00:00:38,000 --> 00:00:41,000 and add it to your root project folder. 15 00:00:41,000 --> 00:00:46,000 So here, I added dummy-data JS to my project, 16 00:00:46,000 --> 00:00:48,000 next to the package.json file. 17 00:00:48,000 --> 00:00:52,000 And this is a file with an array of dummy data, 18 00:00:52,000 --> 00:00:54,000 which I prepared for you, 19 00:00:54,000 --> 00:00:59,000 and with some functions that allow us to query that data. 20 00:00:59,000 --> 00:01:04,000 And I'll dive into those functions once we start using them. 21 00:01:04,000 --> 00:01:06,000 Now, in that dummy data JS file, 22 00:01:06,000 --> 00:01:11,000 this dummy data which is set up there also uses some images. 23 00:01:11,000 --> 00:01:15,000 It also needs some images to be part of the project 24 00:01:15,000 --> 00:01:19,000 to then later correctly display our events. 25 00:01:19,000 --> 00:01:22,000 And therefore, you also need to add a couple of images 26 00:01:22,000 --> 00:01:23,000 to your project. 27 00:01:23,000 --> 00:01:26,000 Now for that you can use any images you want. 28 00:01:26,000 --> 00:01:30,000 Just make sure that you do store them in the same folder 29 00:01:30,000 --> 00:01:32,000 I will store them in in a second, 30 00:01:32,000 --> 00:01:34,000 and that you give them the same name. 31 00:01:34,000 --> 00:01:36,000 But you can then use any images you want. 32 00:01:36,000 --> 00:01:39,000 A great source if you don't know where to get images from 33 00:01:39,000 --> 00:01:41,000 is unsplash.com. 34 00:01:41,000 --> 00:01:43,000 There you can get free images, 35 00:01:43,000 --> 00:01:47,000 and that is where I will collect a couple of images. 36 00:01:47,000 --> 00:01:50,000 For example, if you search for programming, 37 00:01:50,000 --> 00:01:53,000 I'll use this image from James Harrison. 38 00:01:53,000 --> 00:01:56,000 And in my project in the public folder now, 39 00:01:56,000 --> 00:01:59,000 I'll add an images sub folder 40 00:01:59,000 --> 00:02:02,000 and download and store the image in there, 41 00:02:02,000 --> 00:02:06,000 this coding event JPG file now. 42 00:02:06,000 --> 00:02:11,000 and make sure you name your file also coding-event. 43 00:02:11,000 --> 00:02:14,000 So download any image you want maybe also this one, 44 00:02:14,000 --> 00:02:17,000 but named coding-event and store it in the images folder 45 00:02:17,000 --> 00:02:20,000 or if you named it differently 46 00:02:20,000 --> 00:02:23,000 or have a different extension, go to the dummy data JS file, 47 00:02:23,000 --> 00:02:27,000 and adjust this image path appropriately, 48 00:02:27,000 --> 00:02:29,000 so the image name and the extension. 49 00:02:30,000 --> 00:02:33,000 And with that I'll collect two more images 50 00:02:33,000 --> 00:02:35,000 for my other two pieces of dummy data. 51 00:02:35,000 --> 00:02:38,000 For the next one, I'll search for introvert 52 00:02:38,000 --> 00:02:40,000 because the next event is about introverts, 53 00:02:40,000 --> 00:02:44,000 just so that you don't have a strange impression of me. 54 00:02:44,000 --> 00:02:48,000 And here I'll pick this image from Ahmed Nishaath, 55 00:02:48,000 --> 00:02:51,000 and you can download this one as well 56 00:02:51,000 --> 00:02:55,000 and store this in the images folder. 57 00:02:55,000 --> 00:03:00,000 In my case, under a name of introvert-event.jpg 58 00:03:00,000 --> 00:03:01,000 again, if you have a different name 59 00:03:01,000 --> 00:03:05,000 adjusted in the dummy data JS file appropriately. 60 00:03:05,000 --> 00:03:06,000 And last but not least, 61 00:03:06,000 --> 00:03:10,000 you can search for networking on Unsplash 62 00:03:10,000 --> 00:03:14,000 and then you might also find the same image I'm using here. 63 00:03:14,000 --> 00:03:17,000 This image here about a networking event as it seems, 64 00:03:17,000 --> 00:03:21,000 which I now all the downloaded and stored here 65 00:03:21,000 --> 00:03:24,000 but again, you can of course use any images you want. 66 00:03:24,000 --> 00:03:26,000 So now we got the dummy data, 67 00:03:26,000 --> 00:03:28,000 and we get the images set up. 68 00:03:28,000 --> 00:03:31,000 And it's important that the images 69 00:03:31,000 --> 00:03:33,000 are stored in the public folder. 70 00:03:33,000 --> 00:03:36,000 It doesn't have to be a folder named images then. 71 00:03:36,000 --> 00:03:40,000 It can be any folder or directly in the public folder, 72 00:03:40,000 --> 00:03:42,000 but you should store them in the public folder 73 00:03:42,000 --> 00:03:46,000 because the public folder also is a special folder 74 00:03:46,000 --> 00:03:49,000 in next JS projects. 75 00:03:49,000 --> 00:03:51,000 Whatever is stored in there, 76 00:03:51,000 --> 00:03:54,000 typically images or funds or something like this 77 00:03:54,000 --> 00:03:58,000 is then served statically by next JS, 78 00:03:58,000 --> 00:04:03,000 which means you can reference it in your CSS code 79 00:04:03,000 --> 00:04:04,000 or in your HTML code. 80 00:04:04,000 --> 00:04:07,000 You can easily include images stored in the public folder, 81 00:04:07,000 --> 00:04:12,000 because next JS will make sure to serve any contents 82 00:04:12,000 --> 00:04:14,000 that's stored in the public folder 83 00:04:14,000 --> 00:04:18,000 as part of your overall application. 84 00:04:18,000 --> 00:04:21,000 So it will statically serve any content in there. 85 00:04:21,000 --> 00:04:23,000 It makes the content in there available 86 00:04:23,000 --> 00:04:25,000 to the visitors of your website. 87 00:04:25,000 --> 00:04:29,000 And therefore you can easily then embed public content 88 00:04:29,000 --> 00:04:32,000 in your HTML code and so on. 89 00:04:32,000 --> 00:04:35,000 And we will utilize that fraud in this course. 90 00:04:35,000 --> 00:04:38,000 Therefore, now we got the images 91 00:04:38,000 --> 00:04:39,000 and the dummy data in place. 92 00:04:39,000 --> 00:04:42,000 Let's now start working on those page components 93 00:04:42,000 --> 00:04:44,000 and let's fill them with some life.