In this project, I built the front-end side of a catalog of statistics that allows us to display general Cryptocurrencies data. The App collects data from an API and displays it in a list of data that can be filtered by currency parameter. This project was built following the specifications and user stories given here: Click here to read the projects specifications
- It requests data from the API with Axios.
- It displays a list of cryptocurrencies.
- It displays the data of a selected cryptocurrency.
- It converts cryptos' prices and changes to the selected local currency.
- It paginates the API response's results in the display.
- About the project
- Built with
- Live demo
- Walkthrough Video presentation
- Screenshots
- Dependencies
- Linting tools
- Getting started
- Automated tests
- Author
- Contributing
- Acknowledgments
- License
Check here a video presentation of the project
The main dependencies used in this web application:
| Dependency | for | Development | Test | Production |
|---|---|---|---|---|
| React | JS library for building user interfaces | ⭐️ | ||
| Redux | A Predictable State Container | ⭐️ | ||
| Prop-types | Runtime type checking for React props | ⭐️ | ||
| Redux Thunk | Middleware for basic Redux side effects logic | ⭐️ | ||
| Axios | Promise based HTTP client for the browser and node.js | ⭐️ | ||
| stylelint | Css linter | ⭐️ | ||
| eslint | Javascript linter | ⭐️ | ||
| Jest | JavaScript testing framework | ⭐️ | ||
| Enzyme | JavaScript Testing utility for React | ⭐️ | ||
| Enzyme-adapter-react-16 | Adapter to use Enzyme with React 17 | ⭐️ | ||
| react-addons-test-utils | React Test Utilities library | ⭐️ | ||
| react-test-renderer | To take snapshots of the "DOM tree" rendered by a React DOM | ⭐️ | ||
| redux-mock-store | Allows to make a redux store for testing | ⭐️ |
| Linter | Use | Files |
|---|---|---|
| eslintrc | Linting Javascript files | .js |
| Stylelint | Linting styling errors | .css .scss |
To get a local copy of the repository, please run the following commands on your terminal:
$ git clone git@github.com:CalyCherkaoui/kryptostats-board.git
$ cd kryptostats-board
$ git branch feature
$ git checkout feature
$ npm install
$ npm run build
$ npm start
To lint Js code:
$ npx eslint . --fix
To lint the Styling:
$ npx stylelint "**/*.{css,scss}" --fix
To run the tests:
$ npm test
👤 Houda Cherkaoui
- Github: @CalyCherkaoui
- Twitter: @Houda59579688
- Linkedin: Houda-Cherkaoui
Contributions, issues, and feature requests are welcome!
Give a ⭐️ if you like this project!
- Hat tip to stackoverflow comunity.
- Hat tip to Microverse TSE for Code Review.
- Hat tip to anyone whose code was used
All source code is available jointly under the MIT License. See MIT licence for details.