JugglerAI

A fluid, intelligent student life manager designed to balance tasks, studies, and well-being. Built with React, Vite, and Google's Gemini API, it features a stunning Glassmorphism UI and context-aware AI coaching.

🌟 Features

• Context-Aware Modes: Switch between Productive, Balanced, Recharge, and Restricted (Zen) modes to adapt the interface and AI behavior to your current energy levels.
• AI Smart Coach: Integrated Gemini model provides real-time, context-sensitive advice based on your schedule, stress levels, and sleep data.
• Smart Inbox & Voice Input: Capture tasks via text or voice. The AI automatically categorizes, prioritizes, and estimates time for your "Brain Dump" items.
• Vitals Tracking: Visual ring charts and graphs for Stress, Recovery, Sleep, and "Body Battery" metrics.
• Dynamic Scheduling: A calendar view with timeline visualization to manage fixed commitments and flexible tasks.
• Gamified Goals: Track progress in Work, Uni, Social, and Personal categories.

🛠️ Tech Stack

• Framework: React 18 + Vite
• Language: TypeScript
• Styling: Tailwind CSS + Glassmorphism Design System
• AI: Google GenAI SDK (@google/genai)
• Animations: Framer Motion
• Charts: Recharts
• Icons: Lucide React

🚀 Getting Started

Prerequisites

1. Node.js (v18 or higher): Download here.
2. Google Gemini API Key:
   • Obtain a free API key from Google AI Studio.

Installation

1. Clone the repository or download the source code.
2. Open your terminal in the project root.
3. Install dependencies:

   npm install

Local Development Setup

This project is configured to run both in cloud environments (using CDNs) and locally (using NPM packages). To run it locally, follow these steps:

1. Configure API Key: Create a file named .env in the root directory and add your key:

   API_KEY=your_gemini_api_key_here

2. Switch to Local Entry Point: The default index.html is optimized for cloud/CDN usage (AI Studio). For local development with Vite:

   • Rename the existing index.html to index.cloud.html (to keep it as a backup).
   • Rename index.local.html to index.html.

Running the App

Start the local development server:

npm run dev

The application will be available at http://localhost:5173.

📦 Building for Production

To create an optimized production build:

npm run build

You can preview the production build locally using:

npm run preview

🎨 Customization

• Tailwind Config: Check tailwind.config.js to modify the color palette, fonts, or glassmorphism opacity levels.
• Mock Data: Default user data and vitals are generated in lib/mockData.ts.