Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/ab-noori/cryptopanel

Cryptopanel is a single page web app that is created using React and Redux and fetches data from CoinGecko API. The application allows users to get details of cryptocurrencies information.
https://github.com/ab-noori/cryptopanel

api create-react-app cryptocurrencies cryptocurrency-api cryptocurrency-app gh-pages-site react-components react-hooks react-redux react-router react-router-dom reactjs redux scss-styles

Last synced: 10 days ago
JSON representation

Cryptopanel is a single page web app that is created using React and Redux and fetches data from CoinGecko API. The application allows users to get details of cryptocurrencies information.

Host: GitHub
URL: https://github.com/ab-noori/cryptopanel
Owner: ab-noori
License: mit
Created: 2023-06-26T14:17:23.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-07-09T20:05:08.000Z (over 1 year ago)
Last Synced: 2024-10-12T06:51:52.822Z (27 days ago)
Topics: api, create-react-app, cryptocurrencies, cryptocurrency-api, cryptocurrency-app, gh-pages-site, react-components, react-hooks, react-redux, react-router, react-router-dom, reactjs, redux, scss-styles
Language: JavaScript
Homepage: https://ab-noori.github.io/Cryptopanel
Size: 2.74 MB
Stars: 21
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

![](https://img.shields.io/badge/Microverse-blueviolet)





> # Crypto Panel

| Desktop View Representation|

|---------------------------------------|

|
|

||

|



|

# 📗 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)

  - [Run tests](#run-tests)

  - [Deployment](#triangular_flag_on_post-deployment)

- [👥 Authors](#authors)

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

- [🤝 Contributing](#contributing)

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

- [🙏 Acknowledgements](#acknowledgements)

- [❓ FAQ (OPTIONAL)](#faq)

- [📝 License](#license)

# 📖 [Crypto Panel] 

> **[Cryptopanel]** is Cryptopanel is a single-page web app that is created using React and Redux and fetches data from CoinGecko API. The application allows users to get details of cryptocurrency information.

## 🛠 Built With 

### Tech Stack 

- Client

    


      JSX

      SCSS

      JavaScript

      React-Redux

      React-Toolkit

      Cryptocurrency API

    


### Key Features 

- **[Responsive layout]**

- **[UX/UI accessibility]**

- **[Dynamic data]**

(back to top)


## 🚀 Live Demo 

> - [Live Demo on Gh-pages](https://ab-noori.github.io/Cryptopanel/)

> - [Introduction to Project](https://www.loom.com/share/24b50649f3344d18a4a007d5715900e8?t=283&sid=a833953d-a480-4f39-981f-49f920cc9fa6)

(back to top)


## 💻 Getting Started 

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

### Prerequisites

In order to run this project you need:

  - A browser of your choice.

  - A text editor of your choice.

  - An installed node.js on your local system

### Setup

Clone this repository to your desired folder:

- Use the following Commands:

      cd your-desired-folder

      git clone [email protected]:ab-noori/Cryptopanel.git

### Install

- Install this project with:

       npx create-react-app .

       npm start

### Usage

- Use the following commands to run the project on your local system:

      npm run build

      npm run deploy

### Run tests

- Run the following script and style test:

      npx eslint "**/*.{js,jsx}"

      npx eslint "**/*.{js,jsx}" --fix

      npx stylelint "**/*.{css,scss}"

      npx stylelint "**/*.{css,scss}" --fix

 

### Deployment

- 1- install _gh-pages_ with following command:

      npm i gh-pages

- 2- Add _homepage_ to project's jason file:

      "homepage": "https://ab-noori.github.io/Cryptopanel",

- 3- Add the following scripts to the project's _package.jason_ file:

      "predeploy": "npm run build",

      "deploy": "gh-pages -d build ",

- 4- Finally run the following command:

      npm run deploy

(back to top)


## 👥 Authors 

👤 **Abdul Ali Noori**

- GitHub: [@ab-noori](https://github.com/ab-noori)

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

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

## 🔭 Future Features 

- [ ] **[Giving funtionality to search input]**

- [ ] **[Creating more professional sidebar panel]**

- [ ] **[Using charts and graph to disply the currencies data]**

(back to top)


## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/ab-noori/Cryptopanel/issues).

(back to top)


## ⭐️ Show your support 

 

  If you like this project, give it a star.

(back to top)


## 🙏 Acknowledgments 

  First, I would like to thank Microverse and my coding partners. Second, I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson) YouTub Channel, its [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpful, and third, I should give credit to `Nelson Sakwa`, I got some inspirations from his design on Behance.

(back to top)


## ❓ FAQ (OPTIONAL) 

- **How to make it mobile friendly?**

  - Put a viewport tag in the header

- **How to design the site?**

  - Draw a mockup before starting to code

(back to top)


## 📝 License 

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

(back to top)