uryelah/country-flags

A responsive country catalog app with restcountries.eu data, and a togglable dark UI theme. It allows users to search countries by their code, name, and browse countries bordering the currently selected country. Built with React and Material UI.

Country-flags

A simple SPA country-flags webapp
Use it live here »

Report Bug · Request Feature

Table of Contents

• About
• Features
• Views
• Routes
• Prerequisites
• Built With
• Commands
• Contact
• Acknowledgements
• CopyRight/Attributions

About

This project is a simple SPA country database made with the data from REST Countries API.

It was made mainly with React, Material UI, and Redux, and deployed with Firebase. You can use any JavaScript framework/library on the front-end such as React.

Features

• 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
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

Views

This app includes 4 different views:

• Countries list page

• Countries search page

• Country details page

Routes

Route	Description
/	Root route, you can select a country from the list or search a country here
/:<COUNTRY NAME>	Details route, you can see information about a specific country here

Prerequisites

If you want to...

View this app online

Simply access this link and enjoy the game!

Run it locally

1. Make sure you have node installed in your local environment.

2. Download or clone this repository

3. Navigate to the game root directory in your terminal

4. Install the required packages:

npm i

5. Start the game in your browser:

npm run start

Built With

This project was built using the React SPA framework, consuming the data from the REST Countries API, together with Redux for state management.

• React
• Redux
• Javascript
• Redux-thunk
• Learn to read and write Japanese kanji API
• Webpack
• Babel

Available Commands

Command	Description
npm install	Install project dependencies
npm start	Build project and open web server running project
npm eject	Eject configuration files for customization
npm run build	Builds code bundle with production settings (minification, uglification, etc..)
npm run test	Run the available tests
npm run predeploy	Build code for deployment
npm run deploy	Pushes built code to gh-pages

Contact

👤 Sarah Uryelah Silva Chamorro

• Github: @uryelah
• Twitter: @sarah_chamorro
• Linkedin: Sharah Chamorro
• Email: sarahchamorro@gmail.com

Acknowledgements

• StackOverflow
• Create React App
• Microverse
• Team 54

CopyRight/Attributions

This project was only possible thanks to the creators bellow:

REST Countries API

---