LifePilot

• 

  Landing Page - Hero Section

• 

  Landing Page - Features Section

• 

  Landing Page - How It Works Section

• 

  Landing Page - Testimonials Section

• 

  Landing Page - Pricing Section

• 

  Landing Page - Footer Section

• 

  Login Page

• 

  SignUp Page

• 

  Main Dashboard

• 

  Automations Page

• 

  Creating a new Automation

• 

  Calendar Page

• 

  Adding an Event in Calendar

• 

  Journal Page

• 

  Profile Page

• 

  Profile Page - Account Info Screen

• 

  Settings Page

• 

  Settings Page - Appearance Screen

• 

  Settings Page - Account Screen

• 

  Settings Page - Advanced Screen

• 

  Main Dashboard - Dark Mode

• 

  Main Dashboard - Scrolled Down - Dark Mode

• 

  Automations Page - Dark Mode

• 

  Calendar Page - Dark Mode

• 

  Journal Page - Dark Mode

• 

  Profile Page - Dark Mode

• 

  Settings Page - Dark Mode

Inspiration

LifePilot was born from a simple question: What if you could see your mood, thoughts, and productivity all in one place? I often found myself juggling multiple apps one for journaling, another for tracking habits, and yet another for managing tasks. I wanted a single, beautiful dashboard that could bring clarity to my day, help me reflect, and gently nudge me toward better habits. That vision inspired LifePilot.

🚀 What it does

LifePilot lets users:

• Journal daily thoughts and reflect on past entries
• Track mood and visualize trends over time
• Manage tasks and to-dos efficiently
• Receive AI-powered productivity and wellness tips
• Automate repetitive routines
• Sync with Google Calendar for schedule optimization
• Enjoy a seamless, responsive, and customizable experience

🛠️ How we built it

We built LifePilot as a full-stack, AI-integrated productivity web app with:

• Frontend:

  • React.js + Tailwind CSS for a modern, responsive UI
    
  • Framer Motion for smooth animations and transitions
    
  • shadcn/ui for accessible, reusable components
    
  • Lucide icons and Toast notifications
    
  • Glassmorphism design system

• Backend & AI Logic:

  • OpenAI API for natural language task extraction and mood sentiment analysis
    
  • Firebase for storing user data (tasks, journal entries, automation rules)
    
  • Google Calendar API for real-time syncing and schedule optimization

• Design Tools:

  • Figma + Vercel v0 for rapid prototyping and clean UI implementation

Every component was crafted during the hackathon, with real-time collaboration and tight sprint cycles.

🧗 Challenges we ran into

• Integrating multiple features (journaling, mood tracking, tasks, automation) into a cohesive, intuitive UI
• Ensuring real-time data sync and smooth user experience
• Learning and implementing new tools like shadcn/ui and Framer Motion
• Balancing performance with rich interactivity and animations
• Designing for accessibility and responsiveness across devices

🏆 Accomplishments that we're proud of

• Built a polished, full-featured dashboard in a short time frame
• Seamlessly integrated AI for smart task extraction and mood analysis
• Achieved a consistent, beautiful design with custom theming and glassmorphism
• Enabled real-time collaboration and rapid prototyping during the hackathon

📚 What we learned

• Advanced Next.js and React patterns for scalable app architecture
• Effective use of Tailwind CSS and shadcn/ui for rapid UI development
• Integrating third-party APIs (OpenAI, Firebase, Google Calendar) for powerful features
• The importance of user-centric design and accessibility
• How to collaborate efficiently under tight deadlines

🚧 What's next for LifePilot

• Expand AI features for deeper insights and personalized suggestions
• Add more integrations (e.g., health apps, habit trackers)
• Enhance automation capabilities and user customization
• Launch mobile apps for iOS and Android
• Gather user feedback and iterate on design and features

Built With

• css
• figma
• hooks
• javascript
• next.js
• react.js
• restapi
• shadcn/ui
• tailwind
• typescript
• vercel