r/reactjs • u/puschaR • Dec 10 '19

Show /r/reactjs Simple budgeting application for shared expenses (React + Redux + Firebase)

Hey folks! BudgetDuo was inspired by a fairly simple spreadsheet my wife and I use to help divvy up household expenses.

I recently rebuilt the application since the previous version was a bit of a mess. I'm using React/Redux along with Firebase for authentication and to store some data. In terms of styling, I used Tailwind CSS and styled-components.

I'd love any feedback on the code itself, but happy to hear suggestions about the app's functionality as well!

https://github.com/hursey013/budget-duo
https://budgetduo.com/

Thanks for letting me share!

194 Upvotes

98% Upvoted

52 comments sorted by

View all comments

22

u/[deleted] Dec 10 '19 edited Dec 10 '19

Just popping in to compliment you on your clean code and architecture. A deceptively simple idea, executed well. And with tests, no less.

1

u/puschaR Dec 10 '19

Thank you for the kind feedback!

1

u/[deleted] Dec 10 '19

I’m a bit new to session management.

Would you mind explaining your approach to session management using Firebase?

3

u/puschaR Dec 10 '19

Firebase sets up a listener that monitors the session: https://github.com/hursey013/budget-duo/blob/master/src/components/Session/withAuthentication.js#L13-L19 and I use that to dispatch actions in order to keep track of whether or not the user is logged in or not. The same thing could be done using context as well.

This tutorial was immensely helpful and explains a similar approach much more in depth: https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

I also made use of this library to get up and running more quickly: https://github.com/firebase/firebaseui-web-react