A modern, intuitive expense tracking platform built with React and TypeScript. Finlo helps you take control of your finances with beautiful visualizations, smart categorization, and seamless expense management.
- 📊 Interactive Dashboard - Get insights into your spending patterns with beautiful charts and analytics
- 💸 Transaction Management - Add, edit, and categorize your expenses with ease
- 🌙 Dark/Light Mode - Switch between themes for comfortable viewing
- 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile devices
- 📈 Visual Analytics - Powered by Recharts for stunning data visualization
- ⚡ Fast & Modern - Built with Vite for lightning-fast development and builds
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/finlo.git
cd walletwise- Install dependencies
npm install- Start the development server
npm run dev- Open your browser
Navigate to
http://localhost:5173to see Finlo in action!
- Frontend Framework: React 18.3.1
- Language: TypeScript 5.5.3
- Build Tool: Vite 5.4.2
- Styling: Tailwind CSS 3.4.1
- Charts: Recharts 2.12.7
- Icons: Lucide React 0.344.0
- Date Handling: date-fns 3.6.0
- Linting: ESLint 9.9.1
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
The main hub displays your financial overview with interactive charts and spending summaries.
- ExpenseList: View and manage all your transactions
- AddExpense: Modal for adding new expenses with category selection
Seamless navigation between different sections with theme toggle functionality.
Finlo supports both light and dark themes with smooth transitions:
- Light Mode: Clean, minimal design with gray gradients
- Dark Mode: Elegant dark theme with slate color palette
Built with a mobile-first approach using Tailwind CSS:
- Mobile: Optimized for small screens
- Tablet: Adaptive layout for medium screens
- Desktop: Full-featured experience for large screens
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Recharts for beautiful chart components
- Lucide for clean, consistent icons
- Tailwind CSS for utility-first styling
- Vite for blazing fast build tool
If you have any questions or need help, please:
- Open an issue on GitHub
- Check our documentation
- Join our community discussions
Made with ❤️ for better financial management