Allow Roger Zou and David Reading to present Save, a personal finance app.
Roger and David's web app, titled Save, lives on the public domain. Save is a personal finance app that helps users track expenditures and set limits for themselves. The app also gives recommendations for better spending habits. The app uses a MySQL database to store expenses, limits and user information. To access Save, visit cs50lyfe.info, at which point you will be redirected to cs50lyfe.info/finalproject/public/login.php. A sample user account with example expenses and limits has been provided for visualization purposes. When you reach the login page, enter "CS50" as the username and "finalproject" as the password. Once you log in, you will reach the home page, with links to pages for inputting limits and expenses, viewing graphs and a history of expenses, and logging out. Also note that the picture at the top with the word "Save" and a check mark replacing the "v" is hyperlinked to the home page, so feel free to click on that any time you want to visit the home page.
First click on limits. In the sample account, six categories have been provided for you. Select a category from the drop down menu and input an amount in the input field. Then hit submit to create a self-imposed limit in that category, at which point the limit will be inputted into the database. You will then be redirected to the home page. Next click on expenses. Just as with limits, for expenses you can select a category from the drop down menu and input an expense (at which point you should hit submit to enter the expense into the database and be redirected to the home page). However, you also have the option of inputting your own category as an expense. To do this, click on the other radio button, at which point another input field will appear in which you can input a custom category. Note that any selected category from the drop down menu will be automatically deselected upon clicking on the "other" button. Also, if you subsequently select a category from the drop down menu, the "other" radio button will be deselected and the custom category field will disappear (so that you can only submit an expense in either a category from the drop down menu or a custom category, but not both). Try inputting both an expense in a category from the drop down menu and inputting an expense in a category of your own (separately of course).
Next, click on graphs from the home page. 4 types of graphs are available for viewing. To view the first graph, a line graph of total spending over time, click on the button called "Total Spending over Time." The x-axis represents months of the year, and the y-axis represents dollar values of total spending during those months. To view the second graph, a bar graph of total spending in each category, click on the button called "Total Spending in Each Category." The x-axis represents each category and the y-axis represents dollar values of total spending in each category. To view the third graph, a line graph of monthly spending over time for each category, select a category from the drop down menu below the text "Monthly Spending in Each category." The x-axis represents months of the year, and the y-axis represents dollar values of total spending during those months. To view the fourth graph, which is both a bar graph of a comparison between your self-imposed limits and expenses and a critique your spending habits in each category, select a category from the drop down menu below the text "Comparison Between Limits and Expenses." The x-axis represents months of the year, and the y-axis represents dollar values of total spending during those months. Below the graph is a display of your limit. Below that is a table of each month, followed by a decision of whether you are "spending too much, "the right amount," or "too little." Finally, you have the option of pressing the "reset" button at the bottom of the page to clear all the graphs.
Now navigate back to the home page by clicking on the "Save" logo at the top of the page. Now click on "History" to view a history of each of your expenses, organized by the time of the expense. The table also includes the amount of the expense at the type of expense. Head back to the page now, and notice toward the bottom of the home page is a box that says "Save to Dropbox." This feature allows the user to backup with Dropbox a .sql file of the database storing all your expenses. Click on the box, at which point a pop-up window should appear, either prompting you to login to Dropbox or to save the .sql file to your Dropbox account. If not logged in, please do login, and then save the file to your Dropbox account however you like. After clicking "Save", you should see a green check in the "Save to Dropbox" box.
Lastly, you can register your own account on Save. To do this, click "Log out" on the home page, at which point you will be redirected to the login page. At the bottom of the page, click "register," at which point you will be redirected to the registration page. Enter your desired username in the first input field, and then your password in the next field (confirm it in the third field). In the last field, provide the e-mail address that you'd like to sync with your Save account. Then click Register, at which point you will be redirected to a verification page. Check the account of e-mail address you inputted in the registration page for a confirmation number. Enter this number in the input field on the verification page to confirm your account, at which point you will be redirected to the home page.
Those are all the features of the website! Below is a description of the implementation and structure of the MySQL database.
The database, called rzou_dreading_cs50_finalproject2, lives on the server mysqlrzou-dreading-cs50-finalproject2.cs50lyfe.info. To access the MySQL database directly, enter the URL below into your browser and, when prompted, enter the username and password given below.
First, there is a table called "users" that stores a primary-indexed and auto-incrementing id, the username, a hashed (encrypted) password, and the user's e-mail address. Next, there is a table called "total" whose entries are every expense made by the user. The fields include the user's id number, the amount of the expense, the timestamp of the expense, and category of the expense. Next are two tables similar to each other, expenses and limits, which each have a column representing either the total expense in each category or each user-inputted limit, respectively. Each time a new category is inputted in the expenses page of the app, a new column corresponding to the input is added to both these tables. Both tables also have columns for the users' id and for the total expenses or limit, respectively. Lastly are tables representing each category of spending. Each time a new category is inputted in the expenses page of the app, a new table corresponding to the input is added to the database. In these tables is the user's id, and the amount and timestamp of the expense.