Coffee Masters Project Tour

[00:00:00]
>> Maximiliano Firtman: As we mentioned before, it's many of these design patterns, it's actually better to see them in action. So for that, we are going to use another project, not our Todo Master. It's going to be Coffee Masters. There is a single page application for a coffee store, where you can go and pre-order your coffee, okay?

[00:00:19]
It's like the Starbucks application, it's a mini Starbucks application. And there, the project is already there, okay? So, some design patterns are already implemented there, such as web components, it's kind of a design pattern as well. Actually, I'm not sure if you know this, but there is no W3C spec with the name Web Components.

[00:00:42]
So actually, Web Components is a mix of, it's actually a design pattern. It's the idea of mixing several APIs, HTML templates, shadow DOM, and the ability to create your own HTML tags with the Custom Elements API. So the usage of the three at the same time is what we know as the Web Component.

[00:01:06]
And that's actually another design pattern. If you wanna know more about that and you don't have experience with that design pattern, Web Components, you can check my course at Fronted Masters, Vanilla JavaScript, you might not need a framework. Where we are going in that course, we create from scratch the project that we will use right now, okay?

[00:01:30]
Today, we're going to take that project, the output from that workshop, and we will implement new design patterns on top of that. Such as lazy load, View transitions for single-page applications, HTML templates, and routing metadata. So let's jump directly into that.
>> Maximiliano Firtman: So now I will open the folder, Coffee Masters initial.

[00:02:05]
>> Maximiliano Firtman: It's also a Vanilla JS project, so no dependencies, no NPM install, no nothing. You can see it's more complex, so we have components, these are web components with a lot of code already there, CSS. We have data, some services, API, menu, so there is a lot of code there.

[00:02:25]
So let's first analyze the project. So I'm going to open this in a web server. Any web server will work. Localhost, I'm going to use npx serve again, but any other thing will work. And this is how it looks like. We can also decrease a little bit. This is mobile-optimized, so it looks better when you turn on this mode, the mobile mode.

[00:02:55]
But we see a menu, okay? And If I click Americano, it gets into the details. I can add to the cart, and when you add things to the cart, you can see here we have a badge there. Let me increase a little bit, there, that's better. And I can go to the cart and see the current contents.

[00:03:18]
I can delete. It's just that, okay? It's using Web Components, it's using client-side routing. So if you look at the URL here at the top, when you get into the details, it goes to a different URL. When you go to the order, it's also changing the URL, /order.

[00:03:35]
But actually, there is no order HTML or document in the server, this is just client-side routing without libraries, okay? So that's the project. So we're going to start adding things there.