Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/being-devahmad/chatbook

Chatbook is a real-time chat app built with MERN, featuring online/offline status, including customizable themes options for users, sleek UI (Tailwind CSS + DaisyUI), and seamless messaging powered by Socket.IO.
https://github.com/being-devahmad/chatbook

expressjs mern-stack mongodb mongodb-atlas nodejs reactjs socket-io zustand

Last synced: 3 days ago
JSON representation

Host: GitHub
URL: https://github.com/being-devahmad/chatbook
Owner: being-devahmad
Created: 2024-11-20T11:51:29.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-11-21T23:00:32.000Z (2 months ago)
Last Synced: 2024-11-21T23:27:37.612Z (2 months ago)
Topics: expressjs, mern-stack, mongodb, mongodb-atlas, nodejs, reactjs, socket-io, zustand
Language: JavaScript
Homepage:
Size: 4.77 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Chatbook 💬

![Chatbook Login Page](https://github.com/user-attachments/assets/45e049fe-afe2-419f-b399-36a7e7b05ed5)

Chatbook is a real-time chat application built with the MERN stack, offering a seamless and interactive messaging experience. Connect with friends, share thoughts, and stay in touch with our sleek and responsive chat interface.

## ✨ Features

- **Real-time Messaging**: Instant message delivery powered by Socket.IO
- **User Authentication**: Secure sign-up and login functionality
- **Online/Offline Status**: See who's currently active
- **Responsive Design**: Seamless experience across desktop and mobile devices
- **Message History**: Access your past conversations anytime
- **User Profiles**: Customize your profile with avatars and status messages
- **Customizable Themes**: Customize your profile with different themes of your choice

## 🛠️ Technologies Used

- **Frontend**:
- React.js
- Tailwind CSS for styling
- DaisyUI for UI components
- Zustand for state management
- Socket.IO client for real-time communication

- **Backend**:
- Node.js
- Express.js
- MongoDB for database
- Socket.IO for WebSocket connections

## 🚀 Getting Started

### Prerequisites

- Node.js (v14 or later)
- MongoDB
- npm or yarn

### Installation

1. Clone the repository:
```bash
git clone https://github.com/yourusername/chatbook.git
cd chatbook
```

2. Install dependencies for both frontend and backend:
```bash
# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install
```

3. Set up environment variables:
Create a `.env` file in the backend directory and add the following:
```
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
PORT=5000
```

4. Start the development servers:
```bash
# Start backend server
cd backend
npm run dev

# In a new terminal, start frontend server
cd frontend
npm start
```

5. Open your browser and navigate to `http://localhost:3000` to use Chatbook!

## 📸 Screenshots

![Chatbook Interface](https://github.com/user-attachments/assets/38dc6563-a846-41ce-a2e1-2a0e28cd726f)

*Chatbook's intuitive chat interface*

![User Profile](https://github.com/user-attachments/assets/391607c3-7a68-443b-998c-9270c6b08cee)

*Customizable Themes*
![Settings Page](https://github.com/user-attachments/assets/258cc609-9c90-42a9-a212-8f2cb8d097f1)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check [issues page](https://github.com/yourusername/chatbook/issues).

## 📝 License

This project is [MIT](https://choosealicense.com/licenses/mit/) licensed.

## 👨‍💻 Author

**Your Name**
- GitHub: [being-devahmad]([(https://github.com/being-devahmad)])

---

⭐️ Star this repo if you like what you see! ⭐️