Application overview - Angular Tutorial

- [Instructor] This is the example app we'll work with in this course. It's an online gaming platform called Gem Finder. On launch, the app takes us to the player's page. From here we can search for users by name. For example, I'll start typing Davis, and the UI will update automatically to filter the list based on the search term. We can clear the search using this button here. The lightning bolt next to some of the names tells us which players are online right now. Clicking on any of the names brings us to the profile page for that player. The game tracks two pieces of info for each player, their current score and how many gems they collected. We can also see the player's unique ID here. Long pressing on the player's Id shows and hides how long this player has been online. Clicking the player's tab on the left of the nav bar takes us back to the player's page, and clicking the center tab here takes us to the leaderboards page. The game has two leaderboards. The first shows the top five highest scores, and the second shows the top five players who collected the most gems. We can click on any name and it takes us to the same profile page we saw earlier. Clicking this tab here on the right side of the nav bar takes us to the message inbox. And clicking the little close icon to the right of each message deletes that message from the list and updates the unread messages count in the app. Let's take a look at the code. I opened our project here in a GitHub code space. I talk about why we use code spaces earlier in this course, so for now, just think of them as an easy way to share and write code without installing anything on your local machine. I used the version 19 of the Angular framework for this course and generated the project files using standard Angular CLI commands. From the root of our workspace, I'll go to source and click on Index.html to open the file. This file is a standard index file for Angular with the addition of Google fonts and bootstrap CSS. This makes the app look and feel a little nicer, but your project can use any fonts or CSS toolkits that you want to use. Let's look at our mock data. From the root of the workspace, I'll go to Public Mocks and click on Players.JSON. This file has all the static data that represents the players in our app. We're using mock data in this course to avoid the need for a real remote server. The same goes for this messages.JSON file in the same folder. It has all the static data that represents unread messages. If I open the source folder and click on App, you'll see it's pretty empty in here, just the root component, some app configuration, pages, and routes. This is because I moved most of the code into this projects folder right here. Angular creates this folder automatically when you generate a new custom library using the CLI tool. Angular's Concept of Workspaces, which we'll look at in detail later in this course, makes it easy for custom library code to live inside an existing project. In my work, custom libraries always started life in an existing code base. A shared workspace made it easy for us to start small and migrate only one or two features at a time from the app code into the custom library. I wrote this course to look and feel like code you might see when building your first custom library. That said, your project might look a little different, and that's okay. The topics we'll cover in this course are still valid and will work no matter what folder or repo structure you use.