🍽️ Calories Tracker

A modern, responsive web application for tracking daily food intake, calories, and nutritional information. Built with TypeScript, Vite, and Appwrite for a seamless food logging experience.

Live

https://calories-tracker.lightroasted.vps-kinghost.net

✨ Features

🔐 User Authentication

• User Registration & Login: Secure authentication powered by Appwrite
• Session Management: Persistent login sessions with automatic logout
• User Profiles: Personalized experience for each user

🍎 Food Tracking

• Smart Food Search: Real-time search through comprehensive food database
• Nutritional Information: Track calories, protein, fat, carbs, and fiber
• Custom Portions: Add foods with custom gram amounts
• Food Categories: Organized by food types (proteins, carbs, fats, dairy, etc.)
• Alkaline Tracking: Monitor alkaline vs acidic food balance

📊 Nutrition Goals

• Personalized Goals: Set daily targets for calories and macronutrients
• Progress Tracking: Visual progress indicators for daily goals
• Goal Management: Update and modify nutritional goals anytime

🗓️ Calendar View

• Date Selection: Navigate through different dates
• Daily Overview: View food entries for any selected date
• Monthly Navigation: Browse through months to track progress

⚡ User Experience

• Responsive Design: Works seamlessly on desktop and mobile devices
• Real-time Updates: Instant feedback and live nutritional calculations
• Keyboard Navigation: Full keyboard support for power users
• Food Editing: Edit or delete previously logged food entries

🛠️ Technologies Used

Frontend

• TypeScript: Type-safe JavaScript for better development experience
• Vite: Fast build tool and development server
• HTML5 & CSS3: Modern web standards for UI/UX
• SweetAlert: Beautiful and responsive popup alerts

Backend & Database

• Appwrite: Backend-as-a-Service for authentication and database
  • User authentication and session management
  • Document database for food entries and user settings
  • Real-time data synchronization

Development Tools

• NPM: Package management
• Git: Version control

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• NPM or Yarn package manager
• Appwrite server instance (cloud or self-hosted)

Environment Variables

Create a .env file in the root directory with:

VITE_APPWRITE_ENDPOINT=your_appwrite_endpoint
VITE_APPWRITE_DBID=your_database_id
VITE_APPWRITE_FOODENTRIESID=your_food_entries_collection_id
VITE_APPWRITE_USERSETTINGSID=your_user_settings_collection_id

Installation

1. Clone the repository

   git clone https://lightroasted.vps-kinghost.net/rmcampos/calories-tracker.git
   cd calories-tracker
   

2. Install dependencies

   npm install
   

3. Set up environment variables

   • Copy .env.example to .env
   • Configure your Appwrite credentials

4. Start development server

   npm run dev
   

5. Open in browser

   • Navigate to http://localhost:5173

Building for Production

# Build the project
npm run build

# Preview the production build
npm run preview

📁 Project Structure

calories-tracker/
├── src/
│   ├── index.ts           # Main application entry point
│   ├── types.ts           # TypeScript type definitions
│   ├── appwrite.ts        # Appwrite client and database functions
│   ├── foodDatabase.ts    # Local food database
│   └── HtmlUtil.ts        # DOM utility functions
├── assets/
│   └── manifest.json      # PWA manifest
├── vite.config.js         # Vite configuration
├── package.json           # Project dependencies and scripts
└── README.md              # Project documentation

🍎 Food Database

The application includes a comprehensive local food database featuring:

• Categories: Proteins, carbs (high/low), fats, dairy, fruits, leaves
• Nutritional Data: Calories, protein, fat, carbs, fiber per 100g
• Alkaline Classification: Foods marked as alkaline or acidic
• Search Functionality: Name and category-based search with accent support

🎯 Core Functionality

Authentication Flow

1. User registers or logs in through Appwrite
2. Session management maintains login state
3. All food entries are tied to authenticated users

Food Entry Process

1. Search for food items in real-time
2. Select desired food from search results
3. Enter custom portion size (grams)
4. Preview nutritional information
5. Add to daily food log

Data Management

• Food Entries: Stored with date, time, and user association
• User Settings: Personalized nutritional goals
• Real-time Sync: All data synchronized with Appwrite backend

📱 Responsive Design

The application is fully responsive and optimized for:

• Desktop: Full-featured interface with keyboard shortcuts
• Tablet: Touch-optimized controls and layouts
• Mobile: Streamlined mobile experience

🔒 Security & Privacy

• Secure Authentication: Appwrite handles all authentication securely
• Data Privacy: User data is isolated and protected
• Session Management: Automatic logout and session validation

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🎯 Future Enhancements

• Barcode Scanning: Add foods by scanning barcodes
• Meal Planning: Plan meals in advance
• Export Data: Export nutritional data to CSV/PDF
• Social Features: Share progress with friends
• Recipe Database: Create and track custom recipes
• Weight Tracking: Monitor weight alongside nutrition

---

Built with ❤️ for healthy living and mindful eating.