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.
The CryptoKings web app consists of two sections:
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.
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.
Clone this repository to your desired folder:
Example commands:
git clone git@github.com:PabloBona/metrics-webapp.gitInstall this project's dependencies with:
cd metrics-webapp
npm install
To
run the project, execute the following command:
npm run startRuns the app in development mode.
Open 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 unit and integration tests using the following command:
npm testNote: The tests may require mocking the API access and Redux Store connection for proper testing.
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}"
In the project directory, you can run:
Note: this is a one-way operation. Once you eject, you can't go back!
The CryptoKings web application is deployed and accessible online using Netlify. You can access the live demo by clicking the following link:
The CryptoKings web application is created and maintained by:
- 👤 Pablo Bonasera - GitHub: @PabloBona
- Customizable notifications and alerts
- Multilingual support
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
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.
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
This project is MIT licensed.