Skip to content

πŸ’ŽπŸ’¬ A realtime chat appilication built with using serverless tecknologes such as Pusher and PlanetScale.

Notifications You must be signed in to change notification settings

YaroslavChuiko/GlassyChat

Repository files navigation

Glassy Chat

nextdotjs TypeScript react trpc zod reactquery nextauth zustand radixui tailwindcss pusher planetscale Prisma mysql pwa

A simple serverless chat.

Website


About

This is a T3 Stack project bootstrapped with create-t3-app.

A chat application, written in Next.js, with the use of tRPC, Zustand, Radix UI, Tailwind CSS, Pusher, Prisma.

Setup & Run

Prior to setup, create an .env file based on the .env.example. Then proceed:

  1. npm install
  2. Create PlanetScale MySQL database and add connection string as value for DATABASE_URL
  3. npx prisma db push
  4. Generate a secret value for NEXTAUTH_SECRET. You can generate a new secret on the command line with: openssl rand -base64 32
  5. Create a Discord OAuth App and add values for DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET
  6. Create a GitHub OAuth App. Make sure to set Authorization callback URL to http://localhost:3000/api/auth/callback/github. After that add values for GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET
  7. Create Pusher account and add values for PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET, PUSHER_APP_CLUSTER, NEXT_PUBLIC_PUSHER_APP_KEY, NEXT_PUBLIC_PUSHER_APP_CLUSTER
  8. Add values for SUPER_ADMIN_NAME and SUPER_ADMIN_EMAIL
  9. npx prisma db seed
  10. npm run dev

Snapshots

Sign in

image

Chat

image

image

image

image

image

image