Mayank0255 · Mayank0255 · Sep 24, 2022 · Sep 25, 2022 · Oct 2, 2022 · Oct 2, 2022
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ https://user-images.githubusercontent.com/43780137/158059050-481ffa30-e415-4156-
 
 As the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by me using a completely different stack.
 
-This repo consists of the Frontend code of the project, the backend code is in __[Stackoverflow-Clone-Backend](https://github.com/Mayank0255/Stackoverflow-Clone-Backend)__
+This repo consists of the Frontend code of the project, the backend code is in __[Devcomm-Backend](https://github.com/Mayank0255/Stackoverflow-Clone-Backend)__
 
 ## My Tech Stack (MERN)
 
@@ -38,8 +38,8 @@ There are two ways to setup the project: manually or using the Dockerfile. Read
 1. Open your local CLI -
 
    ```
-   mkdir Stackoverflow-Clone
-   cd Stackoverflow-Clone
+   mkdir Devcomm
+   cd Devcomm
    ```
 
 2. Setup the backend code -
@@ -65,7 +65,7 @@ There are two ways to setup the project: manually or using the Dockerfile. Read
 
    - Run the index `npm start`.
 
-3. Open a new CLI terminal and goto the root `Stackoverflow-Clone` folder you created in the first step.
+3. Open a new CLI terminal and goto the root `Devcomm` folder you created in the first step.
 4. Setup the Frontend code -
 
    - Clone the code & install the modules-

diff --git a/package.json b/package.json
@@ -5,6 +5,10 @@
   "dependencies": {
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.5.0",
     "@mui/material": "^5.5.0",
     "@stackoverflow/stacks-icons": "^2.25.1",

diff --git a/public/IconLogo.svg b/public/IconLogo.svg
diff --git a/public/index.html b/public/index.html
@@ -2,15 +2,15 @@
 <html lang='en'>
   <head>
     <meta charset='utf-8' />
-    <link rel='icon' href='%PUBLIC_URL%/LogoGlyphMd.svg' />
+    <link rel='icon' href='%PUBLIC_URL%/IconLogo.svg' />
     <meta name='viewport' content='width=device-width, initial-scale=1' />
     <meta name='theme-color' content='#000000' />
     <meta
       name='description'
       content='Web site created using create-react-app'
     />
 
-    <title>CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers</title>
+    <title>Devcomm - Where Developers Learn, Share, & Build Careers</title>
     <link rel='stylesheet' type='text/css' href='https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7'>
     <link rel='stylesheet' type='text/css' href='https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=c5fdf309f06b'>
     <link

diff --git a/src/App.css b/src/App.css
@@ -1,25 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 :root {
-    --yellow-200: #675c37;
-    --yellow-050: #464236;
+  --yellow-200: #675c37;
+  --yellow-050: #464236;
 }
 
 *{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Liberation Sans",sans-serif !important;
-    transition: all 300ms ease-in-out;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  transition: all 300ms ease-in-out;
+  font-family: 'inter', sans-serif, serif !important;
 }
 
 body {
-    background-color: #2d2d2d !important;
-    padding-top: 0 !important;
+  background-color: #2548A7 !important;
+  padding-top: 0 !important;
+  overflow: hidden;
 }
 
 a {
-    text-decoration: none !important;
+  text-decoration: none !important;
 }
 
 button {
-    margin: 3px;
+  margin: 3px;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,13 @@
-import React, {useEffect} from 'react';
-import {Provider} from 'react-redux';
-import {Switch} from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Provider } from 'react-redux';
+import { Switch, Redirect } from 'react-router-dom';
 
 import store from './redux/store';
 import setAuthToken from './redux/auth/auth.utils';
-import {loadUser} from './redux/auth/auth.actions';
+import { loadUser } from './redux/auth/auth.actions';
 
 import Header from './components/organisms/Header/Header.component';
+import SideBar from './components/organisms/SideBar/SideBar.component';
 import Alert from './components/Alert/Alert.component';
 import HomePage from './modules/HomePage/HomePage.component';
 import QuestionsPage from './modules/QuestionsPage/QuestionsPage.component';
@@ -20,7 +21,9 @@ import TagPage from './modules/TagPage/TagPage.component';
 import ProfilePage from './modules/ProfilePage/ProfilePage.component';
 import NotFound from './modules/NotFound/NotFound.component';
 
-import { BaseRoute, LayoutRoute } from './Router';
+import { FlexBox, Box } from './components/atoms/box.atom';
+
+import { PrivateRoute } from './Router';
 
 import './App.css';
 
@@ -35,88 +38,103 @@ const App = () => {
 
   return (
     <Provider store={store}>
-      <div className='App'>
-        <Header />
-        <Alert />
-        <Switch>
-          <LayoutRoute
-            exact
-            path='/'
-            title='CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers'
-          >
-            <HomePage/>
-          </LayoutRoute>
-          <LayoutRoute
-            exact
-            path='/questions'
-            title='All Questions - CLONE Stack Overflow'
-          >
-            <QuestionsPage/>
-          </LayoutRoute>
-          <LayoutRoute
-            exact
-            path='/tags'
-            title='Tags - CLONE Stack Overflow'
-          >
-            <AllTagsPage/>
-          </LayoutRoute>
-          <LayoutRoute
-            exact
-            path='/users'
-            title='Users - CLONE Stack Overflow'
-          >
-            <AllUsersPage/>
-          </LayoutRoute>
-          <BaseRoute
-            exact
-            path='/register'
-            title='Sign Up - CLONE Stack Overflow'
-          >
-            <Register/>
-          </BaseRoute>
-          <BaseRoute
-            exact
-            path='/login'
-            title='Log In - CLONE Stack Overflow'
-          >
-            <Login/>
-          </BaseRoute>
-          <LayoutRoute
-            exact
-            path='/questions/:id'
-            title='Users - CLONE Stack Overflow'
-          >
-            <Post/>
-          </LayoutRoute>
-          <LayoutRoute
-            exact
-            path='/users/:id'
-            title='Users - CLONE Stack Overflow'
-          >
-            <ProfilePage/>
-          </LayoutRoute>
-          <LayoutRoute
-            exact
-            path='/tags/:tagname'
-            title='Users - CLONE Stack Overflow'
-          >
-            <TagPage/>
-          </LayoutRoute>
-          <BaseRoute
-            exact
-            path='/add/question'
-            title='Ask a Question - CLONE Stack Overflow'
-          >
-            <PostForm/>
-          </BaseRoute>
-          <BaseRoute
-            path='*'
-            title='Error 404'
-          >
-            <NotFound/>
-          </BaseRoute>
-        </Switch>
-      </div>
+      <Box className='App'>
+        <Header/>
+        <Alert/>
+        <FlexBox height={`calc(100vh - 80px)`}>
+          <SideBar/>
+          <Box flex='1 1 0%' overflowY='scroll'>
+            <Switch>
+              <PrivateRoute
+                exact
+                path='/'
+                title='Devcomm - Where Developers Learn, Share, & Build Careers'
+              >
+                <Redirect to='/home' />
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/home'
+                title='Devcomm - Where Developers Learn, Share, & Build Careers'
+              >
+                <HomePage/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/questions'
+                title='All Questions - Devcomm'
+              >
+                <QuestionsPage/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/tags'
+                title='Tags - Devcomm'
+              >
+                <AllTagsPage/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/users'
+                title='Users - Devcomm'
+              >
+                <AllUsersPage/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/register'
+                title='Sign Up - Devcomm'
+                withRightSideBar={false}
+              >
+                <Register/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/login'
+                title='Log In - Devcomm'
+                withRightSideBar={false}
+              >
+                <Login/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/questions/:id'
+                title='Users - Devcomm'
+              >
+                <Post/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/users/:id'
+                title='Users - Devcomm'
+              >
+                <ProfilePage/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/tags/:tagname'
+                title='Users - Devcomm'
+              >
+                <TagPage/>
+              </PrivateRoute>
+              <PrivateRoute
+                exact
+                path='/add/question'
+                title='Ask a Question - Devcomm'
+                withRightSideBar={false}
+              >
+                <PostForm/>
+              </PrivateRoute>
+              <PrivateRoute
+                path='*'
+                title='Error 404'
+              >
+                <NotFound/>
+              </PrivateRoute>
+            </Switch>
+          </Box>
+        </FlexBox>
+      </Box>
     </Provider>
   );
 };

diff --git a/src/Router.jsx b/src/Router.jsx
@@ -1,28 +1,17 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-import LayoutWrapper from './components/organisms/LayoutWrapper/LayoutWrapper.component';
+import RightSideBar from './components/organisms/RightSideBar/RightSideBar.component';
 
 import usePageTitle from './hooks/usePageTitle';
 
-export const LayoutRoute = ({ title, children, ...props }) => {
-  usePageTitle(title);
-
-  return (
-    <Route {...props}>
-      <LayoutWrapper>
-        {children}
-      </LayoutWrapper>
-    </Route>
-  )
-}
-
-export const BaseRoute = ({ title, children, ...props }) => {
+export const PrivateRoute = ({ title, withRightSideBar = true, children, ...props }) => {
   usePageTitle(title);
 
   return (
     <Route {...props}>
       {children}
+      {withRightSideBar && <RightSideBar/>}
     </Route>
   )
 }
diff --git a/src/assets/IconLogo.svg b/src/assets/IconLogo.svg
diff --git a/src/assets/TextLogo.svg b/src/assets/TextLogo.svg
diff --git a/src/components/PageTitle/PageTitle.component.jsx b/src/components/PageTitle/PageTitle.component.jsx
@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
 
 const PageTitle = ({title}) => {
   let defaultTitle =
-    'CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers';
+    'Devcomm - Where Developers Learn, Share, & Build Careers';
 
   return (
     <Helmet>

diff --git a/src/components/atoms/box.atom.jsx b/src/components/atoms/box.atom.jsx
@@ -8,6 +8,7 @@ import {
   typography,
   border,
   background,
+  shadow,
 } from 'styled-system';
 
 export const Box = styled.div`
@@ -21,6 +22,9 @@ export const Box = styled.div`
   ${typography}
   ${border}
   ${background}
+  ${shadow}
+  transform: ${({ transform = 'none' }) => transform};
+  visibility: ${({ visibility = 'visible' }) => visibility};
 `;
 
 export const FlexBox = styled(Box)`

diff --git a/src/components/atoms/circle.atom.jsx b/src/components/atoms/circle.atom.jsx
@@ -0,0 +1,15 @@
+import { Box } from './box.atom';
+import styled from '@emotion/styled';
+
+const Circle = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ radius = '5px' }) => `calc(${radius} * 2)`};
+  width: ${({ radius = '5px' }) => `calc(${radius} * 2)`};
+  border-radius: 50%;
+  border: ${({ border = '0' }) => border};
+  cursor: ${({ cursor = 'pointer' }) => cursor};
+`;
+
+export default Circle;