Food Tracker 🍜

Track your daily culinary journey with style.

Food Tracker is a modern, elegant web application designed to help you track, analyze, and visualize your daily meals. With a beautiful, minimalist interface and smooth user experience, Food Tracker provides comprehensive insights into your eating habits and spending patterns.

✨ Key Features

📊 Comprehensive Analytics

• Visual Charts: Interactive charts showing spending trends, meal distribution, and price analysis
• Monthly Tracking: Monitor your food expenses over time with detailed monthly breakdowns
• Session Analysis: Understand your eating patterns across different meal times (Breakfast, Lunch, Dinner, Snacks)
• Top Insights: Discover your most expensive meals and spending habits

🎨 Premium Design

• Modern UI: Clean, minimalist design inspired by Apple and Linear aesthetics
• Dark Mode: Full support for light, dark, and system theme preferences
• Responsive: Perfectly optimized for all devices - mobile, tablet, and desktop
• Smooth Animations: Delightful micro-interactions powered by Framer Motion

🔍 Powerful Filtering & Search

• Smart Search: Quickly find any meal by name
• Session Filter: Filter meals by time of day (Morning, Lunch, Dinner, Snack)
• Price Range: Set minimum and maximum price filters
• Multiple Sort Options: Sort by date, price, or name in ascending/descending order

📱 Flexible Display

• Grid Layouts: Choose between 3 or 4 column layouts on desktop
• Mobile Optimized: Single column view on mobile devices for optimal readability
• Card View: Beautiful food cards with images, prices, and metadata

💾 Data Export

• CSV Export: Download your data in CSV format for backup or analysis
• Excel Export: Export to Excel (.xlsx) for advanced spreadsheet analysis
• Portable: Take your culinary data anywhere

🚀 Progressive Web App (PWA)

• Installable: Add to home screen on mobile and desktop
• Offline Support: Access your data even without internet connection
• Fast Loading: Optimized performance with service workers
• Native Feel: App-like experience on all platforms

🛠️ Technology Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite for lightning-fast development
• Styling: Tailwind CSS with custom design system
• Animations: Framer Motion for smooth transitions
• Charts: Recharts for beautiful data visualization
• Data Parsing: PapaParse for CSV handling
• Excel Export: XLSX library for spreadsheet generation
• Internationalization: i18next for Vietnamese language support
• PWA: Vite PWA plugin for progressive web app features

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Clone the repository:

   git clone https://github.com/mtrong100/FoodPosts.git
   cd FoodTracker

2. Install dependencies:

   npm install

3. Run development server:

   npm run dev

   Open http://localhost:5173 to view the app.

4. Build for production:

   npm run build

5. Preview production build:

   npm run preview

📂 Project Structure

FoodTracker/
├── public/              # Static assets
│   ├── logo.svg        # App logo
│   ├── favicon.svg     # Favicon
│   └── data.csv        # Food data source
├── src/
│   ├── components/     # React components
│   │   ├── features/  # Feature-specific components
│   │   ├── layout/    # Layout components
│   │   └── ui/        # Reusable UI components
│   ├── hooks/         # Custom React hooks
│   ├── pages/         # Page components
│   ├── types/         # TypeScript type definitions
│   ├── utils/         # Utility functions
│   └── i18n.ts        # Internationalization config
└── package.json

📊 Data Format

The app reads data from a CSV file (public/data.csv) with the following structure:

name,price,session,date,time,image,location
Phở Bò,45000,Breakfast,2024-01-15,07:30,https://example.com/image.jpg,Hanoi

🎨 Customization

Theme Colors

The app uses an orange color scheme by default. To customize:

• Edit src/index.css to change CSS variables
• Modify tailwind.config.js for Tailwind color palette

Language

Currently supports Vietnamese. To add more languages:

• Edit src/i18n.ts and add translation resources

📱 PWA Installation

On Mobile (iOS/Android):

1. Open the app in your browser
2. Tap the "Install" button in the navbar
3. Follow the prompts to add to home screen

On Desktop (Chrome/Edge):

1. Click the install icon in the address bar
2. Or click "Install" button in the navbar

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

👤 Author

TrongSigmaPro

• GitHub: @mtrong100

---

Enjoy tracking your culinary journey! 🍽️✨