|
1 |
| -# Tech Stack Used |
| 1 | +# 📱 Chatopia - WhatsApp Web Clone |
2 | 2 |
|
3 |
| -- Next.JS |
4 |
| -- Node.JS |
5 |
| -- Express.JS |
6 |
| -- Socket.io |
| 3 | +## Project Overview |
7 | 4 |
|
8 |
| -## Goal |
| 5 | +Chatopia is a full-featured WhatsApp Web clone built using modern and efficient technologies. It offers real-time communication, group interactions, file sharing, and several other features, making it a powerful messaging platform. |
9 | 6 |
|
10 |
| -Create a Whatsapp Web Clone |
| 7 | +This project leverages the following technologies: |
11 | 8 |
|
12 |
| -## Features |
| 9 | +- ⚡ **Next.js** – A scalable and efficient frontend framework for delivering fast user experiences. |
| 10 | +- 🟢 **Node.js + Express** – A reliable backend stack for handling requests and ensuring smooth server-side operations. |
| 11 | +- 🌐 **Socket.io** – Enables real-time WebSocket communication for seamless, instant messaging. |
13 | 12 |
|
14 |
| -- Seamless Messaging due to Sockets |
15 |
| -- File Sharing |
16 |
| -- Option to create Groups, Communities |
17 |
| -- Tagging People in Groups, Replying to Specific Messages |
18 |
| -- Forwarding messages |
19 |
| -- Option to send emoji/gif too |
20 |
| -- Status Updates in Social Tab |
21 |
| -- Editable Profiles |
22 |
| -- Various Privacy Settings |
23 |
| -- Authentication |
24 |
| -- Self-Notification |
25 |
| -- Notification Sound when Tab is Open |
| 13 | +## ✨ Key Features |
26 | 14 |
|
27 |
| -## Installation |
| 15 | +- 💬 **Seamless Messaging** – Real-time communication powered by WebSocket technology for fast and reliable messaging. |
| 16 | +- 📁 **File Sharing** – Share files, images, and media with ease within chats. |
| 17 | +- 👥 **Group & Community Creation** – Create and manage group chats or communities for collaborative conversations. |
| 18 | +- 🏷️ **User Tagging** – Mention users directly in group conversations to get their attention. |
| 19 | +- 🔄 **Message Forwarding** – Forward messages across chats effortlessly. |
| 20 | +- 😄 **Emoji/GIF Support** – Express yourself with emojis and GIFs in your messages. |
| 21 | +- 🛡️ **Secure Authentication** – OAuth-based login with Google and GitHub for secure user access. |
| 22 | +- 🖼️ **Status Updates** – Post and view status updates from other users in the social tab. |
| 23 | +- 🎨 **Profile Customization** – Personalize your profile with editable details. |
| 24 | +- 🔧 **Privacy Settings** – Take control of your privacy by setting preferences for who can see your data and activities. |
| 25 | +- 🔔 **Self-Notifications** – Receive notifications for your own actions. |
| 26 | +- 🔉 **Notification Sound** – Get sound alerts when new messages arrive, ensuring you never miss an update. |
28 | 27 |
|
29 |
| -- Create Google and Github OAuth secret keys |
30 |
| -- Create Postgresql database |
31 |
| -- Clone this repository |
32 |
| -- Install all the dependencies by running this command |
| 28 | +## Tech Stack |
33 | 29 |
|
34 |
| -``` |
35 |
| -npm install |
36 |
| -``` |
| 30 | +- **Frontend**: Next.js |
| 31 | +- **Backend**: Node.js, Express.js |
| 32 | +- **Real-Time Communication**: Socket.io |
| 33 | +- **Database**: PostgreSQL |
37 | 34 |
|
38 |
| -- Navigate to chatopia directoy |
| 35 | +## 🛠️ Installation & Setup |
39 | 36 |
|
40 |
| -``` |
41 |
| -cd ./chatopia |
42 |
| -``` |
| 37 | +Follow these steps to get the project running locally: |
43 | 38 |
|
44 |
| -- Add an .env file in the /chatopia directory , following the same structure as the .env.example . |
| 39 | +1. **Create OAuth Keys**: |
| 40 | + - Set up OAuth secret keys for Google and GitHub. |
45 | 41 |
|
46 |
| -- Run the development Server |
| 42 | +2. **Set Up PostgreSQL Database**: |
| 43 | + - Ensure a PostgreSQL database is available and configured. |
| 44 | + |
| 45 | +3. **Clone the Repository**: |
| 46 | + ```bash |
| 47 | + git clone <your-repository-url> |
| 48 | + ``` |
| 49 | + |
| 50 | +4. **Navigate to the Project Directory**: |
| 51 | + ```bash |
| 52 | + cd ./chatopia |
| 53 | + ``` |
| 54 | + |
| 55 | +5. **Install Dependencies**: |
| 56 | + ```bash |
| 57 | + npm install |
| 58 | + ``` |
| 59 | + |
| 60 | +6. **Set Environment Variables**: |
| 61 | + - Add an `.env` file in the `/chatopia` directory, following the structure outlined in `.env.example`. |
| 62 | + |
| 63 | +7. **Run the Development Server**: |
| 64 | + ```bash |
| 65 | + npm run server |
| 66 | + ``` |
| 67 | + |
| 68 | +## 🚀 Future Enhancements |
| 69 | + |
| 70 | +- **Voice & Video Calls** – Enable voice and video communication for users. |
| 71 | +- **Dark Mode** – Add a dark theme option for users who prefer it. |
| 72 | +- **Advanced Search** – Improve search functionality for finding messages, files, and users. |
| 73 | + |
| 74 | +## 🤝 Contributing |
| 75 | + |
| 76 | +Contributions are welcome! If you have suggestions or ideas, feel free to fork the repository, open an issue, or submit a pull request. |
| 77 | + |
| 78 | +### 🤝How to make Contribution |
| 79 | + |
| 80 | +We welcome contributions from developers of all skill levels! Whether you're fixing a bug, adding new features, or improving documentation, your help is appreciated. |
| 81 | +
|
| 82 | +To contribute: |
| 83 | +
|
| 84 | +1. ⭐ Star the repository to show your support. |
| 85 | +2. 📝 Create an issue outlining how you'd like to contribute to the project. |
| 86 | +3. 🍴 Fork the repository to make your own copy: |
| 87 | + ```sh |
| 88 | + # Click on the "Fork" button at the top right of the repository page |
| 89 | +4. 💻 Implement your changes in the forked repository by creating a new branch for your feature or fix: |
| 90 | + ``` |
| 91 | + git checkout -b feature-or-fix-name |
| 92 | + ``` |
| 93 | +5. Make your changes and commit them using Conventional Commits: |
| 94 | + ``` |
| 95 | + git commit -m "feat: describe your changes" |
| 96 | + ``` |
| 97 | +6. 🔄 Push your branch: |
| 98 | + ``` |
| 99 | + git push origin feature-or-fix-name |
| 100 | + ``` |
| 101 | +7. Open a pull request and describe the changes you made, mentioning the issue number you're addressing. |
| 102 | +8. ⏳ Wait for review and feedback from the maintainers. |
47 | 103 |
|
48 |
| -``` |
49 |
| -npm run server |
50 |
| -``` |
|
0 commit comments