{"id":16527484,"url":"https://github.com/venu123143/whatsapp","last_synced_at":"2026-04-12T03:03:09.880Z","repository":{"id":214894164,"uuid":"737537716","full_name":"venu123143/whatsapp","owner":"venu123143","description":"WhatsApp Clone with React, Vite, and TypeScript","archived":false,"fork":false,"pushed_at":"2024-05-22T18:43:28.000Z","size":27770,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T03:40:43.318Z","etag":null,"topics":["audio-call","chat-application","emojis","group-chats","instant-messaging","react","read-receipts","socket-io","socketio-client","socketio-server","status-updates","tailwind-css","typescript","user-authentication","video-calls","voice-messaging","whatsapp","whatsapp-clone","whatsapp-clone-app"],"latest_commit_sha":null,"homepage":"https://whatsapp-chat-imbu.onrender.com/","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/venu123143.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":"2023-12-31T12:35:20.000Z","updated_at":"2024-05-28T12:44:45.675Z","dependencies_parsed_at":"2024-05-28T12:54:46.097Z","dependency_job_id":null,"html_url":"https://github.com/venu123143/whatsapp","commit_stats":null,"previous_names":["venu123143/whatsapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/venu123143%2Fwhatsapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/venu123143%2Fwhatsapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/venu123143%2Fwhatsapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/venu123143%2Fwhatsapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/venu123143","download_url":"https://codeload.github.com/venu123143/whatsapp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243971156,"owners_count":20376784,"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":["audio-call","chat-application","emojis","group-chats","instant-messaging","react","read-receipts","socket-io","socketio-client","socketio-server","status-updates","tailwind-css","typescript","user-authentication","video-calls","voice-messaging","whatsapp","whatsapp-clone","whatsapp-clone-app"],"created_at":"2024-10-11T17:35:36.186Z","updated_at":"2025-12-31T00:18:58.468Z","avatar_url":"https://github.com/venu123143.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [WhatsApp Clone with React, Node and Socket.IO](https://vchat.nerchuko.in/)\n\nThis project is a WhatsApp-like messaging application built with a modern tech stack, including React, Vite, and TypeScript. It provides a wide range of features such as real-time communication, group chats, user authentication with OTP, and message management functionalities.\n\nYou can check the hosted version of this project here:  [https://vchat.nerchuko.in/](https://vchat.nerchuko.in/).\n\nYou can check the live recording of this project here: [https://www.linkedin.com/](https://www.linkedin.com/feed/update/urn:li:activity:7319068405578223616/).\n\n## 🔗 Repositories \u0026 Branch Info\n\n- **Frontend Code**  \n  Branch: `with_mongodb`  \n  Repository: [https://github.com/venu123143/whatsapp](https://github.com/venu123143/whatsapp)\n\n- **Backend Code**  \n  Branch: `with_mongodb`  \n  Repository: [https://github.com/venu123143/whatsapp_backend](https://github.com/venu123143/whatsapp_backend)\n\n## Environment Variables\n\nTo run this project locally, you need to set some environment variables. Create a `.env` file in the root directory of your frontend and add the following variables:\n\n```bash\nVITE_API_CLIENT_URL=http://localhost:5000/api\nVITE_API_SOCKET_URL=http://localhost:5000\nVITE_API_CALLS_URL=http://localhost:5000/calls\n```\n\n## Key Features\n\n\n- **Authentication**: User login with OTP for secure access.\n- **Chat Functionalities**: Group chats, individual chats, media sharing (photos, voice recordings), message replies, editing, and deletion.\n- **User Profiles**: Customizable profile pictures, names, and bios. including the take phtoto and upload feature.\n- **Video Call**: One to One and Group video call feature is implemented using webrtc.\n- **Real-time Communication**: Enabled by Socket.io.\n- **State Management**: Managed with Redux and Redux Toolkit.\n- **Validation and Forms**: Utilizes Formik and Yup for form handling and validation.\n- **UX/UI Components**: React Router for navigation, React Select for dropdowns, React Toastify for notifications, and React Spinners for loading indicators.\n- **Design and Styling**: Tailwind CSS for styling and React Icons for icons.\n- **Responsive**: This website is fully responsive for the all types of devices.\n\n## Technology Stack\n\n- **Frontend**: React + Vite, TypeScript, Tailwind CSS\n- **Backend**: Node.js, Express.js, JWT Tokens\n- **Database**: MongoDB\n- **Real-time Communication**: Socket.io\n- **Video Call**: WebRTc\n- **State Management**: Redux with Redux Toolkit\n\n## Libraries and Dependencies\n\nThe following libraries and dependencies are used in this project:\n\n- **Frontend Dependencies**:\n  - `react`, `react-dom`, `react-router-dom`\n  - `@reduxjs/toolkit`, `react-redux`\n  - `formik`, `yup`, `axios`\n  - `emoji-picker-react`, `react-dropzone`, `wavesurfer.js`\n  - `react-select`, `react-toastify`, `react-icons`, `react-spinners`\n  - `socket.io-client`\n\n- **Frontend Dev Dependencies**:\n  - `@vitejs/plugin-react-swc`\n  - `typescript`, `@typescript-eslint/eslint-plugin`, `@typescript-eslint/parser`\n  - `eslint`, `eslint-plugin-react-hooks`, `eslint-plugin-react-refresh`\n  - `postcss`, `autoprefixer`, `tailwindcss`\n\n\n\n## Project Screenshots\n\n### 1. Login Page\n\n![Login Page](https://res.cloudinary.com/dsnq9xdwt/image/upload/v1715265169/Screenshot_219_p6sofo.png)\n\nDescription: This is the login page where users can authenticate using an OTP. The UI is designed for a simple and secure login experience.\n\n### 2. Home Page\n\n![Home Page](https://res.cloudinary.com/dsnq9xdwt/image/upload/v1715265169/Screenshot_221_i2frib.png)\n\nDescription: The home page shows the list of active chats and groups. Users can start new conversations, join groups, or continue existing chats.\n\n### 3. Profile Page\n\n![Profile Page](https://res.cloudinary.com/dsnq9xdwt/image/upload/v1715265169/Screenshot_220_lzcs5r.png)\n\nDescription: This is the profile page where users can customize their profile picture, name, and bio. They can also manage personal settings and account information.\n\n![Home page Gif](https://res.cloudinary.com/dsnq9xdwt/image/upload/v1715265914/Whatsapp-GoogleChrome2024-05-0920-07-28-ezgif.com-video-to-gif-converter_wlzlm5.gif)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvenu123143%2Fwhatsapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvenu123143%2Fwhatsapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvenu123143%2Fwhatsapp/lists"}