Question

Need the slack clone by using react.

Create slack clone by using ReactJS library. Use material UI for Design improvements and Icons.

Urgently required before evening... Don't give useless answers. I'll downvote if not according to expectations.

Answer 1

Note: You have to follow all the steps to get it working.. create-react-app and then copy the code in the respected names as mentioned. Let me know if you face any problem.

don't forget to install material-ui core and icons using npm command.

App.js

import React from 'react';
import './App.css';
import Sidebar from "./Sidebar";
import Header from "./Header";
import "./Firebase.js";

function App() {
  return (
    //camelCasing 
    <div className="App">
        <Header />
        <div className="appBody"> 
          <Sidebar />
        </div>
    </div>
  );
}

export default App;

App.css

body {
    --slackDark: #350d36; 
    --slackNormal: #3F0E40;
    --slackGreen: #2BAC76;
    --slackWhite: #F6F6F6;
    --slackBlue: #1164A3;
    --slackGrey: #BCABBC;
    --slackColor: #3F0E40;
    --slackIconGrey: #D5CDD6;
    --slackBorder: #684A68;
    --slackSearch: #D9D2DA;

    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
}

.appBody {
    width: 100%;
    height: 100%;
}

.App {
    height: 100%;
}

#root {
    height: 100%;
}

Header.js

import React from "react";
import "./Header.css";
import AccountLogo from "./Assets/Account.png"
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import AccessTimeIcon from '@material-ui/icons/AccessTime';


function Header() {
    return (
        <div className="header">
            <div className="headerMiddle">
                <AccessTimeIcon className="headerMiddleHistory" /> 
                <input placeholder = "Search" />
                <HelpOutlineIcon className="headerMiddleHelp" />
            </div>
            <div className="headerRight">
                <img src={AccountLogo}  />
            </div>
        </div>
    )
}

export default Header

Header.css

.header {
    display: flex;
    align-items: center;
    background-color: var(--slackDark);
    max-height: 38px;
    color: white;
    justify-content: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: auto;
}

.headerMiddle {
    color: var(--slackIconGrey);
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100% !important;
    min-width: 0px;
}

.headerMiddle > input {
    color: white;
    display: flex;
    flex: 2;
    position: relative;
    background-color: transparent;
    background: rgb(67,30,68);
    border: 1px var(--slackBorder) solid;
    border-radius: 4px;
    box-sizing: inherit;
    min-height: 20px;
    min-width: 0px;
    max-width: 500px;
    font-size: 13px;
}

::placeholder {
    padding-left: 5px;
    color: var(--slackIconGrey);
    font-weight: 400;
}

::placeholder:active {
    color: var(--slackIconGrey);
}

.headerMiddleHelp {
    padding-left: 1.5%;
}

.headerMiddleHistory {
    padding-right: 1.5%;
    padding-left: 1.5%;
}

.headerMiddle > .MuiSvgIcon-root {
    color: var(--slackIconGrey);
    position: relative;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.headerRight {  
    display: flex;
    align-items: center;
    padding-right: 1%;
    padding-left: 2%;
}

.headerRight img {
    height: 28px;
    border-radius: 4px;
    flex-shrink: inherit;
}   


 

Sidebar.js

import React from 'react';
import './Sidebar.css';
import { Create, InsertComment, ExpandMore, MoreVert, BookmarkBorder,ArrowRight, FiberManualRecord, Height } from '@material-ui/icons';
import SidebarOption from './SidebarOption';


function Sidebar() {
    return (
        <div className="sidebar">
            <div className="sidebarHeader">
                <div className="sidebarInfo">
                    <h2>Entity</h2>
                    <ExpandMore />
                </div>
                <Create />
            </div>
            <div className="sidebarMiddle">
                <SidebarOption Icon={InsertComment} Title="Threads" />
                <SidebarOption Icon={BookmarkBorder} Title="SavedItems" />
                <SidebarOption Icon={MoreVert} Title="More" />
                <SidebarOption Icon={ArrowRight} Title="Channels" />
                <div>
                    <SidebarOption Title="Hackathon" />
                    <SidebarOption Title="General" />
                </div>
                <SidebarOption Icon={ArrowRight} Title="Direct Messages" />
                <div>
                    <SidebarOption Icon={FiberManualRecord} Title="Prathmesh" />
                    <SidebarOption Icon={FiberManualRecord} Title="Viniboii" />
                </div>
            </div>    
        </div>
    )
}

export default Sidebar

Sidebar.css

.sidebar {
    color: white;
    background-color: var(--slackNormal);
    border-top: 1px solid #49274b;
    max-width: 260px;
    min-width: 200px;
    display: flexbox;
    align-items: unset;
    height: 100%;
}

.sidebarHeader {
    display: flex;
    align-items: center;
    height: 62px;
    border-bottom: 1px solid #49274b;
    padding-right: 6%;
}

.sidebarHeader > .MuiSvgIcon-root {
    padding: 8px;
    color: #49274b;
    font-size: 18px;
    background-color: white;
    border-radius: 999px;  
    cursor: pointer;  
}

.sidebarInfo {
    flex: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sidebarInfo > h2 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    padding-left: 8%;
}
 
.sidebarInfo > .MuiSvgIcon-root {
    padding-left: 0.5%;
    max-height: 16px;
}

.sidebarMiddle {
    padding-top: 6%;
    font-weight: 500;
    color: var(--slackGrey);
    font-size: 16px;
}
   
.sidebarMiddle > .MuiSvgIcon-root {
    min-height: 26px;
    max-width: 26px;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Index.css

*{
  margin: 0;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------Feel free to ask queries in comments and Upvote will be appreciated.

Sorry, I submitted the answer asking for more time and without any answer but it's because of bonus timing, the bonus timing was about to end and it's ended now that's why.