REST Countries API with neumorphism design and Leaflet Maps

This is my solution to the REST Countries API with color theme switcher

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

Overview

The challenge

Users should be able to:

• See all countries from the API on the homepage
• See hover states for all interactive elements on the page
• Search countries by name and filter by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live Site URL

My process

Built with

• SCSS
  • Flexbox
  • CSS Grid
• Vanilla JavaScript
  • JS Routing
  • Async/Await
  • Promise.all()
  • localStorage
• LeafletJS - JS library for maps

What I learned

I always wanted to create app in more neumorphism design style thats why I didnt follow design prepared by FrontendMentor.

That project was really good to use some more advanced JavaScript features like JS Routing for countries details pages and Promise.all() for geting all borders countries. Also I spend some time on reading Leaflet documentation and for sure I will be using those maps in my future projects.

I also used window.matchMedia() for checking if user use dark mode as his preferred color scheme.

const getBorderCountrysName = async (borders) => {
    if (!borders) {
        return
    } else {
        const API_URL_DETAILS = 'https://restcountries.com/v3.1/alpha/'
        const promisesArr = borders.map((borderCountryCode) => {
            return borderCountryCode = fetch(API_URL_DETAILS + borderCountryCode);
        })
        const results = await Promise.all(promisesArr)
        const dataPromises = results.map((result) => result.json());
        const finalData = await Promise.all(dataPromises);
        const borderCountries = finalData.map((data) => {
            return {
                code: data[0].cca3,
                name: data[0].name.common,
            }
        })
        return borderCountries;
    }
}

Continued development

For sure I will have to work on accesibility.

Useful resources

• Tips For Using Async/Await in JavaScript - This helped me to understand Promise.all() with Async/Await

Author

• Website - Mateusz M
• Frontend Mentor - @userMatMik