Repository files navigation

• This project is a cryptocurrency review app with a real-time API.
• Users can review cryptocurrency prices in USD, EUR, KRW, JPY, and GBP.

The app is deployed. Please visithttps://realtimeinvestment.netlify.app/ to explore Real-Time investment.

React Router is a vital tool in React development, facilitating seamless navigation between different pages within a web application. It enables the creation of sophisticated websites with multiple pages while maintaining the underlying structure of a single-page application. When users interact with links or buttons to navigate, React Router dynamically updates the content on the screen without reloading the entire page from the internet. This enhances the user experience, making it smooth and intuitive.

• ES7 React/Redux/GraphQL/React-Native

$ npx create-react-app react-router-realtimepayment

$ npm i react-router-dom

import { Route, Routes } from "react-router-dom";

$ npm install @mui/material @emotion/react @emotion/styled

$ npm i @material-ui/core$ npm i @mui/material @mui/styled-engine-sc styled-components$ npm i @mui/lab @mui/material

$ npm i react-alice-carousel$ npm install -D tailwindcss$ npx tailwindcss init

$ npm install html-react-parser

$ npm i react-chartjs-2 chart.js

• All my end points are fromwww.coingecko.com/en/api.

1. DeprecatedmakeStyles from MUI: I initially used themakeStyles function from MUI but learned that it is deprecated. To address this issue, I created a separate CSS file for styling.

2. DeprecateduseHistory Hook: TheuseHistory hook has been deprecated, so I replaced it with theuseNavigation hook.

3. CoinGecko API and CORS Policy: The CoinGecko API was being blocked by the CORS policy. To resolve this issue, I installedcors-anywhere using the following command:

   npx cors-anywhere

4. Axios Fetch Errors: I encountered frequent fetch errors using Axios with the free API. To enhance future functionality and reliability, I will consider purchasing a paid API.

5. Styling Challenges: Combining CSS, Tailwind, and MUI for styling was challenging, but it provided full freedom to create better designs and styling.

• Photo by fabio on Unsplash
• BannerBackground01 Photo by Shubham Dhage on Unsplash
• Cryptocurrency Tracker with React JS, Material UI, and Chart JS by @roadsidecoder via @YouTube

• This project was bootstrapped with Create React App.