💸 Expenzo - Track Smart. Spend Bold!

Gen-Z Themed Smart Expense Tracker for HeisenHack 2024

A funky, colorful, and AI-assisted expense tracking app that helps users manage their finances with style!

🎯 About Expenzo

Expenzo is a Gen-Z themed expense tracker built for the 36-hour HeisenHack hackathon. It combines smart automation with a playful UI inspired by the HeisenHack poster aesthetic (yellow, teal, black, cartoon vibes).

✨ Key Features

🔐 Smart Authentication - JWT-based secure login/register
💰 Expense Management - Add, edit, delete, and filter expenses
📊 Visual Analytics - Interactive charts with Chart.js
🤖 AI Insights - Smart spending pattern analysis
👥 Group Bills - Split expenses with friends
📱 Mobile-First - Responsive design for all devices
🎨 Gen-Z Theme - Vibrant colors and funky animations
🌙 Dark Mode - Toggle between light and dark themes

🧱 Tech Stack

Frontend

React 18.2 + Vite - Lightning-fast development
TailwindCSS - Utility-first styling with custom HeisenHack theme
Chart.js + React-ChartJS-2 - Beautiful data visualizations
React Router - Client-side routing
Axios - HTTP client for API calls
Framer Motion - Smooth animations
React Hot Toast - Elegant notifications

Backend

Node.js + Express.js - RESTful API server
MongoDB + Mongoose - NoSQL database with ODM
JWT + bcryptjs - Authentication and password hashing
Express Rate Limit - API protection
Helmet - Security middleware
CORS - Cross-origin resource sharing

Optional Integrations

OpenAI API - AI-powered expense insights
Chart.js - Advanced data visualizations

🎨 Design Theme

HeisenHack-Inspired Color Palette:

Primary: #FFC300 (Vibrant Yellow) 🟡
Secondary: #2ECCB0 (Teal Green) 🟢
Accent: #00AEEF (Electric Blue) 🔵
Dark Base: #121212 (Matte Black) ⚫
Background: #FFF8E7 (Soft Cream) 🟨

Typography:

Headings: Bungee / Poppins ExtraBold
Body: Inter / Nunito

UI Elements:

Rounded cards with border-radius: 1.5rem
Playful emojis and funky icons (💰📊🍕🚕)
Light motion and hover animations
Glow effects and shadows

📦 Project Structure

EXPENZO/
├── backend/                 # Node.js API Server
│   ├── src/
│   │   ├── models/         # Mongoose models
│   │   ├── routes/         # Express routes
│   │   ├── middleware/     # Custom middleware
│   │   ├── utils/          # Helper functions
│   │   └── server.js       # Main server file
│   ├── .env                # Environment variables
│   └── package.json        # Backend dependencies
│
├── frontend/               # React Application
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── pages/          # Route components
│   │   ├── context/        # React context providers
│   │   ├── hooks/          # Custom React hooks
│   │   ├── utils/          # Helper functions
│   │   └── main.jsx        # App entry point
│   ├── public/             # Static assets
│   ├── tailwind.config.js  # TailwindCSS configuration
│   └── package.json        # Frontend dependencies
│
└── README.md               # Project documentation

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
MongoDB (local or Atlas)
Git

1. Clone & Setup

git clone <your-repo-url>
cd EXPENZO

2. Backend Setup

cd backend
npm install
cp .env.example .env
# Edit .env with your MongoDB URI and JWT secret
npm run dev

The backend server will start on http://localhost:5000

3. Frontend Setup

cd ../frontend
npm install
npm run dev

The frontend will start on http://localhost:5173

4. Environment Variables

Create backend/.env:

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/expenzo
JWT_SECRET=your_super_secret_jwt_key_here
JWT_EXPIRE=7d
FRONTEND_URL=http://localhost:5173
BCRYPT_ROUNDS=12

🧩 Features Implementation

✅ Completed Features

Project Structure - Full-stack setup with React + Node.js
Authentication System - JWT-based login/register
Expense CRUD - Add, edit, delete, view expenses
Dashboard - Summary cards and charts
UI Components - Funky Gen-Z themed components
Responsive Design - Mobile-first approach

🚧 In Progress

AI Insights - Smart spending analysis
Group Bills - Split expenses with friends
Chart Visualizations - Advanced analytics
SMS Detection - Extract expenses from text

📝 Planned Features

Export Functionality - CSV/PDF reports
Daily Reminders - Expense tracking notifications
Budget Alerts - Smart spending limits
Dark Mode - Theme toggle

🎪 API Endpoints

Authentication

POST /api/auth/register - Create new account
POST /api/auth/login - User login
GET /api/auth/me - Get current user
POST /api/auth/logout - User logout

Expenses

GET /api/expenses - Get user expenses
POST /api/expenses - Create new expense
PUT /api/expenses/:id - Update expense
DELETE /api/expenses/:id - Delete expense
GET /api/expenses/stats - Get expense statistics

Groups

GET /api/groups - Get user groups
POST /api/groups - Create new group
POST /api/groups/:id/expenses - Add group expense
GET /api/groups/:id/settlements - Calculate settlements

Insights

GET /api/insights/summary - Spending summary
GET /api/insights/ai - AI-generated insights

🎨 Component Library

Core Components

Navbar - Navigation with Expenzo branding
ExpenseCard - Individual expense display
ChartSection - Data visualization wrapper
AddModal - Expense creation modal
BudgetTracker - Progress visualization
LoadingSpinner - Funky loading animation

UI Elements

Button - Primary, secondary, outline variants
Card - Rounded cards with hover effects
Input - Fields with emoji placeholders
Badge - Category and status indicators

🚀 Deployment

Frontend (Vercel)

cd frontend
npm run build
# Deploy to Vercel

Backend (Render/Railway)

cd backend
# Deploy to Render or Railway

Database (MongoDB Atlas)

Create cluster on MongoDB Atlas
Update connection string in .env

🎯 Hackathon Demo Script

Landing Page - Showcase funky UI and branding
Authentication - Quick register/login demo
Add Expense - Show SMS detection feature
Dashboard - Real-time chart updates
AI Insights - Smart spending analysis
Mobile View - Responsive design demo

🎊 Fun Facts

36 hours of coding for HeisenHack 2024
Gen-Z themed with emojis and vibrant colors
Mobile-first design approach
AI-powered expense insights
Open source and hackathon-ready

🤝 Contributing

This project was built for HeisenHack 2024. Feel free to fork, improve, and make it even more funky!

Team

PAARTH DUTTA - Full-Stack Development 🎨
[Add team members] - [Add roles]

🎮 Demo Status

✅ Frontend Server: Running on http://localhost:5175/
✅ Backend Server: Running on http://localhost:5000/
✅ Authentication: JWT-based auth system
✅ UI Components: Complete Gen-Z themed components
✅ Expense Management: Add/Edit/Delete/View expenses
✅ Chart Integration: Chart.js visualizations ready
⚠️ Database: Requires MongoDB setup for full functionality

📄 License

MIT License - Built with 💖 for HeisenHack 2024

💸 Track Smart. Spend Bold! 🎯

Made with ☕ and lots of 🎵 during HeisenHack 2024

Name		Name	Last commit message	Last commit date
.vite		.vite
backend		backend
frontend		frontend
src/pages		src/pages
.env.template		.env.template
.gitignore		.gitignore
.vercelignore		.vercelignore
ADD_ME_FEATURE.md		ADD_ME_FEATURE.md
ADVANCED_SPLIT_FEATURES.md		ADVANCED_SPLIT_FEATURES.md
ANALYTICS_DASHBOARD_DOCS.md		ANALYTICS_DASHBOARD_DOCS.md
BANK_STATEMENT_IMPORT_FEATURE.md		BANK_STATEMENT_IMPORT_FEATURE.md
ENV_SETUP_GUIDE.md		ENV_SETUP_GUIDE.md
QUICK_START_IMPORT.md		QUICK_START_IMPORT.md
README.md		README.md
SPLIT_EXPENSE_INTEGRATION.md		SPLIT_EXPENSE_INTEGRATION.md
SPLIT_FEATURE_GUIDE.md		SPLIT_FEATURE_GUIDE.md
START-EXPENZO.bat		START-EXPENZO.bat
package.json		package.json
sample_bank_statement.csv		sample_bank_statement.csv
start-backend.bat		start-backend.bat
start-frontend.bat		start-frontend.bat
vercel.json		vercel.json

Latest commit

History

Folders and files

Repository files navigation