https://github.com/bhaxkar/chatter
Chatter is a modern real-time chat application that enables users to communicate instantly with each other. Built with a robust tech stack including React for the frontend and Node.js for the backend.
https://github.com/bhaxkar/chatter
bcryptjs cloudinary-sdk express-js jwt-auth mongodb react-router-dom reactjs socket-io tailwind-css zustand
Last synced: 18 days ago
JSON representation
Chatter is a modern real-time chat application that enables users to communicate instantly with each other. Built with a robust tech stack including React for the frontend and Node.js for the backend.
- Host: GitHub
- URL: https://github.com/bhaxkar/chatter
- Owner: bhaxkar
- Created: 2025-03-30T06:25:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-30T09:37:21.000Z (about 1 year ago)
- Last Synced: 2025-03-30T10:27:24.154Z (about 1 year ago)
- Topics: bcryptjs, cloudinary-sdk, express-js, jwt-auth, mongodb, react-router-dom, reactjs, socket-io, tailwind-css, zustand
- Language: JavaScript
- Homepage:
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Chatter - Real-time Chat Application
Chatter is a fully responsive real-time chat application that enables users to communicate instantly with each other. It is built with a robust tech stack, including **React.js** and **Tailwind CSS** for the frontend, **Zustand** for efficient state management, **Node.js** and **Express.js** for the backend, and **Socket.io** for real-time communication. It provides features like real-time messaging with image sharing capabilities in chats, online/offline user status, user authentication, and profile management.
## Technical Description 📃
- **Real-time Communication**: Implemented real-time messaging and live user status updates using ```Socket.IO```, enabling seamless bidirectional communication.
- **State Management**: Built efficient state management system using ```Zustand``` for optimized performance.
- **Navigation**: Utilized ```React Router v6``` for client-side routing with dynamic routes for seamless navigation.
- **Responsive UI**: The frontend is built with ```React.js``` and designed fully responsive UI using ```Tailwind CSS``` for a modern mobile-friendly experience.
- **Authentication**: Implemented secure user authentication using ``` JWT and bcrypt.js ```with HTTP-only cookies for enhanced security measures.
- **Database**: Designed and integrated ```MongoDB``` database schema using ```Mongoose``` ODM for efficient data modeling and relationships.
- **API Endpoints**: Built RESTful API endpoints with ```Express.js``` following MVC architecture for clean code organization.
- **File Upload**: Integrated ```Cloudinary cloud storage``` for media management, handling user profile pictures and message attachments.
|Frontend Technologies 🎨 |Backend Technologies 🛠|
|--------------------------|-----------------------|
| React.js & React DOM | Node.js with Express.js |
| Tailwind CSS | MongoDB with Mongoose |
| Zustand for state management | JWT for authentication |
| Socket.IO Client | Socket.IO for real-time communication |
| Axios for HTTP requests | Bcrypt.js for password hashing |
| React Hot Toast for notifications | Cloudinary for image storage |
| React Router Dom for navigation | CORS for cross-origin resource sharing |
## Contact
👾 Bhaskar Jha (✉️ [@bhaxkar](mailto:bhaskarjha.info@gmail.com) )