- REST Countries API

The challenge is to integrate with the REST Countries V2 API to pull country data and display it like in the designs (Figma file). I was required to use the Angular + TypeScript front-end framework. However, I have complete control over which packages you use to do things like make HTTP requests or style your project.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Filter countries by region
• Toggle the colour scheme between light and dark mode

Screenshot

Desktop View

Mobile View.

Links

• Solution URL: REST Countries API
• GitHub Repo: Link to the GitHub Repo

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Font Awesome
• Bootstrap - CSS Framework
• TypeScript - JS Compiler
• Angular - JS Framework
• Firebase - For Hosting the Site
• REST Countries API - REST API

What I learned

This section is to provide a recap of some of the major learnings done while working through the project. The major ones are: Components Services Observables Routing Emitter ngModule HttpRequest and many others

To see how you can add code snippets, see below: API & ANGULAR

<h1>Some HTML code I'm proud of</h1>
<div [ngClass]="theme | async" class="app">
  <app-header></app-header>
  <router-outlet></router-outlet>
</div>

/* Ways to remove the arrows in an input field*/
/* For WebKit-based browsers */
:root {
  --white: hsl(0, 0%, 100%);
  --l-element: var(--white);
  --d-bg: hsl(207, 26%, 17%);
  --l-text: hsl(200, 15%, 8%);
  --d-text: var(--white);
  --l-bg: hsl(0, 0%, 98%);
}

:host-context(.dark) button {
  background-color: var(--d-element);
  color: var(--d-text);
}
:host-context(.light) button {
  background-color: var(--l-element);
  color: var(--l-text);
}

export class ApiService {
  private api = "https://restcountries.com/v3.1";

  constructor(private http: HttpClient) {}

  getAllCountries() {
    return this.http.get<Country[]>(`${this.api}/all`);
  }

  getCountryByName(name: string) {
    return this.http.get<Country[]>(`${this.api}/name/${name}`).pipe(map(([res]) => res));
  }
  getCountriesByCodes(codes: string[]) {
    return this.http.get<Country[]>(`${this.api}/alpha?codes=${codes.join(",")}`);
  }
}

Useful resources

• Bootstrap - This helped me with the the responsiveness and the country card. I really liked how this framework help with the media query.
• Angular - The project was built with Angular, and on like any other, Angular has features that makes programming easy and provides clean codes.
• API-Country - Use this to access all the data I needed for the project.
• The TypeScript Handbook - This is an amazing article which helped me finally understand TypeScript. I'd recommend it to anyone still learning this concept. A reader who completes the walkthrough should be able to:
  • Read and understand commonly-used TypeScript syntax and patterns
  • Explain the effects of important compiler options
  • Correctly predict type system behavior in most cases

Author

• Name - Fidelis Takyi Mensah
• Twitter - @fidelistakyi
• LinkedIn - @fidelistakyi

RESTCountriesAPI

This project was generated with Angular CLI version 16.2.0.