Wise Insights - Financial Analytics Dashboard

A Next.js web application that mimics the Wise web interface with a supercharged Insights tab, featuring cashflow prediction, spending analysis, savings projections, achievements, and AI-powered insights.

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation & Launch

# Install dependencies
npm install

# Set up database (creates SQLite DB and seeds with mock data)
npx prisma migrate dev
npx prisma db seed

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Production Build

# Build for production
npm run build

# Start production server
npm start

📋 What's Implemented

✅ Core Features

1. Wise-like UI/UX

   • Sidebar navigation matching Wise design
   • Header with user profile and actions
   • Responsive layout with Tailwind CSS
   • Wise brand colors and styling

2. Financial Dashboard (/)

   • Total balance overview
   • Account cards (Stocks, Cash, Interest)
   • Recent transactions summary
   • Quick actions (Send, Add money, Request)

3. Insights Dashboard (/insights)

   • Wealth & Cashflow: Historical cashflow chart with 12-month forecast
   • Savings Jars: Interactive jar cards with scenario projections (+20%, Pause)
   • Spending Analysis: Category pie chart and weekday bar chart
   • AI Insights: Persona detection with personalized tips
   • Achievements: Progress tracking with unlockable card skins

✅ Backend APIs

• GET /api/insights - Aggregated financial data and analytics
• GET /api/achievements - Achievement progress and card skins
• POST /api/ai-insights - AI-generated personalized insights

✅ Data Models

Complete Prisma schema with:

• User, Account, Transaction, Jar
• Achievement, CardSkin, UnlockedAchievement

🎯 What's Working

Fully Functional

• ✅ Database migrations and seeding
• ✅ All API endpoints returning correct data
• ✅ Frontend pages rendering without errors
• ✅ Charts displaying with Recharts
• ✅ Interactive jar scenario buttons
• ✅ Achievement progress calculation
• ✅ Persona detection algorithm
• ✅ Responsive design
• ✅ ESLint passing (no errors)

Verified Endpoints

• Home page: GET / → 200 OK
• Insights page: GET /insights → 200 OK
• Insights API: GET /api/insights → Returns €9,641.06 total wealth
• Achievements API: GET /api/achievements → Returns 6 achievements, 4 card skins
• AI Insights API: POST /api/ai-insights → Returns personalized tips

🎭 Mocked Data

Database Seed (prisma/seed.ts)

• 1 User: Eduard Baranovskyi (Germany, EUR)
• 2 Accounts: Main EUR (€1,902.44), Stocks (€2,038.62)
• 3 Jars: Vacation Fund, Emergency Fund, New Laptop
• 587 Transactions: 12 months of realistic spending patterns
  • Monthly salary deposits (€3,200-€3,800)
  • Groceries, Restaurants, Coffee, Shopping, Transport, etc.
  • Weekend-biased spending for social categories
• 6 Achievements: Coffee Lover, Grocery Master, Frequent Flyer, Subscription Pro, Foodie, Super Saver
• 4 Card Skins: Coffee Edition, Traveler Edition, Foodie Edition, Saver Edition
• 2 Pre-unlocked Achievements: Coffee Lover, Foodie

Transaction Patterns

• Categories: Groceries (33%), Transport (15%), Shopping (15%), Restaurants (11%), etc.
• Time Range: Last 12 months (Nov 2024 - Nov 2025)
• Weekend Bias: Restaurants, Coffee, Entertainment transactions favor weekends

🔧 Hardcoded Values

Configuration

• Currency: EUR (hardcoded throughout)
• Database: SQLite (file:./dev.db)
• User: Single user system (assumes first user in DB)
• Time Periods:
  • Spending analysis: Last 90 days
  • Cashflow forecast: 12 months
  • Wealth prediction: 12 months

UI/UX

• Persona Thresholds:
  • Social Spender: >30% social categories + >40% weekend spending
  • Shopaholic: >35% shopping
  • Explorer: >25% travel/transport
  • Home Chef: >30% groceries
• Achievement Thresholds: Fixed in seed data (e.g., 50 coffees, 100 groceries)
• Jar Scenarios: +20% boost, Pause (client-side calculation)

AI Insights

• Mock Implementation: Returns predefined tips based on persona
• No Real LLM: Currently uses rule-based persona matching
• Fallback: Static text if API fails

Styling

• Wise Colors:
  • Green: #9fe870, #00b64f
  • Navy: #163300
  • Background: #f9fafb
• Fonts: System UI stack (no custom fonts)

📊 Current Data Snapshot

• Total Wealth: €9,641.06
• Average Monthly Net: €1,553.83
• Projected Wealth (12mo): €28,287
• Spending Categories: 9 categories tracked
• Unlocked Achievements: 3/6 (Coffee Lover, Foodie, Subscription Pro)
• Unlocked Card Skins: 2/4 (Coffee Edition, Foodie Edition)

🚧 Next Steps for Improvement

High Priority

1. Real AI Integration

   • Replace mock AI insights with OpenAI/Anthropic API
   • Add environment variable for API keys
   • Implement proper error handling and rate limiting

2. Multi-User Support

   • Add authentication (NextAuth.js or Clerk)
   • User-specific data filtering
   • Session management

3. Data Refresh

   • Real-time transaction sync (if connecting to Wise API)
   • Manual refresh button
   • Auto-refresh intervals

Medium Priority

4. Enhanced Analytics

   • Time range filters (30/90/365 days)
   • Category drill-down
   • Export to CSV/PDF
   • Comparison periods (month-over-month)

5. Jar Management

   • Create/edit/delete jars
   • Manual contribution tracking
   • Goal adjustments

6. Achievement System

   • Real-time unlock notifications
   • Achievement history
   • Share achievements

Low Priority

7. Performance

   • Add caching for API responses
   • Optimize database queries
   • Implement pagination for transactions

8. Testing

   • Unit tests for analytics functions
   • Integration tests for API routes
   • E2E tests with Playwright

9. Production Readiness

   • Environment variable validation
   • Error logging (Sentry)
   • Analytics tracking
   • SEO optimization

🛠️ Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm start            # Start production server
npm run lint         # Run ESLint
npm run db:migrate   # Run database migrations
npm run db:seed      # Seed database with mock data
npm run db:reset     # Reset database (WARNING: deletes all data)

Project Structure

wise-app/
├── prisma/
│   ├── schema.prisma      # Database schema
│   ├── seed.ts            # Seed script
│   └── migrations/        # Database migrations
├── src/
│   ├── app/               # Next.js App Router
│   │   ├── api/           # API routes
│   │   ├── insights/       # Insights page
│   │   └── page.tsx       # Home page
│   ├── components/        # React components
│   ├── lib/               # Utilities & business logic
│   └── types/             # TypeScript types
└── public/                # Static assets

Environment Variables

Create .env file:

DATABASE_URL="file:./dev.db"
# Add when implementing real AI:
# OPENAI_API_KEY="your-key-here"

Database Management

# View database in Prisma Studio
npx prisma studio

# Reset and reseed
npm run db:reset
npx prisma db seed

📝 API Documentation

GET /api/insights

Returns aggregated financial insights.

Response:

{
  "totalWealth": 9641.06,
  "avgMonthlyNet": 1553.83,
  "projectedWealth12Mo": 28287,
  "cashflow": [...],
  "jars": [...],
  "spendingCategories": [...],
  "spendingWeekdays": [...],
  "persona": { "label": "Home Chef", "description": "..." }
}

GET /api/achievements

Returns achievements and card skins with unlock status.

Response:

{
  "achievements": [...],
  "cardSkins": [...]
}

POST /api/ai-insights

Generates personalized insights (currently mocked).

Request:

{
  "persona": "Home Chef",
  "stats": { ... }
}

Response:

{
  "bullets": [
    "Your grocery spending is 15% below average...",
    "Consider buying seasonal produce...",
    "Your cooking habit saves you approximately..."
  ]
}

🐛 Known Limitations

1. Single User: Assumes first user in database
2. Mock AI: No real LLM integration
3. No Auth: No user authentication
4. Static Data: No real-time updates
5. EUR Only: Currency hardcoded to EUR
6. No Error Boundaries: Basic error handling

📄 License

This is a hackathon project for demonstration purposes.

👥 Credits

Built for Wise Hackathon 2025 - Insights Tab Track.