Orbit - Smart Route Planner

An AI-powered daily route planner that optimizes your schedule by combining calendar events and to-dos, then uses Claude AI for intelligent prioritization and Google Maps for route optimization.

Features

• AI-Powered Planning: Uses Claude AI to intelligently prioritize and order your tasks
• Real Driving Routes: Google Maps provides actual car driving distances and routes (not straight-line)
• Travel Time Estimates: Accurate driving time calculations with traffic considerations
• Calendar Events: Import and manage your daily calendar events
• To-Do Management: Add flexible tasks with priorities and locations
• Voice Input: Use voice commands to add tasks with AI-powered parsing
• Interactive Map: Visualize your optimized route with markers and directions
• Privacy-First: All data stored locally in your browser
• Demo Mode: Pre-loaded with sample data for immediate testing

Tech Stack

• Frontend: Next.js 16, React 19, Tailwind CSS
• UI Components: shadcn/ui
• Maps: Google Maps JavaScript API
• Routing: Google Routes API v2 (for accurate driving routes)
• AI: Anthropic Claude API
• Voice: Deepgram Speech-to-Text API
• Storage: Browser session storage (no database required)

Quick Start

1. Install Dependencies

npm install

2. Set Up Environment Variables

Create a .env.local file in the root directory:

# Claude API Key for AI planning
CLAUDE_API_KEY=your_claude_api_key_here

# Google Maps API Key (for both JavaScript API and Directions API)
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here

# Google Maps API Key for server-side API calls
GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here

# Deepgram API Key for voice-to-text transcription
DEEPGRAM_API_KEY=your_deepgram_api_key_here

3. Get API Keys

Claude API Key:

1. Go to console.anthropic.com
2. Sign up or log in
3. Create a new API key
4. Copy the key to your .env.local file as CLAUDE_API_KEY

Google Maps API Key:

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable the following APIs:
   • Maps JavaScript API
   • Routes API (NEW - provides actual driving routes with polylines)
   • Geocoding API
4. Create credentials (API Key)
5. Copy the key to your .env.local file

Deepgram & Claude API Keys (Optional - for AI voice input):

1. Deepgram: Go to Deepgram Console, sign up, create an API key, and add to .env.local as DEEPGRAM_API_KEY
2. Claude: Ensure your CLAUDE_API_KEY is set (from step above)
3. Note: Voice input requires BOTH Deepgram (for transcription) and Claude (for intelligent parsing) API keys

4. Run the Development Server

npm run dev

Open http://localhost:3000 to see the application.

Demo Script

1. Load the Application: Open http://localhost:3000
2. Review Pre-loaded Data: The app comes with sample calendar events and to-dos
3. Add Custom Tasks: Use the "To-Do List" tab to add your own tasks
   • Type to add: Enter task title, location, and priority
   • AI Voice input: Click "Voice Input" to speak your task - Deepgram transcribes it and Claude AI intelligently extracts task details, location, priority, and duration
4. Plan Your Day: Switch to the "Plan" tab and click "Plan My Day"
5. View Optimized Route: See the AI-generated itinerary with actual driving distances between each stop
6. Test Re-routing: Click "Recalculate Route" to see different optimizations
7. Mark Tasks Complete: Toggle tasks as done to see how it affects planning

Project Structure

src/
├── app/
│   ├── api/
│   │   ├── claude/plan/route.js    # Claude AI planning endpoint
│   │   └── maps/
│   │       ├── directions/route.js # Google Maps Directions API
│   │       └── geocode/route.js    # Address geocoding
│   ├── layout.js                   # Root layout with metadata
│   └── page.js                     # Main dashboard page
├── components/
│   ├── ui/                         # shadcn/ui components
│   ├── CalendarEventsList.jsx      # Calendar events management
│   ├── TodoList.jsx               # To-do list management
│   ├── MapView.jsx                # Google Maps integration
│   ├── PlannerPanel.jsx           # AI planning interface
│   └── TaskCard.jsx               # Reusable task component
├── hooks/
│   └── useGoogleMaps.js           # Google Maps utilities
├── lib/
│   ├── storage.js                 # Session storage helpers
│   ├── seedData.js                # Demo data generation
│   └── claudePrompt.js            # AI prompt engineering
└── components.json                # shadcn/ui configuration

API Endpoints

• POST /api/claude/plan - AI route planning
• POST /api/maps/directions - Google Maps route optimization
• GET /api/maps/geocode - Address geocoding

Development

Adding New Features

1. New Components: Add to src/components/
2. API Routes: Add to src/app/api/
3. Utilities: Add to src/lib/
4. Hooks: Add to src/hooks/

Styling

The project uses Tailwind CSS with shadcn/ui components. All styling follows the design system defined in the shadcn configuration.

State Management

The app uses React's built-in state management with:

• useState for local component state
• useEffect for side effects
• Session storage for data persistence

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• Render
• AWS Amplify

Troubleshooting

Common Issues

1. Maps not loading: Check your Google Maps API key and ensure the required APIs are enabled
2. AI planning fails: Verify your Anthropic API key and check the console for errors
3. Styling issues: Ensure Tailwind CSS is properly configured and shadcn components are installed

Debug Mode

Enable debug logging by adding ?debug=true to the URL to see additional console output.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details.