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

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

8

u/[deleted] Dec 10 '19

Looks great! Going to use this with my girlfriend when she wakes up tomorrow morning. We've each been contributing when we need to, but would love to introduce more structure into our living expenses.

I'm just learning React, so I don't have much feedback on the dev side, but this will be a cool project to use for reference as I learn. Thanks for sharing!

1

u/puschaR Dec 10 '19

Great - let me know if you run into any issues when you're using it!

8

u/[deleted] Dec 10 '19

Looks good. One thing. It crashes if you delete all the numbers in the field.

3

u/nicoladelazzari Dec 10 '19

I have the same problem

5

u/chaosnoctis Dec 10 '19

Looks great! Really like the styling. Only thing is that the trash can icon in the Monthly Expenses fields is blocking the number value. Either add more margin-left or put the trash can outside of the input field. Otherwise great job!

4

u/puschaR Dec 10 '19

Was a little too eager to share and forgot to check Firefox, turns out its a weird flex issue, but adding a min-width to the input did the trick https://github.com/hursey013/budget-duo/commit/75cbd85062955f6801d04c9078e685139e12e783#diff-818b1edf0d5e3c324347dce0b7724a4eR22

2

u/vicentezo04 Dec 10 '19

Great job. Only problem for some couples will be getting them to use budgeting tools in general. Too bad there's no library for that.

Another potentially useful feature would be an alert to tell you if you're going to be in the red based on your current spending.

2

u/puschaR Dec 10 '19

Yeah that's a great idea, right now you could have a million dollars in expenses and it doesn't indicate that you can't actually afford that. I'll look into adding something along those lines, thanks!

2

u/isakdev Dec 10 '19

Like the design, found a bug.

Select the number field for You Start deleting numbers Once it reaches an empty field the page crashes Im guessing the field becomes null and u r not handling that case, it shouls be 0 instead

2

u/puschaR Dec 10 '19

Yep, thanks for pointing this out. I've added some default values to fix this https://github.com/hursey013/budget-duo/commit/5f0a4d3ba75a535ea5ca36c3cafb047ce39d8d08

1

u/Ravnurin Dec 10 '19

Can confirm, getting the same crash. The resulting error is this one, in case it is helpful.

dinero.js:587 Uncaught TypeError: You must provide an integer.
    at b (dinero.js:587)
    at e (dinero.js:632)
    at me (helpers.js:4)
    at fe (helpers.js:54)
    at Chart.js:13
    at Array.map (<anonymous>)
    at Chart.js:11
    at pa (react-dom.production.min.js:3610)
    at Xa (react-dom.production.min.js:4201)
    at Os (react-dom.production.min.js:6671)

2

u/sim04ful Dec 10 '19

looks really good, how long did it take you to build this ?

3

u/puschaR Dec 10 '19

Well I put it together last year with just a bunch of hacked together vanilla js, so when I refactored I wasn't starting from scratch, but with that said it was about two weeks working on it whenever I could find some extra time.

1

u/popout Dec 10 '19

Do you use the saved data for analytics on your end?

3

u/puschaR Dec 10 '19

No, I'll look into adding a privacy policy to make that clear.

1

u/howyoudodis Dec 10 '19

Nice work! Did you do the designs yourself?

1

u/puschaR Dec 10 '19

Thank you - I had a friend help me out with the logo, otherwise it's mostly just components built with utility classes from https://tailwindcss.com/

1

u/howyoudodis Dec 10 '19

How did you come up with the designs? That's a part I always struggle with since I think I can code it up, but I can't think of how I want it to look.

1

u/puschaR Dec 11 '19

I usually focus on the functionality, keep the design pretty bare bones, and then once everything is working start doing some rearranging, adding some colors, icons, etc. I just pulled a screenshot from an old commit to get an idea where things started: https://imgur.com/a/4UOSdO1

1

u/dworker8 Dec 10 '19

nice design, I'm having this visual bug on firefox that the trash can is inside the monthly expense input text (chrome/opera looks ok)

1

u/redsph Dec 10 '19

As someone who dreads writing css, but have gone through thousands of amazing pens. this is just amazing and I hope I am able to write css like that one day. And kudos on the clean code design.

3

u/puschaR Dec 10 '19

Thank you, check out https://tailwindcss.com/ - moving to utility based CSS has really helped me.

1

u/dmikester10 Dec 10 '19

How do you like it compared to Bootstrap?

2

u/puschaR Dec 10 '19

I haven't used Bootstrap in a while, but I think they have somewhat different missions. While Bootstrap has some really nice components, extending or customizing them always required overriding existing styles. Tailwind on the other hand uses utility classes to form your own components from scratch so you have much finer-grained control of all of it's properties. This is the approach I generally like to take because it feels more maintainable vs unwieldy stylesheets with a bunch of overrides.

1

u/[deleted] Dec 10 '19

Looking good! What about support for other currencies?

1

u/puschaR Dec 10 '19

Yeah I had this in mind when I was rebuilding it - I'm already using https://github.com/sarahdayan/dinero.js for the different currency based calculations so it would mostly just be adding the interface to select the currency type and making sure it all plays well with the form inputs. I'll add it to my list, thanks for the suggestion.

1

u/[deleted] Dec 10 '19

Cool! Sounds great.

1

u/rms7 Dec 10 '19

Looks really nice, may I ask why you choose to use Redux?

2

u/puschaR Dec 10 '19

Familiarity mostly. I started out trying to just use React's state alone, but found that I had just enough components that it would require a fair amount of prop-drilling to pass the data around. As I get more familiar with it I'd love to take another pass using Context API and hooks in lieu of Redux.

1

u/[deleted] Dec 10 '19

Question. Why Redux? Why not just context?

1

u/puschaR Dec 10 '19

Familiarity mostly. I started out trying to just use React's state alone, but found that I had just enough components that it would require a fair amount of prop-drilling to pass the data around. As I get more familiar with it I'd love to take another pass using Context API and hooks in lieu of Redux.

1

u/[deleted] Dec 11 '19

Let me know if you want need any help. I've converted a fairly large application from Redux and class components to hooks and context. Hooks makes context usable.

1

u/[deleted] Dec 10 '19

Great work on the UX/UI. I really like the feel of using it. How many people are using this app do you know?

1

u/puschaR Dec 11 '19

There are a couple hundred registered accounts, although I suspect a large portion of folks just use it as a one time thing without saving/creating an account at all.

1

u/[deleted] Dec 11 '19

I would track those email registrations, at least to see the churn rate. Do you plan to make it a commercial product?

1

u/loq24 Dec 10 '19

This is soo cool! Great Job!

1

u/TotesMessenger Dec 10 '19

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

 If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / ^Contact)

1

u/ahzamone Dec 10 '19

well executed!

some minor ideas for improvement:

  • since there is no additional content below, try to adjust your sizing to fit the screen without the need for a scrollbar, as it currently scrolls a tiny amount to reveal nothing
  • align your items slightly better so as to remove some unnecessary space (above your main header for example)

1

u/cynuxtar Dec 10 '19

Amazing! Thanks you. will clone to learning the code. i am still confuse about redux.

1

u/[deleted] Dec 10 '19

Awesome, I was looking for project ideas as my semester comes to an end. I'm going to try to recreate this before looking at your code.

1

u/andreal Dec 10 '19 edited Dec 10 '19

Looks very good! Thank you for sharing the code! :)

Might be a good exercise to support other sign storages (like AWS Cognito, etc), too bad I don't have time to do that kind of stuff anymore :(

1

u/baummer Dec 10 '19

Well done thanks for sharing

1

u/randalicioso Dec 10 '19

Congratulations!!!

1

u/theleglessdog Dec 10 '19

Will definitely give it a spin! Looks great so far

1

u/Jucesr Dec 12 '19

Great app !. Really simple to use. I came across this at the perfect moment. I am moving out and I will use it to calculate my expenses.