A Clone of WhatsApp Web Layout

This is a Responsive Whatsapp Web Clone, this project was made to improve my Skills and habilities with CSS BEM architecture, SASS, React, Typescript and Context API.

Desktop

 

Mobile

  

Techs 💻

• ReactJs.
• Typescript.
• Sass.

Style guide tools 🛠️

• Eslint.
• Lint-staged.
• Husky.
• Git-commit-msg-linter.

Material UI Icons used 🖼️

• DonutLarge
• Chat
• MoreVert
• Notifications
• NotificationsOff
• NotificationsActive
• Search
• Colorize
• VolumeOff
• ExpandMore
• Computer
• ChevronLeft
• Attachment
• InsertEmoticon
• Mic
• send
• ArrowBack
• GroupAdd
• Avatar
• CameraAlt
• Edit
• Brightness6
• Wallpaper
• Block
• Help
• IconButton
• WhatsApp
• Replay
• Settings
• PlayCircleFilled

Libs 📚

• React-router-dom.
• Qrcode-React

Running project 👨‍💻

clone this repository by copying this command and pasting in your terminal 👇

git clone https://github.com/washington299/WhatsApp-Web-Layout-Clone.git

go to your project folder by pasting this command in your terminal 👇

windows

cd .\WhatsApp-Web-Layout-Clone\

Linux

cd ./WhatsApp-Web-Layout-Clone

Then open the folder in your editor and run the project by typing this command:

yarn start

ou

npm run start

Then open your browser and type this address: http://localhost:3000.

Download Details:

Author: washington299

Source Code: https://github.com/washington299/WhatsApp-Web-Layout-Clone

#react #reactjs #javascript