Welcome to EchoChat, where meaningful conversations come to life!
- About
- System Design Document
- Getting Started
- Dependencies
- Deployment
- Usage
- Built Using
- TODO
- Authors
- Acknowledgments
EchoChat is a versatile chatting platform designed to make your online interactions both engaging and effortless. Whether you're sending text messages, sharing videos, or participating in live video chats, EchoChat ensures you stay connected with your friends, family, and colleagues in a seamless and creative way.
Check out the System Design Document present in the repo...☝️ Or check out here
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
git clone https://github.com/hv789/chatApp-IMBY-SE.git
cd chatApp-IMBY-SE
npm i
Create a .env.local file and paste the following into it.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=
NEXT_PUBLIC_STREAM_KEY=
STREAM_SECRET=
NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY=
WEB_PUSH_PRIVATE_KEY=
- Make an account in Clerk
- Copy the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY and paste in the .env.local file.
- Go into the Webhooks section and Add Endpoint URL.
<LINK>/api/clerk-webhook
- Under the Message Filtering section check session.ended, session.removed, session.revoked.
- Svix play option can be used to generate unique endpoint. Later it can be replaced with your hosted site's link
- Make an account in GetStream
- Make an organization.
- Once in, copy the App access keys and paste them into .env.local file.
- Under the Webhook events clear all events and then add message.new event.
- Under the Chat Overview -> Before Message Hooks -> paste the below content
<LINK>/api/push-webhook
- Replace with the Svix link generated previously.
- Open a fresh terminal in chatApp-IMBY-SE directory and run below code
npx web-push generate-vapid-keys
- Paste the generated public and private keys into the .env.local file.
And you are done...👍
-
Project Basics
- @t3-oss/env-nextjs
- @types/node -> Node with TS
- @types/react -> React with TS
- @types/react-dom -> Reac DOM with TS
- @types/web-push -> Web-Push with TS
- autoprefixer
- eslint -> ESLint
- eslint-config-next -> ESLint with Next.js
- eslint-config-prettier -> Prettier config
- lucide-react -> React Icons
- next -> Next.js
- postcss -> Styling with JS plugins
- prettier -> Formatting
- prettier-plugin-tailwindcss -> Prettier with TS
- react -> React integration
- react-dom -> React for DOM
- tailwind-merge -> Merge style with classes
- tailwindcss -> Tailwind styling
- typescript -> TS integration
- svix -> Web-Hook signatures
- web-push -> Web-Push functions for Notifs
- zod -> Handling env for TS
Thses dependencies are needed for basic project structure for using next.js, typescript, DOM elements, Web-Push functions, styling, formatting, etc...
-
Clerk Auth
These dependencies allow the integration of Clerk Auth into the project along with providing the themes necessary Clerk Docs
-
GetStream
- stream-chat -> SDK for chat applications
- stream-chat-react -> React components for Stream Chat
These dependencies allow the integration of GetStream Chat SDK into the project along with providing the necessary UI Kits and functionalies GetStream Chat Docs
- The whole chat application is present in this directory.
- The video chat application is hosted on videoChatApp-IMBY-SE
Deployed on Vercel. Don't forget to add the environment variables.
- Add more real life features like -
- Status
- Stories
- etc...
- Adding more AI features.
- Harsha Vardhan
- IIT Bhubaneswar
- Electronics and Communication Engineering (Department)
- Google 😄
- ChatGPT 🤖
- Inspiration from WhatsApp, Slack, etc...