Skip to main content
This document provides a high-level, implementation-aware layout for the Rainy Day app.
It avoids code, focusing instead on components, structure, and simple wireframes to ensure clear alignment before design and development.
See also: Product Overview for product vision and technical architecture | UX Flows for user experience flows and behavioral patterns

​
1. App shell structure

Rainy Day uses Mantine for the UI shell, Nivo for charts, and Motion for subtle transitions.

​
High-level structure

  • Left Sidebar (Mantine Navbar)
    • App name / logo
    • Overview
    • Transactions
    • Weekly Checkup
    • Money Timeline
    • Settings
  • Top Bar (Mantine Header)
    • Period selector (week / month / custom) with explicit dates
    • Upload data button
    • “Updated” timestamp for the latest data refresh
    • Profile/avatar controls
  • Main Content Area
    • Loads the selected page
    • Spreadsheet-first on Transaction pages
    • Light charts on Overview + Checkup pages
    • The viewing period (week / month / custom) stays fixed while new CSV uploads simply update the data inside that period.

​
Wireframe (desktop shell)

 -----------------------------------------------------------
| Rainy Day            |  Period: [This week (Nov 10–16) ▼] |
|                      |  [Upload data]  Updated Nov 13     |
|----------------------|------------------------------------|
|  • Overview          |                                    |
|  • Transactions      |       [ Page Content ]             |
|  • Weekly Checkup    |       (varies by route)            |
|  • Money Timeline    |                                    |
|  • Settings          |                                    |
 -----------------------------------------------------------

​
2. Pages

Below are the main routes and their layouts, including which library will be used.

​
Overview

Purpose: A calm, ongoing summary of your spending, financial habits, and trends, reflecting insights from all data you have provided, not just the most recent week. Unlike the Weekly Checkup, which zooms into your past week and offers a forecast for the next, the Overview brings the big picture into focus, updating as more of your financial history is given.
  • Shows high-level metrics and trends for the selected viewing period (week/month/custom), but also draws on all uploaded data for context and comparison.
  • Includes highlights of recurring themes and big-picture progress, reinforcing the benefits of regular uploads and making financial clarity a habit.
  • Forecast connection: The Overview gives you context, but for specific, actionable expectations for the coming week, see the Rainy Day Forecast (featured at the end of each Weekly Checkup). As your data grows, these forecasts become smarter and more personalized.
  • Overview is always up-to-date: as you upload more files (old or new), your financial story gets clearer, enabling richer, more accurate insights across time.

​
Components used

  • Mantine: Grid, Card, Title, Text
  • Nivo: 1 small line or bar chart
  • Motion: soft fade-in of metric cards

​
Wireframe

[ Grid of 3 Cards ]
  • Total spent (this period, and all-time)
  • Trend vs previous periods (month, quarter, etc.)
  • Top lifetime category or habit highlight

[ Card ]
  Title: Your Spending Trends (All Data)
  [ Nivo Line/Bar Chart with multi-period capability ]

[ Card ]
  Long-term highlights or insights (text only)
  (See the Weekly Checkup for your Rainy Day Forecast)

​
Transactions

Purpose: Spreadsheet-like view of all imported transactions.

​
Components used

  • Mantine: Group (filters), Select, Date Picker, TextInput
  • Mantine: ScrollArea + Table for spreadsheet layout
  • Motion: optional subtle fade on load
  • No Nivo on this page (table-first)

​
Wireframe

[ Filters: Date Range | Category | Account | Search ]

----------------------------------------------
| Date | Description | Category | Amount    |
----------------------------------------------
| ...  | ...         | ...      | ...       |
| ...  | ...         | ...      | ...       |
----------------------------------------------

​
Weekly checkup

Purpose: A narrative-style summary of spending behavior, including a Rainy Day Forecast to gently prepare you for what may occur in the upcoming week, based on trends in your data.

​
Components used

  • Mantine: Stack, Card, Text, Divider
  • Nivo:
    • Small 2-bar comparison chart (this week vs last week)
    • Optional mini donut for category share
  • Motion: staggered card animations for a “calm feed” feel

​
Wireframe

[ Card ]
  "Here’s your 5-minute checkup for Nov 10–16."
  (If the week is still in progress, this card becomes:
  "Here’s your 5-minute checkup for Nov 10–16 so far.")

[ Card ]
  How your spending compares to last week
  [ Nivo Small Bar Chart ]

[ Card ]
  Category highlights (text items)

[ Card ]
  Gentle insight (1–2 sentences)

[ Card ]
  Rainy Day Forecast: What to watch for next week
  (Actionable forward-looking highlight e.g.: "Watch out for recurring expenses due next week" or "Your top category may increase, and here’s why.")
Behavior notes
  • The selected period (for example, “This week: Nov 10–16”) is independent of when CSVs are uploaded.
  • Users can upload CSVs at any time during the week; Rainy Day merges new data, recalculates the current period, and refreshes the Weekly Checkup.
  • The top bar’s “Updated” timestamp reflects the latest successful data ingestion.
Checkup state behavior Rainy Day displays the Weekly Checkup differently depending on the state of the selected period:
  • No data yet:
    Shows a placeholder card such as
    ”Your weekly checkup will appear here once you’ve uploaded some transactions.”
  • In-progress week:
    Uses wording such as
    ”Here’s your 5-minute checkup for Nov 10–16 so far.”
    The checkup updates whenever new CSVs are uploaded.
  • Completed week:
    Shows the final version of the checkup for the selected period without the “so far” label, and includes the Rainy Day Forecast for the upcoming week.

​
Money movement timeline

Purpose: Visualizes money flows across accounts.

​
Components used

  • Mantine: Timeline, Card, Stack, filters
  • Future: optional Nivo Sankey upgrade for richer flow visualization
  • Motion: fade/slide-in animation for entries

​
Wireframe

[ Filters: Date Range | Account ]

[ Mantine Timeline ]
  (Nov 5)  FCIB → ATM → Cash    ($200)
  (Nov 7)  Cash → CashApp → Chime ($150)

​
Settings

Purpose: User preferences, account details, data management.

​
Components used

  • Mantine: Tabs, Card, TextInput, Select, Switch, Button
  • No Nivo elements here
  • Optional Motion on tab changes

​
Wireframe

[ Tabs: Profile | Preferences | Data ]

[ Card ]
  Form fields...

​
3. Summary of component usage

​
Mantine (UI shell + layout)

  • AppShell
  • Navbar (Sidebar)
  • Header (Top bar)
  • Grid, Card, Stack, Group, ScrollArea, Table
  • Form inputs

​
Nivo (charts)

  • Overview: 1 Line or Bar chart
  • Weekly Checkup: mini Bar/Donut chart
  • Future Timeline: Sankey

​
Motion

  • Page transitions
  • Card fade/slide on Checkup page
  • Subtle animations across the app
If design changes or additional views are added later, they should follow the same structure:
Mantine for layout, Nivo for charts, Motion for movement, spreadsheet-first where logical.
  • Product Overview: Product vision, technical architecture, and roadmap
  • UX Flows: User experience flows, first-time onboarding, and behavioral patterns