Skip to content

fredamanu/React_Frontend_API_App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Frontend Countries API Web Application

Homepage:

homepage

Country page:

country page

Favorite Countries page:

favorite countries page

Introduction

This is a code repository for a frontend react application using countries api.

In this project, a list of all countries is fetched from an API endpoint and displayed in a table.

A user can then sort the table ascendingly or descendingly based on the Name, Population or Region of the country.

A searchbar is also available for users to search for a particular country by name.

The names of the countries in the table are links to the particular country's page where more details can be found on the selected country. The favorite icons in the table allow a user to add a country to a list of favorites countries on click.

The user can then click on the favorite icon in the navbar to go to the favorites page where all the countries they have favorited are displayed. From this page, they can view all countries and add to their favorites by clicking on the search icon to open the popover.

They can also unfavorite a country or click on the name to go to the country's page.

Finally there is an option to change theme from light to dark by clicking on the switch icon in the navbar.

TechStack: HTML|JavaScripy|React.js|Redux|Redux-Thunk|CSS|Bootstrap|Material UI|

Setup!

  • run '''npm i & npm start''' on the client side only to start the app on development mode.