{"id":25531667,"url":"https://github.com/subhadro/quick_chat_app","last_synced_at":"2026-04-11T06:04:33.398Z","repository":{"id":275104503,"uuid":"925075422","full_name":"Subhadro/quick_chat_app","owner":"Subhadro","description":"QuickTalk is a modern and feature-rich real-time chat application built with the MERN stack. It offers a seamless login and signup experience, 32 unique themes, and a fully responsive UI for a smooth chatting experience on any device. Powered by Socket.io, it ensures instant message delivery and real-time interactions. ","archived":false,"fork":false,"pushed_at":"2025-02-17T07:04:02.000Z","size":6776,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T08:22:04.306Z","etag":null,"topics":["html-css-javascript","mongodb","nodejs","reactjs","socket-io"],"latest_commit_sha":null,"homepage":"https://quick-chat-ap.onrender.com/login","language":"JavaScript","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/Subhadro.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}},"created_at":"2025-01-31T07:12:55.000Z","updated_at":"2025-02-17T07:07:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"36c8c9a9-fbb6-49f5-a4ed-46f481450738","html_url":"https://github.com/Subhadro/quick_chat_app","commit_stats":null,"previous_names":["subhadro/quick_chat_app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Subhadro%2Fquick_chat_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Subhadro%2Fquick_chat_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Subhadro%2Fquick_chat_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Subhadro%2Fquick_chat_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Subhadro","download_url":"https://codeload.github.com/Subhadro/quick_chat_app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239758890,"owners_count":19692041,"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","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":["html-css-javascript","mongodb","nodejs","reactjs","socket-io"],"created_at":"2025-02-20T01:19:27.003Z","updated_at":"2025-12-30T23:03:18.400Z","avatar_url":"https://github.com/Subhadro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n#Project Title\n\n  QuickChat 🚀 – Fast, Secure \u0026 Stylish Messaging\n\n#Project Description\n \n    QuickChat is a modern and feature-rich real-time chat application built with the MERN stack. It offers a seamless login and signup experience, 32 unique themes, and a fully responsive UI for a smooth chatting experience on any device. Powered by Socket.io, it ensures instant message delivery and real-time interactions. With stunning color combinations and great features, QuickChat is designed to make communication fast, engaging, and visually appealing.\n\n\n## Installation\nInstall this fullstack application with the help of following commands:-\n\n```bash\n  git clone \"https://github.com/Subhadro/quick_chat_app.git\"\n  cd quick_chat_app\n\n#Install frontend dependencies\n  cd frontend\n  npm install\n\n#Start frontend\n  npm run dev\n\n#Install backend dependencies\n  cd ../backend\n  npm install\n\n#Start backend\n  npm run dev\n\n```\n\n ## Deployment 🚀  \nQuickChat is live! You can access the application here:  \n\n🔗 **[QuickChat Live](https://quick-chat-ap.onrender.com)**  \n\nSimply visit the link and start chatting in real-time! 💬🔥  \n\n## Screenshots\n\nHere is the entry page of this website :-\n\n![App Screenshot](https://github.com/Subhadro/quick_chat_app/blob/495b31f260b481914685254697d23467d26ee248/quicktalk1.png)\n\nThis is an example of chatting with amazing UI :-\n\n![App Screenshot](https://github.com/Subhadro/quick_chat_app/blob/495b31f260b481914685254697d23467d26ee248/chatting.png)\n\n\n## Tech Stack\n\n**Client:** React, Zustand, DaisyUI, TailwindCSS, lucide-react\n\n**Server:** Node.js, Express, Socket.io, JWT, Bcrypt, Multer, Cloudinary\n\n\n## Features\n\n- Full-stack MERN application with backend and frontend integration\n- Global state management using **Zustand** for efficient variable sharing\n- Beautiful UI designed with **DaisyUI** and **TailwindCSS** for responsiveness\n- Send and receive text messages, images, documents, and videos\n- Real-time messaging powered by **Socket.io**\n- Secure authentication with **JWT** tokens and password hashing via **Bcrypt**\n- Efficient API requests using **Axios** with global error handling\n- Protected routes ensuring access control for authenticated users\n- Switch between 32 different themes to personalize the interface\n- Update your profile with an option to upload an image\n- Sort users by online status for easy communication\n- Real-time highlighting of user logouts via **Socket.io** to notify all active users\n- User-friendly components added using **lucide-react** for convenient UI elements\n\n## Lessons Learned 🎯  \n\n#### 🔹 Managing Backend and Frontend  \nHandling both backend and frontend in a MERN application taught me how to structure a full-stack project efficiently. Separating concerns, managing API calls, and ensuring smooth communication between both layers were key takeaways.  \n\n#### 🔹 Using Zustand for Global State Management  \nInstead of using complex state management solutions like Redux, I used **Zustand** to manage global state easily and efficiently. It helped in sharing variables across components without unnecessary re-renders.  \n\n#### 🔹 Using DaisyUI for Styling  \nDaisyUI, built on **TailwindCSS**, made UI development faster and more aesthetic with pre-designed components. It improved the responsiveness and design consistency of the app.  \n\n#### 🔹 Sending Text, Uploading Photos, Docs, and Vedios  \nImplemented a feature that allows users to send messages, images, documents, and vedios seamlessly. Used **Multer** for file uploads and optimized handling of media files for a better user experience.  \n\n#### 🔹 Implementing Socket.io in Real-Life Apps  \nIntegrated **Socket.io** for real-time messaging, ensuring instant communication between users. Learning how to manage real-time events, rooms, and broadcasting helped in building an interactive chat system.  \n\n#### 🔹 Authentication with JWT and Bcrypt  \nImplemented secure user authentication using **JWT tokens** for authorization and **Bcrypt** for password hashing. This ensured that user data remained secure while maintaining a smooth login/signup experience.  \n\n#### 🔹 Using Axios and Creating an Axios Instance  \nUsed **Axios** to handle API requests efficiently. Created a global Axios instance with predefined configurations to manage authentication headers and error handling globally.  \n\n#### 🔹 Creating a Protected Route  \nImplemented a **Protected Route** mechanism to restrict access to authenticated users only. This ensured that only logged-in users could access chat functionalities, enhancing app security.  \n\nEach of these lessons strengthened my understanding of **full-stack development**, making the application more robust, scalable, and user-friendly! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubhadro%2Fquick_chat_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubhadro%2Fquick_chat_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubhadro%2Fquick_chat_app/lists"}