{"id":22911910,"url":"https://github.com/awebcode/whatsapp","last_synced_at":"2025-04-01T10:47:38.333Z","repository":{"id":265864443,"uuid":"896760563","full_name":"awebcode/whatsapp","owner":"awebcode","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-05T01:42:09.000Z","size":374,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T06:15:02.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/awebcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-01T08:26:54.000Z","updated_at":"2024-12-05T01:42:13.000Z","dependencies_parsed_at":"2024-12-02T07:55:07.055Z","dependency_job_id":null,"html_url":"https://github.com/awebcode/whatsapp","commit_stats":null,"previous_names":["awebcode/whatsapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awebcode%2Fwhatsapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awebcode%2Fwhatsapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awebcode%2Fwhatsapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awebcode%2Fwhatsapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awebcode","download_url":"https://codeload.github.com/awebcode/whatsapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246628418,"owners_count":20808106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-14T04:19:06.009Z","updated_at":"2025-04-01T10:47:38.318Z","avatar_url":"https://github.com/awebcode.png","language":"TypeScript","readme":"# WhatsApp Chat Application\n\nA real-time chat application built with Express.js, Socket.io, and Next.js. This application allows users to send and receive messages instantly, mimicking the behavior of WhatsApp.\n\n## Features\n- **Real-time Messaging**: Users can send and receive messages instantly using WebSockets (Socket.io).\n- **User Authentication**: Users can sign in and start chatting immediately.\n- **Responsive UI**: Built with Next.js and Tailwind CSS for a modern, responsive design.\n- **Multi-room Support**: Users can join different chat rooms and chat with multiple users simultaneously.\n- **Client-Server Communication**: Using Express for the backend with Socket.io integration and Next.js for the frontend.\n\n## Tech Stack\n- **Backend**: Express.js, Socket.io\n- **Frontend**: Next.js, React.js, Tailwind CSS\n- **Database**: MongoDB (or use any database as per your choice)\n- **Authentication**: JWT (JSON Web Tokens)\n- **Real-time Communication**: Socket.io\n\n## Project Structure\n\n\n/client # Next.js client-side code /pages # Next.js page routes /components # React components /styles # Tailwind CSS styles\n\n/server # Express server-side code /controllers # API controllers (chat, auth) /models # Database models (User, Message) /routes # API routes /socket # Socket.io event handlers /config # Configuration (DB, Auth)\n\nREADME.md # This file package.json # Project dependencies\n\nbash\n\n\n## Getting Started\n\n### 1. Clone the repository\n```bash\ngit clone https://github.com/yourusername/whatsapp-chat.git\ncd whatsapp-chat\n2. Install dependencies for both client and server\nRun this command in both /client and /server directories:\n\nbash\n\nnpm install\n3. Setup the environment variables\nIn the root directory, create a .env file for your environment variables:\n\nenv\n\n# Backend server\nPORT=5000\nMONGODB_URI=mongodb://localhost:27017/whatsapp-chat\nJWT_SECRET=your_jwt_secret_key\nIn the /client directory, you might want to add any necessary environment variables for your frontend (e.g., API URLs).\n\n4. Running the Application\n1. Start the backend server (Express + Socket.io)\nbash\n\ncd /server\nnpm run dev\n2. Start the frontend (Next.js)\nbash\n\ncd /client\nnpm run dev\nYour application should now be running at http://localhost:3000 (for the client) and the backend will run at http://localhost:5000.\n\n5. Testing the App\nOpen multiple browser tabs (or different browsers) and test the chat functionality. Users in different tabs should be able to send and receive messages in real-time.\n\nHow It Works\nBackend (Express + Socket.io)\nSocket.io Integration: We use Socket.io to establish a WebSocket connection between the client and server. This allows for real-time communication without needing to refresh the page.\nRooms: Socket.io supports creating rooms where clients can join specific groups. Each room is dedicated to a chat session.\nMessage Handling: The server listens for messages from clients and broadcasts them to all users in the same room.\nFrontend (Next.js)\nSocket.io Client: On the client side, Socket.io is integrated with React to send and receive messages in real-time.\nUser Interface: The UI is built with React components and styled with Tailwind CSS to ensure responsiveness and ease of customization.\nContributing\nFeel free to fork and submit issues or pull requests. Contributions are always welcome!\n\nSteps to contribute:\nFork the repository.\nCreate a new branch (git checkout -b feature/your-feature-name).\nCommit your changes (git commit -am 'Add new feature').\nPush to your branch (git push origin feature/your-feature-name).\nCreate a new Pull Request.\nLicense\nDistributed under the MIT License. See LICENSE for more information.\n\nNote: Replace the repository URL and other placeholders with your actual project details.\n\nscss\n\n\nThis README gives an overview of the project, installation steps, and how the app works, with a focus on both the backend (Express + Socket.io) and frontend (Next.js) components.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawebcode%2Fwhatsapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawebcode%2Fwhatsapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawebcode%2Fwhatsapp/lists"}