Spendwise - Expense Tracker

Spendwise is an expense tracking website that allows you to easily log and categorize your expenses, set budgets, and track your spending habits. The website is built with Next.js, a popular React-based framework for server-rendered and statically generated websites and applications.

The website features a clean and intuitive interface, making it easy to use and navigate. You can create accounts, log in, and start tracking your expenses right away. The website also features a budgeting system, which allows you to set budgets for different categories of expenses and track your spending against those budgets. You can also import your online transactions by uploading your bank statement pdfs and also generate detailed reports and export it as csv or pdf.

The website is designed to be fast, secure, and scalable, making it a great choice for anyone looking for an expense tracking solution.

Table of Contents

• Features
• Tech Stack
• Development
• Deployment
• Contributors
• License
• Contact

Features

• User authentication and authorization
• Expense tracking and categorization
• Import Transactions with PDF
• Detailed Report Generation
• Budgeting system
• Fast, secure, and scalable
• Clean and intuitive interface
• Dark Mode support
• Web Push Notifications
• Group Expense Splitting
• Progressive Web App
• AI Generated Financial Advice

Tech Stack

• Next.js (React-based framework): Provides server-side rendering and static site generation capabilities for optimal performance and SEO.
• Tailwind CSS (CSS framework): Enables utility-first CSS styling, allowing for rapid and flexible UI design.
• TypeScript (programming language): Adds static type checking to JavaScript, improving code quality and developer experience.
• PostgreSQL (database): A powerful, open-source relational database system known for its reliability and feature-rich capabilities.
• NextAuth (authentication and authorization): Simplifies authentication and authorization, supporting multiple providers including Google login.
• ShadCN UI (UI library): Provides pre-built, customizable UI components to accelerate development.
• Prisma (ORM): Facilitates database access with an intuitive, type-safe API.
• Recharts (Data Visualization): Used for creating dynamic and interactive charts and graphs for visualizing data.
• jspdf (Report Generation): Allows for the creation and export of PDF reports with embedded charts and tables.
• Nodemailer (Emails): Enables sending emails from the application, useful for notifications and reports.
• tanstack/react-query (React Query): Manages server-state and caching, improving data fetching and synchronization.
• next-themes (Theme management): Provides support for dark mode and theme switching, enhancing the user experience.
• web-push (Web Push Notifications): Enables sending push notifications to users' devices for important updates and reminders.
• next-pwa (Progressive Web App): Adds support for progressive web apps, enabling offline functionality and improved user experience.
• zod (Zod): Used for data validation and type-safe validation.
• Vercel AI SDK (AI): Used for generating financial advice from the application using Gemini AI.

Development

• Clone the repository

  git clone "https://github.com/Project-Group-SGP/Expense-Tracker"

• Run npm install or yarn install to install dependencies

  npm install

OR

  yarn install

• Add Credentials and other secret keys in .env file
• Run npm run dev or yarn dev to start the development server

  npm run dev

OR

  yarn dev

• Open http://localhost:3000 in your browser to see the result

Deployment

• Deploy to Vercel (recommended)
• Deploy to Netlify
• Deploy to AWS
• Deploy to Google Cloud
• Deploy to Microsoft Azure

Demo Link

https://trackwithspendwise.vercel.app/

Contributors

License

This project is licensed under the MIT License. See LICENSE for details.

Contact

For any questions or support, please contact [email protected] or open an issue on the GitHub repository.