{"id":25863841,"url":"https://github.com/i-shant/hoot-chat-app","last_synced_at":"2026-04-09T13:50:27.614Z","repository":{"id":279944624,"uuid":"939469465","full_name":"i-shant/hoot-chat-app","owner":"i-shant","description":"MERN Chat app with features like authentication, real-time messaging, typing indicators, online status, optimisitc updates, and more","archived":false,"fork":false,"pushed_at":"2025-07-19T15:06:46.000Z","size":2658,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T19:06:31.213Z","etag":null,"topics":["axios","chat-app","cors","express","jwt","mern","mongodb","nodejs","react","react-router","shadcn-ui","socket-io","tailwindcss","tanstack-query","typescript","vite","zustand"],"latest_commit_sha":null,"homepage":"https://hoot-chat-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/i-shant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-26T15:37:29.000Z","updated_at":"2025-07-19T15:06:49.000Z","dependencies_parsed_at":"2025-02-28T17:23:27.881Z","dependency_job_id":"dda345f0-322d-4238-8451-411cff2955c4","html_url":"https://github.com/i-shant/hoot-chat-app","commit_stats":null,"previous_names":["i-shant/hoot-chat-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/i-shant/hoot-chat-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-shant%2Fhoot-chat-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-shant%2Fhoot-chat-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-shant%2Fhoot-chat-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-shant%2Fhoot-chat-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i-shant","download_url":"https://codeload.github.com/i-shant/hoot-chat-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-shant%2Fhoot-chat-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267785895,"owners_count":24144124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","chat-app","cors","express","jwt","mern","mongodb","nodejs","react","react-router","shadcn-ui","socket-io","tailwindcss","tanstack-query","typescript","vite","zustand"],"created_at":"2025-03-02T00:26:44.406Z","updated_at":"2025-12-30T18:59:32.696Z","avatar_url":"https://github.com/i-shant.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hoot App\n\nMERN 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.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [Run locally](#run-locally)\n  - [Features](#features)\n  - [Screenshots](#screenshots)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n## Overview\n\n### Run locally\n\n```bash\n    git clone https://github.com/i-shant/hoot-chat-app.git\n\n    cd hoot-chat-app/backend\n    pnpm install\n    pnpm dev\n\n    cd ../frontend\n    pnpm install\n    pnpm dev\n```\n\n### Features\n\n- **Authentication** – Users can create an account, login, and logout securely with JWT tokens based authnetication.\n- **Find Users** – Users can search to find other users by name and start chats with them.\n- **Real-time Messaging** – Users can send and receive messages in real-time.\n- **Online and Typing Status** – Users can see if other users are online and typing, with real-time updates using **Socket.io**.\n- **Client State Management with Zustand** – Managing dialog and sidebar state with Zustand.\n- **Server State Management with TanStack Query** - TanStack Query with **Axios** to handle data fetching and state management.\n- **Tailwind CSS + shadcn/ui** – Clean and **responsive** UI\n- **Strongly-typed with TypeScript** – Strongly-typed with TypeScript on both frontend as well as backend.\n- **Dark Mode Toggle** – Users can toggle between light and dark mode.\n- **Optimistic Updates** – Users can view pending messages while they are being sent.\n- **Notifications** – Real-time notifications for new messages.\n- **Create chat only when a user sends a message**\n- **Catch-all 404 not found page**\n\n### Screenshots\n\n#### Demo\n\nClick to watch the full video\n\n[![Demo](https://res.cloudinary.com/doeinsql7/image/upload/v1740656713/trimmed_video_mdbwya.gif)](https://res.cloudinary.com/doeinsql7/video/upload/v1740992175/hoot-demo_mfsnpi.webm)\n\n![Desktop Notification Screenshot](https://raw.githubusercontent.com/i-shant/hoot-chat-app/refs/heads/main/screenshots/desktop-notification.png)\n\n![Desktop Optimistic Update Screenshot](https://raw.githubusercontent.com/i-shant/hoot-chat-app/refs/heads/main/screenshots/desktop-optimistic-update.png)\n\n![Desktop Chat Light Screenshot](https://raw.githubusercontent.com/i-shant/hoot-chat-app/refs/heads/main/screenshots/desktop-chat-light.png)\n\n\u003cdiv\u003e\n  \u003cimg alt='Mobile Typing Screenshot' src='https://raw.githubusercontent.com/i-shant/hoot-chat-app/refs/heads/main/screenshots/mobile-typing.png' width='45%'/\u003e\n  \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\n  \u003cimg alt='Mobile Typing Sidebar Screenshot' src='https://raw.githubusercontent.com/i-shant/hoot-chat-app/refs/heads/main/screenshots/mobile-typing-sidebar.png' width='45%'/\u003e\n\u003c/div\u003e\n\n### Links\n\n- Live Site URL: [https://hoot-chat-app.vercel.app](https://hoot-chat-app.vercel.app)\n\n## My Process\n\n### Built with\n\n#### Frontend\n\n- [React](https://react.dev/) - JS library\n- [TypeScript](https://www.typescriptlang.org/)\n- [Axios](https://axios-http.com/) - Data fetching\n- [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - Server state management\n- [Zustand](https://zustand.docs.pmnd.rs/) - Client state management\n- [React Router](https://reactrouter.com/) - Routing\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- [shadcn/ui](https://ui.shadcn.com/) - Tailwind CSS components\n- [date-fns](https://date-fns.org/) - Date formatting\n- [Socket.io](https://socket.io/) - Real-time messaging\n- [Lucide](https://lucide.dev/) - Icons\n- [Vite](https://vite.dev/) - Frontend tooling\n\n#### Backend\n\n- [Node.js](https://nodejs.org/) - JS runtime\n- [Express](https://expressjs.com/) - Web framework\n- [TypeScript](https://www.typescriptlang.org/)\n- [MongoDB](https://www.mongodb.com/docs/) - NoSQL Database\n- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) - JSON Web Tokens\n- [Socket.io](https://socket.io/) - Real-time messaging\n- [BcryptJS](https://www.npmjs.com/package/bcryptjs) - Password hashing\n- [cors](https://www.npmjs.com/package/cors) - Cross-Origin Resource Sharing\n- [Cookie Parser](https://www.npmjs.com/package/cookie-parser) - Cookie parsing\n\n### Continued development\n\n- Allow users to block other users\n- Delete chats/messages\n- Sent/delivered/seen status\n- View/update user profile\n- Group chats\n\n### Useful resources\n\n- [Zustand typescript guide](https://zustand.docs.pmnd.rs/guides/typescript)\n- [TanStack Query typescript guide](https://tanstack.com/query/latest/docs/framework/react/typescript)\n- [Using Websockets with React Query](https://tkdodo.eu/blog/using-web-sockets-with-react-query)\n- [Socket.io handling CORS](https://socket.io/docs/v4/handling-cors/)\n- [MERN auth](https://github.com/bradtraversy/mern-auth)\n\n## Author\n\n- GitHub - [i-shant](https://github.com/i-shant)\n- LinkedIn - [ishant-bhurani](https://linkedin.com/in/ishant-bhurani)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi-shant%2Fhoot-chat-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi-shant%2Fhoot-chat-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi-shant%2Fhoot-chat-app/lists"}