FlowFi is a modern, cross-platform personal finance management application designed to help users track expenses, manage budgets, analyze spending trends, and achieve financial freedom. Built with React, TypeScript, Tailwind CSS, Firebase, and Capacitor for native Android deployment.
🚀 Live Demo: https://flowfi-iota.vercel.app
🎨 Figma Prototype: FlowFi Figma Prototype
- 🔐 Dual Authentication: Secure Email/Password sign-up & Google OAuth integration (optimized for both Web popups and Android APK redirects).
- 📊 Interactive Analytics: Comprehensive charts and visualizations powered by Recharts to track income vs. expenses, monthly trends, and category breakdowns.
- 💸 Transaction Management: Effortlessly log income and expenses, filter by categories, and search historical records.
- 🎯 Budgeting & Goals: Set spending limits and track progress towards financial milestones in real-time.
- 📱 Native Mobile Integration: Built with Capacitor for seamless cross-platform deployment, including Android support and native biometric authentication.
- 🌓 Dark & Light Mode: Sleek, customizable UI powered by Radix UI primitives and Tailwind CSS.
- ⚡ Real-time Data Sync: Instant synchronization across devices powered by Google Cloud Firestore.
- Framework: React 18 + Vite
- Language: TypeScript
- Styling: Tailwind CSS + Radix UI
- State & Routing: React Router v6, React Context API, TanStack Query
- Charts: Recharts
- Icons: Lucide React
- Authentication: Firebase Auth (Email/Password, Google Sign-In)
- Database: Firebase Cloud Firestore
- Framework: Capacitor 8 (Android)
- Biometrics:
capacitor-native-biometric
- Test Runner: Vitest
- Linting: ESLint
Ensure you have the following installed on your machine:
- Node.js: v18.0.0 or higher
- npm or bun / yarn
- Git
-
Clone the Repository:
git clone https://github.com/hackChinmay/flowfi.git cd flowfi -
Install Dependencies:
npm install
-
Run Development Server:
npm run dev
Open
http://localhost:5173in your browser.
To sync and run the project as a native Android app:
# Build web assets
npm run build
# Sync with Capacitor
npx cap sync android
# Open in Android Studio
npx cap open androidIn the project directory, you can run:
npm run dev: Starts the Vite local development server.npm run build: Compiles and builds the production bundle indist/.npm run preview: Previews the local production build.npm test: Runs the Vitest test suite.npm run lint: Runs ESLint for code quality checks.
flowfi/
├── android/ # Capacitor Android native project files
├── public/ # Static public assets
├── src/
│ ├── components/ # Reusable UI components & navigation
│ │ └── ui/ # Radix UI primitives & styled components
│ ├── contexts/ # React contexts (AuthContext, ThemeContext)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Firebase config, storage, and utility functions
│ ├── pages/ # App views (Dashboard, Analytics, Transactions, Profile, Auth)
│ ├── test/ # Unit test files
│ ├── App.tsx # Main application component & routes
│ └── main.tsx # Entry point
├── capacitor.config.ts # Capacitor configuration
├── vite.config.ts # Vite bundler configuration
└── package.json # Dependencies and scripts
Explore the interactive UI/UX prototype built on Figma:
- 🔗 Interactive Figma Prototype: View FlowFi Prototype
The web app is live and deployed on Vercel: 🔗 Live URL: https://flowfi-iota.vercel.app
Important for Firebase Auth: Make sure
flowfi-iota.vercel.appis added to Firebase Console -> Authentication -> Settings -> Authorized Domains so Google Sign-In works on production.
This project is open-source and available under the MIT License.