https://github.com/elijahdre/metrics-webapp
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. Built with React, Redux Toolkit, API, Css and JavaScript.
https://github.com/elijahdre/metrics-webapp
css3 html-css-javascript html5 javascript metrics microverse microverse-projects microverse-students react react-hook react-router react-test-renderer react-testing-library reactjs redux redux-toolkit
Last synced: 3 months ago
JSON representation
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. Built with React, Redux Toolkit, API, Css and JavaScript.
- Host: GitHub
- URL: https://github.com/elijahdre/metrics-webapp
- Owner: Elijahdre
- Created: 2022-10-04T11:59:22.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2022-10-27T07:47:00.000Z (over 2 years ago)
- Last Synced: 2024-05-28T22:10:43.398Z (about 1 year ago)
- Topics: css3, html-css-javascript, html5, javascript, metrics, microverse, microverse-projects, microverse-students, react, react-hook, react-router, react-test-renderer, react-testing-library, reactjs, redux, redux-toolkit
- Language: JavaScript
- Homepage: https://cryptometrics.netlify.app/
- Size: 793 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 🔖
- [x] Use React documentation.
- [x] Use React components.
- [x] Use React props.
- [x] Use React Router.
- [x] Connect React and Redux.
- [x] Handle events in a React app.
- [x] Write integration tests with a React testing library.
- [x] Use styles in a React app.
- [x] Use React life cycle methods.
- [x] Apply React best practices and language style guides in code.
- [x] Use store, actions and reducers in React.
## Project Documentation 📄
- [x] Here is the presentation video [link](https://www.loom.com/share/87092be77bf942c795edf7436ef9f588)👈
## Built With 🛠️
- [x] Languages: HTML, CSS, JavaScript
- [x] Linters: Stylelint and ESLint
- [x] Front-end library: React with Redux Toolkit
- [x] API:
- [x] Code Editor: VSCode
## Website Mockup 📱 💻 🖥️
## Screenshots 📸
Screenshots can be found in the repository.
## Live Demo 🔗
Check the live demo [netlify](https://cryptometrics.netlify.app/)👈
## Getting Started
To get a local copy up and running follow these simple steps.
### Prerequisites
- [x] A web browser like Google Chrome.
- [x] 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 [email protected]:Elijahdre/metrics-webapp.git
```
### Usage
Kindly modify the files as needed.
### Run tests
To check for linters, use the files provided by [Microverse](https://github.com/microverseinc/linters-config). 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: [](https://github.com/Elijahdre)
- Twitter: [](https://twitter.com/kingglijah)
- LinkedIn: [](https://www.linkedin.com/in/elijah-odjegba)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Elijahdre/metrics-webapp/issues).
## Show your support
Give a ⭐️ if you like this project!
## Acknowledgments
- [Microverse](https://www.microverse.org/)
- Code Reviewers
- Original design idea by [Nelson Sakwa in Behance](https://www.behance.net/sakwadesignstudio)
- under the [Creative Commons license](https://creativecommons.org/licenses/by-nc/4.0/)
## 📝 License
This project is [MIT](./MIT.md) licensed.