While building internal dashboards for people at my company, I thought it would be fun to build one for something I'm interested in. I had built a project similar to this using create react app in the past but it had slow load times, no state management, and overall less functionality.
I have built this using Next.js to allow users to track the top 100 cryptocurrency prices and data, search and sort coins, sign in to add favorites, and track their portfolio. I used Server-Side Rendering to fetch the coins so they would be available immediately on the page load. I used Client-Side Rendering to get a user's favorites and trades, but if favorites are in localStorage it will load from there instead. This significantly improved load times on repeat visits to the site. For styling I went with Tailwind CSS. I had never used it before this project because I've previously liked to write my own CSS but I was really impressed with how seamless it felt. For the database I decided to go with Supabase which is a PostgreSQL database. It seemed similar to Firebase but I chose to go with Supabase because it's open source and doesn't lock you in so I could migrate in the future if necessary. If a coin is clicked on the Coins page then it directs to a page displaying more detailed information on the particular coin. On the Portfolio page users are able to add trades to track their portfolio and view favorited coins. They can also clear their trades to reset their portfolio. I have provided login info for a testing account on the Sign In page.
In the future I have more I would like to add to the project. One idea is whenever a favorite coin is clicked on the portfolio page, I would like it to bring up all trades entered for that particular coin. I also want to add a page to track NFT statistics, allowing users to connect via Metamask to get specific stats on NFTs in their wallet.