Skip to content

Kingjosh007/capstone3-world-population

Repository files navigation

    React     Redux

World Population (Capstone 3 at Microverse)

Introduction

About the requirements

This is the repo for the third capstone project in my Microverse journey. It's a React app about world population. A video of me presenting the project is available here.

I had to put together all the knowledge I gained from the React/Redux module at Microverse in order to build this project in 5 working days. The project had to be API-based and the requirements included:

  • Build the project as a single page application (SPA) built with React and Redux.
  • Retrieve the data from an API should be stored in the Redux store.
  • Use a Filter stateless component to filter the data retrieved from the API.
  • Use React Router so that every page should be accessible from a unique route.
  • Deploy the project to make it accessible online;

For the UI, I was expected to take inspiration from this design from Behance.

More about the project

I chose to build this project around a countries API. It's a single page app called WorldPopulation as it allows users to see metrics about the world population and play around it.

As a user:

  • I can see on the home page the list of countries/regions and their population.
  • When I click a country card, I'm taken to a page with the country's population details.
  • On the details page I can see details about the population of the selected country, city by city.

Live Demo

Here is the link to the live app, along with the deployment status: See it live Netlify Status

Getting Started

To get a local copy of this project running in development mode, do the following:

  1. In your terminal, cd to the folder where you want to copy this project.
  2. Still in your terminal, type git clone [email protected]:Kingjosh007/capstone3-world-population.git
  3. Run cd capstone3-world-population
  4. Run npm install and wait for the installation to complete.
  5. Run npm start or yarn start
  6. Open http://localhost:3000 to view it in the browser.

Screenshot

GIF Image showcasing the features

Built With

React     Redux     React Router    

HTML5     CSS3     JavaScript     ESLint

Git     GitHub Actions     Markdown     Visual Studio Code

Author

👤 King Josaphat Chewa (KJC)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published