A single-page React application that allows the user to explore and learn about top cryptocurrencies.
Crypto Explorer is a single-page CRUD application that allows the user to view current market data for the top-100 cryptocurrencies, according to the CoinGecko API.
This app was created as a final project for Flatiron Schools Software Engineering course, Phase-2.
The React app is rendered in index.js
, where the <App>
component is wrapped in React Router's <BrowserRouter>
, giving React Router access to every component. <App>
is also wrapped in two context providers, <CoinProvider>
and <LikedCoinProvider>
.
See below for information on Context.
-
<App>
is the parent component, an MUI container displaying the<Header>
at the top, followed by a component for one of the followingRoutes
:<ReadingList>
routed to path'/'
<CoinList>
routed to path'/coins'
<Coin>
routed to path'/coins/:id'
<ContactUs>
routed to path'/contact'
<ErrorCard>
for broken routes,'*'
-
<Header>
is the title banner of the page, with icons that navigate onClick to the ReadingList, CoinList, and ContactUs components, respectively. -
<ReadingList>
lives at the home page,'/'
, and acts as a "Bookmark" page for the user's selected cryptos. This component accesseslikedCoinContext
, mapping every object from context to a new<LikedCoin>
component that is listed in ReadingList. -
<LikedCoin>
is an MUI Accordion component that displays:- An MUI
<Avatar>
that displays the coin's image, navigating the user to a<Coin>
component for the selected coin. - The cryptocurrency's Name
- A Delete button that removes the coin from the page by updating state, and removes the coin's data from the backend database.
- When expanded, each LikedCoin displays a detailed description of the selected cryptocurrency. This description is fetched from CoinGecko.com on render.
- An MUI
-
<CoinList>
is an MUI<DataGrid>
. DataGrid hasrows
andcolumns
props that each expect an array of objects. We pass incoinList
fromcoinContext
for each row, and"/util/columns.jsx"
for each column. When a column object'sfield
matches a key in each row, that row key's value is rendered in the DataGrid cell. -
<Coin>
displays props from coinList context for a selected coin, as well as a Call-to-Action button that adds the crypto to the ReadingList using fetch POST. -
<ContactUs>
is a controlled email comment form that is sent to me when the user clicks "Send", using EmailJS. -
<ErrorCard>
is an MUI Button that directs the user to the home page if they end up in a broken route.
Two pieces of context represent data that is presented in this app.
CoinContext
fetches market data for the top 100 cryptocurrencies from CoinGecko.com in the useEffect hook. That data is formatted with formatCoinData.jsx
and set in a coinList
state variable. State for isLoaded
is also updated on a successful fetch request. Both coinList
and isLoaded
is passed in an array as the CoinContext.Provider
's value.
LikedCoinContext
fetches the user's "liked coins" from our database, and saves in state. Each "liked coin" is rendered as a <LikedCoin>
component in the <ReadingList>
. State is also passed to <Coin>
to check for duplicate POST requests.
useState: <Coin>
, <LikedCoin>
, and <ContactUs>
useEffect: <Coin>
& <LikedCoin>
useContext: <Coin>
, <CoinList>
, and <ReadingList>
useRef: <ContactUs>
Urls for every request are stored in "/util/urls.js"
.
GET: <LikedCoin>
component for the description
GET: CoinContext
for market data
GET: LikedCoinContext
for saved coins in the database
POST: <Coin>
component for adding a coin to likedCoins
DELETE: <ReadingList>
component to update a deleted <LikedCoin>
A video walkthrough for this app can be found here.
The behavior of the app is similar to a transactional cryptocurrency exchange app. Future features may include:
- Adding input fields in the Coin component that allow you to buy/sell a coin with a virtual "wallet"
- Sorting of LikedCoins in the ReadingList component
- Expanding DataGrid in the CoinList component to include additional columns
- Adding Sparklines to visualize market data
- Expanding the amount of market data shown (i.e. display volumes, trends, or social media stats)
- Connecting each cryptocurrency to CoinGecko.com's site for that coin
The possibilities are as endless as our imagination.
I am not accepting contributions at this time, as this is a project for school I am submitting.