# 🌱 PlantCare - Your Plant Watering Companion

A comprehensive plant care management application built with SvelteKit, featuring plant tracking, watering reminders, photo journaling, gamification, and Airtable integration.

## ✨ Features

### 🌿 Plant Management
- **Plant Database**: Track multiple plants with detailed care information
- **Watering Schedules**: Set custom watering frequencies and get reminders
- **Growth Tracking**: Monitor plant growth stages and care instructions
- **Photo Journal**: Document your plants' progress with photos

### 💧 Watering & Care
- **Watering Logs**: Record and track all watering activities
- **Visual Heatmaps**: See watering patterns at a glance
- **Smart Reminders**: Get notifications for upcoming watering needs
- **Care Instructions**: Access detailed care guides for each plant

### 🎮 Gamification
- **Achievement System**: Earn points and badges for consistent plant care
- **Progress Tracking**: Visualize your plant parenting success
- **Streak Rewards**: Maintain watering streaks for bonus achievements

### 🎨 User Experience
- **Dark/Light Themes**: Beautiful, eye-friendly interface
- **Responsive Design**: Works perfectly on desktop and mobile
- **Intuitive Dashboard**: Clean, organized plant overview
- **Export/Import**: Backup and restore your plant data

### ☁️ Data Management
- **Airtable Integration**: Sync data across devices with cloud storage
- **Local Storage**: Works offline with automatic cloud sync
- **Data Export**: Export your plant data for backup

## 🚀 Getting Started

### Prerequisites
- Node.js (v16 or higher)
- npm, yarn, or pnpm

### Installation

1. **Clone the repository**
   ```sh
   git clone <repository-url>
   cd plantcare
   ```

2. **Install dependencies**
   ```sh
   npm install
   # or
   yarn install
   # or
   pnpm install
   ```

3. **Start the development server**
   ```sh
   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   ```

4. **Open your browser**
   Navigate to `http://localhost:5173`

## 🛠️ Tech Stack

- **Framework**: [SvelteKit](https://kit.svelte.dev/) - The fastest way to build Svelte apps
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- **Forms**: [Tailwind Forms](https://github.com/tailwindlabs/tailwindcss-forms)
- **Typography**: [Tailwind Typography](https://tailwindcss.com/docs/plugins#typography)
- **Icons**: Custom SVG icons and emoji
- **Database**: Airtable (official npm package for cloud sync)
- **Build Tool**: Vite
- **Language**: TypeScript

## 📁 Project Structure

```
src/
├── lib/
│   ├── components/          # Reusable UI components
│   │   ├── Dashboard.svelte        # Main dashboard
│   │   ├── PlantCard.svelte        # Individual plant display
│   │   ├── WateringLog.svelte      # Watering history
│   │   ├── WateringHeatmap.svelte  # Visual watering patterns
│   │   ├── Gamification.svelte     # Achievement system
│   │   └── ...
│   ├── stores/              # Svelte stores for state management
│   ├── theme.ts             # Theme management
│   └── api.ts               # API utilities
├── routes/                  # SvelteKit routes
│   ├── +page.svelte         # Home page
│   ├── login/               # Authentication
│   └── api/                 # API endpoints
└── app.html                 # Main HTML template
```

## 🔧 Configuration

### Environment Variables

Create a `.env` file in the project root for Airtable integration:

```env
VITE_AIRTABLE_API_KEY=your_airtable_api_key
VITE_AIRTABLE_BASE_ID=your_airtable_base_id
```

### Airtable Setup

For cloud data synchronization, set up Airtable integration:

1. Create an Airtable account and base
2. Follow the setup guide in `AIRTABLE_SETUP.md`
3. Configure your API credentials

## 📱 Usage

### Adding Plants
1. Click "Add Plant" from the dashboard
2. Enter plant details and care instructions
3. Set watering frequency and reminders
4. Upload photos to track growth

### Watering Tracking
1. View your plant dashboard for watering reminders
2. Log watering activities with notes
3. Monitor patterns with the heatmap visualization
4. Earn achievements for consistent care

### Data Management
- **Export**: Download your plant data as JSON
- **Import**: Restore data from backups
- **Sync**: Automatic cloud sync with Airtable (when configured)

## 🎯 Available Scripts

```sh
# Development
npm run dev          # Start development server
npm run check        # Type checking and linting
npm run check:watch  # Watch mode for type checking

# Building
npm run build        # Create production build
npm run preview      # Preview production build

# Code Quality
npm run prepare      # Sync SvelteKit configuration
```

## 🎨 Themes

The app supports multiple beautiful themes:
- **Classic Dark**: Modern dark theme with subtle gradients
- **Classic Light**: Clean light theme for bright environments
- **Caprese**: Inspired by the Italian flag (tomato, mozzarella, basil)

## 🌟 Bonus Features

### Pomodoro Timer
A standalone Pomodoro timer is included (`pomodoro.html`) with:
- Configurable work/break intervals
- Session history and statistics
- Multiple themes
- Keyboard shortcuts
- Export/import functionality

## 🤝 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 MIT License - see the LICENSE file for details.

## 🙏 Acknowledgments

- Built with [SvelteKit](https://kit.svelte.dev/)
- Styled with [Tailwind CSS](https://tailwindcss.com/)
- Icons and design inspiration from various open-source projects
- Plant care information sourced from gardening communities

---

**Happy planting! 🌱**