sage-finance

bykhokhar bhai

You are a senior full-stack engineer and UI/UX designer. Build a complete production-ready web application called "FinovaAI" β€” an AI-powered personal finance and expense tracking system. Tech Stack Requirements: - Frontend: React (Next.js preferred) + Tailwind CSS - Backend: Node.js with Express (or Next.js API routes) - Database: MongoDB (with Mongoose) - Authentication: JWT + Google OAuth - Charts: Recharts or Chart.js - AI Integration: OpenAI API for financial insights --- Core Features: 1. Authentication System: - Signup/Login with email & password - Google login - JWT-based secure authentication - Protected routes --- 2. User Dashboard: - Show: - Total balance - Monthly income - Monthly expenses - Savings - Charts: - Pie chart (expense categories) - Line chart (monthly trend) --- 3. Transactions System: - Add / Edit / Delete transactions - Types: - Income - Expense - Fields: - Amount - Category (Food, Bills, Travel, etc.) - Date - Notes - Filtering (by date & category) --- 4. Budget Management: - Set monthly budget - Category-wise budget limits - Show progress bars (e.g., 70% used) --- 5. AI Insights Feature: - Analyze user transactions - Generate insights like: - "You spent 25% more on food this month" - "You can save 5000 PKR if you reduce dining out" - Use OpenAI API for dynamic insights --- 6. UI/UX Design: - Modern, clean, responsive design - Dark mode default - Colors: - Primary: Indigo (#4F46E5) - Secondary: Green (#22C55E) - Sidebar navigation: - Dashboard - Transactions - Budgets - AI Insights - Settings --- 7. Settings Page: - User profile - Currency selection (default PKR) - Dark/light mode toggle --- 8. Database Schema: Create proper MongoDB schemas for: - User - Transaction - Budget --- 9. Security: - Password hashing (bcrypt) - Input validation - Error handling --- 10. Extra: - Responsive mobile-friendly UI - Loading states - Toast notifications --- Output Requirements: - Full folder structure - Clean, modular code - Separate frontend and backend - API endpoints fully implemented - .env example file - Setup instructions (step-by-step) --- Goal: The app should be fully functional, scalable, and ready to deploy.

LandingSignupTransactionsLoginBudgets
Landing

Comments (0)

No comments yet. Be the first!

Architecture

No Services Diagrams Yet

Architecture diagrams will be automatically generated when the Project Manager creates tasks for your project.

Landing design preview
Landing: View Info
Login: Sign In
Signup: Create Account
Dashboard: View Expense Summary
Transactions: Manage Transactions
Transactions: Filter by Category
Budgets: Set Category Limits
Budgets: Monitor Usage
AI Insights: View Tax Insights
Settings: Select Currency