Full Stack Personal Finance App with Remix, Firebase and Chakra UI

What are you most proud of, and what would you do differently next time?

I'm proud of successfully integrating Firebase into my app. It enabled me to add user authentication and real-time database features, which I had never done before. This is the first project where I’ve built something dynamic like this, and seeing it work felt like a big accomplishment.

Next time, I’d focus more on getting the structure right from the beginning instead of rushing through certain parts. I ran into some bigger issues down the line (such as hydration errors) that would’ve been much easier to solve if I had taken the time to lay the groundwork properly at the start. It would’ve saved me a lot of trouble and kept the project moving more smoothly.

What challenges did you encounter, and how did you overcome them?

Firebase Issues: One of the toughest challenges I faced was figuring out how to effectively pass data between components. Retrieving data from Firebase was already tricky, but the real challenge came when I needed to pass that data through multiple components—especially when they were related but not directly connected. It took a lot of trial and error, digging through documentation, and making good use of developer tools like Copilot, but eventually, I figured out how to get everything working smoothly.

Hydration Issues: Hydration errors were another major challenge. These occur when the HTML rendered on the server doesn’t match what the client-side JavaScript expects, often causing the app to crash. It’s a common issue with web frameworks, as I’ve now learned the hard way.

I noticed the app ran more smoothly in incognito mode, which led me to realize that one of my browser extensions was causing part of the problem. Additionally, working with Chakra UI introduced its own set of issues—a configuration problem with the theme setup in the root file was also contributing to the crashes. Looking back, I wish I had tackled these problems earlier in development, as they became more difficult to resolve later on.

What specific areas of your project would you like help with?

If you would like to test the application with pre-filled data, the user credentials are:

• Email: demo@finance.com
• Password: frontend

I’d like some feedback on the overall structure of the code in my project. Does it follow good architectural practices? Are there areas where I could improve? Any suggestions to make it cleaner and easier to work with in the long run would be greatly appreciated.

I’d also love some feedback on how I’ve used Remix. Early on, I didn’t take the time to fully understand all its features, like using loaders for server-side rendering and boosting app performance. My app works fine without them, but I’m wondering if adding them would have made a noticeable difference in terms of efficiency or scalability. Do you think incorporating them would have been worth the effort?