{"id":30613841,"url":"https://github.com/lra8dev/supabaserealtimechat.app","last_synced_at":"2026-05-18T03:34:27.590Z","repository":{"id":312254931,"uuid":"1046777503","full_name":"lra8dev/SupabaseRealtimeChat.app","owner":"lra8dev","description":"A simple, real-time chat application built with Next.js 15, Supabase real-time subscriptions, and TypeScript. Experience instant messaging with live user presence indicators! ⚡","archived":false,"fork":false,"pushed_at":"2025-08-29T11:41:38.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-29T14:29:18.210Z","etag":null,"topics":["database","nextjs15","realtime-chat","supabase-db","supabase-realtime","typescript","webdevelopment"],"latest_commit_sha":null,"homepage":"https://supabase-realtime-chat-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lra8dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-29T07:56:05.000Z","updated_at":"2025-08-29T11:41:41.000Z","dependencies_parsed_at":"2025-08-29T14:32:38.736Z","dependency_job_id":"2182b4c1-fb65-4ffd-b213-2e1bdd94de08","html_url":"https://github.com/lra8dev/SupabaseRealtimeChat.app","commit_stats":null,"previous_names":["lra8dev/supabaserealtimechat.app"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/lra8dev/SupabaseRealtimeChat.app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lra8dev%2FSupabaseRealtimeChat.app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lra8dev%2FSupabaseRealtimeChat.app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lra8dev%2FSupabaseRealtimeChat.app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lra8dev%2FSupabaseRealtimeChat.app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lra8dev","download_url":"https://codeload.github.com/lra8dev/SupabaseRealtimeChat.app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lra8dev%2FSupabaseRealtimeChat.app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33163760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["database","nextjs15","realtime-chat","supabase-db","supabase-realtime","typescript","webdevelopment"],"created_at":"2025-08-30T06:46:25.647Z","updated_at":"2026-05-18T03:34:27.585Z","avatar_url":"https://github.com/lra8dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Real-time Chat App with Supabase \u0026 Next.js 15\n\n[![Next.js](https://img.shields.io/badge/Next.js-15-black?style=for-the-badge\u0026logo=next.js)](https://nextjs.org/)\n[![Supabase](https://img.shields.io/badge/Supabase-3FCF8E?style=for-the-badge\u0026logo=supabase\u0026logoColor=white)](https://supabase.com/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/)\n\n\u003e A simple, real-time chat application built with Next.js 15, Supabase real-time subscriptions, and TypeScript. Experience instant messaging with live user presence indicators! ⚡\n\n## ✨ Features\n\n- 🔥 **Real-time messaging** - Messages appear instantly across all connected clients\n- 👥 **Live user presence** - See who's online in real-time with animated indicators\n- 💨 **Lightning fast** - Built with Next.js 15 and optimized with PNPM\n- 🔒 **Type-safe** - Full TypeScript implementation throughout\n- 🎨 **Clean UI** - Designed with Tailwind CSS and smooth scroll animation\n\n## 🎯 Live Demo\n\nCheck out the live application: [RealtimeChat.app](https://supabase-realtime-chat-app.vercel.app/)\n\n## 🛠️ Tech Stack\n\n- **Frontend**: Next.js 15 (App Router) + React 19\n- **Backend**: Supabase (PostgreSQL + Real-time)\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS\n- **Package Manager**: PNPM\n- **Real-time**: Supabase Subscriptions (WebSocket)\n\n## 🏗️ Project Structure\n\n```\n├── app/\n│   ├── globals.css\n│   ├── layout.tsx\n│   └── page.tsx\n├── components/\n│   └── chat-room.tsx\n├── hooks/\n│   └── useRealtime.ts\n├── lib/\n│   └── supabase/\n│       └── client.ts\n└── configs..\n```\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- PNPM (recommended) or npm\n- A Supabase account ([free tier](https://supabase.com/))\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/yourusername/realtime-chat-app.git\ncd realtime-chat-app\n```\n\n### 2. Install Dependencies\n\n```bash\npnpm install\n```\n\n### 3. Set Up Supabase\n\n1. Create a new project at [supabase.com](https://supabase.com)\n2. Go to **Settings** → **API** and copy your project URL and anon key\n3. In the SQL Editor, run this schema:\n\n```sql\n-- Enable real-time for public schema\nALTER PUBLICATION supabase_realtime ADD TABLE messages;\nALTER PUBLICATION supabase_realtime ADD TABLE profiles;\n\n-- Messages table\nCREATE TABLE messages (\n  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,\n  content TEXT NOT NULL,\n  user_name VARCHAR(50) NOT NULL,\n  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()\n);\n\n-- Profiles table for online status\nCREATE TABLE profiles (\n  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,\n  name VARCHAR(50) NOT NULL UNIQUE,\n  online BOOLEAN DEFAULT false,\n  last_seen TIMESTAMP WITH TIME ZONE DEFAULT NOW()\n);\n\n-- Enable Row Level Security\nALTER TABLE messages ENABLE ROW LEVEL SECURITY;\nALTER TABLE profiles ENABLE ROW LEVEL SECURITY;\n\n-- Allow all operations (adjust for production)\nCREATE POLICY \"Allow all operations\" ON messages FOR ALL USING (true);\nCREATE POLICY \"Allow all operations\" ON profiles FOR ALL USING (true);\n```\n\n### 4. Environment Variables\n\nCreate a `.env.local` file in the root directory:\n\n```env\nNEXT_PUBLIC_SUPABASE_URL=your_project_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key\n```\n\n### 5. Run the Development Server\n\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) and start chatting! 🎉\n\n## 🔧 Key Implementation Details\n\n### Real-time Subscriptions\n\nThe app uses Supabase's real-time subscriptions to listen for database changes:\n\n```typescript\n// Listen for new messages\nchannel = supabase\n  .channel(\"messages\")\n  .on(\n    \"postgres_changes\",\n    { event: \"INSERT\", schema: \"public\", table: \"messages\" },\n    (payload) =\u003e setMessages((prev) =\u003e [...prev, payload.new as Message])\n  )\n  .subscribe();\n```\n\n### User Presence System\n\nOnline status is managed automatically:\n\n- Users go \"online\" when they join the chat\n- Status updates in real-time across all connected clients\n- Automatic cleanup on tab close/refresh using `beforeunload` event\n\n### Performance Optimizations\n\n- **Connection rate limiting**: Limited to 10 events per second\n- **Message limits**: Only loads last 50 messages initially\n- **Automatic cleanup**: Proper subscription cleanup prevents memory leaks\n\n## 📦 Available Scripts\n\n```bash\n# Development\npnpm dev          # Start development server\npnpm build        # Build for production\npnpm start        # Start production server\n\n# Code Quality\npnpm lint         # Run ESLint\npnpm type-check   # Run TypeScript checks\n```\n\n## 🔒 Security Considerations\n\nFor production deployment, consider:\n\n1. **Row Level Security (RLS)**: Implement proper RLS policies\n2. **Authentication**: Add user authentication with Supabase Auth\n3. **Rate Limiting**: Implement message rate limiting\n4. **Content Moderation**: Add message filtering/moderation\n5. **Environment Variables**: Secure your environment variables\n\n## 🚀 Deployment\n\n### Deploy to Vercel\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/realtime-chat-app)\n\n1. Push your code to GitHub\n2. Connect your repository to Vercel\n3. Add your environment variables in Vercel dashboard\n4. Deploy! 🎉\n\n## 🤝 Contributing\n\nContributions are welcome! Here's how you can help:\n\n1. Fork the project\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Real-time not working?**\n\n- Check if your Supabase project has real-time enabled\n- Verify your environment variables are correct\n- Make sure you've run the SQL schema\n\n**Messages not appearing?**\n\n- Check browser console for errors\n- Verify database policies allow read/write operations\n- Ensure your API keys are valid\n\n**Connection issues?**\n\n- Check your internet connection\n- Verify Supabase service status\n- Try refreshing the page\n\n## 📚 Learn More\n\n- [Blog Post: Building Real-time Apps with Supabase](https://dev.to/lra8dev/building-real-time-magic-supabase-subscriptions-in-nextjs-15-2kmp)\n- [Supabase Real-time Documentation](https://supabase.com/docs/guides/realtime)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## ⭐ Star History\n\nIf you found this project helpful, please consider giving it a star! ⭐\n\n---\n\n**Built with ❤️ by [Laxman Rathod](https://github.com/lra8dev)**\n\n[🐦 Twitter](https://twitter.com/luckyra8od) • [💼 LinkedIn](https://linkedin.com/in/laxmanrathod) • [📝 Dev.to](https://dev.to/lra8dev)\n\n---\n\n_Want to build something similar? Check out my [blog post](https://dev.to/lra8dev/building-real-time-magic-supabase-subscriptions-in-nextjs-15-2kmp) for a detailed step-by-step guide!_ 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flra8dev%2Fsupabaserealtimechat.app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flra8dev%2Fsupabaserealtimechat.app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flra8dev%2Fsupabaserealtimechat.app/lists"}