Latin America Population is a single page application created with React and Redux that allow users to review Latin America countries population. This webapp uses the World Bank indicators API.
Home page: It shows the list of Latin America and the Caribbean countries. The list includes de Flag, the name and the last known population. Initially, the population is shown as zero, since the API endpoint for the list of countries does not include such value.
When you click anywhere on the country area, it will send you to the Population page. When you come back from the Population page, the country population is updated.
You can filter the list of countries by typing partially the name of the one you are interested.
Population page: The population page, shows the country flag and the name of the country in the top.
Next comes a list of years and the country's population for that year.
To go back to the Home Page, you may tap in the Back button (<).
- JavaScript-ES6
- CSS3
- ReactJS
- Redux
To get a local copy up and running follow these simple steps:
Open your terminal and navigate to the folder you would like to save the project.
Type these commands into the terminal:
git clone https://github.com/rbanos-mv/latin-america-population.git
cd latin-america-population
You will need a .env file before you install and run the project. The .env file contains environment variables needed to deploy the webpage. There is a commented .env.example file you can use as a guide to configure your own. Type the following command into the terminal (or Git Bash, if using Windows) to create your .env file:
cp .env.example .env
Type this command into the terminal:
npm install
Type these commands into the terminal:
npm run build
- Open
build/index.htmlin your web browser.
Type these commands into the terminal:
npm run start
- Your web browser will open on http://localhost:3000
Type this command into the terminal:
npm run test
npm run deploy
👤 Roberto A. Baños Alvarez
- GitHub: @rbanos-mv
- Twitter: @RobertoBanosMV
- LinkedIn: Roberto A Baños Alvarez
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse for the motivation.
- API by Word Bank
- Country Flags by flagcdn.com
- Latin America map by Wikimedia Commons
- Original design idea by Nelson Sakwa in Behance.
This project is MIT licensed.