Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pablobona/metrics-webapp-cryptoskings
I will select an API that provides numeric data about a topic that you like and then build the webapp around it.
https://github.com/pablobona/metrics-webapp-cryptoskings
api-rest boostrap crud-application css javascript react test-react-hooks
Last synced: 4 days ago
JSON representation
I will select an API that provides numeric data about a topic that you like and then build the webapp around it.
- Host: GitHub
- URL: https://github.com/pablobona/metrics-webapp-cryptoskings
- Owner: PabloBona
- Created: 2023-07-29T14:30:53.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-08-07T17:35:47.000Z (over 1 year ago)
- Last Synced: 2024-05-17T15:43:03.426Z (7 months ago)
- Topics: api-rest, boostrap, crud-application, css, javascript, react, test-react-hooks
- Language: JavaScript
- Homepage: https://cryptos-kings.netlify.app/
- Size: 1.78 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CryptoKings - React Capstone Project
React Capstone Project
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [📖 CryptoKings](#cryptokings)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Design Guidelines ](#design-guidelines-)
- [🚀 Live Demo ](#-live-demo-)
- [💻 Getting Started ](#getting-started)
- [Install](#-install)
- [Usage](#-usage)
- [Run Tests](#run-tests)
- [Deployment](#deployment)
- [👥 Authors ](#-authors-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show Your Support ](#️-show-your-support-)
- [📝 License ](#-license-)
- [🎬 Project Documentation ](#project-documentation)
In this React capstone project, we have built a mobile web application called CryptoKings. The application allows users to explore a list of cryptocurrency coins and view their details. Users can filter the coins based on specific parameters such as name or price. The application fetches real-time data from an open cryptocurrency API.
# How it Works
The CryptoKings web app consists of two sections:
# Home Page - Coin List
The Home Page displays a list of cryptocurrency coins along with their respective numeric values, which are fetched from the API. Users can filter the coins based on parameters like name or price. Clicking on a coin item will navigate the user to the details page for that coin.
# Coin Details Page
In the Coin Details Page, users can view more detailed information about a specific cryptocurrency coin. This page fetches detailed data about the selected coin from the API. The user can then click the "Back" button (<) to return to the Home Page and explore other coins.
The CryptoKings web application is built using the following tech stack:
- ReactJS
- Redux
- HTML
- CSS
- JavaScript
- Redux Thunk
-
Jest (for unit testing) -
React Testing Library (for integration testing) -
Netlify (for deployment)
The CryptoKings web application follows the design guidelines outlined in the Figma design template by Nelson Sakwa. The design includes a selected main color scheme, typography, and layout composition.
Credits: Original design idea by Nelson Sakwa on Behance. The design is used under the Creative Commons license, and appropriate credit is given to the author.
### 🚀 Live Demo
Live Demo
### 🚀 Presentation Video
Live Demo
Clone this repository to your desired folder:
Example commands:
```bash
git clone [email protected]:PabloBona/metrics-webapp.git
```
# 📖 Install
Install this project's dependencies with:
```
cd metrics-webapp
npm install
```
# 📖 Usage
To
run the project, execute the following command:
```bash
npm run start
```
Runs the app in development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
# Run Tests
Run unit and integration tests using the following command:
```bash
npm test
```
Note: The tests may require mocking the API access and Redux Store connection for proper testing.
# 📖 Run Linter Tests
Optionally, you can run linter tests using the following commands:
```$
npx hint .
```
```$
npx stylelint "**/*.scss"
```
or if you use CSS, run this instead of the latter command above:
```$
npx stylelint "**/*.{css,scss}"
```
# Available Scripts
In the project directory, you can run:
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
# Deployment
The CryptoKings web application is deployed and accessible online using Netlify. You can access the live demo by clicking the following link:
[Live Demo](https://crypto-kings.netlify.app/)
The CryptoKings web application is created and maintained by:
- 👤 **Pablo Bonasera** - GitHub: [@PabloBona](https://github.com/PabloBona)
- [ ] **Customizable notifications and alerts**
- [ ] **Multilingual support**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/PabloBona/metrics-webapp/issues).
If you like this project, you can show your support by giving it a star on GitHub.
The original design idea for this project was conceived by **Nelson Sakwa**, whose exceptional creativity and talent brought forth this inspiring piece of art. We would like to express our heartfelt appreciation to Nelson Sakwa for sharing this design under the Creative Commons license, allowing us to incorporate its captivating aesthetics into our project.
## About Nelson Sakwa
To learn more about Nelson Sakwa and explore more of their incredible work, please visit their profile on Behance:
[Nelson Sakwa's Profile on Behance](https://www.behance.net/sakwadesignstudio)
This project is [MIT](https://github.com/PabloBona/metrics-webapp/blob/dev/MIT.md) licensed.