https://github.com/berkanjs/realtime-chat-app
Realtime Chat App is a modern chat application built with React, DaisyUI, and Socket.IO. It features real-time messaging, user authentication, and a sleek UI, designed to provide a smooth and engaging user experience
https://github.com/berkanjs/realtime-chat-app
nodejs react
Last synced: 3 months ago
JSON representation
Realtime Chat App is a modern chat application built with React, DaisyUI, and Socket.IO. It features real-time messaging, user authentication, and a sleek UI, designed to provide a smooth and engaging user experience
- Host: GitHub
- URL: https://github.com/berkanjs/realtime-chat-app
- Owner: BerkanJs
- Created: 2025-04-14T14:19:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-14T14:21:35.000Z (about 1 year ago)
- Last Synced: 2025-04-14T15:38:48.105Z (about 1 year ago)
- Topics: nodejs, react
- Language: JavaScript
- Homepage:
- Size: 4.73 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Realtime Chat App
## 📝 Description
Realtime Chat App is a modern chat application that allows users to communicate in real-time using a sleek and interactive UI. Built with **React**, **DaisyUI**, and **Lucide React**, this application leverages **Socket.IO** for real-time messaging and notifications. It includes features like user authentication, message sending, and dynamic updates to ensure smooth communication between users.
This application is split into two parts:
- **Frontend**: React-based UI, powered by Tailwind CSS and DaisyUI for components.
- **Backend**: Built with Express.js and MongoDB, handling authentication and real-time socket communication.
---
## 📦 Technologies Used
### Frontend:
- **React 19**: A JavaScript library for building user interfaces.
- **DaisyUI**: A Tailwind CSS plugin that provides pre-built UI components.
- **Lucide React**: A set of lightweight icons used in the UI.
- **Socket.IO-client**: A library that enables real-time communication between the client and server.
- **Framer Motion**: A library to add smooth animations and transitions to the UI.
- **React Router DOM**: A routing library for React to manage navigation within the application.
- **Zustand**: A small, fast, and scalable state management solution for React.
- **TailwindCSS**: A utility-first CSS framework that makes styling fast and responsive.
### Backend:
- **Express.js**: A fast, unopinionated web framework for Node.js.
- **MongoDB**: A NoSQL database for storing messages, users, and other data.
- **Mongoose**: An Object Data Modeling (ODM) library for MongoDB and Node.js.
- **Socket.IO**: A library for real-time web applications that enables bi-directional communication between the client and server.
- **bcryptjs**: A library for hashing passwords for secure authentication.
- **jsonwebtoken (JWT)**: A method for securely transmitting information between the client and server.
- **cloudinary**: A cloud service to upload and manage images, videos, and other media.
---
## 🚀 Features
- **Real-Time Messaging**: Chat with others in real-time, with instant message delivery.
- **User Authentication**: Secure login and registration using JWT tokens and bcrypt hashing.
- **Message History**: View past conversations.
- **Responsive Design**: The app is fully responsive, built with TailwindCSS, ensuring a seamless experience on all devices.
- **Modern UI**: With DaisyUI components and Lucide React icons, the app has a clean and modern design.
---
## 🛠️ Setup Instructions
### Frontend Setup:
1. Clone the repository:
```bash
git clone https://github.com/kullaniciadi/realtimechatappfrontend.git
cd realtimechatappfrontend
```
2. Install dependencies:
```bash
npm install
```
3. Run the app in development mode:
```bash
npm run dev
```
### Backend Setup:
1. Clone the backend repository:
```bash
git clone https://github.com/kullaniciadi/backend.git
cd backend
```
2. Install dependencies:
```bash
npm install
```
3. Run the backend server in development mode:
```bash
npm run dev
```
---
## 📋 Dependencies
### Frontend Dependencies:
- **axios**: For making HTTP requests.
- **framer-motion**: For adding animations to React components.
- **lucide-react**: React components for Lucide icons.
- **react**: The core React library for building the UI.
- **react-dom**: React's DOM renderer.
- **react-hot-toast**: For displaying toast notifications.
- **react-router-dom**: For client-side routing.
- **socket.io-client**: For real-time messaging and communication with the backend.
- **zustand**: A small state management library for React.
- **daisyui**: Pre-built UI components for TailwindCSS.
- **tailwindcss**: A utility-first CSS framework for building responsive designs quickly.
- **vite**: A fast build tool that provides an optimized development experience.
### Backend Dependencies:
- **bcryptjs**: For securely hashing user passwords.
- **cloudinary**: For managing media uploads and storage.
- **cookie-parser**: For handling cookies in HTTP requests.
- **cors**: A package to enable Cross-Origin Resource Sharing.
- **dotenv**: For managing environment variables.
- **express**: A minimal web framework for Node.js.
- **jsonwebtoken**: For JWT-based user authentication.
- **mongoose**: A MongoDB ODM for easier database interactions.
- **socket.io**: For enabling real-time communication between the server and clients.
---
## 🤝 Contribution
Contributions are welcome! If you want to contribute to this project, feel free to open a pull request.
---
## 📢 Demo
Check out the live demo here: [Link to Demo]
---
## 🧑💻 Author
Created by **Berkan** – Feel free to reach out for feedback or collaboration!