A comprehensive React-based dashboard for tracking fuel consumption, mileage and fuel costs with real-time analytics and interactive visualizations.
- User Registration & Login: Secure authentication with email/password
- Enhanced UI: Following shadcn/ui authentication patterns
- Two-Column Login: Professional design with cover image
- User Profiles: Manage personal information and preferences
- Protected Routes: Secure access to all features
- Demo Credentials:
demo@fueltracker.com/demo123
- AI Fuel Assistant: Interactive chatbot for fuel-related queries
- Smart Insights: Personalized recommendations based on usage patterns
- Pattern Analysis: AI detects unusual consumption patterns
- Cost Optimization: AI suggests ways to reduce fuel costs
- Predictive Analytics: Forecast future consumption trends
- Natural Language Queries: Ask questions about your fuel usage
- Real-time Dashboard: Live fuel consumption monitoring and cost tracking
- Interactive Charts: Area charts, bar charts, and pie charts with Recharts
- Seasonal Analysis: Compare fuel usage across different seasons
- Cost Per Litre Tracking: Monitor fuel prices and cost per topup
- Mileage Tracking: Optional mileage tracking for fuel efficiency analysis
- Annual Comparisons: Track fuel consumption and costs over time
- Fuel Efficiency Metrics: Calculate miles per litre and cost per mile
- Progressive Web App: Installable with offline capabilities
- Mobile Navigation: Touch-optimized bottom navigation
- Swipe Gestures: Navigate charts with swipe gestures
- Responsive Design: Perfect on desktop, tablet, and mobile
- Touch Optimization: Mobile-specific fuel topup forms
- Offline Support: Basic offline functionality for fuel entries
- Intelligent Alerts: Fuel consumption and cost threshold notifications
- Customizable Settings: Granular notification preferences
- Push Notifications: Browser push notification support
- Reminder System: Configurable frequency reminders
- Quiet Hours: Customizable do-not-disturb periods
- Email Integration: Optional email notifications
- Fuel Topup Management: Add, edit, delete, and track fuel topups
- Cost Tracking: Track cost per litre and total cost per topup
- Mileage Tracking: Optional mileage recording for efficiency analysis
- Fuel Type Support: Track different fuel types (Petrol, Diesel, etc.)
- Data Export: Export fuel data to CSV/JSON
- Data Import: Import historical fuel data
- Backup & Restore: Secure data backup and restoration
- Node.js 18+ and npm/yarn/pnpm
- Git
-
Clone the repository
git clone https://github.com/ngeshlew/fuel-tracker.git cd fuel-tracker -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run build
npm run preview- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- Recharts - Data visualization
- Zustand - State management
- React Hook Form - Form handling
- Zod - Schema validation
- Lucide React - Icons
- Framer Motion - Animations
- React Router - Routing
- PWA - Progressive Web App support
- Litres Added: Track how many litres added per topup
- Cost Per Litre: Record fuel price per litre
- Total Cost: Automatically calculate cost per topup
- Mileage (Optional): Record mileage at time of topup
- Date & Time: Automatic timestamp for each entry
- Fuel Type: Support for different fuel types
- Consumption Trends: Visualize fuel consumption over time
- Cost Analysis: Track spending patterns and trends
- Efficiency Metrics: Calculate fuel efficiency (miles per litre)
- Seasonal Comparison: Compare usage across seasons
- Cost Forecasting: Predict future fuel costs
- Budget Tracking: Set and monitor fuel budgets
The application uses a custom design system with:
- Lewis-Linear Design System: Technical aesthetic
- OCR A Std Typography: Monospace font for data-focused interface
- Dark Theme: Purple/pink gradient color scheme
- Responsive Layout: Mobile-first design approach
- Installable on mobile and desktop
- Offline functionality
- Push notifications
- App shortcuts
- Splash screens
- Secure authentication
- Protected routes
- Data encryption
- Secure API communication
This project is private and proprietary.
This is a private project. Contributions are not accepted at this time.
For support, please contact the development team.
Built with ❤️ using React, TypeScript, and modern web technologies.