https://github.com/ann-dev/fem-rest-countries-api

REST Countries API visualising app with colour theme switcher, based on Next.js framework.
https://github.com/ann-dev/fem-rest-countries-api

challenge dark-mode fetch-api frontend-mentor nextjs rest-api tailwindcss vercel

Last synced: 3 days ago
JSON representation

REST Countries API visualising app with colour theme switcher, based on Next.js framework.

• Host: GitHub
• URL: https://github.com/ann-dev/fem-rest-countries-api
• Owner: ann-dev
• Created: 2021-02-11T18:10:57.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-10-12T19:22:58.000Z (about 3 years ago)
• Last Synced: 2023-11-03T12:36:52.415Z (about 1 year ago)
• Topics: challenge, dark-mode, fetch-api, frontend-mentor, nextjs, rest-api, tailwindcss, vercel
• Language: JavaScript
• Homepage: https://fem-rest-countries-api.vercel.app/
• Size: 1.36 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - REST Countries API gallery with color theme switcher

![Design preview for the Insure landing page coding challenge](./desktop-preview.jpeg)

✨ Live Demo




  



## Description

Responsive page integrated with REST Countries API (upgraded to v3) that pulls and display country data. Solution for frontendmentor.io challenge.



Main features:



    
Custom React Hook that uses Fetch API for pulling data

    
Based on Next.js framework and Tailwind CSS




    
Search function that instantly shows results on main page

    
Filter countries by region

    
Details page for each country

    
Light and dark mode toggle



## Usage

### Installation

Please navigate first to the "site" folder! Then run:

```sh

npm install

```

### Development

To run the app on a local server use:

```bash

npm run dev

# or

yarn dev

```

### Production

To compile for production build:

```sh

npm run build

# or

yarn build

```

## Credits

-   Original design - [Frontend Mentor Team](https://www.frontendmentor.io/)

-   REST API used - [REST Countries](https://restcountries.com)

-   CSS framework - [Tailwind CSS](https://tailwindcss.com/)

-   Listbox design & code - [tailwindlabs](https://github.com/tailwindlabs/headlessui)

-   Loading spinner design & code - [Tobias Ahlin](https://tobiasahlin.com/spinkit/)

-   Icons - [ionicons](https://ionicons.com/)

-   404 image - [freepik](https://www.freepik.com/)