Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Overview

Crypto Tracker

A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gains or losses in the previous 24 hours, as well as click on a single coin to display more details about it. The project features SVG animations, CSS animations, Dynamic graph (Made with 3rd party library reach-chartjs2), React and Redux state management, testing and also some Bootstrap components!

Built with

  • React
  • HTML
  • Redux
  • CSS
  • Javascript

Screenshot

Senzanome

Live Demo

Click here

Installation

To run the website locally:

  • Clone the repo by running git clone https://github.com/ReshyResh/Capstone-React-Redux.git.
  • Jump to that directory by using cd Capstone-React-Redux .
  • Run npm install to install dependencies.
  • Run npm run start to launch the live server.

To run the tests:

  • Run npm run test.

Authors 👤

Robert Baiesita

🤝 Contributing

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Issues
  • React / Redux capstone

    React / Redux capstone

    Project requirements

    - Use React documentation.
    - Use React components.
    - Use React props.
    - Use React Router.
    - Connect React and Redux.
    - Handle events in a React app.
    - Write integration tests with a React testing library.
    - Use styles in a React app.
    - Use React life cycle methods.
    - Apply React best practices and language style guides in code.
    - Use store, actions and reducers in React.
    

    Features

    - The app is fetching data from the API only once, on render.
    - While the data is loading the user is presented with a loading screen.
    - The user can sort the data by clicking the buttons on the home page.
    - When a card is clicker, the user is presented a page with details about the selected coin.
    - The user can scroll between the coins by using "Next" and "Prev" buttons at the bottom of the page.
    - When graph is clicked, the app fetches data about the selected coin to display a graph of the price.
    

    Screenshot

    Senzanome

    Live demo

    Click here

    Video presentation

    Click here

    opened by ReshyResh 0
Owner
Robert Baiesita
Full Stack web development, video and image editing, SEO and marketing campaigns. Whatever it is, I'm on it. Student at Microverse, looking for new challenges.
Robert Baiesita
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
Shop Cart Page Built Using React And Redux

Getting Started with react-redux-jest-shop Shop cart page with use: React,redux,redux-thunk, API,JEST, LTR Steps for run git clone or download react-r

Renat Khakimoff 1 Dec 16, 2021
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 3 Jan 5, 2022
A little e-commerce website made with React.js, Redux and Bootstrap.

E-commerce React JS (in progress) This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: npm st

Gabriela Costa 2 Jan 2, 2022
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 18, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 Jan 5, 2022
Front-end of the movie application created with React.js and Redux

# Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run:

Bibi 6 Aug 21, 2021
A portfolio site, made using the latest technologies.

Lol site A portfolio site, made using the latest technologies. In the constructi

Pedromdsn 19 Jan 3, 2022
Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

null 19 Jan 10, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 16, 2021
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 298 Dec 18, 2021
An example real-world Redux CRUD application with no boilerplate

Zero Boilerplate Redux A common criticism of Redux is that it requires writing a lot of boilerplate. This is an application that is meant to show a so

James 17 Oct 24, 2020
Redux Implementation using ReactJS and JSON placeholder API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Siddheshwar Panda 1 Oct 26, 2021
Watchlist Movie App Using React Hooks With Redux

MovieRedux Watchlist Movie App Using React Hooks With Redux Technology Stack: Re

Said Mounaim 0 Sep 30, 2021
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Jan 18, 2022
Toolkit for implementing clean architecture using Redux

?? Toolkit for implementing clean architecture using Redux ?? ?? Focuses on achi

Joseph Garrone 22 Jan 13, 2022
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Dmitry Erzunov 63 Sep 30, 2021
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Jan 15, 2022
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 20 Nov 16, 2021