Email

A production-ready real-time messaging application with advanced features including conversation threads, search, notifications, and integrations. Perfect for building enterprise messaging systems.

What You’ll Learn

• Real-time synchronization with Convex
• Complex state management patterns
• User presence and typing indicators
• Search and filtering at scale
• Production-ready error handling
• Performance optimization

Key Features

• Conversation Management: Thread-based messaging with full context
• Search & Filters: Full-text search with advanced filtering options
• Real-time Presence: See who’s online and typing indicators
• Notifications: Instant alerts for new messages
• Rich UI: Professional messaging interface with dark mode

Architecture

Frontend: React 19 Components + Astro SSR
├── ConversationList (real-time list)
├── MessageThread (infinite scroll, real-time sync)
├── UserStatus (presence indicators)
└── NotificationCenter (toast notifications)

Backend: Convex Mutations & Queries
├── messages (create, update, delete)
├── conversations (create, archive, search)
├── presence (user status tracking)
└── notifications (delivery and state)

Get Started

Ready to build this project? Choose your path:

Implementation Plan

This project follows a 100-cycle implementation plan for systematic development.

📋 Full Plan: Email Application v1.0.0

Progress: 0/100 cycles complete (0%)

Plan Overview

• Cycle 1-10: Foundation & Architecture (data model, UI patterns)
• Cycle 11-30: React State & Components (email store, UI components)
• Cycle 31-40: Astro Pages (layouts, routes)
• Cycle 41-50: Mock Data & Integration (wire up components)
• Cycle 51-70: Polish & Optimization (animations, accessibility, performance)
• Timeline: 70-75 cycles for complete implementation

Quick Start Commands

# 1. View the implementation plan
/plan email

# 2. Start with first cycle
/infer 1

# 3. Mark complete and advance
/done

How to Use

1. Visit /mail to see the live demo
2. Review the 100-cycle implementation plan
3. Follow the cycle sequence step-by-step
4. Track progress as you complete each cycle
5. Use real-time sync for instant updates across devices