Real-Time Chat with Next.js and Supabase

This is a real-time chat application built with Next.js and Supabase.

Table of Contents

• Tech Stack
• Prerequisites
• Getting Started
• Scripts
• Features
• Database Schema

Tech Stack

• Framework: Next.js
• Backend: Supabase
• Styling: Tailwind CSS
• UI Components: shadcn/ui, Radix UI
• Animations: Framer Motion
• Form Management: React Hook Form
• Schema Validation: Zod
• Linting: ESLint
• Formatting: Prettier

Prerequisites

• Node.js (v20 or later)
• npm
• Supabase Account

Getting Started

Installation

1. Clone the repository:

   git clone <repository-url>
   cd real-time-chat

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env.local file in the root of the project and add the following variables:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your-supabase-anon-key
   

   You can get these values from your Supabase project's API settings.

Running the Development Server

To start the development server, run:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Scripts

• npm run dev: Starts the development server.
• npm run build: Creates a production build.
• npm run start: Starts the production server.
• npm run lint: Lints the codebase.

Features

• Real-time chat rooms
• User authentication with Supabase Auth
• Create and join rooms
• Send and receive messages in real-time
• Animated UI with Framer Motion

Database Schema

The database schema is defined in the Supabase project. The types for the schema are located in lib/supabase/types/database.ts.