API Project: CountriesFacts (Capstone 2)

Introduction

About the requirements

This is the repo for the second capstone project in our Microverse journey. It is a group project created by Kingjosh007 and Fikerte-T.

A video of us presenting our project is available here

We had to combine all the knowledge we gained in the Javascript module in order to build this project in 3-4 days. The project had be API-based and some of the requirements we had to meet included:

• Building a single page app using Vanilla Javascript only;
• Handling API calls;
• Writing asynchronous code: make a good use of callbacks, promises and async/await;
• Using Webpack to bundle the app;
• Making use of the best practices and tools regarding testing: performing unit tests, following the AAA pattern, using the Jest framework;
• Using the best practices for code versioning by following Gitflow;
• Being able to organize a group work on a Kanban board (Github Projects);
• Performing code reviews for team members;
• Solving git conflicts.
• etc.

More about the project

We chose to build our project around a countries API. It's a single page app called CountriesFacts as it allows users to comment facts about countries.

As a user:

• I can see all the countries provided by the API when the app loads. I can see the flags, and number of likes of every country;
• I can click a like button for each country;
• Inside a popup, I can view all the comments posted by different users that pertain to a single country;
• I can post new comments for the country displayed in the popup;
• [BONUS] I can filter all the countries thanks to the input provided;
• [BONUS] I can sort all the countries based on the name or the number of likes;
• [BONUS] I can have the countries displayed with a pagination system for a easier navigation;
• [BONUS] I can set the number of countries I want to see at most per page;

Live Demo

Here is the link to the live version of this project: See it live

Getting Started

To get a local copy of this project running, 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 git@github.com:Fikerte-T/capstone2-countries-facts.git
3. Run cd capstone2-countries-facts
4. Run npm install;
5. If necessary, run npm audit fix to fix any vulnerability in the packages;
6. Run npm start to launch the app;
7. If your browser doesn't open automatically, open it manually and type http://localhost:8080/ in the URL bar.

Testing

To perform the tests do the following:

1. Follow steps 1-5 of the getting started section;
2. Type npm test to run the test suites;

Screenshots

                    💻 Desktop version

                    📱 Mobile version

Built With

               

       

           

Authors

👤 Fikerte T.

• GitHub: @Fikerte-T
• Twitter: @tofikertesfaye
• LinkedIn: LinkedIn

👤 King Josaphat Chewa (KJC)

• GitHub: @Kingjosh007
• Twitter: @KingJoChewa
• LinkedIn: LinkedIn

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Heartfelt thanks to Microverse
• Hat tip to Lucas George Wendt whose image was used from Unsplash.

📝 License

This project is MIT licensed.