Skip to content

This is the repo for the second capstone project in our Microverse journey. It is a group project created by @Fikerte-T and I. We build it around a countries API.

Notifications You must be signed in to change notification settings

Kingjosh007/capstone2-countries-facts

 
 

Repository files navigation

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 [email protected]: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

Screenshot (desktop)

                    📱 Mobile version

Screenshot (mobile)

Built With

HTML5     CSS3     Bootstrap     JavaScript     jQuery

ESLint     Webpack     Jest

Git     GitHub Actions     Markdown     Visual Studio Code

Authors

👤 Fikerte T.

👤 King Josaphat Chewa (KJC)

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.

About

This is the repo for the second capstone project in our Microverse journey. It is a group project created by @Fikerte-T and I. We build it around a countries API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 59.6%
  • HTML 25.3%
  • CSS 15.1%