Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/adel-gu/crypto-currency-market

A simple SPA consists of a home page that fetches and displays data about cryptocurrencies and their categories, and a details page where the user can interact with information about a specific cryptocurrency.
https://github.com/adel-gu/crypto-currency-market

react react-bootstrap react-icons react-router redux styled-components

Last synced: 4 days ago
JSON representation

A simple SPA consists of a home page that fetches and displays data about cryptocurrencies and their categories, and a details page where the user can interact with information about a specific cryptocurrency.

Awesome Lists containing this project

README

        


logo

Microverse README Template

# 📗 Table of Contents

- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [🐱‍👤 App Representation](#app-record)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [👥 Authors](#authors)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)

# 📖 Crypto Currency Info App

> A simple SPA consists of a home page that fetches and displays data about cryptocurrencies and their categories, and a details page where the user can interact with information about a specific cryptocurrency.

## 🛠 Built With

### Tech Stack

> Used differently related react libraries to achieve the satisfied UI, React bootstrap and styled component for styling the UI, react icons to insert the app icons, and Redux to manage the app store system.

Client

### Key Features

- **Currencies Info:** Display Currencies with minimal information to the user.
- **Filter by category:** The User can control the information displayed on the home page by choosing a specific category.
- **Currency Details:** Navigate to a currency details page to see more info.
- **Navigating Back to the home page:** The user can use the top left button in the navigation bar to navigate back to the home page from the details page.

(back to top)

## 🐱‍👤 App Representation

- [Watch me explaining some of the app features](https://www.loom.com/share/5ec0bb265c144520bef078587afb36fb)

(back to top)

## 🚀 Live Demo

[![image](https://user-images.githubusercontent.com/68030297/204081145-295856bf-e866-415f-b2d7-42a6501ee0d3.png)](https://crypto-currency-info-app.netlify.app/)

- [Experince a live demo](https://crypto-currency-info-app.netlify.app/)

(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:

- `node` should be installed in your local machin, [node website](https://nodejs.org/en/download/)
- Install `npm` package manager use this [to install both node and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

### Setup

Clone this repository to your desired folder:

```sh
cd my-folder
git clone [email protected]:adel-gu/crypto-currency-market.git
```

### Install

Install this project with:

```sh
cd crypto-currency-market
npm install
```

### Usage

To run the project, execute the following command:

```sh
npm run start
```

### Run tests

To run tests, run the following command:

```sh
npm run test
```

### Deployment

You can deploy this project using:

- Netlify

(back to top)

## 👥 Author

👤 **Adel Guitoun**
- GitHub: [@adel-gu](https://github.com/adel-gu)
- Twitter: [@GuitounAdel](https://twitter.com/@GuitounAdel)
- LinkedIn: [adelguitoun](https://linkedin.com/in/adelguitoun)

(back to top)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)

## ⭐️ Show your support

If you like this project please give it a Start ⭐️.

(back to top)

## 🙏 Acknowledgments

I would like to thank:
- [Nelson Sakwa](https://www.behance.net/sakwadesignstudio) for the website design system that inspired my design.
- [David Hu](https://www.davidhu.io/) for the loader spinner react components.
- [CoinGecko](https://www.coingecko.com/en/api/documentation) for the amazing API.

(back to top)

## 📝 License

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

(back to top)