Looma: AI-Powered Email Dashboard with Event Planning

🌟 What Inspired This Project

Email overload is real. Between work communications, newsletters, and personal messages, managing emails efficiently has become a daily struggle. I wanted to build something that not only organizes emails but provides intelligent insights and seamlessly integrates with calendar planning.

The inspiration struck when I realized most email clients focus on reading and sending, but lack comprehensive analytics and smart event integration. Why not build a dashboard that treats email as data to be analyzed and leveraged for better productivity?

🚀 What I Built

Looma is a full-stack email management dashboard that transforms how users interact with their Gmail inbox:

Core Features

  • Gmail Integration: Real-time email fetching and display using Google Gmail API
  • Smart Analytics: Email statistics, sender analysis, and productivity insights
  • Calendar Integration: Google Calendar events displayed alongside email context
  • Modern UI: Responsive design with dark/light themes and smooth animations
  • Bulk Operations: Mark as read, delete, and organize emails efficiently
  • Search & Filter: Advanced email filtering and search capabilities

Technical Architecture

  • Frontend: React 19.1.1 + Vite, Tailwind CSS, Framer Motion
  • Backend: Node.js + Express 5.1.0, PostgreSQL database
  • Authentication: JWT tokens + Google OAuth2 flow
  • APIs: Google Gmail API, Google Calendar API
  • Deployment: Production-ready build system

Development Approach with Kiro

The most transformative aspect was using Kiro AI as my development partner. Instead of traditional coding workflows, I approached this conversationally:

  1. Project Foundation: "Build me a full-stack email dashboard with React and Node.js"
    • Kiro generated the entire project structure, package configurations, and folder organization
  2. Backend Architecture: "Set up Express server with PostgreSQL and Gmail API integration"
    • Complete server setup with middleware, authentication, and database schemas
  3. Frontend Components: "Create a modern dashboard with responsive design and theme switching"
    • Generated React components following best practices with proper hooks patterns
  4. API Integration: "Connect to Gmail API with proper OAuth2 flow"
    • The most impressive generation - complete authentication system with token management

Code Quality Acceleration

Kiro maintained consistency through steering files that enforced:

  • ES6+ JavaScript features and React best practices
  • Proper error handling and validation
  • Clean code structure with separation of concerns
  • Accessibility compliance and semantic HTML

Technical Insights

  • Google API Complexity: Gmail API has intricate data structures and rate limiting that require careful handling
  • OAuth2 Flow: Implementing secure token refresh and error recovery is more nuanced than expected
  • Real-time Data: Balancing API calls with user experience requires smart caching strategies
  • Responsive Design: Modern CSS Grid and Flexbox make complex layouts surprisingly manageable

AI-Assisted Development

  • Context Awareness: Kiro's ability to maintain project context across conversations was game-changing
  • Pattern Recognition: It understood our coding standards and applied them consistently
  • Problem Solving: Instead of debugging alone, I had an AI pair programmer suggesting solutions

Where optimization included memoization, virtualization, and efficient state management.

🎯 Challenges Faced

1. Gmail API Rate Limits

Challenge: Google's API has strict rate limiting (250 quota units per user per 100 seconds) Solution: Implemented intelligent batching and caching with exponential backoff:

const batchSize = Math.min(emails.length, 10);
const delay = Math.pow(2, retryCount) * 1000;

###2. Handling hundreds of code lines in frontend
Kiro helped to reduce the code lines by separating them to custom code block and hooks. Creating a maintainable and readable code.
Share this project:

Updates