{"id":25252864,"url":"https://github.com/ishikanimade/expense-tracker-demo","last_synced_at":"2026-04-14T05:32:05.992Z","repository":{"id":275544705,"uuid":"926412985","full_name":"IshikaNimade/expense-tracker-demo","owner":"IshikaNimade","description":"This app allows users to manage their expenses, track their income and expenses, and export reports to PDF.","archived":false,"fork":false,"pushed_at":"2025-02-17T08:28:03.000Z","size":4091,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T22:16:54.207Z","etag":null,"topics":["expressjs","javascript","jspdf","material-ui","mysql-database","nodeja","reactjs","sequilizejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IshikaNimade.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-03T07:55:51.000Z","updated_at":"2025-02-17T08:28:06.000Z","dependencies_parsed_at":"2025-02-03T08:35:25.833Z","dependency_job_id":null,"html_url":"https://github.com/IshikaNimade/expense-tracker-demo","commit_stats":null,"previous_names":["ishikanimade/expense-tracker-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IshikaNimade%2Fexpense-tracker-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IshikaNimade%2Fexpense-tracker-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IshikaNimade%2Fexpense-tracker-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IshikaNimade%2Fexpense-tracker-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IshikaNimade","download_url":"https://codeload.github.com/IshikaNimade/expense-tracker-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406103,"owners_count":20933806,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expressjs","javascript","jspdf","material-ui","mysql-database","nodeja","reactjs","sequilizejs"],"created_at":"2025-02-12T04:18:56.387Z","updated_at":"2025-10-25T10:16:50.877Z","avatar_url":"https://github.com/IshikaNimade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SpendWise - Your Personal Expense Tracker\n\nAn **Expense Tracker** application built with **React.js** for the frontend and **Express.js** for the backend, using **MySQL 8** as the database. This app allows users to manage their expenses, track their income and expenses, and export reports to PDF.\n\n---\n\n## Features\n\n- **User Authentication**: Users can register and log in using email and password.\n- **Expense Management**: \n  - Add, edit, and delete expenses.\n  - Each expense includes an amount, category (Income/Expense), and an optional description.\n  - View a table of all expenses with total income and expenses summarized at the top.\n- **Export to PDF**: Users can export their expense report as a PDF.\n\n---\n\n## Tech Stack\n\n### Frontend (Client):\n\n- **React.js** for building the user interface.\n- **Material UI** UI components and styling.\n- **React Router** for client-side routing.\n- **Axios** for making HTTP requests to the backend.\n- **JWT** for managing authentication tokens in the frontend.\n\n### Backend (Server):\n\n- **Express.js** (Node.js) for creating the backend server.\n- **MySQL 8** for the database to store user and expense data.\n- **Sequelize ORM** for interacting with MySQL and simplifying database queries.\n- **JWT** for handling user authentication.\n- **bcrypt** for hashing passwords securely.\n\n### PDF Export:\n\n- **jsPDF** for generating PDF reports of the expenses.\n\n---\n\n## Project Structure\n\n```\nexpense-tracker-demo/\n│  \n├── assets/       # Snapshot of app\n│  \n├── client/        # Frontend code (React.js)\n│   ├── public/\n│   ├── src/\n│   │   ├── api/\n│   │   ├── assets/\n│   │   ├── components/\n│   │   ├── context/\n│   │   ├── hooks/\n│   │   ├── layouts/\n│   │   ├── pages/\n│   │   ├── routes/\n│   │   ├── services/ \n│   │   ├── styles/ \n│   │   ├── utils/\n│   │   ├── App.js\n│   │   └── index.js\n│   ├── package.json\n│   └── .env\n│   \n├── server/        # Backend code (Express.js, MySQL, Sequelize)\n│   ├── config/     \n│   ├── controllers/ \n│   ├── middleware/ \n│   ├── migrations/ \n│   ├── models/      \n│   ├── routes/    \n│   ├── seeders/ \n│   ├── utils/   \n│   ├── server.js    \n│   └── .env        \n├── README.md       \n```\n\n---\n\n## Installation\n\n### Prerequisites\n\n- **Node.js** (version 14 or higher)\n- **MySQL 8** (or a cloud-based MySQL instance like Amazon RDS or ClearDB)\n- **npm** (Node Package Manager)\n\n### Frontend Setup\n\n1. Navigate to the `client` directory:\n\n   ```bash\n   cd client\n   ```\n\n2. Install frontend dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Create a `.env` file in the `client` directory and add the backend API URL:\n\n   ```plaintext\n   REACT_APP_API_URL=http://localhost:5000\n   ```\n\n4. Start the React development server:\n\n   ```bash\n   npm start\n   ```\n\n   The frontend will be available at `http://localhost:3000`.\n\n### Backend Setup\n\n1. Navigate to the `server` directory:\n\n   ```bash\n   cd server\n   ```\n\n2. Install backend dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Set up the MySQL database:\n   - Ensure you have MySQL 8 running locally or use a cloud MySQL service like Amazon RDS or ClearDB.\n   - Create a database and update the `.env` file with your MySQL credentials:\n\n     ```plaintext\n     DB_HOST=localhost\n     DB_USER=root\n     DB_PASSWORD=password\n     DB_NAME=expense_tracker\n     DB_PORT=3306\n     JWT_SECRET=your_jwt_secret_key\n     ```\n\n4. Run Sequelize migrations to create the necessary tables:\n\n   ```bash\n   npx sequelize-cli db:migrate\n   ```\n\n5. Start the backend server:\n\n   ```bash\n   node server.js\n   ```\n\n   The backend will be available at `http://localhost:5000`.\n\n---\n\n### Environment Variables\n\nMake sure the following environment variables are configured in both the frontend and backend:\n\n#### Backend (.env):\n\n```plaintext\nDB_HOST=localhost\nDB_USER=root\nDB_PASSWORD=password\nDB_NAME=expense_tracker\nDB_PORT=3306\nJWT_SECRET=your_jwt_secret_key\n```\n\n#### Frontend (.env):\n\n```plaintext\nREACT_APP_API_URL=http://localhost:5000\n```\n\n---\n\n## Usage\n\n1. **User Authentication**:\n   - Users can register and log in to the app using their email and password.\n   - On successful login, users will receive a **JWT token** for session management.\n\n2. **Expense Management**:\n   - **Add Expense**: Input the amount, select the category (Income or Expense), and optionally add a description.\n   - **View Expenses**: View a list of all expenses with a summary of total income and expenses at the top.\n   - **Delete Expense**: Remove an expense by clicking on the delete button next to it.\n\n3. **Export to PDF**:\n   - Users can export their expense report as a **PDF file** for download.\n\n---\n\n## Screenshots\n\n - Here are some screenshots of the Expense Tracker application:\n\n### Authentication:\n![Authentication Screenshot](assets/login.png)\n- Login\n\n![Authentication Screenshot](assets/signup.png)\n- Signup\n\n### Dashboard:\n![Dashboard Screenshot](assets/dashboard.png.png)\n- Dashboard\n\n![Dashboard Screenshot](assets/addExpense.png)\n- Add Expense\n\n\n### PDF Export:\n![PDF Export Screenshot](assets/exportPDF.png)\n\n\n---\n\n## PDF Export Scalability\n\nThe PDF export feature has been implemented to scale efficiently for larger datasets. The export is designed to handle large numbers of rows with optimized rendering, and pagination is used when necessary.\n\n---\n\n## Testing\n\nYou can run tests using the following command (if you’ve set up tests):\n\n```bash\nnpm test\n```\n\n---\n\n## Deployment\n\nYou can deploy the backend and frontend on platforms like **Heroku**, **DigitalOcean**, **Vercel**, or **Netlify**.\n\n### Backend Deployment (Heroku)\n\n1. Initialize a git repository:\n\n   ```bash\n   git init\n   git add .\n   git commit -m \"Initial commit\"\n   ```\n\n2. Create a Heroku app:\n\n   ```bash\n   heroku create expense-tracker-backend\n   ```\n\n3. Push to Heroku:\n\n   ```bash\n   git push heroku master\n   ```\n\n4. Set environment variables on Heroku:\n\n   ```bash\n   heroku config:set DB_HOST=your-database-host DB_USER=your-db-user DB_PASSWORD=your-db-password DB_NAME=your-db-name JWT_SECRET=your-jwt-secret-key\n   ```\n\n5. Open the deployed app:\n\n   ```bash\n   heroku open\n   ```\n\n### Frontend Deployment (Vercel)\n\n1. Deploy the frontend to **Vercel**:\n\n   - Sign up for Vercel and link your repository.\n   - Follow the deployment instructions on the Vercel dashboard.\n\n---\n\n## Code Quality and Best Practices\n\n- **Modular Code**: The app is organized with separate components, services, and routes to promote reusability and maintainability.\n- **Error Handling**: The backend has proper error handling for edge cases such as invalid input, failed authentication, and database issues.\n- **Security**: Passwords are securely hashed using **bcrypt**, and authentication is handled with **JWT tokens**.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishikanimade%2Fexpense-tracker-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fishikanimade%2Fexpense-tracker-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishikanimade%2Fexpense-tracker-demo/lists"}