https://github.com/theneovimmer/chatty_app
A modern, real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO for instant messaging capabilities.
https://github.com/theneovimmer/chatty_app
axios daisyui react reacthottoast reactrouter socket-io tailwincss vite zustand
Last synced: about 1 month ago
JSON representation
A modern, real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO for instant messaging capabilities.
- Host: GitHub
- URL: https://github.com/theneovimmer/chatty_app
- Owner: TheNeovimmer
- Created: 2025-08-18T16:55:56.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-18T17:18:46.000Z (9 months ago)
- Last Synced: 2026-04-12T00:49:28.018Z (about 1 month ago)
- Topics: axios, daisyui, react, reacthottoast, reactrouter, socket-io, tailwincss, vite, zustand
- Language: JavaScript
- Homepage: https://chatty-app-69a1.onrender.com
- Size: 824 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chat Application
A modern, real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO for instant messaging capabilities.
## Features
- **Real-time Messaging**: Instant messaging with WebSocket technology using Socket.IO
- **User Authentication**: Secure user registration and login with JWT
- **Responsive Design**: Fully responsive UI that works on desktop and mobile devices
- **User Profiles**: Customizable user profiles with avatar images
- **Online Status**: See which users are currently online
- **Dark/Light Mode**: Toggle between dark and light themes
- **Persistent Sessions**: Secure session management with HTTP-only cookies
## Tech Stack
### Frontend
- **React** - Frontend JavaScript library
- **Vite** - Build tool and development server
- **Zustand** - State management
- **React Router** - Client-side routing
- **Tailwind CSS** - Utility-first CSS framework
- **DaisyUI** - Component library for Tailwind CSS
- **Axios** - HTTP client for API requests
- **Socket.IO Client** - Real-time bidirectional event-based communication
- **React Hot Toast** - Toast notifications
### Backend
- **Node.js** - JavaScript runtime
- **Express** - Web application framework
- **MongoDB** - NoSQL database
- **Mongoose** - MongoDB object modeling tool
- **Socket.IO** - Real-time bidirectional event-based communication
- **JWT** - Authentication
- **bcryptjs** - Password hashing
- **Cloudinary** - Image hosting service
- **Cookie Parser** - Parse HTTP request cookies
- **CORS** - Enable cross-origin resource sharing
- **dotenv** - Environment variables
## Project Structure
```
chatapp/
├── backend/ # Backend server code
│ ├── src/
│ │ ├── controllers/ # Route controllers
│ │ ├── lib/ # Library files (DB connection, socket setup)
│ │ ├── middleware/ # Custom middleware
│ │ ├── models/ # MongoDB models
│ │ ├── routes/ # API routes
│ │ └── seeds/ # Database seeders
│ └── package.json
├── frontend/ # React frontend code
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── constants/ # Application constants
│ │ ├── pages/ # Page components
│ │ ├── store/ # State management
│ │ ├── App.jsx # Main App component
│ │ └── main.jsx # Entry point
│ └── package.json
└── README.md
```
## Getting Started
### Prerequisites
- Node.js (v14 or higher)
- MongoDB
- NPM or Yarn
### Installation
1. Clone the repository
```bash
git clone https://github.com/bouzayenilyes/chatty_app.git
cd chatapp
```
2. Install dependencies for both backend and frontend
```bash
npm run build
```
3. Set up environment variables
Create a `.env` file in the `backend` directory with the following variables:
```
MONGODB_URI=...
PORT=5001
JWT_SECRET=put_your_jwt_secret_here
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...
NODE_ENV=development
```
4. Start the development servers
```bash
npm start
```
This will start the backend server. In another terminal, navigate to the frontend directory and run:
```bash
cd frontend
npm run dev
```
5. Open your browser and navigate to `http://localhost:5173`
## Usage
1. **Sign Up**: Create a new account with your email and password
2. **Log In**: Access your account with your credentials
3. **Start Chatting**: Select a user from the online list and begin messaging
4. **Customize Profile**: Update your profile information and avatar
5. **Toggle Theme**: Switch between light and dark mode in settings
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.
## Contact
Ilyes Bouzayen - [@Ilyesbouzayen](https://twitter.com/ilyesbouzayen) - ilyesbouzayen@hotmail.com
Project Link: [https://github.com/bouzayenilyes/chatty_app](https://github.com/bouzayenilyes/chatty_app)