From 3da3649b7be435c575f8cb4e41abbfd5c42c2a14 Mon Sep 17 00:00:00 2001
From: YSULTRA <yash22589@iiitd.ac.in>
Date: Fri, 17 May 2024 02:04:18 +0530
Subject: [PATCH 1/7] Fixed Navigation Bar Text Visibility Issue in Dark Mode
 in Team Tab

---
 Pages/Team/team.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Pages/Team/team.css b/Pages/Team/team.css
index bb9e537a..3048d621 100644
--- a/Pages/Team/team.css
+++ b/Pages/Team/team.css
@@ -9,7 +9,7 @@ body.dark-mode {
   color: #fff;
 }
 
-body.dark-mode a {
+body.dark-mode {
   color: #fff;
 }
 

From ed9fb4c51b74d760df90928202135a4bb251ec5c Mon Sep 17 00:00:00 2001
From: Sadaf <137484958+SadafKausar2025@users.noreply.github.com>
Date: Sat, 18 May 2024 18:30:18 +0530
Subject: [PATCH 2/7] Added Animated icon to the Navbar links

---
 index.html | 41 +++++++++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index d2378aa4..13ed0450 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
   <link href="https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
   <link rel="stylesheet" href="index.css">
+  <script src="https://cdn.lordicon.com/lordicon.js"></script>
   
   <style>
     .alanBtn-root {
@@ -48,11 +49,31 @@
       <a href="index.html"><img src="img/logo.webp" alt="brand logo"></a>
       <nav class="nav_menu">
         <ul class="nav_link">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="#service">Services</a></li>
-          <li><a href="./Pages/About Page/about.html">About us</a></li>
-          <li><a href="./Pages/Team/team.html">Team</a></li>
-          <li><a href="./Pages/contact/contact.html">Contact us</a></li>
+          <li><a href="index.html"><lord-icon
+                  src="https://cdn.lordicon.com/wmwqvixz.json"
+                  trigger="hover"
+                  colors="primary:#7166ee"
+                  style="width:20px;height:20px;padding-top:5px">
+              </lord-icon> Home</a></li>
+          <li><a href="#service"><lord-icon
+                src="https://cdn.lordicon.com/ojnjgkun.json"
+                trigger="hover"
+                colors="primary:#7166ee"
+                style="width:20px;height:20px ; padding-top:5px">
+            </lord-icon>  Services</a></li>
+          <li><a href="./Pages/About Page/about.html"><lord-icon
+                src="https://cdn.lordicon.com/jnzhohhs.json"
+                trigger="hover"
+                colors="primary:#7166ee"
+                style="width:20px;height:20px ;padding-top:5px">
+            </lord-icon>  About us</a></li>
+          <li><a href="./Pages/Team/team.html"><i class="fa-solid fa-people-group" style="color: #7166ee;"></i>  Team</a></li>
+          <li><a href="./Pages/contact/contact.html"><lord-icon
+                src="https://cdn.lordicon.com/srsgifqc.json"
+                trigger="hover"
+                colors="primary:#7166ee"
+                style="width:20px;height:20px;padding-top:5px">
+            </lord-icon> Contact us</a></li>
         </ul>
       </nav>
       <div class="nav_login">
@@ -100,7 +121,15 @@ <h4>
       <!-- Search bar -->
       <div class="local">
         <input type="search" name="search" id="search" onkeyup="searchProduct()" placeholder="SEARCH HERE" />
-        <img src="img/search_icon.webp" alt="search_icon" />
+        <!-- <img src="img/search_icon.webp" alt="search_icon" /> -->
+        <lord-icon
+            src="https://cdn.lordicon.com/fkdzyfle.json"
+            trigger="hover"
+            colors="primary:#1b1091"
+            style="width:50px;height:50px;    width: 50px;
+    position: relative;
+    right: 80px;">
+        </lord-icon>
       </div>
     </div>
     

From bc6e088309e6e0566706f2e9334fcb9dcae13187 Mon Sep 17 00:00:00 2001
From: Sadaf <137484958+SadafKausar2025@users.noreply.github.com>
Date: Sat, 18 May 2024 22:25:27 +0530
Subject: [PATCH 3/7] Added more beautify icons in the footer section

---
 index.html      | 153 ++++++++++++++++++++++++++++++++++++++++++++++--
 style/style.css |  58 ++++++++++--------
 2 files changed, 182 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index 13ed0450..d5387323 100644
--- a/index.html
+++ b/index.html
@@ -231,6 +231,11 @@ <h4>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -264,6 +269,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -297,6 +307,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -330,6 +345,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -363,6 +383,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -396,6 +421,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -429,6 +459,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -462,6 +497,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -515,6 +555,11 @@ <h2>See more...</h2>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -548,6 +593,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -581,6 +631,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -614,6 +669,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -647,6 +707,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -680,6 +745,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -713,6 +783,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -746,6 +821,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -779,6 +859,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -812,6 +897,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -845,6 +935,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -878,6 +973,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -932,6 +1032,11 @@ <h2>See more...</h2>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -965,6 +1070,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -998,6 +1108,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -1031,6 +1146,11 @@ <h3>&#8377;349</h3>
 
             <button class="add-to-card-button js-cd-add-to-cart">
               Add to cart
+              <lord-icon
+                  src="https://cdn.lordicon.com/pbrgppbb.json"
+                  trigger="hover"
+                  style="width:20px;height:20px">
+              </lord-icon>
             </button>
           </div>
           <div class="item-heading">
@@ -1587,8 +1707,19 @@ <h3>
           <div class="underline"><span></span></div>
         </h3>
 
-        <p><a href="">contact@vigybag.com</a></p>
-        <p><a href="">+91 1234567890</a></p>
+        <p><a href="">
+          <lord-icon
+              src="https://cdn.lordicon.com/xtzvywzp.json"
+              trigger="hover"
+              colors="primary:#ffffff"
+              style="width:20px;height:20px;padding-top:5px;">
+          </lord-icon>  contact@vigybag.com</a></p>
+        <p><a href=""><lord-icon
+                src="https://cdn.lordicon.com/srsgifqc.json"
+                trigger="hover"
+                colors="primary:#ffffff"
+                style="width:20px;height:20px;padding-top:5px">
+            </lord-icon>  +91 1234567890</a></p>
       </div>
       <!-- contact -->
 
@@ -1603,10 +1734,20 @@ <h3>
                         QUICK LINKS
                     </div> -->
           <div class="quick-links-info">
-            <div><a href="./Pages/About Page/about.html">About us</a></div>
-            <div><a href="./Pages/contact/contact.html">Contact us</a></div>
-            <div><a href="">Order</a></div>
-            <div><a href="">help</a></div>
+            <div><a href="./Pages/About Page/about.html"><i class="fa-solid fa-address-card" style="color: #ffffff;"></i>  About us</a></div>
+            <div><a href="./Pages/contact/contact.html"><i class="fa-solid fa-phone-volume" style="color: #ffffff;"></i>   Contact us</a></div>
+            <div><a href=""><lord-icon
+                        src="https://cdn.lordicon.com/mqdkoaef.json"
+                        trigger="hover"
+                        colors="primary:#ffffff"
+                        style="width:20px;height:20px;padding-top:4px">
+                    </lord-icon>  Order</a></div>
+            <div><a href=""><lord-icon
+                        src="https://cdn.lordicon.com/pyoiumqr.json"
+                        trigger="hover"
+                        colors="primary:#ffffff"
+                        style="width:20px;height:20px;padding-top:5px">
+                    </lord-icon>   Help</a></div>
           </div>
         </div>
       </div>
diff --git a/style/style.css b/style/style.css
index e65bfaf4..90aeb912 100644
--- a/style/style.css
+++ b/style/style.css
@@ -190,7 +190,7 @@ body.dark {
   position: absolute;
 }
 
-.checkbox:checked + .label .ball {
+.checkbox:checked+.label .ball {
   transform: translate(38px);
 }
 
@@ -384,7 +384,7 @@ body.dark {
 /* product container */
 
 .product-container {
- 
+
   background-color: #d9d9d9;
   display: flex;
   justify-content: center;
@@ -483,8 +483,8 @@ body.dark {
   padding: 1.5rem;
 }
 
-.play-button:hover{
-	cursor: pointer;
+.play-button:hover {
+  cursor: pointer;
 }
 
 .google-button {
@@ -663,7 +663,7 @@ body.dark {
   cursor: pointer;
 }
 
-.item-image > img {
+.item-image>img {
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -676,13 +676,14 @@ body.dark {
     align-items: center;
     padding-top: 20px;
   }
+
   .container img {
     width: 100%;
     max-width: 40px;
     height: auto;
     margin: 2px 40px;
   }
- 
+
   .container a {
     font-size: 16px;
   }
@@ -702,7 +703,7 @@ body.dark {
     padding-right: 20px;
   }
 
- 
+
 
   .local input[type='search'] {
     padding: 10px 20px;
@@ -721,9 +722,10 @@ body.dark {
   .product-name {
     font-size: 18px;
   }
-  .container .sec-img{
+
+  .container .sec-img {
     max-width: 1000px;
-    }
+  }
 }
 
 /* Media queries for larger mobile devices and tablets */
@@ -735,16 +737,18 @@ body.dark {
   .content h4 {
     font-size: 18px;
   }
+
   .container img {
     width: 100%;
     max-width: 40px;
     height: auto;
     margin: 20px 0;
   }
- .container .sec-img{
-  max-width: 1000px;
+
+  .container .sec-img {
+    max-width: 1000px;
   }
-  
+
 }
 
 
@@ -758,13 +762,15 @@ body.dark {
   .content h4 {
     font-size: 20px;
   }
+
   .container img {
-    width: 100%; 
-    max-width: 45px; 
-    height: auto; 
-    margin: 20px 0; 
+    width: 100%;
+    max-width: 45px;
+    height: auto;
+    margin: 20px 0;
   }
-  .container .sec-img{
+
+  .container .sec-img {
     max-width: 1000px;
   }
 }
@@ -903,6 +909,9 @@ p {
 }
 
 .add-to-card-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-weight: 400;
   font-size: 10px;
   line-height: 12px;
@@ -922,8 +931,9 @@ p {
 }
 
 .add-to-card-button:hover {
-  background-color: #161b6e;
-  color: #d9d9d9;
+  background-color: #bbbdf0;
+  color: #0a0a0a;
+
 }
 
 .see-more-text {
@@ -1063,7 +1073,7 @@ footer {
   transform: scale(1.1);
 }
 
-.social a{
+.social a {
   margin-bottom: 10px;
   text-align: center;
   display: flex;
@@ -1088,6 +1098,7 @@ footer {
   footer {
     bottom: unset;
   }
+
   .row {
     width: 100%;
     margin: auto;
@@ -1095,6 +1106,7 @@ footer {
     flex-wrap: wrap;
     align-items: flex-start;
   }
+
   .col {
     flex-basis: 100%;
   }
@@ -1217,14 +1229,14 @@ div.c div.p p {
   padding: 2em;
 }
 
-div.c input:checked ~ h1 label::before {
+div.c input:checked~h1 label::before {
   border-left: 15px solid transparent;
   border-top: 20px solid white;
   margin-top: 12px;
   margin-right: 10px;
 }
 
-div.c input:checked ~ h1 ~ div.p {
+div.c input:checked~h1~div.p {
   max-height: 100px;
 }
 
@@ -1547,4 +1559,4 @@ div.c a {
   padding: 5px;
   border-radius: 5px;
   background-color: #f9f9f9;
-}
+}
\ No newline at end of file

From 1ac170343b670c6bfdd2a492d942951a4f2cd72a Mon Sep 17 00:00:00 2001
From: Vivek Prajapati <62784060+codervivek5@users.noreply.github.com>
Date: Sun, 19 May 2024 22:48:53 +0530
Subject: [PATCH 4/7] Update README.md

Add new Figma design
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index a0388626..b473059f 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,8 @@ Technologies Used :
 - [Figma Design](https://www.figma.com/file/hXcM6chTK70O6rAqCTFxuc/Vigy?node-id=0%3A1&t=px6VNjlFCos5Ll9z-1)
 <!-- - We can take reference of this website [Click Here](http://yellowpages.in/) -->
 
+## Figma New Design
+- [Figma Design](https://www.figma.com/design/O0UOQfpC6u7wiQ9EeLnhGx/VigyBag-Redesign?node-id=0-1&t=sAeZiavEp8vPg1ss-0)
 
 
 If you want to work on this unique project and share it with the world, you can do that here. Go through the contributing guidelines here.

From 76d6beb159d6f0cce2bd775cb6a456c112ec1d49 Mon Sep 17 00:00:00 2001
From: Vivek Prajapati <62784060+codervivek5@users.noreply.github.com>
Date: Sun, 19 May 2024 22:51:21 +0530
Subject: [PATCH 5/7] Update README.md

Figma new design with proper heading
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b473059f..abdadc58 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,7 @@ Technologies Used :
 - [Figma Design](https://www.figma.com/file/hXcM6chTK70O6rAqCTFxuc/Vigy?node-id=0%3A1&t=px6VNjlFCos5Ll9z-1)
 <!-- - We can take reference of this website [Click Here](http://yellowpages.in/) -->
 
-## Figma New Design
+#### Figma New Design
 - [Figma Design](https://www.figma.com/design/O0UOQfpC6u7wiQ9EeLnhGx/VigyBag-Redesign?node-id=0-1&t=sAeZiavEp8vPg1ss-0)
 
 

From 147105bb0077bb201742cf41467aaa9c34a80976 Mon Sep 17 00:00:00 2001
From: Vivek Prajapati <62784060+codervivek5@users.noreply.github.com>
Date: Sun, 19 May 2024 22:53:42 +0530
Subject: [PATCH 6/7] Update README.md

Backend setup configuration
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index abdadc58..011838d8 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@ Technologies Used :
 If you want to work on this unique project and share it with the world, you can do that here. Go through the contributing guidelines here.
 
     
-## :handshake: Contributing  <a name="contributing"></a>
+## :handshake: Contributing - Backend Setup   <a name="contributing"></a>
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=git&logoColor=white)](https://github.com/hound77/jwoc-archive/pulls)  [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/hound77/jwoc-archive)
 

From 3bd66b5b809188b9f9dda6e83da50e4cccdfbc04 Mon Sep 17 00:00:00 2001
From: Vivek Prajapati <62784060+codervivek5@users.noreply.github.com>
Date: Sun, 19 May 2024 23:22:35 +0530
Subject: [PATCH 7/7] Update README.md

describe front end project setup
---
 README.md | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 011838d8..18a4d5fa 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@ Technologies Used :
 If you want to work on this unique project and share it with the world, you can do that here. Go through the contributing guidelines here.
 
     
-## :handshake: Contributing - Backend Setup   <a name="contributing"></a>
+## :handshake: Contributing <a name="contributing"></a>
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat&logo=git&logoColor=white)](https://github.com/hound77/jwoc-archive/pulls)  [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/hound77/jwoc-archive)
 
@@ -121,7 +121,7 @@ git pull upstream main
 git checkout -b <YOUR_BRANCH_NAME>
 ```
 
-**8.** Make changes in source code.
+**8.** Make changes in the source code.
 
 **9.** Check your changes.
 ```
@@ -158,28 +158,52 @@ Congratulations🎉, you have made a PR to the VigyBag. Wait for your submission
 
 ## 🦄 Django Project Setup 
 
-**1.** Navigate to the project directory Backend Code .
+**1.** Navigate to the project directory Backend Code.
 
 ```bash
 cd Backend Code
 ```
 
-**2.** Navigate to the project directory VigyBag .
+**2.** Navigate to the project directory VigyBag.
 
 ```bash
 cd VigyBag
 ```
-**3.** If you get manage.py in file structure then run this command.
+**3.** If you get manage.py in the file structure then run this command.
 
 ```bash
 python manage.py runserver
 ```
 
-## 🦄 Django Admin Authentificaion 
+### 🦄 Django Admin Authentificaion 
 ```bash
 later on...
 ```
 
+## ⚛️ React Project Setup 
+
+**1.** Navigate to the project directory Backend Code.
+
+```bash
+cd front-with-code
+```
+
+**2.** Navigate to the project directory VigyBag.
+
+```bash
+cd VigyBag
+```
+**3.** Run this command to install node packages.
+
+```bash
+npm install
+```
+
+## ⚛️ Start project
+```bash
+npm run dev
+```
+
 ## ⚙️ Things to Note
 - Make sure you do not copy codes from external sources because that work will not be considered. Plagiarism is strictly not allowed.
 - You can only work on issues that have been assigned to you.