Pat Chat 2.0

Description

Pat Chat 2.0 is a real time chat application created with Ably, coded with TypeScript, hosted on Vercel, styled withTailwind, with authentication provided by Workos's Auth kit. I wanted to create a real time chat app with NextJs, after doing some googling and reading I decided to go with Ably. The process was smooth although I wish the free tier was more generous before it started giving out warnings(lol).

Setup

1. npm i
2. Create an account at ably.com
3. Create an account at authkit.com

Note Remember to configure NEXT_PUBLIC_WORKOS_REDIRECT_URI="http://localhost:3000/api/callback" in the WorkOS dashboard

4. Create an .env:

WORKOS_API_KEY='<Your WorkOS API Key>'
WORKOS_CLIENT_ID='<Your WorkOS Client ID>'
WORKOS_COOKIE_PASSWORD="<Your secure password here>" # generate a secure password here

# configured in the WorkOS dashboard
NEXT_PUBLIC_WORKOS_REDIRECT_URI="http://localhost:3000/api/callback"


ABLY_API_KEY="<Your Ably API Key>"

5. Run npm run build
6. Then npm start

Usage

Go to http://localhost:3000/(after following setup) or https://www.patchat.ca then sign in to begin chatting.

Features

Current

• Real time messaging
• User profile image shown on chat bubble
• User name shown on chat bubble
• 2 min chat history

Coming soon

• Longer chat history
• Theme color change
• User direct message