Moneyish

By Patrick Celedio

The Year 2020: The Game by Patrick Celedio

Introduction

Moneyish is a money transaction application. It was created as a final project for my Fall 2021 Software Development class at San Francisco State University. This was a group project between myself and a classmate. Originally, we had four members in the beginning, but unfortunately two of them dropped the class before the final.

Even though it was only two of us, the group work was seamless. We divided the work into halves: myself doing front-end and my partner doing back-end. However, if there were any ideas that we wanted to personally implement on whatever side of the app, then we did it with communicataion and convenience. Fortunately, we both agreed that we did a great job as we fulfilled the project requirements and created a beautiful web-application with only just basic HTML and CSS, Java in the back-end to handle database management, react, node.js, Spark, and MongoDB. Ultimately, we were given a 100% on our project.

Moneyish homepage with shown transaction


Front-end


For Moneyish's look, I was inspired by Venmo's desktop webpage layout. I admired how clean the user-interface was and how simple it was for the user to navgiate the webpage. I incorpoated these attributes onto Moneyish's user-interface by using bold letters, a white background, and blue and black accents for the buttons and navigation.


Moneyish homepage with a shown transaction

Moneyish webpage when the transaction database is empty.


Moneyish's logo was created using an online logo generator. It generated a .png of the name "Moneyish" in a custom font and I was able to resize and make a few edits in Photoshop.
The homepage only contains four buttons: 'Home', 'About', 'Log In', and 'Sign Up' and if there are any public transactions in the database, then they will also display on the homepage.


Signing up to Moneyish


Moneyish log in success screen.


Account creation in MongoDB.


Moneyish user checking account balance.


Moneyish user managing and adding funds into account balance through credit card.


Moneyish webpage when the transaction database is empty.


Moneyish account balance show in MongoDB.


Moneyish user sending funds publicly to other Moneyish user.


Moneyish user checking personal transactions.


Moneyish user sending funds privately to other Moneyish user.


Moneyish user viewing private transaction at check-transactions page. There are two entries because I accidentallly double-clicked. A sign to implement a guard to prevent this.


Moneyish user reset password form.


Moneyish About page with summary of project and group member's GitHub pages.