From 89132f2587d83b50a709d0f6aa6d726a97545d87 Mon Sep 17 00:00:00 2001
From: Mayank Aggarwal <mayank2aggarwal@gmail.com>
Date: Sun, 6 Mar 2022 21:56:27 +0530
Subject: [PATCH 1/6] fix: text editors

---
 src/components/RichTextEditor/RichTextEditor.styles.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/RichTextEditor/RichTextEditor.styles.scss b/src/components/RichTextEditor/RichTextEditor.styles.scss
index d5f5ff4..e697ddc 100644
--- a/src/components/RichTextEditor/RichTextEditor.styles.scss
+++ b/src/components/RichTextEditor/RichTextEditor.styles.scss
@@ -1,8 +1,8 @@
 .rich-text-editor-root {
-  background-color: transparent;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
+  background-color: transparent !important;
+  border: none !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
 
   .rich-text-editor-toolbar {
     border-bottom: 1px solid var(--black-200);

From 8c7e8f41da904c2ce2e231eaadf5337c1ec1334d Mon Sep 17 00:00:00 2001
From: Mayank Aggarwal <mayank2aggarwal@gmail.com>
Date: Sun, 6 Mar 2022 22:06:31 +0530
Subject: [PATCH 2/6] bootstrap clean up

---
 public/index.html                        | 3 ---
 src/components/Header/Header.styles.scss | 7 +++++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 08e322b..d4a32db 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,8 +13,6 @@
     <title>CLONE Stack Overflow - 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 rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
-    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
   </head>
   <body class='theme-dark'>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -22,7 +20,6 @@
     <script src='https://unpkg.com/@stackoverflow/stacks-icons'></script>
     <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossorigin='anonymous'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossorigin='anonymous'></script>
-    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossorigin='anonymous'></script>
     <script>
       let pageX = $(document).width();
       let pageY = $(document).height();
diff --git a/src/components/Header/Header.styles.scss b/src/components/Header/Header.styles.scss
index 73eecf2..70a1600 100644
--- a/src/components/Header/Header.styles.scss
+++ b/src/components/Header/Header.styles.scss
@@ -9,6 +9,13 @@
   justify-content: space-between;
 }
 
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
 .s-navigation {
   padding: 2px 2px;
 }

From 8ab1d2c4c57b1c2d04a10dc015a092071b968b8a Mon Sep 17 00:00:00 2001
From: Mayank Aggarwal <mayank2aggarwal@gmail.com>
Date: Sun, 6 Mar 2022 22:24:01 +0530
Subject: [PATCH 3/6] fix: page container

---
 src/pages/HomePage/HomePage.styles.scss | 4 ++++
 src/pages/Post/Post.styles.scss         | 1 +
 src/pages/TagsPage/TagsPage.styles.scss | 1 +
 3 files changed, 6 insertions(+)

diff --git a/src/pages/HomePage/HomePage.styles.scss b/src/pages/HomePage/HomePage.styles.scss
index 73f3b63..ccf3406 100644
--- a/src/pages/HomePage/HomePage.styles.scss
+++ b/src/pages/HomePage/HomePage.styles.scss
@@ -7,6 +7,7 @@
 }
 
 #content {
+  max-width: none;
   width: 100vw;
   padding: 0;
   margin-right: 60px;
@@ -56,6 +57,7 @@
 
 @media (max-width: 1100px) {
   #content {
+    max-width: none;
     width: calc(100vw - 220px);
   }
 
@@ -71,6 +73,7 @@
 
 @media (max-width: 768px) {
   #content {
+    max-width: none;
     width: 99%;
   }
 
@@ -86,6 +89,7 @@
 
 @media (min-width: 1350px) {
   #content {
+    max-width: none;
     margin-right: 11.5vw;
   }
 }
\ No newline at end of file
diff --git a/src/pages/Post/Post.styles.scss b/src/pages/Post/Post.styles.scss
index 9cbf479..a29b91b 100644
--- a/src/pages/Post/Post.styles.scss
+++ b/src/pages/Post/Post.styles.scss
@@ -7,6 +7,7 @@
 }
 
 #content {
+  max-width: none;
   padding: 0;
 }
 
diff --git a/src/pages/TagsPage/TagsPage.styles.scss b/src/pages/TagsPage/TagsPage.styles.scss
index f4d7be6..4637004 100644
--- a/src/pages/TagsPage/TagsPage.styles.scss
+++ b/src/pages/TagsPage/TagsPage.styles.scss
@@ -67,6 +67,7 @@
     width: 80%;
   }
   #content {
+    max-width: none;
     margin-right: 10px;
   }
 }

From 5098c94148294723a6ae5c6e73939cb1c5121d7b Mon Sep 17 00:00:00 2001
From: Mayank Aggarwal <mayank2aggarwal@gmail.com>
Date: Sun, 6 Mar 2022 22:41:37 +0530
Subject: [PATCH 4/6] fix: react warnings

---
 src/components/Alert/Alert.component.jsx                  | 4 ++--
 src/components/ButtonGroup/ButtonGroup.component.jsx      | 4 ++--
 src/components/Header/Header.component.jsx                | 2 +-
 src/components/Pagination/Pagination.component.jsx        | 5 +++--
 src/components/PostItem/PostItem.component.jsx            | 4 ++--
 .../RightSideBar/TagsWidget/TagsWidget.component.jsx      | 4 ++--
 src/index.js                                              | 8 +++-----
 src/pages/HomePage/HomePage.component.jsx                 | 4 ++--
 src/pages/Post/AnswerSection/AnswerSection.component.jsx  | 4 ++--
 .../QuestionSection/CommentCell/CommentCell.component.jsx | 4 ++--
 src/pages/QuestionsPage/QuestionsPage.component.jsx       | 4 ++--
 src/pages/TagPage/TagPage.component.jsx                   | 2 +-
 src/pages/TagsPage/TagsPage.component.jsx                 | 4 ++--
 src/pages/UsersPage/UsersPage.component.jsx               | 4 ++--
 14 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/components/Alert/Alert.component.jsx b/src/components/Alert/Alert.component.jsx
index 14f100a..2e22383 100644
--- a/src/components/Alert/Alert.component.jsx
+++ b/src/components/Alert/Alert.component.jsx
@@ -7,8 +7,8 @@ import './Alert.styles.scss';
 const Alert = ({alerts}) =>
   alerts !== null &&
   alerts.length > 0 &&
-  alerts.map((alert) => (
-    <div key={alert.id} className={`alert alert-${alert.alertType} fw-normal`}>
+  alerts.map((alert, index) => (
+    <div key={index} className={`alert alert-${alert.alertType} fw-normal`}>
       {alert.msg}
     </div>
   ));
diff --git a/src/components/ButtonGroup/ButtonGroup.component.jsx b/src/components/ButtonGroup/ButtonGroup.component.jsx
index 981c265..14e0288 100644
--- a/src/components/ButtonGroup/ButtonGroup.component.jsx
+++ b/src/components/ButtonGroup/ButtonGroup.component.jsx
@@ -6,9 +6,9 @@ const ButtonGroup = ({buttons, selected, setSelected}) => {
     <Fragment>
       <div className='grid--cell'>
         <div className=' grid s-btn-group js-filter-btn'>
-          {buttons.map((button) => (
+          {buttons.map((button, index) => (
             <BaseButton
-              key={button}
+              key={index}
               text={button}
               selected={selected}
               onClick={() => setSelected(button)}
diff --git a/src/components/Header/Header.component.jsx b/src/components/Header/Header.component.jsx
index 8cd66f1..5b3be2b 100644
--- a/src/components/Header/Header.component.jsx
+++ b/src/components/Header/Header.component.jsx
@@ -94,7 +94,7 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
   ) : (
     <Fragment>
       <nav className='navbar fixed-top navbar-expand-lg navbar-light bs-md'>
-        <div class="hamburger">
+        <div className="hamburger">
           <SideNavBar hasOverlay />
         </div>
         <div className='header-brand-div'>
diff --git a/src/components/Pagination/Pagination.component.jsx b/src/components/Pagination/Pagination.component.jsx
index f4fb882..9c74c13 100644
--- a/src/components/Pagination/Pagination.component.jsx
+++ b/src/components/Pagination/Pagination.component.jsx
@@ -34,10 +34,11 @@ const Pagination = ({
   const getPaginationItem = useCallback(
     (currentIdx, activeIdx) =>
       activeIdx === currentIdx + 1 ? (
-        <span class="s-pagination--item is-selected">{currentIdx + 1}</span>
+        <span key={currentIdx} className="s-pagination--item is-selected">{currentIdx + 1}</span>
       ) : (
         <span
-          class="s-pagination--item"
+          key={currentIdx}
+          className="s-pagination--item"
           onClick={() => handleChange(currentIdx + 1)}
         >
           {currentIdx + 1}
diff --git a/src/components/PostItem/PostItem.component.jsx b/src/components/PostItem/PostItem.component.jsx
index 635e402..7494666 100644
--- a/src/components/PostItem/PostItem.component.jsx
+++ b/src/components/PostItem/PostItem.component.jsx
@@ -63,8 +63,8 @@ const PostItem = ({
           <Link to={`/questions/${id}`}>{title}</Link>
         </h3>
         <div className='brief' dangerouslySetInnerHTML={{__html: injectEllipsis(htmlSubstring(body, 200))}}></div>
-        {tags.map((tag) => (
-          <TagBadge tag_name={tag.tagname} size={'s-tag'} float={'left'} />
+        {tags.map((tag, index) => (
+          <TagBadge key={index} tag_name={tag.tagname} size={'s-tag'} float={'left'} />
         ))}
         <UserCard
           created_at={created_at}
diff --git a/src/components/RightSideBar/TagsWidget/TagsWidget.component.jsx b/src/components/RightSideBar/TagsWidget/TagsWidget.component.jsx
index aa3a9f7..88b3a9f 100644
--- a/src/components/RightSideBar/TagsWidget/TagsWidget.component.jsx
+++ b/src/components/RightSideBar/TagsWidget/TagsWidget.component.jsx
@@ -32,8 +32,8 @@ const TagsWidget = ({getTags, tag: {tags, loading}}) => {
     <Fragment>
       <div className='side-bar-tags'>
         <h4 className='tag-headline'>Top {numList[tags.length - 1]} Tags</h4>
-        {tags.slice(0, 10).map((tag) => (
-          <div key={tag.tagname} className='tag-content'>
+        {tags.slice(0, 10).map((tag, index) => (
+          <div key={index} className='tag-content'>
             <TagBadge
               tag_name={tag.tagname}
               size={'s-tag s-tag__md'}
diff --git a/src/index.js b/src/index.js
index 59e3d49..e7c5242 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,10 +5,8 @@ import {BrowserRouter} from 'react-router-dom';
 import App from './App';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
   document.getElementById('root')
 );
diff --git a/src/pages/HomePage/HomePage.component.jsx b/src/pages/HomePage/HomePage.component.jsx
index 4d8031e..75cc93d 100644
--- a/src/pages/HomePage/HomePage.component.jsx
+++ b/src/pages/HomePage/HomePage.component.jsx
@@ -48,8 +48,8 @@ const HomePage = ({getPosts, post: {posts, loading}}) => {
         <div className="questions">
           {currentPosts
             .sort(handleSorting('Top'))
-            .map((post) => (
-            <PostItem key={post.id} post={post} />
+            .map((post, index) => (
+            <PostItem key={index} post={post} />
           ))}
         </div>
         <Pagination
diff --git a/src/pages/Post/AnswerSection/AnswerSection.component.jsx b/src/pages/Post/AnswerSection/AnswerSection.component.jsx
index 38a8320..b669c76 100644
--- a/src/pages/Post/AnswerSection/AnswerSection.component.jsx
+++ b/src/pages/Post/AnswerSection/AnswerSection.component.jsx
@@ -37,8 +37,8 @@ const AnswerSection = ({getAnswers, answer, post: {post}}) => {
         {answer.loading === null ? (
           <Spinner width='25px' height='25px' />
         ) : (
-          answer.answers?.sort(handleSorting(sortType)).map((answer) => (
-            <div key={answer.id} className='answers'>
+          answer.answers?.sort(handleSorting(sortType)).map((answer, index) => (
+            <div key={index} className='answers'>
               <AnswerItem answer={answer}/>
             </div>
           ))
diff --git a/src/pages/Post/QuestionSection/CommentCell/CommentCell.component.jsx b/src/pages/Post/QuestionSection/CommentCell/CommentCell.component.jsx
index 06708e1..d546078 100644
--- a/src/pages/Post/QuestionSection/CommentCell/CommentCell.component.jsx
+++ b/src/pages/Post/QuestionSection/CommentCell/CommentCell.component.jsx
@@ -53,8 +53,8 @@ const CommentCell = ({
             {comment.loading === null ? (
               <Spinner width='25px' height='25px' />
             ) : (
-              comment.comments.map((comment) => (
-                <li className='comments-item' key={comment.id}>
+              comment.comments.map((comment, index) => (
+                <li key={index} className='comments-item'>
                   <div className='comment-text fc-black-800'>
                     <div className='comment-body'>
                       <span className='body'>{comment.body}</span>
diff --git a/src/pages/QuestionsPage/QuestionsPage.component.jsx b/src/pages/QuestionsPage/QuestionsPage.component.jsx
index bff8f46..82095d6 100644
--- a/src/pages/QuestionsPage/QuestionsPage.component.jsx
+++ b/src/pages/QuestionsPage/QuestionsPage.component.jsx
@@ -82,8 +82,8 @@ const QuestionsPage = ({getPosts, post: {posts, loading}}) => {
               post.title.toLowerCase().includes(searchQuery ? searchQuery : '')
             )
             ?.sort(handleSorting(sortType))
-            .map((post) => (
-              <PostItem key={post.id} post={post} />
+            .map((post, index) => (
+              <PostItem key={index} post={post} />
             ))}
         </div>
         <Pagination
diff --git a/src/pages/TagPage/TagPage.component.jsx b/src/pages/TagPage/TagPage.component.jsx
index 821c937..7f37a37 100644
--- a/src/pages/TagPage/TagPage.component.jsx
+++ b/src/pages/TagPage/TagPage.component.jsx
@@ -70,7 +70,7 @@ const TagPage = ({getTag, getTagPosts, tag, post: {posts, loading}, match}) => {
           ) : (
             posts
               ?.sort(handleSorting(sortType))
-              .map((post) => <PostItem key={post.id} post={post} />)
+              .map((post, index) => <PostItem key={index} post={post} />)
           )}
         </div>
       </div>
diff --git a/src/pages/TagsPage/TagsPage.component.jsx b/src/pages/TagsPage/TagsPage.component.jsx
index 2678f77..e13d41a 100644
--- a/src/pages/TagsPage/TagsPage.component.jsx
+++ b/src/pages/TagsPage/TagsPage.component.jsx
@@ -68,8 +68,8 @@ const TagsPage = ({getTags, tag: {tags, loading}}) => {
                 tag.tagname.toLowerCase().includes(fetchSearch.toLowerCase())
               )
               ?.sort(handleSorting(sortType))
-              .map((tag) => (
-                <TagPanel key={tag.tagname} tag={tag} />
+              .map((tag, index) => (
+                <TagPanel key={index} tag={tag} />
               ))}
           </div>
         </div>
diff --git a/src/pages/UsersPage/UsersPage.component.jsx b/src/pages/UsersPage/UsersPage.component.jsx
index 30dd23d..0298d7b 100644
--- a/src/pages/UsersPage/UsersPage.component.jsx
+++ b/src/pages/UsersPage/UsersPage.component.jsx
@@ -64,8 +64,8 @@ const UsersPage = ({getUsers, user: {users, loading}}) => {
                 user.username.toLowerCase().includes(fetchSearch.toLowerCase())
               )
               ?.sort(handleSorting(sortType, 'users'))
-              .map((user) => (
-                <UserPanel key={user.id} user={user} />
+              .map((user, index) => (
+                <UserPanel key={index} user={user} />
               ))}
           </div>
         </div>

From a6538e8de93408d9a8817594114b71e5b83343b4 Mon Sep 17 00:00:00 2001
From: Mayank Aggarwal <mayank2aggarwal@gmail.com>
Date: Sun, 6 Mar 2022 23:18:45 +0530
Subject: [PATCH 5/6] fix: style fixes

---
 src/assets/Hamburger.svg                           | 3 ---
 src/components/Header/Header.styles.scss           | 1 +
 src/components/SideNavBar/SideNavBar.component.jsx | 4 ++--
 src/components/SideNavBar/SideNavBar.styles.scss   | 8 +++-----
 src/pages/PostForm/PostForm.styles.scss            | 1 +
 src/pages/Register/Register.styles.scss            | 1 +
 6 files changed, 8 insertions(+), 10 deletions(-)
 delete mode 100644 src/assets/Hamburger.svg

diff --git a/src/assets/Hamburger.svg b/src/assets/Hamburger.svg
deleted file mode 100644
index d74cbe9..0000000
--- a/src/assets/Hamburger.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-</svg>
\ No newline at end of file
diff --git a/src/components/Header/Header.styles.scss b/src/components/Header/Header.styles.scss
index 70a1600..72b8dd9 100644
--- a/src/components/Header/Header.styles.scss
+++ b/src/components/Header/Header.styles.scss
@@ -223,6 +223,7 @@
   }
   .hamburger {
     display: block;
+    padding-top: 6px;
   }
   .header-search-div, .header-brand-div {
     transform: scale(0.8);
diff --git a/src/components/SideNavBar/SideNavBar.component.jsx b/src/components/SideNavBar/SideNavBar.component.jsx
index 99b41f5..61a9deb 100644
--- a/src/components/SideNavBar/SideNavBar.component.jsx
+++ b/src/components/SideNavBar/SideNavBar.component.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 
-import { ReactComponent as Hamburger } from "../../assets/Hamburger.svg";
+import { ReactComponent as Hamburger } from "../../assets/LogoGlyphMd.svg";
 import { ReactComponent as Stack } from "../../assets/LogoMd.svg";
-
 import { ReactComponent as GlobalIcon } from "../../assets/Globe.svg";
+
 import "./SideNavBar.styles.scss";
 
 const SidebarUI = ({ isOpen, ...rest }) => {
diff --git a/src/components/SideNavBar/SideNavBar.styles.scss b/src/components/SideNavBar/SideNavBar.styles.scss
index 47dba0e..3007c8c 100644
--- a/src/components/SideNavBar/SideNavBar.styles.scss
+++ b/src/components/SideNavBar/SideNavBar.styles.scss
@@ -15,13 +15,12 @@
 	.SidebarContent {
 		position: fixed;
 		z-index: 100;
-		background-color: white;
 		transition: 300ms ease-in-out;
 		transition-property: left, right, top, bottom;
 		overflow-x: hidden;
 		overflow-y: auto;
 		scroll-behavior: smooth;
-		background-color: gray;
+		background-color: #333;
 	}
 
 	&.is-open {
@@ -43,7 +42,6 @@
 	}
 	.ham {
 		margin-left: 1rem;
-		filter: invert(1);
 		&:hover {
 			cursor: pointer;
 		}
@@ -51,12 +49,12 @@
 
 	.content-logo {
 		padding: 1rem 2rem;
-		background-color: #5a5959;
+		background-color: #4d4d4d;
 		box-shadow: 2px -2px 8px 3px black;
 	}
 
 	.content-inner {
-		padding: 2rem;
+		padding: 2rem 0;
 		filter: contrast(1.4);
 		.side-bar-tabs {
 			float: right;
diff --git a/src/pages/PostForm/PostForm.styles.scss b/src/pages/PostForm/PostForm.styles.scss
index a88e2d8..2cdd5f6 100644
--- a/src/pages/PostForm/PostForm.styles.scss
+++ b/src/pages/PostForm/PostForm.styles.scss
@@ -1,5 +1,6 @@
 .post-form-container {
   width: 100%;
+  height: calc(100vh - 64px);
   max-width: 100%;
   display: flex;
   justify-content: center;
diff --git a/src/pages/Register/Register.styles.scss b/src/pages/Register/Register.styles.scss
index 6a189a3..8799902 100644
--- a/src/pages/Register/Register.styles.scss
+++ b/src/pages/Register/Register.styles.scss
@@ -1,4 +1,5 @@
 .auth-page {
+  height: 100vh;
   width: 100%;
   background-color: #3d3d3d;
 }

From 0ae05388f0076990ff87b860bb4075639167d82e Mon Sep 17 00:00:00 2001
From: Mayank Aggarwal <mayank2aggarwal@gmail.com>
Date: Sun, 6 Mar 2022 23:56:57 +0530
Subject: [PATCH 6/6] feat: setup the footer with socials

---
 package.json                                  |  1 +
 src/assets/Database.svg                       |  1 +
 src/assets/GitHub.svg                         |  1 +
 src/components/Footer/Footer.component.jsx    | 37 +++++++++++++++++++
 src/components/Footer/Footer.styles.scss      | 19 ++++++++++
 .../PageContainer/PageContainer.component.jsx |  3 ++
 src/pages/HomePage/HomePage.component.jsx     |  4 +-
 src/pages/Login/Login.component.jsx           |  2 +
 src/pages/PostForm/PostForm.component.jsx     |  2 +
 src/pages/Register/Register.component.jsx     |  2 +
 src/pages/Register/Register.styles.scss       |  1 -
 yarn.lock                                     | 10 ++++-
 12 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/Database.svg
 create mode 100644 src/assets/GitHub.svg
 create mode 100644 src/components/Footer/Footer.component.jsx
 create mode 100644 src/components/Footer/Footer.styles.scss

diff --git a/package.json b/package.json
index fd04b55..f6eae01 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
+    "feather-icons": "^4.28.0",
     "moment": "^2.29.1",
     "prop-types": "^15.8.0",
     "react": "^17.0.2",
diff --git a/src/assets/Database.svg b/src/assets/Database.svg
new file mode 100644
index 0000000..c7a85c9
--- /dev/null
+++ b/src/assets/Database.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f48225" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
\ No newline at end of file
diff --git a/src/assets/GitHub.svg b/src/assets/GitHub.svg
new file mode 100644
index 0000000..895230c
--- /dev/null
+++ b/src/assets/GitHub.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f48225" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
\ No newline at end of file
diff --git a/src/components/Footer/Footer.component.jsx b/src/components/Footer/Footer.component.jsx
new file mode 100644
index 0000000..e71c914
--- /dev/null
+++ b/src/components/Footer/Footer.component.jsx
@@ -0,0 +1,37 @@
+import React, { Fragment } from "react";
+
+import {ReactComponent as GitHub} from "../../assets/GitHub.svg";
+import {ReactComponent as Database} from "../../assets/Database.svg";
+
+import './Footer.styles.scss';
+
+const Footer = () => {
+  return <Fragment>
+    <div className='footer'>
+      <div className="socials">
+        <div className="social-item">
+          <a
+            href='https://github.com/Mayank0255/Stackoverflow-Clone-Frontend'
+            target='_blank'
+            rel="noreferrer"
+          >
+            <GitHub/>
+          </a>
+          <p><strong>Frontend</strong></p>
+        </div>
+        <div className="social-item">
+          <a
+            href='https://github.com/Mayank0255/Stackoverflow-Clone-Backend'
+            target='_blank'
+            rel="noreferrer"
+          >
+            <Database/>
+          </a>
+          <p><strong>Backend</strong></p>
+        </div>
+      </div>
+    </div>
+  </Fragment>
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Footer/Footer.styles.scss b/src/components/Footer/Footer.styles.scss
new file mode 100644
index 0000000..29d84a2
--- /dev/null
+++ b/src/components/Footer/Footer.styles.scss
@@ -0,0 +1,19 @@
+.footer {
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  padding-top: 32px;
+  background-color: #232629;
+
+  .socials {
+    display: flex;
+    justify-content: space-between;
+    width: 120px;
+
+    .social-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/PageContainer/PageContainer.component.jsx b/src/components/PageContainer/PageContainer.component.jsx
index f5fa9af..4f9bc07 100644
--- a/src/components/PageContainer/PageContainer.component.jsx
+++ b/src/components/PageContainer/PageContainer.component.jsx
@@ -2,9 +2,11 @@ import React, {Fragment} from 'react';
 
 import SideBar from '../SideBar/SideBar.component';
 import RightSideBar from '../RightSideBar/RightSideBar.component';
+import Footer from "../Footer/Footer.component";
 
 const PageContainer = ({component: Component}) => {
   return class DefaultPageContainer extends React.Component {
+
     render() {
       return (
         <Fragment>
@@ -15,6 +17,7 @@ const PageContainer = ({component: Component}) => {
               <RightSideBar />
             </div>
           </div>
+          <Footer/>
         </Fragment>
       );
     }
diff --git a/src/pages/HomePage/HomePage.component.jsx b/src/pages/HomePage/HomePage.component.jsx
index 75cc93d..a8a9a81 100644
--- a/src/pages/HomePage/HomePage.component.jsx
+++ b/src/pages/HomePage/HomePage.component.jsx
@@ -6,11 +6,11 @@ import {getPosts} from '../../redux/posts/posts.actions';
 import LinkButton from '../../components/LinkButton/LinkButton.component';
 import PostItem from '../../components/PostItem/PostItem.component';
 import Spinner from '../../components/Spinner/Spinner.component';
-
-import './HomePage.styles.scss';
 import Pagination from '../../components/Pagination/Pagination.component';
 import handleSorting from "../../services/handleSorting";
 
+import './HomePage.styles.scss';
+
 const itemsPerPage = 12;
 const showInline = 5;
 
diff --git a/src/pages/Login/Login.component.jsx b/src/pages/Login/Login.component.jsx
index dec19f1..3ea119d 100644
--- a/src/pages/Login/Login.component.jsx
+++ b/src/pages/Login/Login.component.jsx
@@ -4,6 +4,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import AuthForm from '../../components/AuthForm/AuthForm.component';
+import Footer from "../../components/Footer/Footer.component";
 
 const Login = ({isAuthenticated}) => {
   if (isAuthenticated) {
@@ -19,6 +20,7 @@ const Login = ({isAuthenticated}) => {
           </div>
         </div>
       </div>
+      <Footer/>
     </Fragment>
   );
 };
diff --git a/src/pages/PostForm/PostForm.component.jsx b/src/pages/PostForm/PostForm.component.jsx
index be09427..83f137a 100644
--- a/src/pages/PostForm/PostForm.component.jsx
+++ b/src/pages/PostForm/PostForm.component.jsx
@@ -8,6 +8,7 @@ import AskWidget from './AskWidget/AskWidget.component';
 
 import './PostForm.styles.scss';
 import AskForm from './AskForm/AskForm.component';
+import Footer from "../../components/Footer/Footer.component";
 
 const PostForm = ({auth: {isAuthenticated, loading}}) => {
   if (!isAuthenticated) {
@@ -37,6 +38,7 @@ const PostForm = ({auth: {isAuthenticated, loading}}) => {
           </div>
         </div>
       </div>
+      <Footer/>
     </Fragment>
   );
 };
diff --git a/src/pages/Register/Register.component.jsx b/src/pages/Register/Register.component.jsx
index a240896..ff9340c 100644
--- a/src/pages/Register/Register.component.jsx
+++ b/src/pages/Register/Register.component.jsx
@@ -8,6 +8,7 @@ import Caption from './Caption/Caption.component';
 import AuthForm from '../../components/AuthForm/AuthForm.component';
 
 import './Register.styles.scss';
+import Footer from "../../components/Footer/Footer.component";
 
 const Register = ({isAuthenticated}) => {
   if (isAuthenticated) {
@@ -24,6 +25,7 @@ const Register = ({isAuthenticated}) => {
           </div>
         </div>
       </div>
+      <Footer/>
     </Fragment>
   );
 };
diff --git a/src/pages/Register/Register.styles.scss b/src/pages/Register/Register.styles.scss
index 8799902..7a6b88f 100644
--- a/src/pages/Register/Register.styles.scss
+++ b/src/pages/Register/Register.styles.scss
@@ -5,7 +5,6 @@
 }
 
 .register-content {
-  width: 100vw;
   background-color: transparent;
   box-sizing: border-box;
   display: flex;
diff --git a/yarn.lock b/yarn.lock
index 3095e15..588f039 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3043,7 +3043,7 @@
   "resolved" "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz"
   "version" "2.6.12"
 
-"core-js@^3.19.2", "core-js@^3.6.4":
+"core-js@^3.1.3", "core-js@^3.19.2", "core-js@^3.6.4":
   "integrity" "sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg=="
   "resolved" "https://registry.npmjs.org/core-js/-/core-js-3.20.1.tgz"
   "version" "3.20.1"
@@ -4255,6 +4255,14 @@
     "setimmediate" "^1.0.5"
     "ua-parser-js" "^0.7.18"
 
+"feather-icons@^4.28.0":
+  "integrity" "sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg=="
+  "resolved" "https://registry.npmjs.org/feather-icons/-/feather-icons-4.28.0.tgz"
+  "version" "4.28.0"
+  dependencies:
+    "classnames" "^2.2.5"
+    "core-js" "^3.1.3"
+
 "file-entry-cache@^6.0.1":
   "integrity" "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg=="
   "resolved" "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
