https://github.com/i-shant/hoot-chat-app
MERN Chat app with features like authentication, real-time messaging, typing indicators, online status, optimisitc updates, and more
https://github.com/i-shant/hoot-chat-app
axios chat-app cors express jwt mern mongodb nodejs react react-router shadcn-ui socket-io tailwindcss tanstack-query typescript vite zustand
Last synced: 2 months ago
JSON representation
MERN Chat app with features like authentication, real-time messaging, typing indicators, online status, optimisitc updates, and more
- Host: GitHub
- URL: https://github.com/i-shant/hoot-chat-app
- Owner: i-shant
- Created: 2025-02-26T15:37:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-19T15:06:46.000Z (11 months ago)
- Last Synced: 2025-07-19T19:06:31.213Z (11 months ago)
- Topics: axios, chat-app, cors, express, jwt, mern, mongodb, nodejs, react, react-router, shadcn-ui, socket-io, tailwindcss, tanstack-query, typescript, vite, zustand
- Language: TypeScript
- Homepage: https://hoot-chat-app.vercel.app
- Size: 2.53 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hoot App
MERN Chat app with features like authentication, real-time messaging, typing indicators, online status, optimisitc updates, and more, using React, TypeScript, Node.js, Express, MongoDB, JWT, Socket.io, TanStack Query, Zustand, Tailwind CSS, and more.
## Table of contents
- [Overview](#overview)
- [Run locally](#run-locally)
- [Features](#features)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### Run locally
```bash
git clone https://github.com/i-shant/hoot-chat-app.git
cd hoot-chat-app/backend
pnpm install
pnpm dev
cd ../frontend
pnpm install
pnpm dev
```
### Features
- **Authentication** – Users can create an account, login, and logout securely with JWT tokens based authnetication.
- **Find Users** – Users can search to find other users by name and start chats with them.
- **Real-time Messaging** – Users can send and receive messages in real-time.
- **Online and Typing Status** – Users can see if other users are online and typing, with real-time updates using **Socket.io**.
- **Client State Management with Zustand** – Managing dialog and sidebar state with Zustand.
- **Server State Management with TanStack Query** - TanStack Query with **Axios** to handle data fetching and state management.
- **Tailwind CSS + shadcn/ui** – Clean and **responsive** UI
- **Strongly-typed with TypeScript** – Strongly-typed with TypeScript on both frontend as well as backend.
- **Dark Mode Toggle** – Users can toggle between light and dark mode.
- **Optimistic Updates** – Users can view pending messages while they are being sent.
- **Notifications** – Real-time notifications for new messages.
- **Create chat only when a user sends a message**
- **Catch-all 404 not found page**
### Screenshots
#### Demo
Click to watch the full video
[](https://res.cloudinary.com/doeinsql7/video/upload/v1740992175/hoot-demo_mfsnpi.webm)
### Links
- Live Site URL: [https://hoot-chat-app.vercel.app](https://hoot-chat-app.vercel.app)
## My Process
### Built with
#### Frontend
- [React](https://react.dev/) - JS library
- [TypeScript](https://www.typescriptlang.org/)
- [Axios](https://axios-http.com/) - Data fetching
- [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - Server state management
- [Zustand](https://zustand.docs.pmnd.rs/) - Client state management
- [React Router](https://reactrouter.com/) - Routing
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [shadcn/ui](https://ui.shadcn.com/) - Tailwind CSS components
- [date-fns](https://date-fns.org/) - Date formatting
- [Socket.io](https://socket.io/) - Real-time messaging
- [Lucide](https://lucide.dev/) - Icons
- [Vite](https://vite.dev/) - Frontend tooling
#### Backend
- [Node.js](https://nodejs.org/) - JS runtime
- [Express](https://expressjs.com/) - Web framework
- [TypeScript](https://www.typescriptlang.org/)
- [MongoDB](https://www.mongodb.com/docs/) - NoSQL Database
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) - JSON Web Tokens
- [Socket.io](https://socket.io/) - Real-time messaging
- [BcryptJS](https://www.npmjs.com/package/bcryptjs) - Password hashing
- [cors](https://www.npmjs.com/package/cors) - Cross-Origin Resource Sharing
- [Cookie Parser](https://www.npmjs.com/package/cookie-parser) - Cookie parsing
### Continued development
- Allow users to block other users
- Delete chats/messages
- Sent/delivered/seen status
- View/update user profile
- Group chats
### Useful resources
- [Zustand typescript guide](https://zustand.docs.pmnd.rs/guides/typescript)
- [TanStack Query typescript guide](https://tanstack.com/query/latest/docs/framework/react/typescript)
- [Using Websockets with React Query](https://tkdodo.eu/blog/using-web-sockets-with-react-query)
- [Socket.io handling CORS](https://socket.io/docs/v4/handling-cors/)
- [MERN auth](https://github.com/bradtraversy/mern-auth)
## Author
- GitHub - [i-shant](https://github.com/i-shant)
- LinkedIn - [ishant-bhurani](https://linkedin.com/in/ishant-bhurani)