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.