alii13 / whatsapp-clone

A full-stack real-time WhatsApp clone using reactjs and firebase

This project was bootstrapped with Create React App.

Follow these simple steps to have your own whatsapp clone

1: Clone this repo using this command

git clone https://github.com/alii13/whatsapp-clone.git

2: Enter

cd whatsapp-clone

3: Next

npm install

4: Goto src & Find file named firebase.js => Replace the config data to your project config data.

Firebase config data you have to replace it with yours & save.

5: Now, Goto src directory again and find file named .firebasesrc

Replace the line "default": "your_project__name" & save.

6: Hit npm start in terminal & Boom you have your own whatsapp clone!! open at port 3000.

Set Up Hosting in Firebase

0: intstall firebase cli npm i firebase-tools

1: Hit command firebase init

2: Enter Yes

3: Goto the 4th option says - "Configure and Deploy firebase Hosting sites", Use Arrow key to go down & Hit spacebar to select the option and then hit Enter key

4: Enter build for directory && select Yes for all other options.

5: After initialization Completed. Enter

npm run build

6: Now the last command

Enter firebase deploy

Boom! You have succesfully hosted your firebase app. Click on the link and Enjoy!. Don't forget to rate the repository.

whatsapp-clone's Issues

Npm start error

When i start the react project using npm start
It show error "spawn PowerShell ENOENT"

platform:windows 7 32bit

Add One-One Chatting

No components folder in src dir

According to your Readme you said in step4 that go to src/components folder but there is no folder like that every code is in directly src folder

Add new feature

If anyone wants to add a new feature from their side feel free to add.
Don't forget to run the project locally.

Please provide better guide for .env setup

Clean Code

Hey, I need someone who can help me with make code clean of this repo.
I formatted some of the files still there are files that need clean code.

Improve Readme file for better readability

There are a lot of grammatical mistakes as well as improper format of headings in the readme.
I need someone who can help me.

Can't resolve firebase

I stuck in Sidebar.js here is the coding below

but the error is always like this

I've tried many times to uninstall firebase and clear the cache but the bug is always the same. can you help me?

Error while deploying on vercel

[15:01:19] Running build in Washington, D.C., USA (East) – iad1 [15:01:20] Cloning github.com/PrakharDoneria/whatsapp-clone (Branch: master, Commit: be9f12e) [15:01:20] Cloning completed: 446.042ms [15:01:20] Previous build cache not available [15:01:20] Running "vercel build" [15:01:21] Vercel CLI 33.0.1 [15:01:22] Installing dependencies... [15:01:25] npm WARN old lockfile [15:01:25] npm WARN old lockfile The package-lock.json file was created with an old version of npm, [15:01:25] npm WARN old lockfile so supplemental metadata must be fetched from the registry. [15:01:25] npm WARN old lockfile [15:01:25] npm WARN old lockfile This is a one-time fix-up, please be patient... [15:01:25] npm WARN old lockfile [15:01:53] npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin. [15:01:53] npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated [15:01:54] npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility [15:01:54] npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. [15:01:54] npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated [15:01:54] npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated [15:01:54] npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 [15:01:54] npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated [15:01:55] npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added [15:01:55] npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. [15:01:56] npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142 [15:01:56] npm WARN deprecated [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. [15:01:56] npm WARN deprecated [email protected]: use String.prototype.padStart() [15:01:57] npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue [15:01:57] npm WARN deprecated [email protected]: this library is no longer supported [15:01:58] npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash. [15:01:58] npm WARN deprecated [email protected]: This module is no longer supported. [15:01:58] npm WARN deprecated [email protected]: please switch to a stable version [15:01:58] npm WARN deprecated [email protected]: Use your platform's native DOMException instead [15:01:58] npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin [15:01:59] npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) [15:02:00] npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x. [15:02:00] npm WARN deprecated [email protected]: Use your platform's native atob() and btoa() methods instead [15:02:00] npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. [15:02:00] npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained [15:02:00] npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained [15:02:01] npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address' [15:02:01] npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead. [15:02:01] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. [15:02:02] npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies [15:02:02] npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies [15:02:03] npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) [15:02:03] npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi' [15:02:03] npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) [15:02:04] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. [15:02:04] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. [15:02:04] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. [15:02:04] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. [15:02:04] npm WARN deprecated @material-ui/[email protected]: You can now upgrade to @mui/system. See the guide: https://mui.com/guides/migration-v4/ [15:02:06] npm WARN deprecated @material-ui/[email protected]: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. [15:02:08] npm WARN deprecated [email protected]: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure. [15:02:08] npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. [15:02:08] npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. [15:02:09] npm WARN deprecated @material-ui/[email protected]: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. [15:02:11] npm WARN deprecated @material-ui/[email protected]: You can now upgrade to @mui/icons. See the guide: https://mui.com/guides/migration-v4/ [15:02:12] [15:02:12] added 1745 packages in 49s [15:02:12] [15:02:12] 71 packages are looking for funding [15:02:12] runnpm fundfor details [15:02:12] npm notice [15:02:12] npm notice New major version of npm available! 9.8.1 -> 10.2.5 [15:02:12] npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.5> [15:02:12] npm notice Runnpm install -g [email protected]to update! [15:02:12] npm notice [15:02:12] Detectedpackage-lock.jsongenerated by npm 7+ [15:02:12] Running "npm run build" [15:02:13] [15:02:13] > [email protected] build [15:02:13] > react-scripts build [15:02:13] [15:02:14] Creating an optimized production build... [15:02:14] Error: error:0308010C:digital envelope routines::unsupported [15:02:14] at new Hash (node:internal/crypto/hash:69:19) [15:02:14] at Object.createHash (node:crypto:133:10) [15:02:14] at module.exports (/vercel/path0/node_modules/webpack/lib/util/createHash.js:135:53) [15:02:14] at NormalModule._initBuildHash (/vercel/path0/node_modules/webpack/lib/NormalModule.js:417:16) [15:02:14] at handleParseError (/vercel/path0/node_modules/webpack/lib/NormalModule.js:471:10) [15:02:14] at /vercel/path0/node_modules/webpack/lib/NormalModule.js:503:5 [15:02:14] at /vercel/path0/node_modules/webpack/lib/NormalModule.js:358:12 [15:02:14] at /vercel/path0/node_modules/loader-runner/lib/LoaderRunner.js:373:3 [15:02:14] at iterateNormalLoaders (/vercel/path0/node_modules/loader-runner/lib/LoaderRunner.js:214:10) [15:02:14] at iterateNormalLoaders (/vercel/path0/node_modules/loader-runner/lib/LoaderRunner.js:221:10) [15:02:15] /vercel/path0/node_modules/react-scripts/scripts/build.js:19 [15:02:15] throw err; [15:02:15] ^ [15:02:15] [15:02:15] Error: error:0308010C:digital envelope routines::unsupported [15:02:15] at new Hash (node:internal/crypto/hash:69:19) [15:02:15] at Object.createHash (node:crypto:133:10) [15:02:15] at module.exports (/vercel/path0/node_modules/webpack/lib/util/createHash.js:135:53) [15:02:15] at NormalModule._initBuildHash (/vercel/path0/node_modules/webpack/lib/NormalModule.js:417:16) [15:02:15] at /vercel/path0/node_modules/webpack/lib/NormalModule.js:452:10 [15:02:15] at /vercel/path0/node_modules/webpack/lib/NormalModule.js:323:13 [15:02:15] at /vercel/path0/node_modules/loader-runner/lib/LoaderRunner.js:367:11 [15:02:15] at /vercel/path0/node_modules/loader-runner/lib/LoaderRunner.js:233:18 [15:02:15] at context.callback (/vercel/path0/node_modules/loader-runner/lib/LoaderRunner.js:111:13) [15:02:15] at /vercel/path0/node_modules/babel-loader/lib/index.js:59:103 { [15:02:15] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], [15:02:15] library: 'digital envelope routines', [15:02:15] reason: 'unsupported', [15:02:15] code: 'ERR_OSSL_EVP_UNSUPPORTED' [15:02:15] ▲ System message: 💡 The "unsupported digital envelope" problem may be resolved by addingNODE_OPTIONS=--openssl-legacy-providerto your env vars [15:02:15] } [15:02:15] [15:02:15] Node.js v18.18.2 [15:02:15] Error: Command "npm run build" exited with 1 [15:02:15] [15:02:16] ▲ System message: 💡 The "unsupported digital envelope" problem may be resolved by addingNODE_OPTIONS=--openssl-legacy-providerto your env vars

importing firebase from actual firebase

I tried adding import firebase from "firebase" but shows error:
import React, { useEffect, useState } from 'react';
import { Avatar, IconButton } from '@mui/material';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon';
import MicIcon from '@mui/icons-material/Mic';

import "./Chat.css";
import { useParams } from 'react-router-dom';
import db from './firebase';
import { useStateValue } from './StateProvider';
import firebase from 'firebase';

function Chat() {
const [input, setInput] = useState("");
const [seed, setSeed] = useState("");
const {roomId} = useParams();
const [roomName, setRoomName] = useState("");
const [messages, setMessages] = useState([]);
const [{user}, dispatch] = useStateValue();

useEffect(() =>{
  if(roomId){
    db.collection('rooms').doc(roomId).onSnapshot(snapshot => (
      setRoomName(snapshot.data().name)
    ));

    db.collection('rooms').doc(roomId).collection("messages").orderBy('timestamp', 'asc').onSnapshot(snapshot =>(setMessages(snapshot.docs.map(doc =>doc.data()))
    ))
  }
},[roomId]);



useEffect(() => {
setSeed(Math.floor(Math.random()*5000));
},[roomId]);

const sendMessage = (e) => {
  
    e.preventDefault();
    console.log("You typed>>>",input);
      
    db.collection("rooms")
    .doc(roomId)
    .collection("messages")
    .add({
      message: input,
      name: user.displayName,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
     
    });

    setInput("");
}

return (

 <div className="chat_header">
 <Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />

 <div className="chat_headerInfo">
     <h3>{roomName}</h3>
     <p>Last seen at...</p>
 </div>
 <div className="chat_headerRight">
     <IconButton>
     <SearchOutlinedIcon/>
     </IconButton>
     <IconButton>
       <AttachFileIcon />
     </IconButton>
     <IconButton>
        <MoreVertIcon />
     </IconButton>
 </div>

 </div>

  
 <div className="chat_body">
    {messages.map((message) => (
  <p className={`chat_message ${true&&'chat_reciever'}`}>
  <span className='chat_name'>{message.name}</span>
  {message.message}
  <span
  className='chat_timestamp'>
    {new Date(message.timestamp?.toDate()).toUTCString()}
  </span>
  </p>
    ))}
 </div>

 <div className="chat_footer">     
  <InsertEmoticonIcon />
  <form>
      <input  value={input} onChange={e =>setInput(e.target.value)} placeholder="Type a message" type="text"/>
      <button onClick={sendMessage} 
      type="submit">Send a message</button>
  </form>
  <MicIcon />
</div>
</div>

)
}

export default Chat;