Stacks is a revolutionary financial literacy platform that combines AI coaching, blockchain transparency, and gamified rewards to make building wealth engaging and sustainable. Designed for Gen Z and young professionals, Stacks transforms traditional financial education into an interactive, personalized experience.

Making wealth accessible to everyone through technology.

Traditional financial education is broken - it's boring, one-size-fits-all, and disconnected from real behavior change. Stacks bridges this gap by:

• Personalizing financial advice through AI coaching
• Gamifying wealth-building with blockchain-verified rewards
• Democratizing access to sophisticated financial tools
• Educating users through interactive, engaging experiences

• 📚 Financial literacy gap among young adults
• 🎯 Lack of personalized financial guidance
• 💰 Difficulty maintaining savings habits
• 🏦 Barriers to investment and wealth building
• 🤖 Need for 24/7 financial coaching

• Personalized insights based on spending patterns
• 24/7 availability for financial questions and guidance
• Smart budget analysis with optimization recommendations
• Investment suggestions tailored to risk tolerance
• Goal achievement tracking with actionable steps

• Plaid integration for secure account linking
• Real-time transaction monitoring and categorization
• Bank-level encryption and security standards
• Multi-account support across different institutions

• SMART goals framework with blockchain backing
• Milestone tracking with progress visualization
• Automated savings recommendations
• Goal commitment through smart contracts

• STX tokens earned for financial milestones
• Blockchain transparency for all rewards
• Gamified experience making saving fun
• Real value tokens with future redemption options

• Financial overview with real-time data
• Budget tracking and spending analysis
• Investment portfolio monitoring
• Goal progress visualization

• Interactive tutorials on financial concepts
• Personalized learning paths based on goals
• Market insights and investment education
• Best practices for wealth building

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS + Custom CSS Variables
• UI Components: Radix UI + Custom Components
• Animations: Framer Motion
• Charts: Recharts
• State Management: React Hooks + Zustand (implied)

• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• API Routes: Next.js API Routes
• Real-time: Supabase Realtime

• Banking: Plaid API
• AI: Google Generative AI (@google/generative-ai)
• Blockchain: Polygon Network (for STX tokens)
• Payments: Stripe (future implementation)

• Package Manager: pnpm
• Linting: ESLint + Prettier
• Type Checking: TypeScript
• Deployment: Vercel (recommended)

Users (Supabase Auth)
├── Profiles (user metadata)
├── Bank Connections (Plaid integration)
├── Financial Accounts
├── Transactions
├── Budget Categories
├── Goals & Milestones
├── Reward Tokens
└── AI Chat Messages

/api/
├── auth/           # Authentication endpoints
├── bank/           # Plaid integration
├── budget/         # Budget management
├── goals/          # Goal setting and tracking
├── transactions/   # Transaction management
├── ai/             # AI coach interactions
├── wallet/         # Token management
└── rewards/        # Reward system

src/
├── app/                    # Next.js App Router pages
│   ├── (auth)/            # Authentication pages
│   ├── dashboard/         # Main application
│   ├── budget/            # Budget management
│   ├── goals/             # Goal setting
│   └── api/               # API routes
├── components/
│   ├── ui/                # Base UI components
│   ├── dashboard/         # Dashboard-specific components
│   ├── auth/              # Authentication components
│   ├── budget/            # Budget components
│   ├── goals/             # Goal components
│   ├── ai-coach/          # AI chat interface
│   └── rewards/           # Reward system components
└── lib/
    ├── supabase.ts        # Database client
    ├── plaid.ts           # Banking integration
    ├── store.ts           # State management
    └── events.ts          # Event tracking

• Node.js 18+ and pnpm
• Supabase account and project
• Plaid developer account

1. Clone the repository

   git clone https://github.com/Sultanlodi/Hackathon25.git
   cd Hackathon25

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Fill in your environment variables:

   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   
   # Plaid
   PLAID_CLIENT_ID=your-plaid-client-id
   PLAID_SECRET=your-plaid-secret
   PLAID_ENV=sandbox
   
   # Google AI
   GOOGLE_GENERATIVE_AI_API_KEY=your-google-ai-key

4. Set up Supabase database

   • Follow the complete setup guide in SUPABASE_SETUP.md
   • Run the provided SQL schema in your Supabase dashboard

5. Start the development server

   pnpm dev

6. Open the application Visit http://localhost:3000

Hackathon25/
├── public/                 # Static assets
├── src/
│   ├── app/               # Next.js App Router
│   │   ├── globals.css    # Global styles
│   │   ├── layout.tsx     # Root layout
│   │   ├── page.tsx       # Landing page
│   │   ├── dashboard/     # Dashboard pages
│   │   ├── budget/        # Budget management
│   │   ├── goals/         # Goal setting
│   │   ├── login/         # Authentication
│   │   └── api/           # API routes
│   ├── components/        # React components
│   │   ├── ui/            # Base UI components
│   │   ├── dashboard/     # Dashboard components
│   │   ├── auth/          # Auth components
│   │   ├── budget/        # Budget components
│   │   ├── goals/         # Goal components
│   │   ├── ai-coach/      # AI chat components
│   │   └── rewards/       # Reward components
│   └── lib/               # Utilities and configs
│       ├── supabase.ts    # Database client
│       ├── plaid.ts       # Banking API
│       ├── store.ts       # State management
│       └── events.ts      # Analytics
├── .env.local             # Environment variables
├── SUPABASE_SETUP.md      # Database setup guide
├── package.json           # Dependencies
├── tailwind.config.js     # Styling config
└── tsconfig.json          # TypeScript config

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm lint:fix - Fix ESLint errors
• pnpm type-check - Run TypeScript checks
• pnpm format - Format code with Prettier
• pnpm format:check - Check code formatting

• Bank-level encryption for all financial data
• Row Level Security (RLS) in Supabase
• No data selling - your information stays private
• FDIC-insured partner institutions
• Compliance with financial regulations

1. AI-First Approach: Personalized coaching available 24/7
2. Blockchain Transparency: All rewards and goals verified on-chain
3. Gamification: Making financial literacy engaging and fun
4. Real Integration: Live bank data and actual investment options
5. Education Focus: Teaching rather than just tracking
6. Gen Z Optimized: Modern UI/UX designed for digital natives

We welcome contributions! Please see our contributing guidelines and code of conduct.

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