💬 Live Chat Application

A modern, real-time chat application built with Next.js 14, Tailwind CSS, and Supabase. Features instant messaging, user authentication, and a beautiful, responsive UI.

✨ Features

• 🔐 Secure Authentication - Email & password authentication using Supabase Auth
• 🛡️ Protected Routes - Middleware-based route protection
• 💬 Real-time Messaging - Instant message delivery using Supabase Realtime
• 🎨 Modern UI - Clean, responsive design with Tailwind CSS
• 📱 Message Bubbles - Self messages on right, others on left
• ⏰ Timestamps - Message timestamps displayed
• 👤 User Profiles - Username display in chat
• 🚀 Fast & Scalable - Built with Next.js 14 App Router

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• UI Library: React 18
• Styling: Tailwind CSS
• Backend: Supabase
  • Authentication
  • PostgreSQL Database
  • Real-time Subscriptions
• Deployment: Ready for Vercel, Netlify, or any Node.js hosting

📋 Prerequisites

• Node.js 18+ installed
• npm or yarn package manager
• A Supabase account (free tier works perfectly!)

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/yourusername/livechat.git
cd livechat

2. Install Dependencies

npm install

3. Set Up Supabase

1. Go to Supabase and create a new project
2. Wait for your project to be fully provisioned
3. Go to SQL Editor in your Supabase dashboard
4. Copy and paste the contents of supabase/schema.sql into the SQL Editor
5. Run the SQL script to create the necessary tables and policies
6. Important: If you get RLS (Row Level Security) errors, also run supabase/fix_rls.sql to create the auto-user-profile trigger
7. Go to Settings → API to get your project URL and anon key

4. Configure Environment Variables

1. Copy .env.example to .env.local:

   cp .env.example .env.local

2. Fill in your Supabase credentials in .env.local:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   NEXT_PUBLIC_SITE_URL=http://localhost:3000

   Note: Get your Supabase credentials from Settings → API in your Supabase dashboard

5. Enable Realtime in Supabase

Note: Supabase Realtime is available on the Free Plan with 2 million real-time messages per month and 200 peak concurrent connections - perfect for this chat application!

1. Go to Database → Replication in your Supabase dashboard
2. Find the messages table
3. Toggle the replication switch to enable real-time updates

6. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

📁 Project Structure

livechat/
├── app/
│   ├── auth/
│   │   └── signout/
│   │       └── route.js          # Sign out API route
│   ├── chat/
│   │   └── page.jsx              # Chat page (protected)
│   ├── login/
│   │   └── page.jsx              # Login page
│   ├── register/
│   │   └── page.jsx              # Register page
│   ├── globals.css               # Global styles
│   ├── layout.jsx                # Root layout
│   └── page.jsx                  # Home page (redirects to login)
├── components/
│   ├── AuthForm.jsx              # Reusable auth form
│   ├── ChatBox.jsx               # Main chat component
│   ├── MessageBubble.jsx          # Individual message component
│   └── SignOutButton.jsx         # Sign out button component
├── lib/
│   ├── supabaseClient.js         # Client-side Supabase client
│   └── supabaseServer.js          # Server-side Supabase client
├── supabase/
│   ├── schema.sql                # Database schema
│   ├── fix_rls.sql               # RLS policy fixes
│   └── security_fix.sql          # Security improvements
├── middleware.js                 # Route protection middleware
├── package.json
├── tailwind.config.js
├── next.config.js
└── README.md

🔧 How It Works

Authentication Flow

1. Users register/login through Supabase Auth
2. On registration, a user profile is automatically created in the users table via database trigger
3. Middleware protects /chat route and redirects unauthenticated users
4. Authenticated users are redirected away from login/register pages

Real-time Chat

1. Messages are stored in the messages table
2. Supabase Realtime subscription listens for new message inserts
3. When a new message is inserted, all connected clients receive it instantly
4. Messages auto-scroll to the latest

Database Schema

• users: Stores user profiles (id, username, created_at)
• messages: Stores chat messages (id, user_id, content, created_at)

Row Level Security (RLS) policies ensure:

• Users can read all profiles and messages
• Users can only insert/update their own data

🚢 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository on Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy!

Deploy to Netlify

1. Push your code to GitHub
2. Import your repository on Netlify
3. Add your environment variables in Netlify dashboard
4. Set build command: npm run build
5. Set publish directory: .next
6. Deploy!

Environment Variables for Production

Make sure to set these in your hosting platform:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• NEXT_PUBLIC_SITE_URL (your production URL)

🎨 Customization

Styling

Modify tailwind.config.js to customize the design system, or edit component styles directly.

Future Features

• Add online status indicators
• Implement message reactions
• Add file/image uploads
• Create private/direct messages
• Add message editing/deletion
• Typing indicators
• Message search functionality

🐛 Troubleshooting

Messages not appearing in real-time

• Ensure Realtime is enabled for the messages table in Supabase
• Check that the Realtime publication includes the messages table
• Verify your Supabase project has Realtime enabled

Authentication issues

• Verify your Supabase URL and anon key in .env.local
• Important: Disable email confirmation in Supabase Dashboard → Authentication → Settings → Email Auth → Disable "Enable email confirmations" (for development)
• Ensure the users table has proper RLS policies
• If you see "new row violates row-level security policy" error, run supabase/fix_rls.sql in SQL Editor
• If login doesn't work even with correct credentials, check browser console (F12) for errors
• Clear browser cookies and localStorage, then try again

Security Warnings

• Function search_path mutable: Run supabase/security_fix.sql to fix this warning
• Leaked password protection: Enable this in Supabase Dashboard → Authentication → Password → Enable "Leaked Password Protection"

Build errors

• Make sure all environment variables are set
• Run npm install to ensure all dependencies are installed
• Check Node.js version (should be 18+)

For more detailed troubleshooting, see TROUBLESHOOTING.md

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing framework
• Supabase for the backend infrastructure
• Tailwind CSS for the utility-first CSS framework

📧 Contact

If you have any questions or suggestions, please open an issue on GitHub.

---

Made with ❤️ using Next.js and Supabase