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
- Visit
/mail to see the live demo
- Review the 100-cycle implementation plan
- Follow the cycle sequence step-by-step
- Track progress as you complete each cycle
- Use real-time sync for instant updates across devices