-
Budget Notebook is a personal financial planning application.
-
Users can set up budgets and saving goal by month, browse budget status and saving goal achievement. Users can edit and delete budgets.
-
Users can browse, record, edit, delete transactions.
-
Users can browse balance amount by month and year.
- React
- React-dom
- React-router
- React-router-dom
- React-scripts
- Recharts
- Axios
- Chakra UI
- Material UI
- Recharts
- Emotion/react
- Emotion/styled
- framer-motion
- Node JS
- Express
- PostgreSQL
- pg-native
- dotenv
- nodemon
- chalk
-
Clone this repository.
-
You need two terminal windows/tabs to run the back-end server and front-end app. In one terminal,
cd
intoexpress-back-end
, in the other terminal,cd
intoreact-front-end
. -
In express-back-end directory, install dependencies using the command
npm install
. -
In express-back-end directory, create a local database by PostgreSQL using the following commands (replace your_username and your_password in the commands with your choice):
psql -U postgres
,CREATE ROLE your_username WITH LOGIN password 'your_password';
,CREATE DATABASE budget_notebook OWNER your_username;
. -
In express-back-end directory, create .env file based on .env.example. Update the .env file with your local database information set in the last step.
-
In express-back-end directory, Run
npm run db:reset
to reset the database. -
In react-front-end directory, install dependencies using the command
npm install
. -
In both terminal, run
npm start
and go tolocalhost:3000
in your browser. -
Log in using the email: test@test.com and password: 123. Enjoy!
-
Feng Liu: Front-end and back-end functions of budget route, dashboard route and user route. Search Function, parts of edit and add function of transaction route.
-
Dylan McGrann: Front-end and back-end functions of transaction route.
-
Suki Chan: Charts,UI and data seeds.