METRICS WEB APP

Microverse React Capstone Project

This educational project is to build a mobile web application to check a list of metrics (numeric values) using React and Redux. An API is selected that provides numeric data about a topic and then build the web app around it. The web app will have several pages:

• a home page with a list of items that could be filtered by some parameters.
• another page for the item details

Learning Objectives 🔖

• Use React documentation.
• Use React components.
• Use React props.
• Use React Router.
• Connect React and Redux.
• Handle events in a React app.
• Write integration tests with a React testing library.
• Use styles in a React app.
• Use React life cycle methods.
• Apply React best practices and language style guides in code.
• Use store, actions and reducers in React.

Project Documentation 📄

• Here is the presentation video link👈

Built With 🛠️

• Languages: HTML, CSS, JavaScript
• Linters: Stylelint and ESLint
• Front-end library: React with Redux Toolkit
• API:
• Code Editor: VSCode

Website Mockup 📱 💻 🖥️

Screenshots 📸

Screenshots can be found in the repository.

Live Demo 🔗

Check the live demo netlify👈

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• A web browser like Google Chrome.
• A code editor like Visual Studio Code with Git and Node.js.

You can check if Git is installed by running the following command in the terminal.

$ git --version

Likewise for Node.js and npm for package installation.

$ node --version && npm --version

Setup

Clone the repository using the GitHub link provided below.

Install

In the terminal, go to your file directory and run this command.

$ git clone git@github.com:Elijahdre/metrics-webapp.git

Usage

Kindly modify the files as needed.

Run tests

To check for linters, use the files provided by Microverse. A GitHub action is also set to run during pull request.

$ npm install

Deployment

This app is deployed in the GitHub Pages for easy viewing upon merged on the main branch. Please find the link in the Live Demo section.

Author

👤 Elijah Odjegba

• GitHub:
• Twitter:
• LinkedIn:

🤝 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

• Microverse

• Code Reviewers

• Original design idea by Nelson Sakwa in Behance

• under the Creative Commons license

📝 License

This project is MIT licensed.