A modern real-time chat application built with React and Supabase
Convayto is an open-source real-time chat application demonstrating modern React and Supabase patterns. Perfect for learning full-stack web development—and contributions are always welcome!
- Secure Authentication - Email verification, password reset, session management
- Real-Time Messaging - Instant message delivery with Supabase Realtime
- Profile Management - Customizable profiles with avatar support
- Friend Search - Discover and connect with other users
- Responsive Design - Perfect on desktop, tablet, and mobile
- Dark Mode - Light and dark theme support
- Optimized Performance - Infinite pagination and smart data prefetching
Visit convayto.vercel.app to see it in action.
Prerequisites: Node.js 16+, npm, Git, Supabase account (free tier works!)
Steps:
# 1. Clone and install
git clone https://github.com/CodeWithAlamin/Convayto.git
cd Convayto
npm install
# 2. Set up environment variables
cp .env.example .env.local
# Edit .env.local with your Supabase credentials
# 3. Start development server
npm run dev
# 4. Open http://localhost:5173Get your Supabase credentials:
- Create account at supabase.com
- Create a new project
- Go to Settings → API
- Copy
URLandAnonkey into.env.local
For more detailed setup instructions, see CONTRIBUTING.md.
| Document | Purpose |
|---|---|
| CONTRIBUTING.md | How to contribute, development setup, code style |
| ARCHITECTURE.md | Codebase organization, design patterns, best practices |
| DATABASE_DESIGN.md | Database schema, security, data flow |
| Category | Technology |
|---|---|
| Frontend | React 18, Vite |
| Styling | Tailwind CSS |
| Routing | React Router v6 |
| Data | React Query, Supabase Realtime |
| Forms | React Hook Form |
| Backend | Supabase (PostgreSQL, Auth, Storage) |
| UI | react-hot-toast, react-icons |
src/
├── components/ # Reusable UI components
├── features/ # Feature modules (auth, messaging, etc.)
├── contexts/ # Global state (UI Context)
├── services/ # Supabase integration
├── utils/ # Utilities and custom hooks
├── styles/ # Tailwind and global CSS
├── config.js # App configuration
└── App.jsx # Main app with routing
See ARCHITECTURE.md for detailed structure and patterns.
- Row-Level Security: Database enforces access control
- Authentication: Supabase Auth with email verification
- Protected Routes: Only authenticated users access
/chat - Open Source: Code transparency for security review
For detailed security info, see DATABASE_DESIGN.md.
This project demonstrates:
- Real-time data synchronization
- Modern React patterns (hooks, custom hooks, context)
- Form validation and error handling
- Responsive design
- Database design with Row-Level Security
- API integration and data fetching
- User authentication flows
Perfect for learning full-stack web development!
We'd love your help! Whether it's:
- Reporting bugs
- Adding features
- Improving documentation
- UI/UX improvements
- Accessibility fixes
Start here: CONTRIBUTING.md
npm run dev # Start development
npm run build # Build for production
npm run lint # Check code style
npm run preview # Preview production build- Message editing and deletion
- Message reactions with emojis
- File and image sharing
- Push notifications
- Typing indicators
- User presence (online/offline status)
- Message threads
- User blocking
- TypeScript migration
- Automated tests
See Contributing Guide for details on how to help!
Licensed under the Apache License 2.0. You're free to use, modify, and distribute this code.
Alamin - Full-stack web developer learning and building in public
- Twitter: @CodeWithAlamin
- LinkedIn: CodeWithAlamin
- GitHub: @CodeWithAlamin
Huge thanks to everyone who has contributed to Convayto!
Want to join? See CONTRIBUTING.md to get started!
- Open an issue for bugs or questions
- Start a discussion for ideas
- Read the architecture docs for questions about code
Made as a learning project
Star this repo if you find it helpful!