This is a fully responsive, multi-page React application that I developed for a fictional cryptocurrency company. Built with the CoinGecko API, coin prices stay current and update on refresh. Firebase was used to allow users to create an account and save coins to their own watch list.

INNER PAGES

I created a responsive inner page using React Router DOM. Click on ‘All Coins’ and it takes you to a list featuring 150 coins. Each coin is clickable and reveals more info about that coin. The data is supplied by the CoinGecko API and remains current. Styled with Tailwind CSS.

This page comes equipped with a functional search bar that filters through the coins.

I added live charts using React Sparklines. These charts track the coin’s performance over the last 7 days.

Below is the coin’s bio page. Only one page was built and used as a template. I used the useParams method from React Router DOM and passed the API data dynamically to populate the template. Each coin now has its own page and contains current data on market stats, etc.

MOBILE VIEW

SIGN UP

There’s a Firebase backend used to authenticate new users, sign in with that user, and store coins to a watch list.

ACCOUNT PAGE

The navbar adapts when the user is logged in. ‘Account’ and ‘Sign out’ now appear. Users can add coins by clicking on the star next to each coin on the coins page. The account page holds the watch list. There’s also the ability to remove a coin.

The account page is a protected route. When logged out, the user is redirected to the sign in page.