Full-stack realtime chat vue hasura
- Real-time chat functionality using Hasura
- Data: PostgeSQL managed by Supabase
- Front-end: Vue + Vite, TailwindCSS
- Hosting: Vercel
Install
npm install to setup dependencies
Hasura variables
Create a .env file with VITE_GRAPHQL_HTTP_URI, VITE_GRAPHQL_WS_URI, and VITE_HASURA_ADMIN_SECRET (see env.example)
Setup your PostgreSQL project
The following database table name ‘messages’ is required:
FieldTypeidBIGINTuser_idBIGINTusernameVARCHARcolorVARCHARmessageTEXTroom_idBIGINTis_verifiedBOOLEANcreated_attimestamp
The following database table name ‘users’ is required:
FieldTypeidBIGINTunique_idBIGINTusernameVARCHARis_verifiedBOOLEANcolorVARCHARcreated_attimestamp
Dev
npm run dev to run server on port 5173
Build
npm run build to build the react client
Demo
https://realtime-chatapp2023.vercel.app/
