• 100 Days of Code
• Installation
• Live Site
• Resources
• Let's Connect!

Day 29: May 18, 2021

• I worked on a great Next.js tutorial by Thu Nghiem that used the restcountries.eu API.

• Countries of the world can be sorted by data, and the app is responsive with light and dark modes.

• This app also gave me a better understanding of accessibility and the importance of focus state styling for keyboard-only navigation.

• Update: With the restcountries.eu API slated for deprecation, the Global Metrics app now fetches from the restcountries.com, v3.1 API.

1. Git clone and cd into the repo folder:

git clone git@github.com:emjose/global-metrics-app.git && cd global-metrics-app

2. Install dependencies:

yarn install

3. Install Yarn and run the development server:

yarn
yarn dev

4. Open http://localhost:3000 with your browser to launch the Global Metrics app.

• Global Metrics is keyboard-navigable and is a progressive web app.

• Global Metrics is responsive and has light and dark modes.

• Countries can be sorted by name, population, area, and Gini Index.

• Note: Sorting is currently incorrect and will be improved upon.

• Countries can be searched, filtered, and viewed with data from the REST Countries API.

• If present, border countries now link directly to their respective country /id page.

• REST Countries API Tutorial by Thu Nghiem

• REST Countries API

• Adobe Fonts

• React Icons

• Google Fonts

• CSS Gradient

• NextUI: Tooltip

• PWA with Next.js

• Custom Document

• Custom Focus Styles

• React Scroll to Top Button

• {Outline: none;} Don't Do It!

• Next.js Progressive Web App

• How to make a Next.js app a PWA

• Zero Config PWA Plugin for Next.js

• The :focus-within CSS pseudo class

• NextJS add lang attribute to HTML tag

• Having a Little Fun With Custom Focus Styles

• How to make your Next.js app into a progressive web app

• My blog on how I created my Github READMEs