Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cesarherr/metrics_webapp_botw

This React project is about building a mobile web application to check a list of metrics (numeric values) using React and Redux.
https://github.com/cesarherr/metrics_webapp_botw

react react-redux react-testing-library redux-mock-store redux-thunk redux-toolkit

Last synced: 7 days ago
JSON representation

This React project is about building a mobile web application to check a list of metrics (numeric values) using React and Redux.

Host: GitHub
URL: https://github.com/cesarherr/metrics_webapp_botw
Owner: CesarHerr
License: mit
Created: 2023-07-31T00:21:19.000Z (over 1 year ago)
Default Branch: dev
Last Pushed: 2023-11-29T22:51:23.000Z (about 1 year ago)
Last Synced: 2025-01-09T08:06:32.989Z (11 days ago)
Topics: react, react-redux, react-testing-library, redux-mock-store, redux-thunk, redux-toolkit
Language: JavaScript
Homepage: https://cesarherr.github.io/metrics_webapp_botw/
Size: 6.41 MB
Stars: 7
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        
Breath of the Wild Encyclopedia




# 📗 Table of Contents

- [📗 Table of Contents](#-table-of-contents)

- [📖 space-travelers-capstone](#-space-travelers-capstone)

  - [🛠 Built With ](#-built-with-)

    - [Tech Stack ](#tech-stack-)

    - [Key Features ](#key-features-)

  - [🚀 Live Demo ](#-live-demo-)

  - [💻 Getting Started ](#-getting-started-)

    - [Prerequisites](#prerequisites)

    - [Setup](#setup)

    - [Install](#install)

    - [Usage](#usage)

    - [Run tests](#run-tests)

    - [Deployment](#deployment)

  - [👥 Author ](#-author-)

  - [🔭 Future Features ](#-future-features-)

  - [Walkthrough ](#walkthrough-)

  - [🤝 Contributing ](#-contributing-)

  - [⭐️ Show your support ](#️-show-your-support-)

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)

# 📖 Breath of the wild Encyclopedia

This web application is a Single Page Application (SPA) serving as an encyclopedia for all the interactive in-game items in the world of Hyrule. It is built using React and Redux Toolkit and includes unit tests using React Testing Library.

## 🛠 Built With 

### Tech Stack 

- HTML

- JS

- CSS

- React

- Redux Toolkit (RTK)

  Client

  - HTML


  - JS


  - CSS


  - React

  Server

    - Null

Database

    - Null

### Key Features 

- **Web app using React**

- **Client-side routing using React Router V6**

- **Gitflow is used correctly**

- **Work is documented in a professional manner**

- **Following best practices for HTML, CSS, JS**

[BotwCapstone.webm](https://github.com/CesarHerr/metrics_webapp_botw/assets/111262493/cccc26b3-5b03-46f2-b453-a20b7d67bf91)

## 🚀 Live Demo 

> You can see the live demo of this project: [click here](https://cesarherr.github.io/metrics_webapp_botw/)

> You can see a video description here : [click here](https://www.loom.com/share/aa1d45f02b7b4d52b2dc7e77c339b6fc?sid=29300449-198a-4ab8-aee1-3d02af7ae60e)

## ⏫ Updated Version 11-08-2023, Added Desktop Version and Updated Mobile 

[botwD.webm](https://github.com/CesarHerr/metrics_webapp_botw/assets/111262493/f4e7f09b-057c-483a-9410-cfd96c89605b)

(back to top)


## 💻 Getting Started 

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

### Prerequisites

- A web browser

- A code editor

- A terminal

### Setup

Clone this repository to your desired folder:

```sh

  git clone https://github.com/CesarHerr/metrics_webapp_botw.git

```

### Install

Install this project with:

```sh

  cd metrics_webapp_botw

  npm install

```

### Usage

To run the project on the webpack dev server, execute the following command:

```sh

  npm start

```

### Run tests

To run tests, run the following command:

```sh

  npm test

```

### Deployment

```sh

  npm run deploy

```

(back to top)


## 👥 Author 

👤 César Herrera

- GitHub: [@cesarherr](https://github.com/Cesarherr)

- Twitter: [@cesarherr2](https://twitter.com/cesarherr2)

- LinkedIn: [cesarherr](https://www.linkedin.com/in/cesarherr/)

## 🔭 Future Features 

- Add more functions.

## Walkthrough 

In this project, we will be copying a given web design using React, Redux, and API handling. The design will serve as a reference for implementing the user interface and interactions.

Please see the above sections if you want to copy and setup this project on your pc.

## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

(back to top)


## ⭐️ Show your support 

If you like this project, give it a ⭐️!

(back to top)


## 🙏 Acknowledgments 

I would like to thank  [Nelson Sakwa on Behance](https://www.behance.net/sakwadesignstudio) for the design, Microverse for giving us the opportunity to learn and grow as developers and also we like to thank our families, they are all our support. 🌟

(back to top)


## 📝 License 

This project is [MIT](./LICENSE) licensed.

(back to top)