Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/najibullahjafari/my-crypto

My Crypto is a responsive web app that show the current price of most popular crypto currencies, I used React & Redux, CSS3 and API to build this Web App.
https://github.com/najibullahjafari/my-crypto

cryptocurrency css3 javascript react redux

Last synced: 12 days ago
JSON representation

My Crypto is a responsive web app that show the current price of most popular crypto currencies, I used React & Redux, CSS3 and API to build this Web App.

Awesome Lists containing this project

README

        




My Crypto


# 📗 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](#deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)

# 📖 My Crypto

My Crypto is a responsive web app that show the current price of most popular crypto currencies, I used React & Redux, CSS3 and API to build this Web App.
HERE THE DESKTOP VERSION:
![image](https://github.com/najibullahjafari/My-crypto/assets/121656832/71b27625-9c14-4261-aa33-4c216d412df8)
HERE THE MOBILE VERSION:
![image](https://github.com/najibullahjafari/My-crypto/assets/121656832/fceda17c-b2f1-4bb0-aa61-7236e2a46b31)

## 🛠 Built With

- HTML,
- CSS,
- Java Script
- GIT,
- GITHUB
- LINTERS
- React and Redux
- Testing

### Tech Stack

Client

Server

## 🚀 Live Demo

Check out the live demo of this project [here](https://tiny-sfogliatella-1f3791.netlify.app/) and the [video](https://youtu.be/OnQLJ998MrI).

### Key Features

- Linters for code quality
- Responsive design for different screen sizes
- In this project best coding practices is used.

## 💻 Getting Started

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

1. Go to this URL link: https://github.com/najibullahjafari/My-crypto
2. clone the repo and start working on it.

### Prerequisites

In order to run this project you need:

Google Chrome or other browser

```sh
https://www.google.com/chrome/?brand=JJTC&gclid=CjwKCAjw9J2iBhBPEiwAErwpeSDcMFWiIQWj2u5GY6owZ7OaOHw7dYYCHW7uTR4kvYosNJYd4wt4VxoCiywQAvD_BwE&gclsrc=aw.ds
```

Github Account:

```sh
https://github.com/
```

Npm installed:

```sh
https://nodejs.org/en/download
```

Git installed:

```sh
https://git-scm.com/downloads/
```

### Setup

Clone this repository to your desired folder:

```sh
cd my-folder
git clone https://github.com/najibullahjafari/My-crypto
```

### Install

Please do the following **steps in this order**:

1. Use `npm install` to instal all dependencies.
2. Then you can run project by `npm start` command

Linters:
If you had any issues with linters for `react` you can install as bellow:

### ESLint

1. Run
```
npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected]
```
_not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._
2. Copy [.eslintrc.json](./.eslintrc.json) and [.babelrc](./.babelrc) to the root directory of your project.
3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**
4. Run `npx eslint "**/*.{js,jsx}"` on the root of your directory of your project.
5. Fix linter errors.
6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Eslint](https://eslint.org/docs/latest/user-guide/command-line-interface#fixing-problems) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

### Stylelint

1. Run

```
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
```

_not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._

2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project.
3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**
4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project.
5. Fix linter errors.
6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/usage/options) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

### Run tests

To run tests, run the following command:
- `npm test`.

to check for styling errors:

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

### Deployment

You can deploy this project using:

Your working browser.

## 👥 Authors

👤 **Najibullah Jafari**

- GitHub: [Najibullah_jafari](https://github.com/najibullahjafari)
- Twitter: [Najibullah_jafari](https://twitter.com/Najib_Jafari_)
- LinkedIn: [Najibullah_jafari](https://www.linkedin.com/in/najibullahjafari/)

(back to top)

## 🔭 Future Features

- **[Responsive Version]**

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/najibullahjafari/My-crypto/issues).

(back to top)

## ⭐️ Show your support

Do you like this project? So don't wait to give one star!

(back to top)

## 🙏 Acknowledgments

I would like to express my deepest gratitude Nelson Sakwa for this project. The invaluable learning experience and support provided have been instrumental in my growth as a developer.

(back to top)

## 📝 License

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

(back to top)