Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/yaroslavchuiko/glassychat
- Owner: YaroslavChuiko
- Created: 2023-07-28T13:08:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-21T14:39:33.000Z (over 1 year ago)
- Last Synced: 2024-04-15T05:35:59.241Z (9 months ago)
- Topics: chat, nextauth, nextjs, pages-router, planetscale, prisma, pusher, pwa, radix-ui, react, reactquery, serverless, t3-stack, tailwindcss, trpc, typescript, zod, zustand
- Language: TypeScript
- Homepage: https://glassy-chat.vercel.app
- Size: 615 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Glassy Chat
## 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)