Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yaroslavchuiko/glassychat

💎💬 A realtime chat appilication built with using serverless tecknologes such as Pusher and PlanetScale.
https://github.com/yaroslavchuiko/glassychat

chat nextauth nextjs pages-router planetscale prisma pusher pwa radix-ui react reactquery serverless t3-stack tailwindcss trpc typescript zod zustand

Last synced: about 1 month ago
JSON representation

💎💬 A realtime chat appilication built with using serverless tecknologes such as Pusher and PlanetScale.

Awesome Lists containing this project

README

        


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](https://create.t3.gg/) 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](https://planetscale.com/) MySQL database and add [connection string](https://planetscale.com/docs/concepts/connection-strings) 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](https://create.t3.gg/en/usage/next-auth#setting-up-the-default-discordprovider) and add values for `DISCORD_CLIENT_ID` and `DISCORD_CLIENT_SECRET`
6. Create a [GitHub OAuth App](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-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](https://pusher.com/) 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](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/42fcbc77-cadb-4d88-94c0-a10716dcfa18)

### Chat

![image](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/552772cd-0560-4b37-958d-a2d88fc43ccd)

![image](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/9f4ce352-721f-4f7b-acb2-8671fcb7fecd)

![image](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/a99f81e5-0004-42af-81fa-1bbac146f923)

![image](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/608f4ae4-bdac-4b46-918a-9d19ed5f41c4)

![image](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/545abf55-9b35-40b8-bcf7-8239a3b9a663)

![image](https://github.com/YaroslavChuiko/GlassyChat/assets/32570823/dcc631df-0baf-4a08-afd6-b53e4ba5822c)