Project Checklist✅


---

# **OnlyFunds Development Roadmap**

This roadmap outlines the phased development of OnlyFunds, an AI-powered personal finance advisor. Each phase builds upon the previous one, introducing new features and technologies.

---

## **Phase 1: Core UI & Local Data Management (MVP)**

**Goal:** Establish the fundamental user interface, local data storage, and basic user authentication to demonstrate core financial tracking capabilities without any external backend or AI services. This phase focuses on a fully client-side, self-contained application.

**Technologies:** Next.js, TypeScript, Zustand, Zod, Tailwind CSS, `localStorage`, `bcryptjs` (for local hashing).

### **1. Application Foundation & Setup**

*   [x] Initialize Next.js project with TypeScript.
*   [x] Configure Tailwind CSS for responsive design and theme switching.
*   [x] Install core dependencies: Zustand, Zod, `bcryptjs`, `react-hook-form`, `@hookform/resolvers`.
*   [x] Set up `tsconfig.json`, `next.config.js`, `globals.css`.
*   [x] Define initial `package.json` scripts and dependencies.
*   [x] Establish root application layout (`src/app/layout.tsx`) including `<html>`, `<body>`, and global styles.

### **2. Core UI Components & Theming**

*   [x] Develop `Button.tsx`: Reusable button component with variants (primary, secondary) and sizes.
*   [x] Develop `Input.tsx`: Reusable input field component with label, placeholder, and error display.
*   [x] Develop `Card.tsx`: Generic card component for content containers.
*   [x] Develop `ThemeToggle.tsx`: Component to switch between light/dark themes.
*   [x] Implement light/dark theme switching logic using `localStorage` and Tailwind's `dark:` variant.
*   [x] Ensure theme preference persists across sessions.
*   [x] Apply theme classes to the `body` element based on current theme.

### **3. Data Modeling & Validation**

*   [x] Define `User` interface (id, username, passwordHash) in `src/lib/types/auth.ts`.
*   [x] Define `Transaction` interface (id, amount, date, description, category, type: 'expense'|'income') in `src/lib/types/expense.ts`.
*   [x] Define `Budget` interface (categoryId, amount) in `src/lib/types/budget.ts`.
*   [x] Create `index.ts` in `src/lib/types/` to export all types.
*   [x] Define `signupSchema` for user registration validation using Zod in `src/lib/utils/validation.ts`.
*   [x] Define `loginSchema` for user login validation using Zod in `src/lib/utils/validation.ts`.
*   [x] Define `transactionSchema` for expense/income entry validation using Zod.
*   [x] Define `budgetSchema` for budget limit validation using Zod.

### **4. Local Data Persistence & Security**

*   [x] Create `src/lib/utils/localDb.ts` with generic functions: `saveItem(key, value)`, `getItem(key)`, `removeItem(key)`.
*   [x] Implement specific `localDb` functions for `saveUser`, `getUser`, `saveTransactions`, `getTransactions`, `saveBudgets`, `getBudgets`.
*   [x] Implement client-side password hashing using `bcryptjs` for local user storage.

### **5. Zustand State Management**

*   [x] Create `src/lib/zustand/authStore.ts`:
    *   [x] State: `user`, `isAuthenticated`, `isLoading`.
    *   [x] Actions: `signup` (hashes password, saves to `localDb`), `login` (compares password, sets `isAuthenticated`), `logout` (clears `localDb`), `checkAuthStatus` (on app load).
*   [x] Create `src/lib/zustand/expenseStore.ts`:
    *   [x] State: `transactions` (array of `Transaction` objects).
    *   [x] Actions: `addTransaction` (saves to `localDb`), `fetchTransactions` (loads from `localDb`).
*   [x] Create `src/lib/zustand/budgetStore.ts`:
    *   [x] State: `budgets` (map of categoryId to amount).
    *   [x] Actions: `setBudget` (saves to `localDb`), `fetchBudgets` (loads from `localDb`), `getBudgetProgress` (calculates spending vs. budget using `expenseStore` data).
*   [x] Create `src/lib/zustand/index.ts` to combine and export all stores.

### **6. User Authentication & Session**

*   [x] Develop `SignupForm.tsx` (`src/components/auth/`): Uses `react-hook-form` with `zodResolver` and `signupSchema`. Calls `authStore.signup`.
*   [x] Develop `LoginForm.tsx` (`src/components/auth/`): Uses `react-hook-form` with `zodResolver` and `loginSchema`. Calls `authStore.login`.
*   [x] Develop `AuthProvider.tsx` (`src/components/auth/`): React Context Provider to manage global authentication state and theme. Checks `authStore.isAuthenticated` and redirects unauthenticated users from protected routes.

### **7. Core Financial Tracking Features**

*   [x] Develop `ExpenseForm.tsx` (`src/components/expenses/`): Form for adding new expenses/income. Uses `react-hook-form` with `zodResolver` and `transactionSchema`. Calls `expenseStore.addTransaction`.
*   [x] Develop `TransactionList.tsx` (`src/components/expenses/`): Displays transactions from `expenseStore`. Implements basic sorting (date, amount) and filtering (expense/income).
*   [x] Develop `BudgetForm.tsx` (`src/components/budgets/`): Form to set or edit monthly budget limits for predefined categories. Uses `react-hook-form` with `zodResolver` and `budgetSchema`. Calls `budgetStore.setBudget`.
*   [x] Develop `BudgetList.tsx` (`src/components/budgets/`): Displays budget categories, their limits, and calculated progress using data from `budgetStore` and `expenseStore`.

### **8. Page Routing & Navigation**

*  [x] Create `src/app/page.tsx` (Home): Redirects to `/login` if not authenticated, or `/dashboard` if authenticated.
*   [x] Create `src/app/signup/page.tsx`: Renders `SignupForm`.
*   [x] Create `src/app/login/page.tsx`: Renders `LoginForm`.
*   [x]Create `src/app/dashboard/page.tsx`:
    *   [x] Protected route.
    *   [x]Displays a welcome message.
    *   [x] Shows basic summary (e.g., "Total Spent This Month").
    *   [x] Includes `ThemeToggle`.
*   [x]Create `src/app/transactions/page.tsx`:
    *   [x]Protected route.
    *   [x] Renders `ExpenseForm` and `TransactionList`.
*   [x] Create `src/app/budgets/page.tsx`:
    *   [x] Protected route.
    *   [x] Renders `BudgetForm` and `BudgetList`.
*   [x]Develop `Navbar.tsx` (`src/components/layout/`): Responsive navigation bar with links to Dashboard, Transactions, Budgets, and a Logout button. Includes `ThemeToggle`.
*   [x] Develop `Footer.tsx` (`src/components/layout/`): Simple copyright footer.

---

## **Phase 2: Backend Integration & Core AI Features**

**Goal:** Transition from local data storage to a secure, scalable backend, and introduce the first set of AI-powered features for automated categorization and basic financial insights.

**Technologies:** Appwrite, OpenAI API, Next.js API Routes, Charting Library (e.g., Recharts).

### **1. Robust Backend Integration (Appwrite)**

*   [ ] Set up Appwrite project, database, and authentication.
*   [ ] Migrate `authStore` to use Appwrite's Authentication SDK for user management.
*   [ ] Migrate `expenseStore` to use Appwrite's Database SDK for `transactions`.
*   [ ] Migrate `budgetStore` to use Appwrite's Database SDK for `budgets`.
*   [ ] Implement Next.js API routes (`src/app/api/`) to proxy requests to Appwrite, securing API keys.
*   [ ] Update Zustand stores to interact with these new Next.js API routes.
*   [ ] Implement data migration strategy from `localStorage` to Appwrite for existing users (if applicable).

### **2. Initial AI-Powered Categorization**

*   [ ] Create Next.js API route (`/api/categorize`) to send transaction descriptions to OpenAI.
*   [ ] Implement logic within the API route to prompt OpenAI (e.g., GPT-3.5) for category suggestions.
*   [ ] Update `ExpenseForm.tsx` to send description to `/api/categorize` and display the suggested category.
*   [ ] Allow user to accept or override the suggested category before saving the transaction.

### **3. Basic Personalized Financial Advice**

*   [ ] Create Next.js API route (`/api/advice`) to aggregate user spending data from Appwrite.
*   [ ] Implement logic within the API route to formulate prompts for OpenAI based on spending data.
*   [ ] Display the LLM-generated general financial advice on the `dashboard/page.tsx` or a dedicated "Tips" section.

### **4. Enhanced Data Visualization**

*   [ ] Integrate a charting library (e.g., Recharts) into the project.
*   [ ] Display spending breakdown by category (pie chart or bar chart) for the current month/period on the dashboard.
*   [ ] Show income vs. expense summary (bar chart or simple numbers) on the dashboard.
*   [ ] Enhance budget progress displays with more dynamic and visually appealing charts/indicators.

### **5. User Profile & Settings Management**

*   [ ] Create `src/app/settings/page.tsx` for user settings.
*   [ ] Implement functionality for users to update basic profile information (e.g., username, email) stored in Appwrite.
*   [ ] Implement functionality for users to manage custom spending categories (add, edit, delete).

---

## **Phase 3: Advanced AI, Input Methods & Financial Planning**

**Goal:** Transform OnlyFunds into a truly intelligent and proactive financial advisor by implementing advanced AI analytics, diverse input methods, and sophisticated financial planning tools.

**Technologies:** OCR Service (e.g., Google Cloud Vision), Speech-to-Text API, more advanced LLM prompting/fine-tuning, potentially dedicated ML models.

### **1. Advanced Input Methods**

*   [ ] **OCR for Receipt Scanning:**
    *   [ ] Create `src/app/scan/page.tsx` for receipt scanning.
    *   [ ] Implement image upload functionality.
    *   [ ] Create Next.js API route to send image to an OCR service (e.g., Google Cloud Vision).
    *   [ ] Process OCR results with LLM for data extraction (amount, date, merchant, items).
    *   [ ] Present extracted data to user for review and confirmation before saving as a transaction.
*   [ ] **Digital Payment Screenshot Parsing:**
    *   [ ] Implement specialized image processing and LLM capabilities to extract transaction details from payment app screenshots.
    *   [ ] Automate expense logging from these screenshots.
*   [ ] **Voice Command Integration:**
    *   [ ] Integrate a Speech-to-Text API (e.g., Web Speech API or Google Cloud Speech-to-Text).
    *   [ ] Allow users to add expenses via voice commands (e.g., "Add $25 for coffee").
    *   [ ] Implement LLM parsing of natural language commands to populate transaction fields.

### **2. Intelligent Financial Planning (LLM-Driven)**

*   [ ] **Goal-Based Savings Recommendations:**
    *   [ ] Create `src/app/goals/page.tsx` for goal setting.
    *   [ ] Allow users to define specific financial goals.
    *   [ ] Implement LLM analysis of current finances to generate personalized savings plans and potential spending cuts.
    *   [ ] Track and visualize progress towards financial goals.
*   [ ] **Debt Reduction Strategies:**
    *   [ ] Create `src/app/debt/page.tsx` for debt management.
    *   [ ] Allow users to input debt details (balance, interest, minimum payment).
    *   [ ] Implement LLM suggestions for optimal debt reduction strategies (snowball/avalanche) and detailed payment plans.
    *   [ ] Visualize debt payoff progress.
*   [ ] **Life Event Financial Planning:**
    *   [ ] Develop interactive modules for planning major life events (marriage, children, retirement).
    *   [ ] Implement LLM guidance on estimated costs, necessary savings targets, and financial implications of these events.

### **3. AI-Powered Analytics & Insights**

*   [ ] **Anomaly Detection in Spending:**
    *   [ ] Implement AI models (LLMs or dedicated ML) to analyze spending patterns.
    *   [ ] Automatically flag unusual transactions or significant deviations from typical spending habits.
    *   [ ] Notify users of detected anomalies.
*   [ ] **Predictive Analytics for Future Expenses:**
    *   [ ] Implement analysis of historical data and recurring payments to predict upcoming expenses and cash flow.
    *   [ ] Display cash flow forecasts to help users anticipate future financial needs.
*   [ ] **Deep Category-wise Spending Insights:**
    *   [ ] Implement advanced LLM analysis of detailed spending data.
    *   [ ] Provide highly personalized and actionable recommendations on optimizing spending in specific categories.
*   [ ] **Financial Health Score:**
    *   [ ] Calculate a comprehensive financial health score based on various metrics (e.g., savings rate, debt-to-income ratio).
    *   [ ] Display the score along with LLM-generated, tailored tips for improvement.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Project Checklist✅ #3

OnlyFunds Development Roadmap

Phase 1: Core UI & Local Data Management (MVP)

1. Application Foundation & Setup

2. Core UI Components & Theming

3. Data Modeling & Validation

4. Local Data Persistence & Security

5. Zustand State Management

6. User Authentication & Session

7. Core Financial Tracking Features

8. Page Routing & Navigation

Phase 2: Backend Integration & Core AI Features

1. Robust Backend Integration (Appwrite)

2. Initial AI-Powered Categorization

3. Basic Personalized Financial Advice

4. Enhanced Data Visualization

5. User Profile & Settings Management

Phase 3: Advanced AI, Input Methods & Financial Planning

1. Advanced Input Methods

2. Intelligent Financial Planning (LLM-Driven)

3. AI-Powered Analytics & Insights

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Project Checklist✅ #3

Description

OnlyFunds Development Roadmap

Phase 1: Core UI & Local Data Management (MVP)

1. Application Foundation & Setup

2. Core UI Components & Theming

3. Data Modeling & Validation

4. Local Data Persistence & Security

5. Zustand State Management

6. User Authentication & Session

7. Core Financial Tracking Features

8. Page Routing & Navigation

Phase 2: Backend Integration & Core AI Features

1. Robust Backend Integration (Appwrite)

2. Initial AI-Powered Categorization

3. Basic Personalized Financial Advice

4. Enhanced Data Visualization

5. User Profile & Settings Management

Phase 3: Advanced AI, Input Methods & Financial Planning

1. Advanced Input Methods

2. Intelligent Financial Planning (LLM-Driven)

3. AI-Powered Analytics & Insights

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions