الشرح الكامل لهذا المشروع متوفر بالإنجليزية.
BillTrack is a modern web application for tracking bills and managing expenses with an intuitive calendar interface. Built with Next.js, React, and TypeScript.
Features
- Calendar View: Visualize your bills and expenses on an interactive calendar
- Bill Management: Add, edit, and remove bills with ease
- Expense & Income Tracking: Track both expenses and income across multiple categories
- Analytics View: Get insights into your spending patterns
- Search Functionality: Quickly find bills by name
- Settings: Customize your tracking preferences
- Responsive Design: Works seamlessly on desktop and mobile devices
- Brand Icons: Visual indicators for different bill categories and brands
Supported Categories
Expense Categories: Housing, Food, Transport, Entertainment, Health, Shopping, Utilities, Subscriptions, Other
Income Categories: Salary, Freelance, Investment, Gift, Bonus, Other
Tech Stack
- Framework: Next.js 15.2
- UI Library: React 19
- Language: TypeScript 5
- Styling: Tailwind CSS
- Icons: Lucide React & Simple Icons
Usage
- Navigate to a Date: Use the calendar header to navigate between months
- Add a Bill: Click on any date in the calendar to add a new bill
- View Bills: Browse your bills in the Bills View
- Analyze Spending: Check the Analytics View for spending patterns
- Manage Settings: Configure your preferences in Settings
- Search Bills: Use the search functionality to quickly find bills
Scripts
- npm run dev - Start development server
- npm run build - Build for production
- npm start - Start production server
- npm run lint - Run ESLint
Outcome
A portfolio-ready bill tracking app with a beautiful, modern UI and robust features for managing expenses and income.
Live: https://bill-track.vercel.app/
Repo: https://github.com/AdRohal/BillTrack
