Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mana1010/chitchat
ChitChat is a messaging app powered by socket io and nextjs
https://github.com/mana1010/chitchat
express mongodb next-auth next-js socket-io typescript
Last synced: 9 days ago
JSON representation
ChitChat is a messaging app powered by socket io and nextjs
- Host: GitHub
- URL: https://github.com/mana1010/chitchat
- Owner: Mana1010
- Created: 2024-08-24T14:59:15.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-06T15:21:23.000Z (24 days ago)
- Last Synced: 2025-01-17T23:45:49.435Z (12 days ago)
- Topics: express, mongodb, next-auth, next-js, socket-io, typescript
- Language: TypeScript
- Homepage: https://chit-chat-omega-dun.vercel.app
- Size: 88.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ChitChat
A realtime chat application with 3 distinct sections (public, private and group).
## Features
- Public chat/Private Chat/Group Chat/Mail support
- Realtime mail support for invitation/requesting
- Real time messaging
- Online/Offline tracking
- User authentication powered by NextAuth
- Emoji support
- Can react to a message (only in Public and Private)
- Infinite Scrolling for chat history
- Realtime Private Message and Mail notification
- Random Chatboard wallpaper background for private and group chat upon creation
- Profile Card for User and Group Details
## Tech Stack
**Client:** NextTs, Socket.io-client, Zustand, React Query, Tailwind, NextAuth, Uploadthing
**Server:** Socket.io-server, Mongoose, Express
## Optimizations
Using parallel routes for the private and group message, implementing use infinite scrolling, using aggregation for the complex query, using debouncing and lastly indexing.
## Installation
1. Clone my repository:
```bash
git clone https://github.com/Mana1010/ChitChat.git
```
2. Navigate to the project directory:
```bash
cd ChitChat
```
3. Install dependencies:
```bash
npm install
```
4. Set up environment variables:
- Create a .env file in the root directory
- Add the following variables:
```bash
For Client:
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
NEXTAUTH_SECRET=
# UPLOADTHING_TOKEN=
# UPLOADTHING_SECRET=
# UPLOADTHING_APP_ID=
For Server:
# MONGODB KEY
MONGO_URI=
# CLOUDINARY KEY
CLOUDINARY_CLOUD_NAME =
CLOUDINARY_API_KEY =
CLOUDINARY_API_SECRET =
```
5. Start the development server:
```bash
npm run dev
```