Unit 6 changes

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,49 +1,153 @@
-# [your app name here]
+# [BudgetBuddy]
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: [Ayushi Porwal]
 
 🔗 Link to deployed app:
 
 ## About
 
 ### Description and Purpose
 
-[text goes here]
+BudgetBuddy helps users manage personal finances by tracking income, expenses, and savings goals. Users can plan budgets, categorize expenses, and visualize financial reports, ensuring better money management and meeting financial goals.
 
 ### Inspiration
 
-[text goes here]
+Inspired by the challenges of maintaining a personal budget, we created this app to simplify tracking finances and to promote responsible spending habits.
 
 ## Tech Stack
 
-Frontend:
+Frontend: React, Bootstrap
 
-Backend:
+Backend: Express.js, PostgreSQL, Node.js
 
 ## Features
 
-### [Name of Feature 1]
+### [User Registration & Login System] ✅
 
-[short description goes here]
+[Secure authentication system that allows users to register accounts and log in to manage personal budgets.]
+
+[Click Me](https://i.imgur.com/UVGqAxr.gif)
+
+### [Income and Expense Tracking] ✅
+
+[Feature enabling users to add, edit, and delete income and expenses, with real-time budget updates.]
+
+[Click Me](https://i.imgur.com/UVGqAxr.gif)
+
+### [Expense Categorization] ✅
+
+[Categorize expenses into predefined or custom categories for better tracking and analysis.]
+
+[gif goes here]
+
+### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+
+### [Savings Goals] ✅
+
+[Allows users to set and monitor savings goals with progress tracking.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+### [Budget Dashboard]
+
+[A visual dashboard showing total income, expenses, remaining budget, and categorized breakdowns.]
 
 [gif goes here]
 
-### [Name of Feature 2]
+### [Expense Filtering and Sorting] ✅
+
+[Filter and sort expenses by category, date, or amount for detailed insights.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+### [Monthly/Yearly Financial Reports]
 
-[short description goes here]
+[Automatically generated reports with charts showing spending trends over time.]
 
 [gif goes here]
 
-### [Name of Feature 3]
+### [Cloud Backup and Data Restore]
 
-[short description goes here]
+[Feature for securely backing up financial data to the cloud and restoring it when needed.]
 
 [gif goes here]
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+
+## Technical Feature List
+
+### [User Registration & Authentication] ✅
+
+[Secure account creation and login system.]
+[Password hashing and validation for security.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+
+### [Database Design] ✅
+
+[PostgreSQL database schema for users, transactions, and categories.]
+[Relationships: one-to-many (users to transactions) and many-to-many (categories to transactions).]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+### [API Development] ✅
+
+[RESTful API with endpoints for user management, income and expense tracking.]
+[Implement GET, POST, PATCH, and DELETE methods with proper naming conventions.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+### [Frontend Development]  ✅
+
+[React-based user interface with components for dashboards and forms.]
+[Dynamic routes using React Router for navigation.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+
+### [Budget Dashboard] ✅
+
+[Visual representation of total income, expenses, and remaining budget.]
+[Data visualization libraries (e.g., Chart.js) for displaying financial trends.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+### [Alerts & Notifications]
+
+[Implement user notifications for budget limits via email or in-app alerts.]
+
+[gif goes here]
+
+### [Expense Management]  ✅
+
+[Functionality for adding, editing, categorizing, and deleting expenses.]
+[Sorting and filtering options for detailed analysis.]
+
+[Click Me](https://i.imgur.com/1dnVZTT.gif)
+
+
+### [Reports Generation]
+
+[Monthly and yearly reports with visual charts showing trends.]
+
+[gif goes here]
+
+### [Cloud Backup]
+
+[Integration with cloud services for secure data storage and backup.]
+
+[gif goes here]
+
+### [Testing & Deployment]
+
+Use of unit and integration tests for backend and frontend.
+Deployment on Railway with CI/CD pipeline for automatic updates.
+
 
 ## Installation Instructions
 
-[instructions go here]
+[Clone the repository: git clone https://github.com/ayushiporwal13/web103_finalproject.git]
+[Install dependencies: npm install]
+[Run the app: npm start]

client/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

client/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

client/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/budgetBuddy.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- Import bootstrap -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"
+    integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <title>Budget Buddy</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>