Crypto React App;Material UI, Firebase and Vercel

This week I was tasked with building a react site from scratch, and implement a Firebase authentication. I came up with the project idea which was, A site where users can access both the news and information about various cryptocurrencies. This was my first big-ish react app.
The live site can be found here , the design here and the repository on GitHub

The MVPs for the site were;

1. A home page with a list of the coins.
2. A filter for the currency they want to use for the coin price (USD / EUR)
3. A news page
4. Coin details page
5. Time filter for the graph in the detail section
6. Log in to coin to favorites

In this article, I will talk about my experience with the various technologies I used.

React-js

React is a JavaScript library for building user interfaces.
To create a react app you run npx create-react-app my-app
on your terminal and it will create a project for you with some starter code.
I worked with various hooks like useState() to handle various states and
useEffect() to handle fetching data from APIs I also used context API to handle props.

Material UI

I used MUI for styling. It provides a simple, customizable, and accessible library of React components.
To install Mui, run npm i @mui/core on your terminal.
Now, with react 18, you might encounter an error, upon which you will run npm i @mui/core --force Because React 18 was just launched some libraries can't find a way to fit in properly.
It was my first time interacting with Mui, so it was a bit challenging, but with tutorials and documentation, I was able to achieve my set goals.

Firebase

I used Firebase for authentication and to store users' favorite coins.
This was such a challenging feature for me to implement as it was a feature I had not planned for.
I was able to attain the set goals through various tutorials on you tube and articles.

Vercel

I used Vercel for deployment. I had issues deploying my site as my git files some how got corrupted while pushing some code to GitHub.
I had planned on using netlify as I have interacted with it before, but it could not deploy my work from GitHub, or manually. That is when I discovered Vercel, it is very easy to use, it doesn't need any build command and if it encounters a problem while deploying, it will give you a solution suggestion. All you need to do is connect it to your GitHub account.

Conclusion

React is a very interesting framework. I enjoyed working on this project and I'm looking forward to working on more React projects.