Realtime Chat App

Chatbase is a tutorial project that demonstrates the creation of a real-time chat application using a modern web development stack, including GraphQL Live Queries, Next.js, NextAuth.js for authentication, Apollo Client for GraphQL integration, and Grafbase as the backend. The project utilizes Server-Sent Events for real-time functionality and is styled with Tailwind CSS for a sleek UI.

Tools and Technologies:

• NextAuth.js: For authentication, using GitHub OAuth for user sign-in.
• Next.js: As the React framework for building the user interface and server-side logic.
• Apollo Client: To interact with GraphQL APIs, enabling efficient data fetching, caching, and state management.
• Grafbase: Serves as the backend, offering a GraphQL API for storing and querying chat messages.
• Server-Sent Events: Used for real-time communication between the client and server.
• GraphQL Live Queries: Allows the chat application to receive real-time updates when chat messages are added.
• GraphQL: A query language for APIs, providing a complete and understandable description of the data in the API.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

Local Development Setup:

1. Dependencies Installation: Run npm install to install the required Node.js packages.
2. GitHub OAuth App: Create an OAuth App in GitHub for authentication, setting the callback URL to your local development environment (http://localhost:3000/api/auth/callback/github).
3. Environment Variables: Copy the .env.example to .env and populate it with your GitHub OAuth App credentials (GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET), and generate a NEXTAUTH_SECRET.
4. Grafbase Setup: Copy grafbase/.env.example to grafbase/.env and include the NEXTAUTH_SECRET. Start the Grafbase local development server with npx grafbase dev.
5. Start Development Server: Launch the Next.js development server with npm run dev.

Deployment to Production:

1. Repository Preparation: Fork this repository and push it to your GitHub account.
2. Grafbase Account: Sign up for Grafbase and create a new project, connecting it to your forked repository.
3. Environment Variables: During Grafbase project setup, add the NEXTAUTH_SECRET. Also, create a GitHub OAuth App for production, setting the callback URL to your Vercel deployment domain.
4. Deployment: Deploy the project to Vercel, adding the necessary environment variables (NEXT_PUBLIC_GRAFBASE_API_URL, NEXTAUTH_SECRET, GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET) based on your Grafbase project and GitHub OAuth App.

The NEXT_PUBLIC_GRAFBASE_API_URL is obtained from the Grafbase project dashboard. This tutorial provides a practical approach to building and deploying a real-time chat application with a modern tech stack, emphasizing the use of GraphQL for real-time data updates and server-sent events for maintaining an open connection between the client and server.