marocena26 / angular-country-app

Angular: from zero to expert - Project04 - Angular Country App 🗺️​. Responsive 📱​. Technologies used: HTML 5, Bootstrap, Typescript, Angular 16. Individual project.

Country App 🗺️

👩🏻‍💻 Author

• Mª Elena Arocena López: @marocena26

👉🏻 Hey, look here!

In the attached repository you will find all the challenges, just click here 😋.

🚀 Introduction

In this repository you can find the files generated in the Angular: de cero a experto within Fernando Herrera Udemy.

Application to search for places in the world. The user will use a search bar to be able to see on screen the countries that belong to a specific region, capital or country.

NOTE: Direct link to the project by clicking on the following link.

🛠️ Tools

The following tools have been used when solving the project:

• HTML
• Bootstrap
• GIT version control
• Angular
  • Routes
  • RouterLink and RouterLinkActive
  • Specialized components
  • DebounceTime
  • Inputs
  • SwitchMaps
  • API consumption
  • Data typing
  • Application menu
  • ngClass and different ways to manipulate classes
  • Conditional CSS
  • HTTP request optimizations
  • Manual Debounce using RxJs
  • LocalStorage
  • Store ideas
  • Re-utilization of components
  • Various RxJS operators applied

📖 What have I learned?

• DebounceTime
• SwitchMaps
• Data typing

💾 Steps to follow to use this project on your computer:

This project was generated with Angular CLI version 16.0.0.

1. Click on the top right corner > Fork.
2. It will ask you to choose which GitHub user you want to fork it to. Choose your user.
3. Go to github.com/your-user/name-of-project, clone it and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
4. Finally and for everything to work properly, you must disable GitHub Pages and re-enable it so that GitHub generates the new URL correctly.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

✨ Credits

• Angular: de cero a experto - @Klerith