(SPRINT 1) https://cs490-project3-sprint-1.herokuapp.com/
(SPRINT 2) https://cs490-project3-sprint-2.herokuapp.com/
Expense tracker is a basic web app that allows users to keep track of their incomes and expenses in one place. This app will allow users to login, and create a personal expense profile. Users will be able to add new incomes or expenses, and also access the ones added on the website.
- Abishek Vasudevan
- Aman Hirpara
- Mihir Rana
- Raj Patel
In this project, we used the Flask framework, as our web server and the React library for client side functionality. In addtion, we have used Google Authentication for ease of login and React-Bootstrap to streamline our html and css visuals.
- Google Developer Account (For Google Authentication)
- Flask
- Pandas
- SQLAlchemy Docs
- React Docs
- React-Bootstrap
- React-Router
- Enzyme-Adapter-React-17
- Chart.js
- Update component does not work as inteded. Requires user to refresh page in order to see changes, although the Update component is very similar to the add component - which works.
- If the user wants to open the expense tracker app in an incognito tab then they will need to enable cookies on their browser.
pip install flask
npm install
pip install -r requirements.txt
- Run
echo "DANGEROUSLY_DISABLE_HOST_CHECK=true" > .env.development.local
in the project directory - Add following to .env file:
- REACT_APP_GOOGLE_CLIENT_ID = "Your_OAuth_client_ID"
- DATABASE_URL = "Your_database_url"
How to get an OAuth 2.0 client ID
- Go to the Google Developers Console.
- Navigate to the tab "Credentials".
- Create a new project.
- Navigate to the tab “OAuth consent screen”.
- Enter the Application name, Authorized domains, and click the button Save.
- Click on Create Credentials and from the dropdown list select OAuth client ID.
- From the drop-down menu, select the Web application and click on Creat.
- Copy your Client ID.
It is a front-end framework to help design our webpage faster and easier.
npm install react-bootstrap bootstrap
- Adding this line in App.js
import 'bootstrap/dist/css/bootstrap.min.css';
It is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
npm install --save-dev @wojtekmaj/enzyme-adapter-react-17
- Add the following to setupTests.js:
import { configure } from 'enzyme'; import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; configure({ adapter: new Adapter() });
PostgresSql is an open-source relational database management system which is also SQL compliance. We will be using this as our database to store the the expenses of the respective users.
sudo yum install postgresql postgresql-server postgresql-devel postgresql-contrib postgresql docs
- Once you have installed PostgreSql using the command above we initialize the database.
- Initialize:
sudo service postgresql initdb
- To start the service:
sudo service postgresql start
- Now we can make a superuser(if an error says 'could not change directory' that means it worked):
sudo -u postgres createuser --superuser $USER
- Now lets make a database:
sudo -u postgres createdb $USER
- To ensure that your user shows up follow the commands:
psql
\du
\l
- Making a new user:
create user some_username_here superuser password 'some_unique_new_password_here'
\q
(to quit sql)
- Now to save your passwords to a
sql.env
file with the following formatSQL_USER=""
andSQL_PASSWORD=""
.
To now query and access our database we will use SQLAlchemy.
pip install psycopg2-binary
pip install Flask-SQLAlchemy==2.1
- Login to heroku:
heroku login -i
- Create new app:
heroku create
- Add a database on our heroku app:
heroku addons:create heroku-postgresql:hobby-dev
- To see the config vars that are set by heroku for us:
heroku config
- Set the database variable as an environment variable:
export DATABASE_URL='paste config value here'
Heroku is a cloud platform company which will essentially allow us to host our code on their servers and we can run our game on there.
npm install -g heroku
- First we will need to create a free account on Heroku.
- Next, we will create a
requirements.txt
file which will list all the libraries and packages our app uses. This information is needed because Heroku's servers will download said packages and libraries so it can run the app on their servers. In your terminal, type the following:
touch requirements.txt
pip freeze > requirements.txt
- Once that is done, we will need a
Procfile
, which is a file that will tell Heroku what command to use to run our app.
- In your terminal, type:
touch Procfile
- Next, open up the
Procfile
and type your commands needed to run your app. In my case I would write:web: python main.py
.
- Now for the actual deploying part, open your terminal and follow along:
- Login to Heroku via terminal:
heroku login -i
- Next go to your project folder and create the heroku app:
heroku create --buildpack heroku/python
- Now we will add the nodejs buildpack:
heroku buildpacks:add --index 1 heroku/nodejs
- Now we will push our code to heroku:
git push heroku main
- Run command in terminal (in your project directory):
python app.py
- Run command in another terminal,
cd
into the project directory, and runnpm run start
- Preview web page in browser '/'
- Formatted using prettier (check .prettierrc.json). Linted using ESLint, following Airbnb style (linter options: fix problems and enforce codestyle) (check .eslintrc.js).
- Linter ignores:
react/no-unused-prop-types
: Error happened insrc/App.js
, prop setLoginStatus was used in a different file so had to add to ignore.import/no-extraneous-dependencies
: Weird error when importing bootstrap.react/jsx-filename-extension
: Weird error when writing html code in a return statement.no-restricted-globals
: Couldn't use event variable in addview.jscontrol-has-associated-label
: Couldn't just have a tag without the "label" tag along with it.- Miscellaneous errors which couldn't be fixed (couldn't find any working solutions - even online):
no-noninteractive-element-interactions
click-events-have-key-events
no-static-element-interactions
anchor-is-valid
jsx-a11y/control-has-associated-label
jsx-a11y/no-noninteractive-element-interactions
jsx-a11y/click-events-have-key-events
jsx-a11y/no-static-element-interactions
jsx-a11y/anchor-is-valid
- Formatted using yapf formatter (yapf -i). Checkout
yapf_formatter.py
. Linted using pylint (ignores added to individual files). - Linter ignores:
global-statement
: Unable to avoid using global variable to set the current user in app.pycyclic-import
: Not sure how to import DB variable from app and while also importing db_api within app.invalid-envvar-default
: Not sure why this was an error. Using normal convention of geting env vars (within app.py).unsubscriptable-object
: Miscellaneous error when specifying return type of function for ease.too-many-arguments
: Unavoidable since we need to pass those many variables into the addTransaction function.wildcard-import
: Some weird error in C9.unused-wildcard-import
: Continuing with previous error ignored.