Hey, what's up? I thought it would be pretty cool to challenge myself with a little front end mentor challenge. And of course, because this is Laracast, I'm going to use Larval on the backend . In case you're not familiar with front end mentor, this is a web platform, frontendmentor.io, where you can find challenges that will help you improve your front end skills. So we can explore some of the learning path or hear challenges that we want to do.

So we can explore some of the learning path or hear challenges that we want to do. And there are a range of challenges. Some of them are premium and some of them are free. And for each challenge, you're going to get sort of a brief that tells you what you need to achieve. It's going to give you all the assets to get started and some extra curricular activities if you feel so.

activities if you feel so. Typically, these challenges don't really involve any backend. This is a front end challenge platform. But I thought that it would be pretty cool to actually wire up Larval to provide the backend in a meaningful way rather than just hit an API or have some static JSON data. Here I am logged in my account. You can see I just have a free account and I'm going to find a challenge. So I haven't taken any challenges yet, but let's browse and we are going to

You can see I just have a free account and I'm going to find a challenge. So I haven't taken any challenges yet, but let's browse and we are going to choose one of the free ones. And so I think this product list with cart basically recipes list with a shopping cart is going to be quite interesting. So if we take a look at the brief, we need to build the UI for this project. There will be some data in the form of a JSON file. And so here are the acceptance criteria and the files that we receive.

There will be some data in the form of a JSON file. And so here are the acceptance criteria and the files that we receive. You can see that without the pro accounts, we will not get the Figma file, but I think this is fine. And here's why. I want to put a twist on these challenges. Typically the focus of the challenge is on the UI. You need to recreate a picture perfect pixel perfect implementation of the design.

You need to recreate a picture perfect pixel perfect implementation of the design. But here I'm more interested in showing you how I would implement the Laravel bits. We will still make it look really good and very close to the design that we receive. But I think we can work off pictures instead of having very detailed Figma files. All right. So let's get to work.

All right. So let's get to work. I'm going to click on start challenge. And there we go. We enrolled. And so we can't download the Figma file. Like I said, the starter kit with the images, there will be a few images like the ones you can see here is plenty good enough for us. So let's download the starter files.

can see here is plenty good enough for us. So let's download the starter files. And let's take a look at what's in there. So we do have an assets folder with some fonts and some images, quite a few images actually. Next we have this data that JSON file. And you can see it's an array of objects with image name, category, price, perfect. So next we have a design folder, which what I imagine are the different design files,

So next we have a design folder, which what I imagine are the different design files, the equivalent of what you would get with Figma. So that's great. We also have an index that HTML file and it looks like this has the content that we are actually going to pull from the database instead. But it's a starter if you want to start with this. What's the preview? Okay.

What's the preview? Okay. So this is the cover image for the project. We don't really need that. And then we got a couple of read me files. This I believe is what you use to submit the challenge once you're finished. It's kind of a template to what you should feel when you submit that. And this one is the actual challenge with the instructions that we're going to take a look at throughout the course.

take a look at throughout the course. But there's one more thing and it's a style guide and that's pretty cool. It's giving us some colors and fonts. And so when I see a style guide like this, I instantly think this is what's going to go in the tailwind theme so that the theme colors in tailwind match the design. So we're going to probably do this. But for now, our next logical step is to start a brand new Laravel application. I'm not going to use any starter kit here.

But for now, our next logical step is to start a brand new Laravel application. I'm not going to use any starter kit here. We are going to use Laravel new and choose no starter kit and start from scratch. See you in the next lesson.