Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/microverse-fullstack-program/cryptocurrency-market

Cryptocurrency Market is a web App that uses a real live data from the Blockchain API. It's a web application for a company that provides informations such as trending coins, ranks, Cryptocurrency Prices by Market Cap, and crypto transaction. The application allow users to get full information related to the crypto.
https://github.com/microverse-fullstack-program/cryptocurrency-market

material-ui react-components react-hooks react-redux react-router react-router-dom reactjs reacttestinglibrary redux-store redux-thunk redux-toolkit

Last synced: about 2 months ago
JSON representation

Cryptocurrency Market is a web App that uses a real live data from the Blockchain API. It's a web application for a company that provides informations such as trending coins, ranks, Cryptocurrency Prices by Market Cap, and crypto transaction. The application allow users to get full information related to the crypto.

Awesome Lists containing this project

README 

        





    logo

  



Cryptocurrency Market 





# 📗 Table of Contents



- [📖 About the Project](#about-project)

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

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

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

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

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

- [👥 Authors](#authors)

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

- [🤝 Contributing](#contributing)

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

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)



# 📖 About 



**Cryptocurrency Market** is a web App that uses a real live data from the Blockchain API. It's a web application for a company that provides informations such as trending coins, ranks, Cryptocurrency Prices by Market Cap, and crypto transaction. The application allow users to get full information related to the crypto.



Building this application will allow to learn how to use React and Redux in the context of a real application and get hand exprience on front-end development.



Have a look at the [video description](https://www.loom.com/share/4382602a347a4f309bbef9f9ed1deb6f) of the project.



## 🛠 Built With  

> - [ReactJS](https://react.dev)

> - [Redux](https://react-redux.js.org)

> - [React-Boostrap](https://react-bootstrap.github.io/)

> - [Jest Test]()

> - [React Testing Library](https://testing-library.com/)



### Tech Stack 

> - JavaScript ES6 Module

> - ReactJS

> - Redux

> - babel-Webpack

> - Jest Test

> - React Testing Library

> - HTML&CSS and JavaScript

> - VS Editor

> - GitHub and Gitflow



### Database 

- API dependdencies



  Client

  



  Server

  



Database

  



### Key Feature 

 > - API enabled - fetch external API

 > - Coin search

 > - Coin details



(back to top)



## 🚀 Live Demo  

 

 - [Live Demo](https://cryptocurrency-d34b.onrender.com/)



(back to top)



## 💻 Getting Started 



To get the content of this project locally you need to run the following commands in your terminal.



### `Prerequisites`



In order to run this project you need to install the following packages/modules

> - IDE (code editor) like: VScode, Sublime, etc

> - [Git](https://www.linode.com/docs/guides/how-to-install-git-on-linux-mac-and-windows/)

> - [npm](https://www.npmjs.com/)

> - [node.js](https://nodejs.org/en)

> - [React-dom](https://legacy.reactjs.org/docs/react-dom-client.html)

> - [React-redux](https://react-redux.js.org/)

> - [eslinter](https://eslint.org/)



### `Setup`



> 1. Install git if not already installed

>

> 2. Use VScode: open terminal in VScode

>

> 3. Download the **Zip** file or clone the repo with:

> ```bash

> git clone https://github.com/Microverse-Fullstack-Program/cryptocurrency-market

> ```

> 4. To access cloned directory, run and navigate to the directory where you cloned the repo:

> ```bash

> cd space-traveler

> ```



### `Install Depedancy and Run app`



To install linters and other project's dependencies run:



```bash

npm install

```



### Usage



To run the project, execute the following command:



**`npm start`**



> Runs the app in the 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.



**`npm run build`**



> Builds the app for production to the `build` folder.\

> It correctly bundles React in production mode and optimizes the build for the best performance.

> 

> The build is minified and the filenames include the hashes.\

> Your app is ready to be deployed!

>

> See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.



#### Getting Started with Create React App

> - This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

>

(back to top)



**`Run Test for Linters`**



> For tracking linter errors locally you need to follow these steps:

> 

> 1. For tracking linter errors in HTML files run:

> ```bash 

> npx hint .

> ```

> 

> 2. For tracking linter errors in CSS or SASS files run:

> 

> ```bash

> npx stylelint "\*_/_.{css,scss}"

> ```

>

> 3. For tracking linter errors in JavaScript files run:

> 

> ```bash

> npx eslint .

> ```



**`Test Command`**



> For unit testing of the app run:

> 

> ```JS

> npm test

> ```



**`Test Screenshoot`**



![image](https://user-images.githubusercontent.com/73167960/235324299-af398388-9b60-446f-8bb9-2cba9b775d46.png)



(back to top)



## 👥 Authors: 



The collaborators of this project are.



👤 **Author 1: Chere Lemma** 

- GitHub: [Chere Lemma](https://github.com/cherelemma)

- Twitter: [Chere Lemma](https://twitter.com/Chere21271613)



(back to top)



## 🔭 Future Features 



> - Enhance the responsivness 

> - Implement sorting coins



(back to top)



## 🤝 Contributing 



Contributions, issues, and feature requests are welcome!



[Kindly raise issue here](https://github.com/Microverse-Fullstack-Program/cryptocurrency-market/issues)



(back to top)



## ⭐️ Show your support 



If you like this project, kindly follow me on GitHub 😊



(back to top)



## 🙏 Acknowledgments 



I would like to thank [Microverseinc](https://github.com/microverseinc) for. 



> * [Readme-template](https://github.com/microverseinc/readme-template)

> * [Linter for React & Redux](https://github.com/microverseinc/linters-config)



Much appreciation goes to **CoinGecko** for the availability of the API to practice and **Nelson Sakwa** the author of the original design, as required by the  [Creative Commons License](https://creativecommons.org/licenses/) respectively.



> * [CoinGecko](https://www.coingecko.com/en/api)

> * [Nelson Sakwa](https://www.behance.net/sakwadesignstudio)



(back to top)



## 📝 License 



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



(back to top)