Skip to content

DOCUMENTATION.md

Latest commit

 

History

History
75 lines (58 loc) · 3.71 KB

DOCUMENTATION.md

File metadata and controls

75 lines (58 loc) · 3.71 KB

📖 PennyWise Developer Documentation

Welcome to the technical documentation for PennyWise. This guide explains the architecture, variables, and styling conventions used in the app.

🎨 Color & Theme Customization

To modify the visual appearance of PennyWise, you should look in these specific areas:

1. Global Backgrounds & Base Colors

  • File: index.html
  • Location: Inside the <style> tag and the <body> class.
  • How to change: Modify background-color in CSS or Tailwind classes like bg-[#F8F9FB] (Light) and dark:bg-slate-950 (Dark).

2. Dashboard Highlights (Indigo Gradient)

  • File: views/HomeView.tsx and views/AccountView.tsx
  • Location: The main balance cards.
  • Light classes: bg-gradient-to-br from-indigo-50 to-blue-50 border-blue-100/50
  • Dark classes: dark:from-slate-900 dark:to-slate-800 dark:border-slate-700/50
  • Goal: To change this primary accent, replace indigo and blue with your chosen palette (e.g., emerald, violet).

3. Navigation Bar (Bottom Nav)

  • File: components/BottomNav.tsx
  • Location: The <nav> container classes.
  • Current style: Uses bg-white/80 (Light) and dark:bg-slate-900/80 (Dark) with a glass-morphism blur.
  • Text/Icon Highlights: The color logic is determined by the isActive constant:
    • Light mode active: text-slate-900
    • Dark mode active: dark:text-white
    • Inactive: text-slate-400 dark:text-slate-500

4. Primary Accent Elements (Plus FAB)

  • File: App.tsx
  • Location: The floating plus button.
  • Colors: bg-indigo-600 (Light) and bg-indigo-400 (Dark). Use these for high-visibility interactive elements.

🛠 Variable Dictionary

Global State (App.tsx)

  • activeView: (String) Controls which screen is currently visible (e.g., 'home', 'budget').
  • theme: ('light' | 'dark') Stores the user's current appearance preference.
  • transactions: (Array) The core list of all income and expense objects.
  • accounts: (Array) List of user-created wallets/banks.
  • categories: (Array) List of spending buckets (Food, Bills, etc.).
  • budgets: (Array) User-defined monthly limits per category.
  • isTxModalOpen: (Boolean) Toggles the bottom-sheet transaction entry form.
  • userProfile: (Object) Contains name, avatar, and savingsGoal. Persisted in localStorage as pennywise_profile.

Component Logic

  • stats: (HomeView.tsx) A memoized calculation of total income vs expense for the current month.
  • monthlySavings: (ProfileView.tsx) Calculates total income minus expenses for the current month to track against the user's target.
  • groupedTransactions: (TransactionsView.tsx) An object that sorts transactions by date for the history list.
  • budgetProgress: (BudgetView.tsx) Calculates the percentage of a budget used by comparing spending vs limits.

🏗 Tailwind Classname Reference

Layout Classes

  • max-w-md: Limits the app width to 448px (Mobile-first feel).
  • no-scrollbar: Custom class (defined in index.html) to hide scrollbars while allowing scrolling.
  • fixed bottom-0: Sticks navigation elements to the bottom of the viewport.

Aesthetic Classes

  • rounded-[2.5rem]: Large rounded corners for the "Modern App" look.
  • backdrop-blur-md: Creates the frosted glass effect on the navigation bar.
  • animate-in fade-in: Uses Tailwind's animation plugin for smooth screen transitions.
  • shadow-2xl shadow-slate-200: Adds depth with soft, colored shadows.

Interactive Classes

  • active:scale-95: Provides haptic-like visual feedback when tapping buttons.
  • focus:ring-0: Removes the default browser input border as requested.
  • transition-all duration-300: Ensures smooth color and size changes over 300ms.