veereshbv04 · veereshbv04 · May 17, 2022 · May 17, 2022 · May 17, 2022 · May 17, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,12 +5,16 @@
   "dependencies": {
     "axios": "^0.21.4",
     "dayjs": "^1.10.7",
+     "dotenv": "^16.0.0",
+
+    "json-web-token": "^3.2.0",
     "jwt-decode": "^3.1.2",
     "jwt-encode": "^1.0.1",
     "miragejs": "^0.1.41",
     "mockman-js": "^1.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "uuid": "^8.3.2",
     "web-vitals": "^0.2.4"

diff --git a/public/assets/Homepagebig.webp b/public/assets/Homepagebig.webp
diff --git a/public/assets/book-images/Shiningnovel.jpg b/public/assets/book-images/Shiningnovel.jpg
diff --git a/public/assets/book-images/almostdark.jpg b/public/assets/book-images/almostdark.jpg
diff --git a/public/assets/book-images/beingtheother.jpg b/public/assets/book-images/beingtheother.jpg
diff --git a/public/assets/book-images/casualvacancy.jpg b/public/assets/book-images/casualvacancy.jpg
diff --git a/public/assets/book-images/daniellesteelspy.jpg b/public/assets/book-images/daniellesteelspy.jpg
diff --git a/public/assets/book-images/doepicshit.jpg b/public/assets/book-images/doepicshit.jpg
diff --git a/public/assets/book-images/ghosts-of-the-silent-hills-stories.jpg b/public/assets/book-images/ghosts-of-the-silent-hills-stories.jpg
diff --git a/public/assets/book-images/girlinroom105.jpg b/public/assets/book-images/girlinroom105.jpg
diff --git a/public/assets/book-images/ikigai.jpg b/public/assets/book-images/ikigai.jpg
diff --git a/public/assets/book-images/poisonapple.jpg b/public/assets/book-images/poisonapple.jpg
diff --git a/public/assets/book-images/tearsofjhelum.jpg b/public/assets/book-images/tearsofjhelum.jpg
diff --git a/public/assets/book-images/thegreenroom.jpg b/public/assets/book-images/thegreenroom.jpg
diff --git a/public/assets/book-images/thehouseofstrangestories.jpg b/public/assets/book-images/thehouseofstrangestories.jpg
diff --git a/public/assets/book-images/wishperingindark.jpg b/public/assets/book-images/wishperingindark.jpg
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <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"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <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" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>BookStore</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -1,51 +1,255 @@
-.App {
-  text-align: center;
+@import url(https://www.w3schools.com/w3css/4/w3.css);
+@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css); 
+@import url(https://veeuiforbookstorecss.netlify.app/components/main.css);
+
+/* styles.index */
+
+body{
+    font-family: 'Open Sans', sans-serif;
+}
+
+.navbar{
+    display: flex;
+    background-color: var(--background-color);
+    padding: 0 1rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.navbar-title{
+    font-size: 2rem;
+    color: var(--primary-color);
+    font-weight: 400;
+    letter-spacing: 3px;
+    font-weight: bold;
+}
+
+.navbar-search{
+    height: 2rem;
+    border: 5px solid transparent;
+    width: 28rem;
+    padding: 0rem 1rem;
+}
+
+.navbar-catagory{
+    display: block;
+    text-transform: uppercase;
+    color: var(--text-color);
+}
+
+.navbar-catagory li{
+    display: inline;
+    cursor: pointer;
+    padding: 0rem 1rem;
+
+}
+
+img{
+    max-width: 70%;
+    margin: auto;
+}
+
+
+.container{
+    margin-top: 2rem;
+    display: flex;
+    width: 100%;
+    min-height: 28rem;
+    gap: 2rem;
+    padding: 2rem;
+    background-color: var(--section-background);
+
+}
+.wrap{
+    flex-wrap: wrap;
+}
+/* .center-items{
+    align-items: center;
+    justify-content: center;
+} */
+
+.offer{
+    background-color: var(--yellow-color);
+    padding: 6em;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.subheading {
+    text-align: center;
+    max-width: 800px;
+    margin: auto;
+    padding: 1rem;
+    text-transform: uppercase;
+}
+
+.offer-saving{
+    color: var(--green-color);
+}
+
+.price{
+    font-weight: bold;
+    color: var(--text-color);
+}
+
+.footer{
+    background-color:var(--dark-background);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 2rem;
+    padding: 2rem;
+}
+
+.footer-title{
+    font-weight: bold;
+
+}
+
+.footer-links{
+    color: white;
+   list-style: none;
+   padding: 0.8rem;
+   cursor: pointer;
+}
+
+.center-div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    padding: 6rem;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.green{
+    color: var(--green-color);
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+
+.strike{
+    text-decoration: line-through;
 }
 
-.App-header {
-  background-color: #22201c;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: white;
+.quantity{
+    display: flex;
+    font-weight: bold;
 }
 
-.App-link {
-  color: #61dafb;
+.quantity input{
+    width: 3rem;
+
 }
 
-.brand-title {
-  font-size: 3rem;
-  color: #d9d9d9;
+.cart-price{
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    margin: 2rem;
 }
 
-.brand-title span {
-  color: #ffde59;
+.price-field{
+    font-weight: lighter;
+    color: var(--text-color);
+    gap: 4rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
 }
 
-.brand-description {
-  font-size: 1.4rem;
+.highlight{
+    font-weight: bold;
+    color: var(--green-color);
 }
 
-.links {
-  display: flex;
+.text-center{
+    text-align: center;
 }
 
-.links a {
-  color: #d9d9d9;
-  font-size: 1.2rem;
-  margin: 1rem;
+
+/* grid for product list page */
+
+.grid{
+    display: grid;
+    width: 100%;
+    height: auto;
+    padding: 1rem;
+}
+
+.grid-2-8{
+    grid-template-rows:auto;
+    grid-template-columns: 20% auto;
+    gap:2rem;
+}
+
+@media(max-width:550px){
+    .grid-2-8{
+        grid-template-columns: auto;
+        grid-template-rows: auto ;
+        gap: 2rem;
+    }
+}
+
+.product-filter{
+    background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 98vh;
+    padding: 1rem;
+    gap: 2rem;
+
 }
+.product-display{
+    background-color: var(--section-background);
+    height: auto;
+    overflow-y: scroll;
+    display:flex ;
+    gap: 2rem;
+    justify-content:space-around;
+}
+
+.filter{
+    display: flex;
+    justify-content: space-between;
+}
+
+.slider{
+    width: 100%;
+}
+.scale-values{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.category{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.category input{
+    margin-right: 1rem;
+}
+
+
+input[type="reset"]{
+    color: var(--text-color);
+    border-radius: 4px;
+    background-color: var(--section-background);
+    border: none;
+}
+
+.heart{
+        position: absolute;
+        top:0;
+        color: var(--primary-color);
+        padding: 5px;
+        border-radius: 50%;
+        background-color: var(--background-color);
+
+}
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,16 @@
 import "./App.css";
-import logo from "./logo.png";
+import {Footer, Header} from "./components/index"
+import {ProductListing} from "./pages/index"
+import Router from "./router/router";
+// import logo from "./logo.png";
 
 function App() {
   return (
     <div className="App">
-      <h1>Welcome Veeresh B V</h1>
+      <Header/>
+      <Router/>
+      {/* starting from "/" home page routing happens , header remains always as it is a single entity in parent app component */}
+      <Footer/>
     </div>
   );
 }