Chat Application

This is a real-time chat application built with Next.js, Clerk (Authentication), and Convex (Backend/Database).

Prerequisites

Before running the application, make sure you have the following installed:

• Node.js (v18 or higher recommended)
• npm (usually comes with Node.js)
• A Clerk account for authentication
• A Convex account for the real-time database

Getting Started

1. Clone the repository

First, clone the repository to your local machine:

git clone https://github.com/nitesh2920/chatter.git
cd chatter

2. Install dependencies

Install the required npm packages:

npm install

3. Set up Environment Variables

You need to configure your environment variables for both Clerk (Auth) and Convex (Backend).

1. Create a .env.local file in the root of your project:

   touch .env.local

2. Add the following variables to .env.local. You will need to get these values from your Clerk Dashboard and Convex Dashboard:

   # Clerk Authentication Keys
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key
   
   # Clerk Redirect URLs (Optional but recommended)
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/chat
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/chat
   
   # Convex Database URL
   CONVEX_DEPLOYMENT=your_convex_deployment_name
   NEXT_PUBLIC_CONVEX_URL=your_convex_url

4. Start the Backend (Convex)

Convex handles your backend and database. Open a new terminal window and run:

npx convex dev

Note: The first time you run this, it will prompt you to log into Convex and configure your project. Once configured, it will push your backend functions to Convex and watch for changes.

5. Start the Frontend (Next.js)

In your original terminal window, start the Next.js development server:

npm run dev

6. Run the App

Open your browser and navigate to: http://localhost:3000

You should now see the application running. You can create an account using Clerk and test the real-time chat functionality!

Tech Stack Overview

• Frontend: Next.js (React), Tailwind CSS, Shadcn UI
• Backend/Real-time DB: Convex
• Authentication: Clerk