A personal portfolio project that delivers a modern, intuitive expense tracking application. Cashflow Dojo helps users take control of their finances through comprehensive expense monitoring, detailed spending analysis, and actionable insights into financial habits - all wrapped in a sleek, user-friendly interface.
- 🧾 Easy expense entry with detailed categorization
- 📋 View, edit, and delete expense records
- 🏷️ Diverse categorization system with 11 preset categories
- 💼 Multi-currency support with 18 major currencies
- 📊 Interactive charts and visualizations
- 📈 Monthly spending patterns analysis
- 🎯 Category-wise expense breakdown
- 💡 Smart insights on spending habits
- 🌙 Modern, clean interface
- 📱 Fully responsive design for all devices
- ⚡ Real-time updates and smooth transitions
- 🔍 Advanced filtering and sorting capabilities
- 🔒 Secure authentication via Google and GitHub
- 🔐 Protected routes and data privacy
- 👤 Personalized user profiles
- Node.js 18.0 or higher
- npm or yarn package manager
- A modern web browser
- Clone the repository:
git clone https://github.com/yourusername/cashflow-dojo.git- Navigate to the project directory:
cd cashflow-dojo- Install dependencies
npm install
# or
yarn install- Set up environment variables:
Create a
.env.localfile in the root directory and add the following variables:
# Auth Providers
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
# Database
DATABASE_URL=your_database_url
# Auth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret- Run the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
- Next.js - React framework for production
- React - UI library
- TypeScript - Static typing
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - UI component library
- Recharts - Chart library for data visualization
- React Hook Form - Form handling
- Zod - Schema validation
- NextAuth.js - Authentication solution
- Support for Google and GitHub providers
- ESLint - Code linting
- Prettier - Code formatting
- Husky - Git hooks
- PostCSS - CSS processing
Cashflow Dojo is built with a desktop-first approach, ensuring a seamless experience across all devices:
The application uses a custom theme with the following color palette:
:root {
--primary: #bde9c9;
--secondary: #2d8c47;
--accent: #ea5166;
--neutral: #fcf9e0;
}cashflow-dojo/
├── src/
│ ├── app/ # Next.js app directory
│ ├── components/ # React components
│ │ ├── feature/ # Feature-specific components
│ │ │ ├── analytics/ # Analytics page components
│ │ │ ├── expenses/ # Expenses page components
│ │ │ └── overview/ # Overview page components
│ │ ├── layout/ # Layout components
│ │ └── ui/ # Reusable UI components
│ │ ├── shadcn/ # Shadcn UI components
│ ├── fonts/ # Custom font files
│ ├── lib/ # Core utility functions
│ ├── styles/ # Styling files
│ └── utils/ # Helper functions
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (git checkout -b feature/AmazingFeature)
- Commit your changes (git commit -m 'Add some AmazingFeature')
- Push to the branch (git push origin feature/AmazingFeature)
- Open a Pull Request
If you have any questions, feel free to reach out:
- Email: umarsaeedalam@gmail.com
- LinkedIn: www.linkedin.com/in/umarsaeedalam