Hey, everyone, in this lecture, we will take a quick tour of the application we will be building
throughout the course here at Zero to Mastery.
We firmly believe in developing real world projects for learning new technology.
It's one thing to learn a frameworks features.
It's another thing to applying those features in realistic scenarios.
Our goal is to prepare you for the everyday challenges of an angular developer.
The best way to learn a new technology is by developing a practical app.
It's also fun before writing a single line of code.
Let's take a moment to explore the app for this course.
We will be creating an app called Clips.
It's an application for gamers to upload and share their gaming highlights on the home page.
There is a list of clips uploaded by users, as you can imagine.
Our app may have hundreds of clips to prevent our servers from being overloaded.
We are going to add infinite scrolling to the page.
The page will listen for the scroll event to load additional clips.
More clips are loaded if I scroll to the bottom of the page.
Of course, we can click on a clip to watch a video.
Upon clicking on a clip, we will be redirected to a different page.
Interestingly, that page does not get refreshed.
Angular was able to intelligently swap the pages contents without reloading assets.
Taking a closer look at the address bar, a unique URL is assigned to this clip.
Angular has a package for adding routing capabilities to an app by leveraging the browser's history
API.
We have a section dedicated to angular routing features that we use in our app.
Back to the page, we have a video player that can play the clip associated with the URL.
Let's try playing a video there.
I like they've been able underneath the player.
We have another list of clips.
Unlike the home page, infinite scrolling has been disabled, believe it or not.
The code for this section of the page is the same code as the home page.
Designing components is going to be a major topic in this course.
As developers, we should strive to create reusable components.
This topic leads us to another section of our app at the top of the page.
We have the option of logging in or creating an account.
Clicking on this link will open a model.
In addition, the model's contents are a set of tabs and forms.
Most courses will have you install a third party package to add these UI features.
Not this course.
The JavaScript ecosystem is filled with packages that add UI elements with desirable behavior.
But what if we can't find a package to address our apps needs?
In that case, we're going to need to develop a solution in this course.
We are going to be designing a moral component and tabs components.
By doing so, you will be able to design components tailored for your projects without bloating or bundle
with third party packages.
I'm going to quickly log in.
After logging in, we have a page for managing clips, users will be able to edit, delete or sort through
their uploads.
Behind the scenes, we are using Firebase to manage our backend.
It'll help us with managing users file data and databases.
There's one more page worth checking out.
You will have a page for uploading videos.
This is probably going to be the most exciting part of the course.
Processing videos is an action for servers.
However, we are going to be taking a different route rather than relying on a server.
We will integrate WebAssembly into our project for extracting screenshots from a video if I were to
upload a video.
Our app will generate a group of three screenshots which are selectable.
As you can see, we have a lot to unpack for this project.
By the end, you will be comfortable developing large, angular applications with various technologies.
When you're ready, let's jump into the world of angular.