Web MVP Implementation Plan

Note: This is a static reference document. The active, managed plan is maintained in Cursor’s planning system. This document is kept for quick reference and historical context.

Reference Documentation:

• Product Overview: Product vision, technical architecture, and roadmap
• UX Flows: User experience flows, first-time onboarding, and behavioral patterns
• UI Layout: Component structure, wireframes, and implementation details

​

Overview

Build the Rainy Day web MVP following the documented roadmap. Focus on spreadsheet-first approach, calm interfaces, and incremental progress. Tech stack: Next.js, Mantine UI, Nivo Charts, Motion (Framer Motion), Supabase.

​

Implementation strategy

​

Phase 1: Foundation setup (prerequisites)

1. Install and configure core dependencies
   • Add Mantine UI with theme configuration
   • Add Nivo Charts for data visualization
   • Add Motion (Framer Motion) for gentle animations
   • Set up Supabase client and configuration
   • Configure shared packages structure (packages/ui, packages/utils, packages/api-client)
   • Ensure all user data flows use encryption (HTTPS/TLS) and respect privacy by design principles
   • Start with Supabase Row-Level Security and plan authentication from the outset for real privacy
2. Project structure and routing
   • Set up Next.js app directory structure
   • Create main routes: / (Overview), /upload, /transactions, /weekly-checkup, /timeline, /settings
   • Implement base layout with Mantine AppShell (Navbar + Header) per UI Layout
   • Create shared UI components package structure

​

Phase 2: Data ingestion & storage

3. CSV parsing and normalization
   • Build CSV parser for at least one Bahamian bank format
   • Create transaction normalization layer with clear separation:
     • Raw transactions (as uploaded)
     • Normalized data (standardized format)
     • Computed insights (calculated values)
   • Implement basic category detection rules
   • Add error handling for malformed files
   • Note: PDF parsing is optional for later phases
4. Supabase database and API
   • Design Supabase Postgres schema (User, Transaction, Category, Statement)
   • Set up Row-Level Security policies for data isolation
   • Create Next.js API routes / server actions for CSV upload and processing
   • Implement transaction storage and retrieval using Supabase client
   • Add basic validation and error handling
   • Configure Supabase Auth (minimal setup for MVP)

​

Phase 3: Core UI - Spreadsheet first

5. Transaction list view (spreadsheet-style)
   • Build transaction table with Mantine components per UI Layout
   • Implement sorting, filtering, and search
   • Add date range filtering
   • Display normalized transaction data in familiar rows/columns format
   • Follow spreadsheet-first approach from UX Flows
6. Upload interface
   • Create file upload component with drag-and-drop
   • Add progress indicators and success/error states
   • Implement upload flow with gentle Motion animations
   • Show example file format for guidance
   • Follow first-time upload flow from UX Flows Phase 3

​

Phase 4: First-time user experience

7. Onboarding flow (7 phases)
   • Implement Phase 1: Warm, calm welcome screen
   • Implement Phase 2: How Rainy Day works (3-card explanation)
   • Implement Phase 3: First upload with progress feedback
   • Implement Phase 4: First-time spreadsheet setup mode
     • Allow users to rename transactions, categorize, mark recurring, merge duplicates
     • Create silent rules for future uploads
   • Implement Phase 5: Transition to dashboard
   • Implement Phase 6: Introduce weekly checkup (optional)
   • Implement Phase 7: Establish weekly habit loop
   • Reference: UX Flows for detailed flow specifications
8. Empty states
   • Create friendly empty states for all pages per UX Flows
   • Add helpful illustrations and guidance
   • Maintain calm, supportive tone

​

Phase 5: Insights & visualizations

9. Minimal insights calculation
   • Calculate top spending categories
   • Compute weekly/monthly totals and differences
   • Generate basic spending trends
10. First charts (bar + line)
    • Implement category distribution bar chart (Nivo) per UI Layout
    • Add spending trends line chart over time
    • Ensure charts complement, not replace, spreadsheet view
    • Use calm, monotone color palette with gentle accents
11. Weekly checkup view
    • Create weekly summary component per UI Layout
    • Display spend changes, category breakdowns
    • Add supportive, non-judgmental insights text
    • Handle states: no data, in-progress week, completed week
    • Follow tone and copywriting principles from UX Flows

​

Phase 6: Additional features

12. Timeline view (basic)
    • Build basic money movement timeline per UI Layout
    • Show transfers, withdrawals, fees
    • Keep it non-automated initially (manual categorization)
13. Period selector and global behavior
    • Implement period selector in top bar (This week, Last week, This month, Custom)
    • Ensure period updates all pages simultaneously
    • Add “Updated” timestamp display
    • Follow global behavioral rules from UX Flows
14. Minimal authentication
    • Implement simple auth using Supabase Auth
    • Add user session management
    • Protect routes and API endpoints
    • Keep it lightweight for MVP

​

Phase 7: Polish & motion

15. UI polish and motion
    • Apply consistent spacing and typography per UI Layout
    • Add gentle Motion animations throughout (fade-ins, soft slides, staggered cards)
    • Ensure responsive design
    • Test accessibility (keyboard nav, contrast)
    • Follow motion philosophy from UX Flows: subtle, intentional, calming

​

Key files to create/modify

​

Frontend structure

• apps/rainy-day/web/src/app/layout.tsx - Mantine providers, theme setup, AppShell
• apps/rainy-day/web/src/app/page.tsx - Overview dashboard
• apps/rainy-day/web/src/app/upload/page.tsx - Upload interface
• apps/rainy-day/web/src/app/transactions/page.tsx - Transaction list (spreadsheet-style)
• apps/rainy-day/web/src/app/weekly-checkup/page.tsx - Weekly checkup view
• apps/rainy-day/web/src/app/timeline/page.tsx - Money movement timeline
• apps/rainy-day/web/src/app/settings/page.tsx - Settings page
• apps/rainy-day/web/src/components/ - Reusable UI components
• apps/rainy-day/web/src/lib/ - Utilities, parsers, helpers

​

Backend/API

• apps/rainy-day/web/src/app/api/upload/route.ts - CSV upload handler
• apps/rainy-day/web/src/app/api/transactions/route.ts - Transaction CRUD
• apps/rainy-day/web/src/lib/supabase.ts - Supabase client setup

​

Shared packages

• packages/ui/ - Shared UI components
• packages/utils/ - CSV parsing, normalization, category detection
• packages/api-client/ - API request utilities

​

Success criteria

• Users can complete the 7-phase first-time onboarding flow smoothly
• Users can upload CSV from at least one Bahamian bank
• Transactions display in clear, spreadsheet-style table
• First-time setup mode allows users to teach Rainy Day their preferences
• Basic insights (categories, totals, weekly changes) are visible
• First charts (bar + line) complement the data view
• Weekly checkup provides calm, supportive summary with proper state handling
• Timeline view shows basic money movement
• Period selector updates all pages consistently
• Data persists in Supabase Postgres database
• Minimal auth protects user data
• Interface feels calm, predictable, and anxiety-reducing
• All empty states are friendly and helpful
• Motion animations are subtle and calming

​

Notes

• Follow spreadsheet-first approach: users see raw data before charts
• Keep animations gentle and minimal (Motion) - no bouncy or aggressive movements
• Maintain calm color palette with subtle accents
• Build incrementally, test each feature before moving on
• Document decisions and patterns as we build
• Reference UX Flows for all user-facing copy and behavior
• Reference UI Layout for component choices and structure
• Reference Product Overview for technical architecture decisions