• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Prerequisites
  • Setup
  • Install
  • Run tests
  • Usage
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

Mini World Atlas is a React mobile web application that allows users to check a list of metrics (numeric values) retrieved from a selected API called REST countries, where you can get information about countries via a RESTful API.

REST Countries API is a RESTful API that provides information about 200+ countries and territories. It is a free and open-source API, and it does not require an API key. The API is based on the JSON (JavaScript Object Notation) format, and it provides information about a country's name, flag, coat of arms, capital, population, area, borders, currencies, languages, and more.

This project was created as part of the Microverse Full-Stack Web Development Program, which is a 12-month program that teaches students the skills they need to become full-stack web developers. The program includes training on a variety of programming tools, such as React, JSX, CSS, and JavaScript.

The webapp has been deployed to Netlify and is now available for you to try. Click the link below to visit the live demo.

• React / Redux
• JSX
• CSS
• Javascript ES6
• Visual Studio Code
• Jest
• React Testing Library
• ESLint
• Stylelint
• Webpack
• Babel
• External API (REST Countries)

The key features of this project include the following.

• Fetchs and displays data from API, which lists almost 200 countries and territories.
• Displays the estimated population of the world on the homepage, also directly from the API.
• Displays the country detail with their Area, Population, Coat of Arms, Flag, Capital City, Continent, Time Zone, and a 3-letter Country Code.
• Uses a mobile web responsive layout format that looks good and are easy to use on mobile devices.

(back to top)

• Live Demo
• Video Presentation

Due to the fact that it is a web app that is not optimized for desktop use, the live demo link is best viewed in mobile mode.

To change the resolution into mobile, you can use the Inspect method which is available in Google Chrome or Microsoft Edge. Here are the following steps:

• Open the live link of the website (listed above).
• Right click and select "Inspect" from the dropdown menu.
• In the Inspect section, select the mobile device you want to simulate from the list.
• You can also change the dimension to 830 x 630 by customizing it on the Responsive section.
• The website will now be displayed in the mobile view of the browser.

(back to top)

Get ready to explore Mini World Atlas Webapp with these steps:

Ensure you have:

• A Web Browser such as Microsoft Edge or Google Chrome 🌐
• Git 🐙
• A code editor such as Visual Studio Code 👨‍💻

Use git clone to get your local copy of the project.

git clone https://github.com/katarighe/capstone-metrics-webapp.git

Run npm install to set up the required packages.

npm install

To run tests run the following command in your terminal

 npm test

Currently, there are no test scripts available, but the libraries (React Testing Library and Jest) are set up.

You can also check linter errors by running this commands:

npx stylelint "**/*.{css,scss}"

npx eslint "**/*.{js,jsx}"

Launch the app with the following command

  npm start

(back to top)

👤 Mohamed Aden Ighe

• GitHub: @katarighe
• Twitter: @katarighe
• LinkedIn: @mighe

(back to top)

Here are some future features that could be added to the Mini World Atlas Webapp in the future.

• Interactive maps: The maps in the Mini World Atlas Webapp will be made more interactive, allowing users to zoom in and out, pan around, and explore different countries in more detail.

• More detailed country profiles: The country profiles in the Mini World Atlas Webapp will be expanded to include more information about each country, such as its history, culture, economy, and government.

• New languages: The Mini World Atlas Webapp will be translated into more languages, making it accessible to a wider audience.

• More data sources: The Mini World Atlas Webapp will be powered by more data sources, providing users with the most up-to-date information about countries.

• Collaboration tools: The Mini World Atlas Webapp will be made more collaborative, allowing users to share information and collaborate on projects.

Moreover, here are some other possible features that could be added in the future:

• A search bar to make it easier to find information about specific countries.

• The ability to add notes and comments to country profiles.

• The ability to create custom maps.

• The ability to export data from the Mini World Atlas Webapp.

The following are a few ideas for future features that could be added to the Mini World Atlas Webapp. The specific features that are added will depend on the feedback and suggestions of users.

(back to top)

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

Give a star⭐️ or a thumbs up 👍 if you like this project! You can visit my GitHub profile for more of my projects.

(back to top)

• Project supervised by Microverse
• Creative Commons 4.0 License
• REST Countries API
• Original design theme is by Nelson Sakwa on Behance
• Link to the original design theme by Nelson Sakwa

(back to top)

This project is MIT licensed.

(back to top)