https://github.com/ajay-dhangar/realtime-chat-app
Real Time Chat App
https://github.com/ajay-dhangar/realtime-chat-app
chat chatapp chatting chatting-app
Last synced: 6 months ago
JSON representation
Real Time Chat App
- Host: GitHub
- URL: https://github.com/ajay-dhangar/realtime-chat-app
- Owner: ajay-dhangar
- Created: 2023-11-03T04:38:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-18T17:27:00.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T05:41:43.172Z (7 months ago)
- Topics: chat, chatapp, chatting, chatting-app
- Language: TypeScript
- Homepage: https://cmhq-chat-app.vercel.app/
- Size: 193 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Realtime chat using GraphQL Live Queries, Next.js and NextAuth.js — [tutorial](https://grafbase.com/guides/how-to-build-a-real-time-chat-app-with-nextjs-graphql-and-server-sent-events)
## Tools used
- NextAuth.js
- Next.js
- Apollo Client
- Grafbase
- Server-Sent Events
- GraphQL Live Queries
- GraphQL
- Tailwind CSS
## Local Development
1. `npm install`
2. Create a [GitHub OAuth App](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) with your app details for development purposes. Make sure to set `Authorization callback URL` to `http://localhost:3000/api/auth/callback/github`
3. `cp .env.example .env` and add values for `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` from step 2.
4. [Generate a secret value](https://generate-secret.vercel.app) for `NEXTAUTH_SECRET` and add it to `.env`
5. `cp grafbase/.env.example grafbase/.env`
6. Add the same `NEXTAUTH_SECRET` to `grafbase/.env`
7. `npx grafbase dev`
8. `npm run dev`
## Deploy to Production
1. Fork and Push this repo to GitHub
2. [Create an account](https://grafbase.com) with Grafbase
3. Create new project with Grafbase and connect your forked repo
4. Add environment variable `NEXTAUTH_SECRET` during project creation
5. Create a [GitHub OAuth App](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) with your app details for production purposes. Make sure to set `Authorization callback URL` to `[YOUR_DESIRED_VERCEL_DOMAIN]/api/auth/callback/github`
6. Deploy to Vercel and add `.env` values (`NEXT_PUBLIC_GRAFBASE_API_URL`\*, `NEXTAUTH_SECRET`, `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET`)
\* `NEXT_PUBLIC_GRAFBASE_URL` is your production API endpoint. You can find this from the **Connect** modal in your [project dashboard](https://grafbase.com/dashboard).