Merge final-project to main

.github/workflows/deploy.yml

@@ -0,0 +1,24 @@
+# Workflow to deploy app to heroku
+name: heroku-deploy
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    branches: [main, final-project]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v2
+      - name: Deploy Heroku
+        uses: akhileshns/heroku-deploy@v3.0.0
+        with:
+          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
+          heroku_app_name: ${{ secrets.HEROKU_APP_NAME }}
+          heroku_email: ${{ secrets.HEROKU_EMAIL }}

.gitignore

@@ -7,6 +7,8 @@
 /backend/node_modules
 /backend/bin/config
 /backend/uploads/
+/profilePics
+/backend/.env
 
 # testing
 /coverage
@@ -20,6 +22,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,8 +1,76 @@
 # Budgeto
 
-## Project Description
+## 1. Project Description
 Budgeto is a web application to assist individuals who want to manage their expenses and gain clear insights into their spending patterns. Seamlessly upload your receipts, edit & filter items by categories, and view the trends of your expenses. See more. Spend less. Budgeto.
 
+## 2. Goals
+
+### Minimal Requirements (3-5)
+* Create user, login, logout ✅
+* Choose a category ✅
+* Ability to enter receipt info ✅
+* Set a budget ✅
+* See spending: daily, monthly (in a plain format) ✅
+
+### "Standard" Requirements (3-7)
+* Pie graph for spending ✅
+* Line chart for spending ✅
+* Show weekly summary on dashboard ✅
+* Calendar to show total spending ✅
+     * Pick a date or specific timeframe (day, month & custom range) ✅
+
+### Stretch Requirements (2-3)
+* Warning messages for approaching budget ✅
+     * Notifications ✅
+* Parse a receipt from an image ✅
+* Create some kind of grocery list ❗ (╯°□°）╯︵ ┻━┻
+     * Based on analytics ❗ (╯°□°）╯︵ ┻━┻
+* Generate suggestions ❗ (╯°□°）╯︵ ┻━┻
+* Look for offers, or find best price for certain items ❗ (╯°□°）╯︵ ┻━┻
+
+## 3. Tech
+
+### Unit 1 (HTML, CSS, Javascript)
+We used a global colour scheme and defined variables for these colours that could be used throughout the project. This helped keep our styles clean and consistent as we did not have random hex codes throughout the code. We used JavaScript in our frontend and backend, and specifically JSX with React to produce elements.
+
+### Unit 2 (React)
+We used React useState in combination with Redux toolkit for state management.
+
+We fetched our backend APIs to handle CRUD operations while using useEffect hook to perform side effects such as fetching a user custom categories to be displayed on the application.
+
+### Unit 3 (Node & Express)
+We created a backend server using ExpressJs, connecting endpoints of HTTP requests from the frontend. We parsed the data fetched from the database, tailoring it to fit our needs before sending it back to the frontend. 
+
+### Unit 4 (MongoDB)
+We used MongoDB to store user, item, category and receipt information. Each information is stored in a collection created using schemas. We use Mongoose to create collections and schemas and to fetch information from MongoDB.
+
+### Unit 5 (Release Engineering)
+We have modified the package.json to install the npm packages and to build a react-app which will be used to render pages on the production environment. We used GitHub actions to have continuous deployment of our app to Heroku. Heroku will start up the server which serves the react-app to render different pages using the production build.
+
+## 4. Above and Beyond Functionality
+In addition to allowing users to manually add rows of inputs to add their spendings, we also implemented a functionality where users can upload a receipt to record their transactions. We leveraged an open source OCR library called Tesseract.js to parse a receipt image into base64 text string. Using regular expressions, we were able to filter for information needed to create transactions that capture the user’s spendings.
+
+## 5. Next Steps
+We are planning to implement more analytics and provide suggestions to users based on their spending patterns (such as setting budgets for specific categories). As we support receipt uploading and can store items and business data, providing users with relevant store flyers or coupons would be valuable. In the future, we could look for similar items across different establishments and find the best prices. Generating a grocery list for frequently purchased items is also something we'd like to look into in the future.
+
+## 6. Team Contributions
+
+#### Chantal:
+I worked on the general design and theme of our web application, choosing colour schemes, setting up reusable CSS variables and React components, and consolidating styles across the project. Also integrated Redux Toolkit for state management and setup the correct scripts and GitHub actions for Heroku deployment. I focused on general team organization, keeping track of issues that need to be worked on, setting reminders, and driving meetings.
+
+#### Kass:
+Leveraged Tesseract.js to parse a receipt image in order to extract relevant information to create a transaction. Implemented the flow of filtering receipt transactions by creating components and endpoints for handling CRUD operations on categories. Additionally, an open source library called react-beautiful-dnd was also used to enable an intuitive drag-and-drop functionality when filtering transactions.
+
+#### Kevin:
+My main focus in this project was to create a Local Authentication Strategy that uses jwtwebtoken library to create a token to maintain user session. User session will keep the user logged in during refresh of the page. When the user is not authenticated, he/she will not be able to route to different pages. Not authenticated users will only be able to access the Landing page. I have also worked with the team to set up GitHub Action for continuous deployment to Heroku.
+
+#### Thomas:
+Focused on the design and functionality of the View and the Report pages of the application. Paid extra attention to make the pages user-friendly and incorporated design libraries such as ‘AntDesign’ and ‘Chart.js’ for the aesthetic touch. Implemented a feature to choose and update the profile image of a user, storing the image as a base64 string in the database.
+
+<hr />
+
+<details><summary>Click for Old Project Description</summary>
+
 ### Who is it for?
 * People who want to see their spending behaviour
 
@@ -29,27 +97,27 @@ Budgeto is a web application to assist individuals who want to manage their expe
 ## Project Task Requirements
 
 ### Minimal Requirements (3-5)
-* Create user, login, logout
-* Choose a category
-* Ability to enter receipt info
-* Set a budget
-* See spending: daily, monthly (in a plain format)
+* Create user, login, logout ✅
+* Choose a category ✅
+* Ability to enter receipt info ✅
+* Set a budget ✅
+* See spending: daily, monthly (in a plain format) ✅
 
 ### "Standard" Requirements (3-7)
-* Pie graph for spending
-* Line chart for spending
-* Show weekly summary on dashboard
-* Calendar to show total spending
-     * Pick a date or specific timeframe (day, month & custom range)
+* Pie graph for spending ✅
+* Line chart for spending ✅
+* Show weekly summary on dashboard ✅
+* Calendar to show total spending ✅
+     * Pick a date or specific timeframe (day, month & custom range) ✅
 
 ### Stretch Requirements (2-3)
-* Warning messages for approaching budget 
-     * Notifications
-* Parse a receipt from an image
-* Create some kind of grocery list
-     * Based on analytics
-* Generate suggestions
-* Look for offers, or find best price for certain items
+* Warning messages for approaching budget ✅
+     * Notifications ✅
+* Parse a receipt from an image ✅
+* Create some kind of grocery list ❗ (╯°□°）╯︵ ┻━┻
+     * Based on analytics ❗ (╯°□°）╯︵ ┻━┻
+* Generate suggestions ❗ (╯°□°）╯︵ ┻━┻
+* Look for offers, or find best price for certain items ❗ (╯°□°）╯︵ ┻━┻
 
 ## Task Breakdown
 Choose a category:
@@ -69,5 +137,5 @@ Enter receipt info:
 * Reports:
     ![KakaoTalk_20210528_231631916](https://user-images.githubusercontent.com/35110824/120060226-5e0cc300-c00b-11eb-8b3d-21fb815a46de.jpg)
     ![KakaoTalk_20210528_231631916_01](https://user-images.githubusercontent.com/35110824/120060227-5ea55980-c00b-11eb-9ae5-d972d288d40f.jpg)
-
+</details>
 

backend/app.js

@@ -1,39 +1,82 @@
-var createError = require("http-errors");
-var express = require("express");
-var path = require("path");
-var cookieParser = require("cookie-parser");
-var logger = require("morgan");
-var cors = require("cors");
+const createError = require("http-errors");
+const express = require("express");
+const path = require("path");
+const cookieParser = require("cookie-parser");
+const logger = require("morgan");
+const cors = require("cors");
+const bodyParser = require("body-parser");
+const passport = require("passport");
+
+require("./strategies/JwtStrategy");
+require("./strategies/LocalStrategy");
+require("./strategies/authenticate");
+
+if (process.env.NODE_ENV !== "production") {
+  // Load environment variables from .env file in non prod environments
+  require("dotenv").config();
+}
 
 const indexRouter = require("./routes/index");
 const usersRouter = require("./routes/users");
 const dashboardRouter = require("./routes/dashboard");
 const viewRouter = require("./routes/view");
 const reportRouter = require("./routes/report");
 const categoriesRouter = require("./routes/categories");
-var app = express();
+const receiptsRouter = require("./routes/receipts");
 
-// setup CORS
-app.use(cors());
-app.options("*", cors());
+var app = express();
 
 // view engine setup
 app.set("views", path.join(__dirname, "views"));
 app.set("view engine", "jade");
 
+// Have Node serve the files for our built React app
+app.use(express.static(path.resolve(__dirname, "../build")));
+
+// All other GET requests not handled before will return our React app
+app.get("/", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "../build/index.html"));
+});
+
+app.get("/dashboard", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "../build/index.html"));
+});
+
+app.get("/view", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "../build/index.html"));
+});
+
+app.get("/add", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "../build/index.html"));
+});
+
+app.get("/receiptUploaded", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "../build/index.html"));
+});
+
+app.get("/report", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "../build/index.html"));
+});
+
 app.use(logger("dev"));
 app.use("/uploads", express.static("uploads"));
+app.use(bodyParser.json());
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
-app.use(cookieParser());
+app.use(cookieParser(process.env.COOKIE_SECRET));
 app.use(express.static(path.join(__dirname, "public")));
 
+app.use(cors({ credentials: true }));
+
+app.use(passport.initialize());
+
 app.use("/", indexRouter);
 app.use("/users", usersRouter);
 app.use("/dashboard", dashboardRouter);
 app.use("/view", viewRouter);
 app.use("/report", reportRouter);
 app.use("/categories", categoriesRouter);
+app.use("/receipts", receiptsRouter);
 
 // catch 404 and forward to error handler
 app.use(function (req, res, next) {

backend/bin/www

@@ -7,8 +7,9 @@
 var app = require("../app");
 var debug = require("debug")("backend:server");
 var http = require("http");
-const config = require("./config");
+const dotenv = require('dotenv').config({ path: __dirname + '/.env' });
 const mongoose = require("mongoose");
+
 /**
  * Get port from environment and store in Express.
  */
@@ -27,7 +28,7 @@ var server = http.createServer(app);
 
 mongoose
   .connect(
-    `mongodb+srv://${config.mongoId}:${config.mongoPw}@budgeto.irn1u.mongodb.net/${config.mongoDb}?retryWrites=true&w=majority`,
+    `mongodb+srv://${process.env.MONGO_ID}:${process.env.MONGO_PW}@budgeto.irn1u.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`,
     {
       useNewUrlParser: true,
       useUnifiedTopology: true,