💰 WhyImBroke

Your AI-Powered Financial Management Platform

Take control of your finances with intelligent expense tracking, smart budgeting, and insightful analytics.

🚀 Live Demo · 📧 Join Waitlist · 🐛 Report Bug

---

🌟 What is WhyImBroke?

WhyImBroke is a modern, AI-powered financial management platform designed to help you understand your spending patterns, create effective budgets, and achieve your financial goals. Built with cutting-edge technologies, it offers a seamless experience across all devices with bank-level security.

✨ Key Features

• 🤖 Smart Expense Tracking - AI-powered categorization of transactions
• 📊 Intelligent Budgeting - Create budgets with personalized recommendations
• 📈 Financial Analytics - Deep insights into spending patterns and trends
• 🎯 Goal Setting - Set and track financial objectives with progress monitoring
• 👥 Family Sharing - Collaborative financial management for households
• 🔒 Bank-Level Security - Enterprise-grade security for your financial data
• 📱 Responsive Design - Seamless experience on desktop, tablet, and mobile
• 🌙 Dark Theme - Modern, eye-friendly interface

---

🚀 Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 18 or higher)
• Bun (recommended) or npm/yarn
• Git (for cloning the repository)

Installation

1. Clone the repository

   git clone https://github.com/gurleenwadhwa-13/whyimbroke.git
   cd whyimbroke

2. Install dependencies

   bun install

3. Set up environment variables

   cp .env.example .env.local

4. Run the development server

   bun run dev

5. Open your browser Navigate to http://localhost:3000

🛠️ Tech Stack

Core Technologies

• Framework: Next.js 15.3.2 - React framework with App Router
• Language: TypeScript 5.0+ - Type-safe JavaScript
• ORM: Prisma 6.2.1 - Database toolkit
• Authentication: Clerk - Authentication as a service
• Styling: Tailwind CSS - Utility-first CSS framework
• Animations: Framer Motion - Production-ready motion library

UI Components

• Component Library: shadcn/ui - Beautifully designed components
• Icons: Lucide React - Beautiful & consistent icons
• Fonts: Inter - Optimized for UI

Development Tools

• Linting: ESLint with Next.js config
• Formatting: Prettier (recommended)
• Type Checking: TypeScript strict mode
• Package Manager: Bun/npm/yarn

🔧 Configuration

Environment Variables

Create a .env.local file in the root directory:

# Database
DATABASE_URL="your-database-connection-string"

# Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-publishable-key"
CLERK_SECRET_KEY="your-clerk-secret-key"

# Email Service (for waitlist notifications)
RESEND_API_KEY="your-resend-api-key"
MAILCHIMP_API_KEY="your-mailchimp-key"

# Analytics (optional)
GOOGLE_ANALYTICS_ID="your-ga-id"
VERCEL_ANALYTICS_ID="your-vercel-analytics-id"

# AI Services (if applicable)
OPENAI_API_KEY="your-openai-key"

Tailwind Configuration

The project uses a custom Tailwind configuration with:

• Custom color palette
• Extended spacing scale
• Custom animations
• Dark mode support

📱 Features in Detail

🎯 Waitlist System

• Email Collection: Capture interested users before launch
• Form Validation: Client and server-side validation
• Success States: Animated confirmation messages
• Social Proof: Display waitlist statistics
• Server Actions: Modern form handling with Next.js

🎨 Animations

• Page Transitions: Smooth enter/exit animations
• Scroll Animations: Elements animate on scroll into view
• Hover Effects: Interactive button and card animations
• Loading States: Skeleton loaders and spinners

📊 Dashboard Preview

• Financial Stats: Mock financial data display
• Transaction List: Sample transaction history
• Charts & Graphs: Visual spending analytics
• Responsive Cards: Mobile-friendly layout

🚀 Deployment

Vercel (Recommended)

1. Connect your repository

   • Import your GitHub repository to Vercel
   • Vercel will auto-detect Next.js configuration

2. Set environment variables

   • Add your environment variables in Vercel dashboard
   • Configure production database connections

3. Deploy

   • Vercel will automatically deploy on every push to main branch
   • Preview deployments for pull requests

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify: Use @netlify/plugin-nextjs
• Railway: Direct Next.js support
• DigitalOcean App Platform: Node.js applications
• AWS Amplify: Full-stack applications

🧪 Development

Available Scripts

bun run dev          # Start development server
bun run build        # Build for production
bun run start        # Start production server
bun run lint         # Run ESLint
bun run type-check   # Run TypeScript compiler

Code Quality

• ESLint: Configured with Next.js recommended rules
• TypeScript: Strict mode enabled for better type safety
• Prettier: Recommended for consistent code formatting

Adding New Components

1. Create component in appropriate directory
2. Use TypeScript for type safety
3. Follow existing naming conventions
4. Add proper exports in index files
5. Include JSDoc comments for complex components

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b username:amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin username:amazing-feature)
6. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js - The React framework for production
• Tailwind CSS - For the amazing utility-first CSS framework
• Framer Motion - For beautiful animations
• shadcn/ui - For the component library
• Lucide - For the beautiful icons
• Vercel - For hosting and deployment
• Clerk - For authentication
• Prisma - For database operations

📞 Support

• 📧 Reach out: DM me on X: @gurleenwadhwa
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

---

Built with ❤️ by Gurleen Wadhwa

Website • X • GitHub