F&F Chat is a real-time chat application built with React, Node.js, Express, MongoDB, and Socket.IO. It allows users to sign up, log in, and chat with others in real-time. The app is deployed on Render, making it accessible from anywhere.
✅ User authentication (Signup/Login)
✅ Real-time messaging using Socket.IO
✅ Display online users
✅ Search users for conversation
✅ Secure password hashing with bcrypt
✅ Messages stored in MongoDB
✅ Auto-scroll to the latest message
✅ Animated shake effect for new messages
✅ Deployed on Render for live access
- React – UI Framework
- Zustand – State Management
- TailwindCSS & DaisyUI – UI Styling
- React Router DOM – Routing
- React Hot Toast – Notifications
- React Icons – Icons
- Node.js – JavaScript Runtime
- Express.js – Backend Framework
- MongoDB & Mongoose – Database & ORM
- Socket.IO – Real-time Communication
- JWT (jsonwebtoken) – User Authentication
- Bcrypt – Password Hashing
- Dotenv – Environment Variable Management
Ensure you have installed:
- Node.js (v16+)
- MongoDB (local or cloud-based)
- Git
- VS Code or any code editor
git clone https://github.com/enayetsyl/fandfchat.git
cd fandfchatnpm installcd frontend
npm installCreate a .env file in the root directory and add:
PORT=5000
MONGO_DB_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_keynpm run servercd frontend
npm run devOpen http://localhost:3000 to use the app.
1️⃣ Sign Up with your full name, username, password, and gender.
2️⃣ Login to access the chat interface.
3️⃣ Search for users using the search bar.
4️⃣ Click on a user to start a conversation.
5️⃣ Send messages in real-time.
6️⃣ Logout when finished.
Try the deployed version of F&F Chat here:
🔗 Live Site
Building F&F Chat has been an exciting journey, allowing me to explore full-stack development, real-time data transfer, and authentication security. I hope this project inspires others to create their own real-time applications. 🚀🎉
Happy Coding! 💻🔥