All language subtitles for 004 Adding Dummy Data & Static Files_Downloadly.ir_en

Now to fill it all with some life,

we need some data.

We need some dummy events.

Now later in this course,

we will learn how we can fetch data from a database

or from the file system.

But we haven't learned about this yet.

And therefore, for the moment,

we'll just use a dummy JavaScript array as a data source

but again, that will of course change throughout the course.

Nonetheless, for the moment attached,

you find a dummy-data JS file attached to this lecture,

and you can download this file

and add it to your root project folder.

So here, I added dummy-data JS to my project,

next to the package.json file.

And this is a file with an array of dummy data,

which I prepared for you,

and with some functions that allow us to query that data.

And I'll dive into those functions once we start using them.

Now, in that dummy data JS file,

this dummy data which is set up there also uses some images.

It also needs some images to be part of the project

to then later correctly display our events.

And therefore, you also need to add a couple of images

to your project.

Now for that you can use any images you want.

Just make sure that you do store them in the same folder

I will store them in in a second,

and that you give them the same name.

But you can then use any images you want.

A great source if you don't know where to get images from

is unsplash.com.

There you can get free images,

and that is where I will collect a couple of images.

For example, if you search for programming,

I'll use this image from James Harrison.

And in my project in the public folder now,

I'll add an images sub folder

and download and store the image in there,

this coding event JPG file now.

and make sure you name your file also coding-event.

So download any image you want maybe also this one,

but named coding-event and store it in the images folder

or if you named it differently

or have a different extension, go to the dummy data JS file,

and adjust this image path appropriately,

so the image name and the extension.

And with that I'll collect two more images

for my other two pieces of dummy data.

For the next one, I'll search for introvert

because the next event is about introverts,

just so that you don't have a strange impression of me.

And here I'll pick this image from Ahmed Nishaath,

and you can download this one as well

and store this in the images folder.

In my case, under a name of introvert-event.jpg

again, if you have a different name

adjusted in the dummy data JS file appropriately.

And last but not least,

you can search for networking on Unsplash

and then you might also find the same image I'm using here.

This image here about a networking event as it seems,

which I now all the downloaded and stored here

but again, you can of course use any images you want.

So now we got the dummy data,

and we get the images set up.

And it's important that the images

are stored in the public folder.

It doesn't have to be a folder named images then.

It can be any folder or directly in the public folder,

but you should store them in the public folder

because the public folder also is a special folder

in next JS projects.

Whatever is stored in there,

typically images or funds or something like this

is then served statically by next JS,

which means you can reference it in your CSS code

or in your HTML code.

You can easily include images stored in the public folder,

because next JS will make sure to serve any contents

that's stored in the public folder

as part of your overall application.

So it will statically serve any content in there.

It makes the content in there available

to the visitors of your website.

And therefore you can easily then embed public content

in your HTML code and so on.

And we will utilize that fraud in this course.

Therefore, now we got the images

and the dummy data in place.

Let's now start working on those page components

and let's fill them with some life.