From e9e2769442863909d6ca2397ffe5a6918fbd9d60 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 09:28:39 +0530
Subject: [PATCH 01/35] started working on fetchDataUsingPincode :hammer:

---
 src/components/Home/Home.js                   |  27 ++--
 .../SingleVaccineData/VaccineDataSingle.css   | 139 +++++++++---------
 .../SingleVaccineData/VaccineDataSingle.js    |  78 +++++-----
 src/components/VaccineData/VaccineDataMain.js |  26 ++--
 4 files changed, 135 insertions(+), 135 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 63a7baf..77c4600 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -50,17 +50,17 @@ const Home = () => {
   const [formattedDate, setFormattedDate] = useState("");
   const classes = useStyles();
 
-  const GetFormattedDate = ()=> {
+  const GetFormattedDate = () => {
     var month = selectedDate.getMonth() + 1;
     var day = selectedDate.getDate();
     var year = selectedDate.getFullYear();
-    var finalDate =  day + "-" + month + "-" + year;
+    var finalDate = day + "-" + month + "-" + year;
 
-    setFormattedDate(finalDate)
-  }
+    setFormattedDate(finalDate);
+  };
 
   useEffect(() => {
-    GetFormattedDate()
+    GetFormattedDate();
     // eslint-disable-next-line
   }, [selectedDate, formattedDate]);
 
@@ -72,7 +72,7 @@ const Home = () => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
-        setState(data.states)
+        setState(data.states);
       });
   }, [setState]);
 
@@ -102,7 +102,7 @@ const Home = () => {
       .then((data) => {
         setDistrictCode(districtCode);
         setVaccineData(data.sessions);
-        console.log(data.sessions)
+        console.log(data.sessions);
       });
   };
 
@@ -144,9 +144,14 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
-                  <MenuItem value="States" disabled={true}>Select State First</MenuItem>
+                  <MenuItem value="States" disabled={true}>
+                    Select State First
+                  </MenuItem>
                   {district.map((district) => (
-                    <MenuItem key={district?.district_id} value={district?.district_id}>
+                    <MenuItem
+                      key={district?.district_id}
+                      value={district?.district_id}
+                    >
                       {district?.district_name}
                     </MenuItem>
                   ))}
@@ -179,7 +184,7 @@ const Home = () => {
                       type="number"
                       variant="outlined"
                       InputProps={{
-                        className: classes.textfield
+                        className: classes.textfield,
                       }}
                     />
                   </Paper>
@@ -188,7 +193,7 @@ const Home = () => {
             </div>
           </div>
         </div>
-          <VaccineDataMain vaccineData={vaccineData}/>
+        <VaccineDataMain vaccineData={vaccineData} />
       </div>
     </Container>
   );
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index ae138db..da895db 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,102 +1,99 @@
 .wrapper {
-    display: flex;
-    background-color: #333333;
-    height: 30vh
+  display: flex;
+  background-color: #333333;
+  height: 30vh;
 }
 
 .wrapper > * {
-    padding: 20px;
+  padding: 20px;
 }
 
 .paper-left {
-    width: 50%;
+  width: 50%;
 }
 
-.paper-left h1{
-    color: whitesmoke;
-    text-transform: uppercase;
-    font-family: monospace;
+.paper-left h1 {
+  color: whitesmoke;
+  text-transform: uppercase;
+  font-family: monospace;
 }
 
-.paper-left .paper-left_content{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
+.paper-left .paper-left_content {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 
-
-.paper-left .paper-left_content h3{
-    color: #BB86FC;
-    font-weight: bold;
-    text-transform: capitalize;
+.paper-left .paper-left_content h3 {
+  color: #bb86fc;
+  font-weight: bold;
+  text-transform: capitalize;
 }
 
-.paper-left .paper-left_content p{
-    color: #F48FB1;
-    margin-top: 5px;
-    text-transform: capitalize;
-    font-family: monospace;
+.paper-left .paper-left_content p {
+  color: #f48fb1;
+  margin-top: 5px;
+  text-transform: capitalize;
+  font-family: monospace;
 }
 
 .paper-left .paper-left_time {
-    display: flex;
-    justify-content: space-evenly;
-    margin-top: 10px;
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 10px;
 }
 
-.paper-left .paper-left_time .time{
-    padding: 10px;
-    border-radius: 7px;
-    font-weight: bold;
+.paper-left .paper-left_time .time {
+  padding: 10px;
+  border-radius: 7px;
+  font-weight: bold;
 }
 
-.paper-left .paper-left_time .open-time{
-    background-color: #009E60;
-    font-family: monospace;
+.paper-left .paper-left_time .open-time {
+  background-color: #009e60;
+  font-family: monospace;
 }
 
-.paper-left .paper-left_time .close-time{
-    background-color: rgb(222,49,99);
-    color: white;
-    font-family: monospace;
+.paper-left .paper-left_time .close-time {
+  background-color: rgb(222, 49, 99);
+  color: white;
+  font-family: monospace;
 }
 
 .paper-right {
-    width: 50%;
+  width: 50%;
 }
 
-
-
 /*Media Queries*/
 @media screen and (max-width: 500px) {
-    .wrapper {
-        height: 50vh;
-        flex-direction: column;
-    }
-
-    .paper-left {
-        width: 90%;
-    }
-
-    .paper-left p {
-        width: 100%;
-    }
-
-    .paper-left .paper-left_content{
-        display: flex;
-        flex-direction: column;
-    }
-
-    .paper-left .paper-left_time {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .paper-left .paper-left_time .time{
-        margin-top: 5px;
-    }
-
-    .paper-right {
-        width: 90%;
-    }
-}
\ No newline at end of file
+  .wrapper {
+    height: 50vh;
+    flex-direction: column;
+  }
+
+  .paper-left {
+    width: 90%;
+  }
+
+  .paper-left p {
+    width: 100%;
+  }
+
+  .paper-left .paper-left_content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .paper-left .paper-left_time {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .paper-left .paper-left_time .time {
+    margin-top: 5px;
+  }
+
+  .paper-right {
+    width: 90%;
+  }
+}
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index b88900c..40fb258 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,46 +1,48 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
 
-import "./VaccineDataSingle.css"
+import "./VaccineDataSingle.css";
 
 const useStyles = makeStyles((theme) => ({
-    paperMainDiv:{
-        width: "100%"
-    },
+  paperMainDiv: {
+    width: "100%",
+  },
 }));
 
-const VaccineDataSingle = (vaccine)=> {
-    const classes = useStyles();
+const VaccineDataSingle = (vaccine) => {
+  const classes = useStyles();
 
-    return(
-        <div className={classes.paperMainDiv}>
-            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
-                <div className="paper-left">
-                    <h1>{vaccine.name}</h1>
-                    <hr/>
-                    <br/>
-                    <div className="paper-left_content">
-                        <h3>address</h3>
-                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
-                    </div>
-                    <div className="paper-left_content">
-                        <h3>pincode</h3>
-                        <p>{vaccine.pincode}</p>
-                    </div>
-                    <div className="paper-left_time">
-                        <div className="open-time time">
-                            Opening Time: {vaccine.from}
-                        </div>
-                        <div className="close-time time">
-                            Closing Time: {vaccine.to}
-                        </div>
-                    </div>
-                </div>
-                <div className="paper-right">
-                </div>
-            </Paper>
+  return (
+    <div className={classes.paperMainDiv}>
+      <Paper
+        variant="outlined"
+        className="wrapper"
+        style={{ backgroundColor: "#333333" }}
+      >
+        <div className="paper-left">
+          <h1>{vaccine.name}</h1>
+          <hr />
+          <br />
+          <div className="paper-left_content">
+            <h3>address</h3>
+            <p>
+              {vaccine.block_name}, {vaccine.district_name},{" "}
+              {vaccine.state_name}
+            </p>
+          </div>
+          <div className="paper-left_content">
+            <h3>pincode</h3>
+            <p>{vaccine.pincode}</p>
+          </div>
+          <div className="paper-left_time">
+            <div className="open-time time">Opening Time: {vaccine.from}</div>
+            <div className="close-time time">Closing Time: {vaccine.to}</div>
+          </div>
         </div>
-    )
-}
+        <div className="paper-right"></div>
+      </Paper>
+    </div>
+  );
+};
 
-export default VaccineDataSingle
\ No newline at end of file
+export default VaccineDataSingle;
diff --git a/src/components/VaccineData/VaccineDataMain.js b/src/components/VaccineData/VaccineDataMain.js
index 4a639be..172c859 100644
--- a/src/components/VaccineData/VaccineDataMain.js
+++ b/src/components/VaccineData/VaccineDataMain.js
@@ -1,18 +1,14 @@
 import VaccineDataSingle from "./SingleVaccineData/VaccineDataSingle";
 
-const VaccineDataMain = ({vaccineData}) => {
-    return (
-        <>
-            {
-                vaccineData.map((vaccine)=>{
-                    const {center_id} = vaccine
-                    return(
-                        <VaccineDataSingle key={center_id} {...vaccine}/>
-                    )
-                })
-            }
-        </>
-    )
-}
+const VaccineDataMain = ({ vaccineData }) => {
+  return (
+    <>
+      {vaccineData.map((vaccine) => {
+        const { center_id } = vaccine;
+        return <VaccineDataSingle key={center_id} {...vaccine} />;
+      })}
+    </>
+  );
+};
 
-export default VaccineDataMain;
\ No newline at end of file
+export default VaccineDataMain;

From 43850fb3f0cb701d076cc4197a08ce1e40930e4b Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 09:55:47 +0530
Subject: [PATCH 02/35] fixed vaccineData to none onChangeState :hammer:

---
 src/components/Home/Home.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 77c4600..3d991ee 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -78,9 +78,10 @@ const Home = () => {
 
   const onStateChange = async (e) => {
     const stateCode = e.target.value;
+    setVaccineData([]);
     const url =
       stateCode === "States"
-        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/9"
+        ? null
         : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
     await fetch(url)
       .then((response) => response.json())
@@ -102,7 +103,6 @@ const Home = () => {
       .then((data) => {
         setDistrictCode(districtCode);
         setVaccineData(data.sessions);
-        console.log(data.sessions);
       });
   };
 
@@ -128,7 +128,8 @@ const Home = () => {
                   onChange={onStateChange}
                 >
                   <MenuItem value="States">States</MenuItem>
-                  {state.map((state) => (
+
+                  {state?.map((state) => (
                     <MenuItem key={state?.state_id} value={state?.state_id}>
                       {state?.state_name}
                     </MenuItem>
@@ -144,10 +145,13 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
-                  <MenuItem value="States" disabled={true}>
-                    Select State First
-                  </MenuItem>
-                  {district.map((district) => (
+                  {district.length === 0 ? (
+                    <MenuItem value="States" disabled={true}>
+                      Select State First
+                    </MenuItem>
+                  ) : null}
+
+                  {district?.map((district) => (
                     <MenuItem
                       key={district?.district_id}
                       value={district?.district_id}

From 3c029495145b27fc80f3260e6451e8250e7ec169 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:27:56 +0530
Subject: [PATCH 03/35] building the home page :hammer:

---
 package.json                     |   1 +
 src/App.js                       |  19 ++-
 src/components/Header/Header.css |  49 ++++++++
 src/components/Header/Header.js  |  27 ++++
 src/components/Home/Home.css     | 110 ++--------------
 src/components/Home/Home.js      | 207 ++-----------------------------
 src/components/Test.css          |  51 ++++++++
 src/components/Test.js           |  25 ++++
 yarn.lock                        |  98 +++++++++++++--
 9 files changed, 275 insertions(+), 312 deletions(-)
 create mode 100644 src/components/Header/Header.css
 create mode 100644 src/components/Header/Header.js
 create mode 100644 src/components/Test.css
 create mode 100644 src/components/Test.js

diff --git a/package.json b/package.json
index d69a987..80a84ae 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "date-fns": "^2.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
diff --git a/src/App.js b/src/App.js
index b4f68eb..5bbe861 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,25 @@
 import React from "react";
 import "./App.css";
+import Test from "./components/Test";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./components/Home/Home";
+import Header from "./components/Header/Header";
 
 const App = () => {
   return (
-    <div className="app">
-      <Home />
-    </div>
+    <Router>
+      <div className="app">
+        <Header />
+        <Switch>
+          <Route exact={true} path="/">
+            <Test />
+          </Route>
+          <Route path="/vaccines" exact={true}>
+            <Home />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
   );
 };
 
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..52c38a8
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,49 @@
+.header__leftImg {
+  width: 120px;
+  padding: 20px;
+  margin-top: -40px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  width: 100%;
+}
+.header__right {
+  display: flex;
+  margin: 25px;
+}
+
+.header__right > h3 {
+  font-weight: 400;
+  margin-left: 30px;
+  margin-right: 30px;
+  cursor: pointer;
+}
+
+@media screen and (max-width: 800px) {
+  .header__right > h3 {
+    font-weight: 400;
+    cursor: pointer;
+  }
+  .header__right {
+    margin-left: -20px;
+  }
+
+  .header__rightNav {
+    margin-left: 20px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+    align-items: flex-start;
+    width: 100%;
+  }
+}
+
+body {
+  overflow-x: hidden;
+}
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
new file mode 100644
index 0000000..f0dd9ec
--- /dev/null
+++ b/src/components/Header/Header.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Header.css";
+
+const Header = () => {
+  return (
+    <div className="header">
+      <div className="header__left">
+        <Link to="/">
+          <img
+            className="header__leftImg"
+            src="https://user-images.githubusercontent.com/71087810/117496136-3d18fb00-af94-11eb-876a-d3acc96aaa75.png"
+            alt=""
+          />
+        </Link>
+      </div>
+      <div className="header__rightNav">
+        <div className="header__right">
+          <h3>Contribute</h3>
+          <h3>About</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 95cbeec..02d2456 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -1,105 +1,9 @@
-body {
-  background-color: #121212;
-}
-.home {
-  color: white;
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  height: calc(100vh - 20px);
-  padding: 10px;
-}
-
-.home__info {
-  background-color: #352f44;
-  padding: 15px;
-  color: #bb86fc;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-radius: 5px;
-}
-
-.home__optionLeft {
+.home__intro > h2 {
+  text-align: center;
+  margin-top: 50px;
+  font-weight: 400;
+  border: 5px solid black;
+  margin: auto 500px;
   padding: 10px;
-  margin-top: 10px;
-  margin-left: -15px;
-}
-
-.home__option {
-  margin: 10px;
-}
-
-.text > .MuiFormControl-root {
-  background-color: #31333f;
-  color: white !important;
-  width: 300px;
-  outline: 0 !important;
-  border-radius: 10px;
-  margin: 10px;
-}
-
-.MuiSelect-root {
-  color: white !important;
-}
-.MuiPaper-root {
-  margin-top: 10px;
-  margin-left: 10px;
-}
-
-@media (max-width: 800px) {
-  .home__optionRight > .MuiFormControl-root {
-    width: 280px;
-    margin-left: 10px;
-  }
-  .home__info {
-    border-radius: 10px;
-  }
-  .home {
-    background-size: 300%;
-    height: 100vh;
-  }
-
-  .home__optionRight {
-    display: flex;
-    flex-direction: column;
-  }
-  .text > .MuiFormControl-root {
-    background-color: #31333f;
-    color: white !important;
-    width: 280px;
-    outline: 0 !important;
-    border-radius: 10px;
-  }
-
-  .date__picker {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .MuiPaper-root {
-    margin-left: -5px;
-    margin-top: 10px;
-  }
-}
-
-body::-webkit-scrollbar {
-  display: none;
-}
-
-.home__optionRight {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.text {
-  display: flex;
-  flex-direction: column;
-}
-
-.date__picker {
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
+  font-size: 25px;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 3d991ee..09de3c8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,205 +1,22 @@
-import "date-fns";
-import React, { useEffect, useState } from "react";
-import {
-  Grid,
-  Typography,
-  Container,
-  MenuItem,
-  FormControl,
-  Select,
-  Paper,
-  TextField,
-} from "@material-ui/core";
-import {
-  MuiPickersUtilsProvider,
-  KeyboardDatePicker,
-} from "@material-ui/pickers";
-import { makeStyles } from "@material-ui/core/styles";
-import DateFnsUtils from "@date-io/date-fns";
-
-import VaccineDataMain from "../VaccineData/VaccineDataMain";
-
+import React from "react";
 import "./Home.css";
 
-const useStyles = makeStyles((theme) => ({
-  input: {
-    color: "#bb86fc",
-  },
-  textfield: {
-    color: "#bb86fc",
-    height: "50px",
-    width: "248px",
-    padding: "0px 0px 0px 0px",
-    margin: "-5px 0px 0px 0px",
-  },
-  paper: {
-    height: 70,
-    width: 250,
-    backgroundColor: "#31333F",
-    padding: "0px 10px 0px 10px",
-  },
-}));
-
 const Home = () => {
-  const [state, setState] = useState([]);
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  const [stateCode, setStateCode] = useState("States");
-  const [district, setDistricts] = useState([]);
-  const [districtCode, setDistrictCode] = useState("Districts");
-  const [vaccineData, setVaccineData] = useState([]);
-  const [formattedDate, setFormattedDate] = useState("");
-  const classes = useStyles();
-
-  const GetFormattedDate = () => {
-    var month = selectedDate.getMonth() + 1;
-    var day = selectedDate.getDate();
-    var year = selectedDate.getFullYear();
-    var finalDate = day + "-" + month + "-" + year;
-
-    setFormattedDate(finalDate);
-  };
-
-  useEffect(() => {
-    GetFormattedDate();
-    // eslint-disable-next-line
-  }, [selectedDate, formattedDate]);
-
-  const handleDateChange = (date) => {
-    setSelectedDate(date);
-  };
-
-  useEffect(() => {
-    fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
-      .then((res) => res.json())
-      .then((data) => {
-        setState(data.states);
-      });
-  }, [setState]);
-
-  const onStateChange = async (e) => {
-    const stateCode = e.target.value;
-    setVaccineData([]);
-    const url =
-      stateCode === "States"
-        ? null
-        : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
-    await fetch(url)
-      .then((response) => response.json())
-      .then((data) => {
-        setStateCode(stateCode);
-        setDistricts(data.districts);
-      });
-  };
-
-  const onDistrictChange = async (e) => {
-    const districtCode = e.target.value;
-    const url =
-      stateCode === "Districts"
-        ? null
-        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}
-        `;
-    await fetch(url)
-      .then((response) => response.json())
-      .then((data) => {
-        setDistrictCode(districtCode);
-        setVaccineData(data.sessions);
-      });
-  };
-
   return (
-    <Container>
-      <div className="home">
-        <h2>CoWIN Vaccination Slot Availability</h2>
-        <div className="home__info">
-          <p>
-            The CoWIN APIs are geo fenced, so sometimes you may not see an
-            output! Please try after sometime
-          </p>
-        </div>
-
-        <div className="home__option">
-          <div className="home__optionRight">
-            <div className="text">
-              <Typography>Select State</Typography>
-              <FormControl>
-                <Select
-                  variant="outlined"
-                  value={stateCode}
-                  onChange={onStateChange}
-                >
-                  <MenuItem value="States">States</MenuItem>
-
-                  {state?.map((state) => (
-                    <MenuItem key={state?.state_id} value={state?.state_id}>
-                      {state?.state_name}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </div>
-            <div className="text">
-              <Typography>Select District</Typography>
-              <FormControl>
-                <Select
-                  variant="outlined"
-                  value={districtCode}
-                  onChange={onDistrictChange}
-                >
-                  {district.length === 0 ? (
-                    <MenuItem value="States" disabled={true}>
-                      Select State First
-                    </MenuItem>
-                  ) : null}
+    <div className="home">
+      <div className="home__intro">
+        <h2>Vaccine Availablity</h2>
+      </div>
 
-                  {district?.map((district) => (
-                    <MenuItem
-                      key={district?.district_id}
-                      value={district?.district_id}
-                    >
-                      {district?.district_name}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </div>
-            <div style={{ padding: "10px" }}>
-              <Grid item xs={12} className="date__picker">
-                <Grid item>
-                  <Paper className={classes.paper} elevation={3}>
-                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-                      <KeyboardDatePicker
-                        margin="normal"
-                        id="date-picker-dialog"
-                        label="Date picker dialog"
-                        format="dd-MM-yyyy"
-                        value={selectedDate}
-                        onChange={handleDateChange}
-                        InputProps={{ className: classes.input }}
-                      />
-                    </MuiPickersUtilsProvider>
-                  </Paper>
-                </Grid>
-                <Grid item>
-                  <Paper className={classes.paper} elevation={3}>
-                    <TextField
-                      id="outlined-number"
-                      margin="normal"
-                      label="Pin Code"
-                      type="number"
-                      variant="outlined"
-                      InputProps={{
-                        className: classes.textfield,
-                      }}
-                    />
-                  </Paper>
-                </Grid>
-              </Grid>
-            </div>
-          </div>
+      <div className="home__options">
+        <div className="home__optionsTop">
+          <h4>Select State</h4>
+          <h4>Select District</h4>
+          <h4>Pincode</h4>
+          <h4>Date </h4>
         </div>
-        <VaccineDataMain vaccineData={vaccineData} />
       </div>
-    </Container>
+    </div>
   );
 };
 
diff --git a/src/components/Test.css b/src/components/Test.css
new file mode 100644
index 0000000..9d6eb43
--- /dev/null
+++ b/src/components/Test.css
@@ -0,0 +1,51 @@
+.test__home > img {
+  width: 550px;
+}
+
+.test__home {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 40px;
+}
+
+.test__homeText {
+  border: 3px solid black;
+  padding: 10px 55px 10px 50px;
+  margin-top: -25px;
+  font-weight: 400;
+  text-align: center;
+}
+
+.test__homeText:hover {
+  border: 3px solid black;
+  color: white;
+  padding: 10px 55px 10px 50px;
+  margin-top: -25px;
+  transition: 0.5s;
+  background-color: black;
+  font-weight: 400;
+  text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+  .test__home > img {
+    width: 300px;
+  }
+  .test__home {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-right: -10px;
+    margin-top: 40px;
+  }
+  .test__home {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 20px;
+  }
+}
diff --git a/src/components/Test.js b/src/components/Test.js
new file mode 100644
index 0000000..f08d461
--- /dev/null
+++ b/src/components/Test.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Test.css";
+
+const Test = () => {
+  return (
+    <div className="test">
+      <div className="test__home">
+        <img
+          src="https://user-images.githubusercontent.com/71087810/117496553-d5af7b00-af94-11eb-84bb-913a1f386811.png"
+          alt=""
+        />
+
+        <Link
+          style={{ textDecorationLine: "none", color: "black" }}
+          to="/vaccines"
+        >
+          <h3 className="test__homeText">Vaccine Availablity</h3>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Test;
diff --git a/yarn.lock b/yarn.lock
index e46ba7e..2df66eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1091,6 +1091,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.12.18"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.18.tgz#af137bd7e7d9705a412b3caaf991fe6aaa97831b"
@@ -1098,13 +1105,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
-  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -5563,6 +5563,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5572,7 +5584,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6266,6 +6278,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7183,7 +7200,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7389,6 +7406,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8148,6 +8173,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -9228,7 +9260,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9248,6 +9280,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -9622,6 +9683,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
@@ -10729,7 +10795,12 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-warning@^1.0.2:
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -11151,6 +11222,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 8453451e92a7812d9858192a4634c0ad0cbf8092 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:39:26 +0530
Subject: [PATCH 04/35] new ui

---
 src/components/Home/Home.css | 15 +++++++++++++--
 src/components/Home/Home.js  |  2 ++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 02d2456..209dd84 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -1,9 +1,20 @@
 .home__intro > h2 {
-  text-align: center;
   margin-top: 50px;
   font-weight: 400;
   border: 5px solid black;
-  margin: auto 500px;
   padding: 10px;
   font-size: 25px;
 }
+
+.home__optionsTop {
+  display: flex;
+  align-items: center;
+  border: 3px solid black;
+  margin-top: 10px;
+}
+
+.home {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 09de3c8..8f5bee8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Home.css";
+import DateRangeIcon from "@material-ui/icons/DateRange";
 
 const Home = () => {
   return (
@@ -14,6 +15,7 @@ const Home = () => {
           <h4>Select District</h4>
           <h4>Pincode</h4>
           <h4>Date </h4>
+          <DateRangeIcon />
         </div>
       </div>
     </div>

From ab345173c10abb329cbd8b0819cbbf499a920f34 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:42:07 +0530
Subject: [PATCH 05/35] New ui :hammer:

---
 src/App.js                            | 4 ++--
 src/components/{Test.css => Main.css} | 0
 src/components/{Test.js => Main.js}   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/{Test.css => Main.css} (100%)
 rename src/components/{Test.js => Main.js} (96%)

diff --git a/src/App.js b/src/App.js
index 5bbe861..1613683 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import React from "react";
 import "./App.css";
-import Test from "./components/Test";
+import Main from "./components/Main";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./components/Home/Home";
 import Header from "./components/Header/Header";
@@ -12,7 +12,7 @@ const App = () => {
         <Header />
         <Switch>
           <Route exact={true} path="/">
-            <Test />
+            <Main />
           </Route>
           <Route path="/vaccines" exact={true}>
             <Home />
diff --git a/src/components/Test.css b/src/components/Main.css
similarity index 100%
rename from src/components/Test.css
rename to src/components/Main.css
diff --git a/src/components/Test.js b/src/components/Main.js
similarity index 96%
rename from src/components/Test.js
rename to src/components/Main.js
index f08d461..1eb0f64 100644
--- a/src/components/Test.js
+++ b/src/components/Main.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import "./Test.css";
+import "./Main.css";
 
 const Test = () => {
   return (

From 12a210fdba7e8b51e2c498a1f6720419e53379f2 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 11:57:37 +0530
Subject: [PATCH 06/35] new ui :fire:

---
 src/components/Home/Home.css | 21 +++++++++++++++++++++
 src/components/Home/Home.js  |  6 ++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 209dd84..a74b5cb 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -11,10 +11,31 @@
   align-items: center;
   border: 3px solid black;
   margin-top: 10px;
+  text-align: center;
 }
 
 .home {
   display: flex;
   align-items: center;
   flex-direction: column;
+  margin-top: -90px;
+}
+
+.home__optionsTop > h4 {
+  margin: 10px;
+  font-weight: 500;
+  width: 200px;
+}
+
+.home__optionsAlign > h4 {
+  font-weight: 500;
+  margin-top: -1px;
+}
+
+.home__optionsAlign {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin-left: 10px;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 8f5bee8..49efd74 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -14,8 +14,10 @@ const Home = () => {
           <h4>Select State</h4>
           <h4>Select District</h4>
           <h4>Pincode</h4>
-          <h4>Date </h4>
-          <DateRangeIcon />
+          <div className="home__optionsAlign">
+            <h4>Date</h4>
+            <DateRangeIcon />
+          </div>
         </div>
       </div>
     </div>

From a607680d967515a5151a8692ec2540c28b02f39b Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 12:16:55 +0530
Subject: [PATCH 07/35] NEW UI :hammer:

---
 src/components/Home/Home.css | 4 ++++
 src/components/Home/Home.js  | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index a74b5cb..0691a52 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -39,3 +39,7 @@
   padding: 10px;
   margin-left: 10px;
 }
+
+.home__optionBottom {
+  border: 2px solid black;
+}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 49efd74..c3678a9 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,6 +1,7 @@
 import React from "react";
 import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
+import { FormControl, MenuItem, Select } from "@material-ui/core";
 
 const Home = () => {
   return (
@@ -19,6 +20,14 @@ const Home = () => {
             <DateRangeIcon />
           </div>
         </div>
+        <div className="home__optionBottom">
+          <FormControl>
+            <Select variant="outlined">
+              <MenuItem value="States">States</MenuItem>
+              <MenuItem value="1">Delhi</MenuItem>
+            </Select>
+          </FormControl>
+        </div>
       </div>
     </div>
   );

From e38567299da9e1fb6158db272e3fb94ca20b738f Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 12:56:25 +0530
Subject: [PATCH 08/35] UI FIXES :hammer:

---
 src/components/Home/Home.css | 12 ++++++
 src/components/Home/Home.js  | 77 ++++++++++++++++++++++++++++++++----
 2 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 0691a52..e02533e 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -42,4 +42,16 @@
 
 .home__optionBottom {
   border: 2px solid black;
+  margin-top: 10px;
+}
+
+.home__optionBottom > div > .MuiFormControl-root {
+  margin-left: 20px;
+  width: 150px;
+  padding: 10px;
+}
+
+.home__selects {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index c3678a9..551ae20 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,9 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import ToggleOnIcon from "@material-ui/icons/ToggleOn";
+import ToggleOffIcon from "@material-ui/icons/ToggleOff";
+
+const useStyles = makeStyles((theme) => ({
+  textField: {
+    margin: 10,
+    width: 200,
+  },
+
+  text: {
+    marginTop: -10,
+  },
+}));
 
 const Home = () => {
+  const classes = useStyles();
+  const [pincodeMenu, setPincodeMenu] = useState(true);
+
   return (
     <div className="home">
       <div className="home__intro">
@@ -14,6 +32,18 @@ const Home = () => {
         <div className="home__optionsTop">
           <h4>Select State</h4>
           <h4>Select District</h4>
+          {pincodeMenu === true ? (
+            <ToggleOffIcon
+              fontSize="large"
+              onClick={() => setPincodeMenu(false)}
+            />
+          ) : (
+            <ToggleOnIcon
+              onClick={() => setPincodeMenu(true)}
+              fontSize="large"
+              style={{ color: "red" }}
+            />
+          )}
           <h4>Pincode</h4>
           <div className="home__optionsAlign">
             <h4>Date</h4>
@@ -21,12 +51,45 @@ const Home = () => {
           </div>
         </div>
         <div className="home__optionBottom">
-          <FormControl>
-            <Select variant="outlined">
-              <MenuItem value="States">States</MenuItem>
-              <MenuItem value="1">Delhi</MenuItem>
-            </Select>
-          </FormControl>
+          <div className="home__selects">
+            <FormControl>
+              <Select variant="outlined">
+                <MenuItem value="States">States</MenuItem>
+                <MenuItem value="1">Delhi</MenuItem>
+              </Select>
+            </FormControl>
+            {pincodeMenu === true ? (
+              <FormControl>
+                <Select variant="outlined">
+                  <MenuItem value="States">States</MenuItem>
+                  <MenuItem value="1">Delhi</MenuItem>
+                </Select>
+              </FormControl>
+            ) : (
+              <div>
+                <TextField
+                  id="outlined-number"
+                  margin="normal"
+                  label="Pin Code"
+                  type="number"
+                  variant="outlined"
+                  InputProps={{
+                    className: classes.text,
+                  }}
+                />
+              </div>
+            )}
+
+            <TextField
+              id="date"
+              type="date"
+              defaultValue="2017-05-24"
+              className={classes.textField}
+              InputLabelProps={{
+                shrink: true,
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>

From 6944cb8c6a86303c972baa878180716ed97b1f92 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 13:56:52 +0530
Subject: [PATCH 09/35] NEW UI :hammer:

---
 src/components/Home/Home.css |  1 +
 src/components/Home/Home.js  | 84 +++++++++++++++++++++++++++++++++---
 2 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index e02533e..4e86b08 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -54,4 +54,5 @@
 .home__selects {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 551ae20..074e930 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
@@ -21,6 +21,60 @@ const useStyles = makeStyles((theme) => ({
 const Home = () => {
   const classes = useStyles();
   const [pincodeMenu, setPincodeMenu] = useState(true);
+  const [state, setState] = useState([]);
+  const [stateCode, setStateCode] = useState("States");
+  const [districts, setDistricts] = useState([]);
+  const [districtCode, setDistrictCode] = useState(
+    "PLEASE SELECT A STATE FIRST!!!"
+  );
+  const [formatedDate, setFormatedDate] = useState("");
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  useEffect(() => {
+    fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
+      .then((res) => res.json())
+      .then((data) => {
+        setState(data.states);
+      });
+  }, [setState, formatedDate]);
+
+  const handleDateChange = (date) => {
+    setSelectedDate(date);
+  };
+
+  const onStateChange = async (e) => {
+    const stateCode = e.target.value;
+
+    console.log(stateCode);
+
+    const url =
+      stateCode === "States"
+        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/9"
+        : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
+
+    await fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setStateCode(stateCode);
+        setDistricts(data.districts);
+      });
+  };
+
+  const onDistrictChange = async (e) => {
+    const districtCode = e.target.value;
+
+    const url =
+      districtCode === "PLEASE SELECT A STATE FIRST!!!"
+        ? null
+        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=03-06-2021`;
+
+    await fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setDistrictCode(districtCode);
+        console.log(data);
+      });
+  };
 
   return (
     <div className="home">
@@ -53,16 +107,31 @@ const Home = () => {
         <div className="home__optionBottom">
           <div className="home__selects">
             <FormControl>
-              <Select variant="outlined">
+              <Select
+                variant="outlined"
+                value={stateCode}
+                onChange={onStateChange}
+              >
                 <MenuItem value="States">States</MenuItem>
-                <MenuItem value="1">Delhi</MenuItem>
+                {state?.map((stateData) => (
+                  <MenuItem value={stateData?.state_id}>
+                    {stateData?.state_name}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
             {pincodeMenu === true ? (
               <FormControl>
-                <Select variant="outlined">
-                  <MenuItem value="States">States</MenuItem>
-                  <MenuItem value="1">Delhi</MenuItem>
+                <Select
+                  variant="outlined"
+                  value={districtCode}
+                  onChange={onDistrictChange}
+                >
+                  {districts?.map((districtData) => (
+                    <MenuItem value={districtData?.district_id}>
+                      {districtData?.district_name}
+                    </MenuItem>
+                  ))}
                 </Select>
               </FormControl>
             ) : (
@@ -83,7 +152,8 @@ const Home = () => {
             <TextField
               id="date"
               type="date"
-              defaultValue="2017-05-24"
+              defaultValue={selectedDate}
+              onChange={handleDateChange}
               className={classes.textField}
               InputLabelProps={{
                 shrink: true,

From 0a848d0af90359f357b320269f41782a57dc0d8c Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 14:00:27 +0530
Subject: [PATCH 10/35] NEW UI :hammer:

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 074e930..5c12831 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -27,7 +27,7 @@ const Home = () => {
   const [districtCode, setDistrictCode] = useState(
     "PLEASE SELECT A STATE FIRST!!!"
   );
-  const [formatedDate, setFormatedDate] = useState("");
+  const [formatedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
 
   useEffect(() => {

From 4922a0fb134925ac11ac30cf5ce97bd64622036c Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 14:46:31 +0530
Subject: [PATCH 11/35] fixed ui :fire:

---
 src/components/Home/Home.css | 10 ++--
 src/components/Home/Home.js  | 92 +++++++++++++++++++++++++++++-------
 2 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 4e86b08..5775724 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -1,9 +1,13 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
+
 .home__intro > h2 {
   margin-top: 50px;
   font-weight: 400;
-  border: 5px solid black;
   padding: 10px;
-  font-size: 25px;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-family: "Nunito", sans-serif;
+  font-size: 35px;
 }
 
 .home__optionsTop {
@@ -47,7 +51,7 @@
 
 .home__optionBottom > div > .MuiFormControl-root {
   margin-left: 20px;
-  width: 150px;
+  width: 200px;
   padding: 10px;
 }
 
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 5c12831..6e28518 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -6,6 +6,13 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import ToggleOnIcon from "@material-ui/icons/ToggleOn";
 import ToggleOffIcon from "@material-ui/icons/ToggleOff";
+import {
+  KeyboardDatePicker,
+  MuiPickersUtilsProvider,
+} from "@material-ui/pickers";
+import "date-fns";
+import DateFnsUtils from "@date-io/date-fns";
+import SearchIcon from "@material-ui/icons/Search";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
@@ -27,16 +34,33 @@ const Home = () => {
   const [districtCode, setDistrictCode] = useState(
     "PLEASE SELECT A STATE FIRST!!!"
   );
-  const [formatedDate] = useState("");
+  const [pin, setPin] = useState("");
+  const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
 
+  const GetFormattedDate = () => {
+    var month = selectedDate.getMonth() + 1;
+    var day = selectedDate.getDate();
+    var year = selectedDate.getFullYear();
+    var finalDate = day + "-" + month + "-" + year;
+
+    setFormattedDate(finalDate);
+  };
+
+  console.log(formattedDate);
+
+  console.log(pin);
+
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
         setState(data.states);
       });
-  }, [setState, formatedDate]);
+
+    GetFormattedDate();
+    // eslint-disable-next-line
+  }, [setState, selectedDate, formattedDate]);
 
   const handleDateChange = (date) => {
     setSelectedDate(date);
@@ -45,11 +69,13 @@ const Home = () => {
   const onStateChange = async (e) => {
     const stateCode = e.target.value;
 
+    setDistricts([]);
+
     console.log(stateCode);
 
     const url =
       stateCode === "States"
-        ? "https://cdn-api.co-vin.in/api/v2/admin/location/districts/9"
+        ? null
         : `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateCode}`;
 
     await fetch(url)
@@ -76,6 +102,18 @@ const Home = () => {
       });
   };
 
+  const fetchDataUsingPincode = () => {
+    if (pin.length <= 6) {
+      alert("Please enter correct pincode");
+    } else {
+      fetch(
+        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=31-05-2021`
+      )
+        .then((res) => res.json())
+        .then((data) => console.log(data));
+    }
+  };
+
   return (
     <div className="home">
       <div className="home__intro">
@@ -86,19 +124,21 @@ const Home = () => {
         <div className="home__optionsTop">
           <h4>Select State</h4>
           <h4>Select District</h4>
+
+          <h4>Pincode</h4>
           {pincodeMenu === true ? (
             <ToggleOffIcon
               fontSize="large"
               onClick={() => setPincodeMenu(false)}
+              style={{ marginLeft: -70 }}
             />
           ) : (
             <ToggleOnIcon
               onClick={() => setPincodeMenu(true)}
               fontSize="large"
-              style={{ color: "red" }}
+              style={{ color: "red", marginLeft: -70 }}
             />
           )}
-          <h4>Pincode</h4>
           <div className="home__optionsAlign">
             <h4>Date</h4>
             <DateRangeIcon />
@@ -127,6 +167,9 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
+                  {districts.length === 0 ? (
+                    <MenuItem disabled={true}>Select a State First</MenuItem>
+                  ) : null}
                   {districts?.map((districtData) => (
                     <MenuItem value={districtData?.district_id}>
                       {districtData?.district_name}
@@ -135,7 +178,7 @@ const Home = () => {
                 </Select>
               </FormControl>
             ) : (
-              <div>
+              <div style={{ display: "flex", alignItems: "center" }}>
                 <TextField
                   id="outlined-number"
                   margin="normal"
@@ -145,20 +188,37 @@ const Home = () => {
                   InputProps={{
                     className: classes.text,
                   }}
+                  value={pin}
+                  onChange={(e) => setPin(e.target.value)}
+                />
+                <SearchIcon
+                  onClick={fetchDataUsingPincode}
+                  style={{
+                    margin: 10,
+                    background: "#347edd",
+                    color: "white",
+                    padding: 5,
+                    cursor: "pointer",
+                    width: 30,
+                    height: 43,
+                    marginBottom: 12,
+                    borderRadius: "2px",
+                  }}
+                  fontSize="medium"
                 />
               </div>
             )}
 
-            <TextField
-              id="date"
-              type="date"
-              defaultValue={selectedDate}
-              onChange={handleDateChange}
-              className={classes.textField}
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
+            <MuiPickersUtilsProvider utils={DateFnsUtils}>
+              <KeyboardDatePicker
+                margin="normal"
+                id="date-picker-dialog"
+                format="dd-MM-yyyy"
+                value={selectedDate}
+                onChange={handleDateChange}
+                InputProps={{ className: classes.input }}
+              />
+            </MuiPickersUtilsProvider>
           </div>
         </div>
       </div>

From f83d5ad37512f8c25a89c1727c449e8751de1913 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 15:32:51 +0530
Subject: [PATCH 12/35] fixed ui :fire:

---
 src/components/Home/Home.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 6e28518..a5073e1 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -92,7 +92,7 @@ const Home = () => {
     const url =
       districtCode === "PLEASE SELECT A STATE FIRST!!!"
         ? null
-        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=03-06-2021`;
+        : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}`;
 
     await fetch(url)
       .then((res) => res.json())
@@ -107,7 +107,7 @@ const Home = () => {
       alert("Please enter correct pincode");
     } else {
       fetch(
-        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=31-05-2021`
+        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
       )
         .then((res) => res.json())
         .then((data) => console.log(data));
@@ -167,7 +167,7 @@ const Home = () => {
                   value={districtCode}
                   onChange={onDistrictChange}
                 >
-                  {districts.length === 0 ? (
+                  {districts?.length === 0 ? (
                     <MenuItem disabled={true}>Select a State First</MenuItem>
                   ) : null}
                   {districts?.map((districtData) => (

From 509cfccdef0d167686edfb4679e8f8e26f6100eb Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 15:33:05 +0530
Subject: [PATCH 13/35] fixed ui :fire:

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index a5073e1..55fd0d8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -103,7 +103,7 @@ const Home = () => {
   };
 
   const fetchDataUsingPincode = () => {
-    if (pin.length <= 6) {
+    if (pin.length >= 6) {
       alert("Please enter correct pincode");
     } else {
       fetch(

From d24a189d3ebc228078de7d398794c60b77616c68 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sat, 8 May 2021 16:28:01 +0530
Subject: [PATCH 14/35] fixed ui :fire:

---
 src/components/Home/Home.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 55fd0d8..d225882 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -108,9 +108,8 @@ const Home = () => {
     } else {
       fetch(
         `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
-      )
-        .then((res) => res.json())
-        .then((data) => console.log(data));
+      ).then((res) => res.json());
+      // .then((data) => console.log(data));
     }
   };
 

From bcad99a8aeb96d18d8f9eb79fd7951e6e795e0c3 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 14 May 2021 18:34:13 +0530
Subject: [PATCH 15/35] Added About Page

---
 src/App.js                       |  5 ++++
 src/components/About/About.css   | 44 ++++++++++++++++++++++++++++++++
 src/components/About/About.js    | 19 ++++++++++++++
 src/components/Header/Header.css |  1 +
 src/components/Header/Header.js  |  4 ++-
 src/components/Home/Home.js      |  3 ++-
 src/components/Main.js           |  2 +-
 7 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 src/components/About/About.css
 create mode 100644 src/components/About/About.js

diff --git a/src/App.js b/src/App.js
index 1613683..96db108 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,8 +2,10 @@ import React from "react";
 import "./App.css";
 import Main from "./components/Main";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
 import Home from "./components/Home/Home";
 import Header from "./components/Header/Header";
+import About from "./components/About/About";
 
 const App = () => {
   return (
@@ -17,6 +19,9 @@ const App = () => {
           <Route path="/vaccines" exact={true}>
             <Home />
           </Route>
+          <Route path="/about" exact={true}>
+            <About />
+          </Route>
         </Switch>
       </div>
     </Router>
diff --git a/src/components/About/About.css b/src/components/About/About.css
new file mode 100644
index 0000000..d174e37
--- /dev/null
+++ b/src/components/About/About.css
@@ -0,0 +1,44 @@
+.about-container {
+    max-width: 1100px;
+    margin: auto;
+    overflow: hidden;
+    padding: 0 2rem;
+    font-family: "Fira Code Medium", "monospace";
+}
+
+.about-head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.about-head p{
+   font-weight: bold;
+    font-size: large;
+}
+
+h4{
+    color: #333333;
+    text-transform: capitalize;
+}
+
+@media screen and (max-width: 500px) {
+    .about-container {
+        width: 350px;
+    }
+
+    .about-head p{
+        font-weight: bold;
+        font-size: 13px;
+    }
+
+    .about-head h1{
+        font-weight: bold;
+        font-size: 20px;
+    }
+
+    h4{
+        font-size: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/About/About.js b/src/components/About/About.js
new file mode 100644
index 0000000..9e82901
--- /dev/null
+++ b/src/components/About/About.js
@@ -0,0 +1,19 @@
+import "./About.css"
+
+const About = () => {
+    return (
+        <>
+            <div className="about-container">
+                <div className="about-head">
+                    <h1>About this App</h1>
+                    <p>Version: 1.0.3</p>
+                </div>
+                <hr/>
+                <br/>
+                <h4>App to checkout the latest COVID19 Vaccination Slots Across India🎨</h4>
+            </div>
+        </>
+    )
+}
+
+export default About
\ No newline at end of file
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 52c38a8..e103be1 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -9,6 +9,7 @@
   justify-content: space-between;
   padding: 10px;
   width: 100%;
+  font-family: "Fira Code Medium", "monospace";
 }
 .header__right {
   display: flex;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index f0dd9ec..8f5758d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -17,7 +17,9 @@ const Header = () => {
       <div className="header__rightNav">
         <div className="header__right">
           <h3>Contribute</h3>
-          <h3>About</h3>
+          <Link to="/about" style={{ textDecoration: "none", color: "black", fontSize: "19px" }}>
+              <p>About</p>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index d225882..444600a 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "./Home.css";
 import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
@@ -14,6 +13,8 @@ import "date-fns";
 import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
 
+import "./Home.css";
+
 const useStyles = makeStyles((theme) => ({
   textField: {
     margin: 10,
diff --git a/src/components/Main.js b/src/components/Main.js
index 1eb0f64..52c20ab 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -15,7 +15,7 @@ const Test = () => {
           style={{ textDecorationLine: "none", color: "black" }}
           to="/vaccines"
         >
-          <h3 className="test__homeText">Vaccine Availablity</h3>
+          <h3 className="test__homeText">Vaccine Availability</h3>
         </Link>
       </div>
     </div>

From 75f6643e60a6f61704bb2ffb3c0cb27bd0594f14 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 14 May 2021 19:26:03 +0530
Subject: [PATCH 16/35] Added non responsive vaccine card.

---
 src/components/Home/Home.js                   |  4 +
 .../SingleVaccineData/VaccineDataSingle.css   | 87 ++++++++++++-------
 .../SingleVaccineData/VaccineDataSingle.js    | 27 +++---
 3 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 444600a..5af5ba0 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -14,6 +14,7 @@ import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
 
 import "./Home.css";
+import VaccineDataMain from "../VaccineData/VaccineDataMain";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
@@ -38,6 +39,7 @@ const Home = () => {
   const [pin, setPin] = useState("");
   const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
+  const [vaccineData, setVaccineData] = useState([]);
 
   const GetFormattedDate = () => {
     var month = selectedDate.getMonth() + 1;
@@ -99,6 +101,7 @@ const Home = () => {
       .then((res) => res.json())
       .then((data) => {
         setDistrictCode(districtCode);
+        setVaccineData(data.sessions);
         console.log(data);
       });
   };
@@ -222,6 +225,7 @@ const Home = () => {
           </div>
         </div>
       </div>
+      <VaccineDataMain vaccineData={vaccineData}/>
     </div>
   );
 };
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index 05ca43d..75dd4ed 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,21 +1,21 @@
 .wrapper {
     display: flex;
     background-color: #333333;
-    height: 27vh
+    height: 32vh
 }
 
 .wrapper > * {
-  padding: 20px;
+    padding: 20px;
 }
 
 .paper-left {
-  width: 50%;
+    width: 50%;
 }
 
-.paper-left h1 {
-  color: whitesmoke;
-  text-transform: uppercase;
-  font-family: monospace;
+.paper-left h1{
+    color: whitesmoke;
+    text-transform: uppercase;
+    font-family: monospace;
 }
 
 .paper-left_vaccine_head{
@@ -48,44 +48,45 @@
     margin-top: 10px;
 }
 
-.paper-left .paper-left_content h3 {
-  color: #bb86fc;
-  font-weight: bold;
-  text-transform: capitalize;
+
+.paper-left .paper-left_content h3{
+    color: #BB86FC;
+    font-weight: bold;
+    text-transform: capitalize;
 }
 
-.paper-left .paper-left_content p {
-  color: #f48fb1;
-  margin-top: 5px;
-  text-transform: capitalize;
-  font-family: monospace;
+.paper-left .paper-left_content p{
+    color: #F48FB1;
+    margin-top: 5px;
+    text-transform: capitalize;
+    font-family: monospace;
 }
 
 .paper-left .paper-left_time {
-  display: flex;
-  justify-content: space-evenly;
-  margin-top: 10px;
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 10px;
 }
 
-.paper-left .paper-left_time .time {
-  padding: 10px;
-  border-radius: 7px;
-  font-weight: bold;
+.paper-left .paper-left_time .time{
+    padding: 10px;
+    border-radius: 7px;
+    font-weight: bold;
 }
 
-.paper-left .paper-left_time .open-time {
-  background-color: #009e60;
-  font-family: monospace;
+.paper-left .paper-left_time .open-time{
+    background-color: #009E60;
+    font-family: monospace;
 }
 
-.paper-left .paper-left_time .close-time {
-  background-color: rgb(222, 49, 99);
-  color: white;
-  font-family: monospace;
+.paper-left .paper-left_time .close-time{
+    background-color: rgb(222,49,99);
+    color: white;
+    font-family: monospace;
 }
 
 .paper-right {
-  width: 50%;
+    width: 50%;
 }
 
 .paper-right_Badges{
@@ -160,6 +161,18 @@
 
 
 /*Media Queries*/
+@media screen and (max-width: 1024px){
+    .wrapper {
+        height: 35vh;
+    }
+}
+
+@media screen and (max-width: 850px){
+    .wrapper {
+        height: 40vh;
+    }
+}
+
 @media screen and (max-width: 500px) {
     .wrapper {
         height: 70vh;
@@ -266,3 +279,15 @@
         text-align: center;
     }
 }
+
+@media screen and (max-width: 400px){
+    .wrapper {
+        height: 82vh;
+    }
+}
+
+@media screen and (max-width: 360px){
+    .wrapper {
+        height: 100vh;
+    }
+}
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 7cc826c..4ff7095 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,4 +1,3 @@
-
 import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Badge from '@material-ui/core/Badge';
@@ -6,16 +5,17 @@ import Badge from '@material-ui/core/Badge';
 import HealingIcon from '@material-ui/icons/Healing';
 import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
 
-import "./VaccineDataSingle.css";
+import "./VaccineDataSingle.css"
 
 const useStyles = makeStyles((theme) => ({
-  paperMainDiv: {
-    width: "100%",
-  },
+    paperMainDiv:{
+        width: "100%"
+    },
 }));
 
-const VaccineDataSingle = (vaccine) => {
-  const classes = useStyles();
+const VaccineDataSingle = (vaccine)=> {
+    const classes = useStyles();
+
     return(
         <div className={classes.paperMainDiv}>
             <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
@@ -60,7 +60,7 @@ const VaccineDataSingle = (vaccine) => {
                     </div>
                     <div className="paper-right_age">
                         <div className="age_text">
-                             <h3>Minimum Age</h3>
+                            <h3>Minimum Age</h3>
                         </div>
                         <div className="age_content">
                             <p>{vaccine.min_age_limit} years</p>
@@ -68,7 +68,7 @@ const VaccineDataSingle = (vaccine) => {
                     </div>
                     <div className="paper-right_age">
                         <div className="age_text">
-                             <h3>Minimum Fare(₹)</h3>
+                            <h3>Minimum Fare(₹)</h3>
                         </div>
                         <div className="age_content">
                             <p>{vaccine.fee_type} </p>
@@ -81,10 +81,7 @@ const VaccineDataSingle = (vaccine) => {
                 </div>
             </Paper>
         </div>
-        <div className="paper-right"></div>
-      </Paper>
-    </div>
-  );
-};
+    )
+}
 
-export default VaccineDataSingle;
+export default VaccineDataSingle
\ No newline at end of file

From 6b49f00d06ec3a1017d32d3eb63bb8986bad3063 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 14 May 2021 20:09:35 +0530
Subject: [PATCH 17/35] Added GH Link

---
 src/components/Header/Header.css | 5 +++++
 src/components/Header/Header.js  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index e103be1..633791b 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -23,6 +23,11 @@
   cursor: pointer;
 }
 
+.header__right > h3 a {
+  text-decoration: none;
+  color: black;
+}
+
 @media screen and (max-width: 800px) {
   .header__right > h3 {
     font-weight: 400;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 8f5758d..47794b2 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -16,7 +16,7 @@ const Header = () => {
       </div>
       <div className="header__rightNav">
         <div className="header__right">
-          <h3>Contribute</h3>
+          <h3><a href="https://github.com/stephin007/Cowin-Vaccine-Availablity-Checker">Contribute</a></h3>
           <Link to="/about" style={{ textDecoration: "none", color: "black", fontSize: "19px" }}>
               <p>About</p>
           </Link>

From 4fb961afc38bda6f99b43a2f45c6a3a12e9f3ec9 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 18:22:02 +0530
Subject: [PATCH 18/35] Revamped the new UI

---
 README.md                    |   7 +-
 src/components/Home/Home.css | 208 +++++++++++++++++++++++++++++------
 src/components/Home/Home.js  | 181 +++++++++++++++---------------
 3 files changed, 270 insertions(+), 126 deletions(-)

diff --git a/README.md b/README.md
index b7b346b..4e22227 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # CoWIN Vaccination Slots Checking App.
---- 
+
+---
 
 > TechStack - React JS, Material UI
 
@@ -7,8 +8,6 @@ _MORE INFO YET TO BE ADDED... STAY TUNED_
 
 # DON'T JUST CLONE, PLEASE LEAVE A STAR, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT.
 
-
-
-
+> NEW UI COMING UP , CHECK THIS SITE TO SEE THE LATEST UPDATES : [https://cowinvaccinetracker.stephinreji.me/](https://cowinvaccinetracker.stephinreji.me/)
 
 ### _NOTE:_ Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 5775724..1508510 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -2,61 +2,205 @@
 
 .home__intro > h2 {
   margin-top: 50px;
-  font-weight: 400;
   padding: 10px;
   text-transform: uppercase;
   font-weight: bold;
+  text-align: center;
   font-family: "Nunito", sans-serif;
   font-size: 35px;
 }
 
-.home__optionsTop {
+.home_selectionHeader {
   display: flex;
-  align-items: center;
-  border: 3px solid black;
-  margin-top: 10px;
-  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+  align-items: stretch;
+  margin-top: 15px;
 }
 
-.home {
+.home_selectionHeader h4 {
+  margin-bottom: 10px;
+  font-family: "Nunito", sans-serif !important;
+}
+
+.home_selectedHeaders {
   display: flex;
-  align-items: center;
-  flex-direction: column;
-  margin-top: -90px;
+  justify-content: space-between;
 }
 
-.home__optionsTop > h4 {
-  margin: 10px;
-  font-weight: 500;
-  width: 200px;
+.home_selectedHeaders .form-control {
+  min-width: 450px !important;
+  margin-top: 15px;
 }
 
-.home__optionsAlign > h4 {
-  font-weight: 500;
-  margin-top: -1px;
+.empty_error {
+  margin-top: 10px;
+  border-radius: 5px;
+  background-color: #5f235f;
+  color: whitesmoke;
+  padding: 10px 10px;
+  font-family: "Nunito", sans-serif !important;
 }
 
-.home__optionsAlign {
+.home_selectedPin {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  padding: 10px;
-  margin-left: 10px;
+  margin-top: 10px;
 }
 
-.home__optionBottom {
-  border: 2px solid black;
-  margin-top: 10px;
+.home_selectedPin .home_selectedpincontainer .textField {
+  width: 500px;
 }
 
-.home__optionBottom > div > .MuiFormControl-root {
-  margin-left: 20px;
-  width: 200px;
-  padding: 10px;
+.home_selectedPin .input {
+  width: 330px;
+  margin-bottom: -10px;
 }
 
-.home__selects {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+@media screen and (max-width: 1024px) {
+  .home {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    max-width: 925px;
+  }
+  .home__intro > h2 {
+    margin-top: 20px;
+    font-size: 25px;
+  }
+
+  .home_selectedHeaders {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .home_selectedHeaders .form-control {
+    min-width: 270px !important;
+    margin-top: 15px;
+  }
+
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 300px;
+  }
+
+  .home_selectedPin .input {
+    width: 300px;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 250px;
+  }
+
+  .home_selectedPin .input {
+    width: 200px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .home {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    width: 410px;
+  }
+  .home__intro > h2 {
+    margin-top: 20px;
+    font-size: 25px;
+  }
+
+  .home_selectedHeaders {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .home_selectedHeaders .form-control {
+    min-width: 40px !important;
+    margin-top: 15px;
+  }
+
+  .home_selectedPin {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    margin-top: 10px;
+  }
+
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 370px;
+  }
+
+  .home_selectedPin .input {
+    margin-top: 15px;
+    width: 410px;
+  }
 }
+
+@media screen and (max-width: 400px) {
+  .home {
+    width: 380px;
+  }
+
+  .home_selectedPin .home_selectedpincontainer .textField {
+    width: 340px;
+  }
+
+  .home_selectedPin .input {
+    width: 380px;
+  }
+}
+
+/*.home__optionsTop {*/
+/*  display: flex;*/
+/*  align-items: center;*/
+/*  border: 3px solid black;*/
+/*  margin-top: 10px;*/
+/*  text-align: center;*/
+/*}*/
+
+/*.home {*/
+/*  display: flex;*/
+/*  align-items: center;*/
+/*  flex-direction: column;*/
+/*  margin-top: -90px;*/
+/*}*/
+
+/*.home__optionsTop > h4 {*/
+/*  margin: 10px;*/
+/*  font-weight: 500;*/
+/*  width: 200px;*/
+/*}*/
+
+/*.home__optionsAlign > h4 {*/
+/*  font-weight: 500;*/
+/*  margin-top: -1px;*/
+/*}*/
+
+/*.home__optionsAlign {*/
+/*  display: flex;*/
+/*  align-items: center;*/
+/*  justify-content: center;*/
+/*  padding: 10px;*/
+/*  margin-left: 10px;*/
+/*}*/
+
+/*.home__optionBottom {*/
+/*  border: 2px solid black;*/
+/*  margin-top: 10px;*/
+/*}*/
+
+/*.home__optionBottom > div > .MuiFormControl-root {*/
+/*  margin-left: 20px;*/
+/*  width: 200px;*/
+/*  padding: 10px;*/
+/*}*/
+
+/*.home__selects {*/
+/*  display: flex;*/
+/*  justify-content: space-between;*/
+/*  align-items: center;*/
+/*}*/
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 5af5ba0..4279f30 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from "react";
-import DateRangeIcon from "@material-ui/icons/DateRange";
 import { FormControl, MenuItem, Select } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+
+import InputLabel from "@material-ui/core/InputLabel";
 import TextField from "@material-ui/core/TextField";
-import ToggleOnIcon from "@material-ui/icons/ToggleOn";
-import ToggleOffIcon from "@material-ui/icons/ToggleOff";
 import {
   KeyboardDatePicker,
   MuiPickersUtilsProvider,
@@ -12,24 +10,13 @@ import {
 import "date-fns";
 import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
+import Container from "@material-ui/core/Container";
 
 import "./Home.css";
 import VaccineDataMain from "../VaccineData/VaccineDataMain";
 
-const useStyles = makeStyles((theme) => ({
-  textField: {
-    margin: 10,
-    width: 200,
-  },
-
-  text: {
-    marginTop: -10,
-  },
-}));
-
 const Home = () => {
-  const classes = useStyles();
-  const [pincodeMenu, setPincodeMenu] = useState(true);
+  // const [pincodeMenu, setPincodeMenu] = useState(true);
   const [state, setState] = useState([]);
   const [stateCode, setStateCode] = useState("States");
   const [districts, setDistricts] = useState([]);
@@ -40,6 +27,13 @@ const Home = () => {
   const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [vaccineData, setVaccineData] = useState([]);
+  const [toSearchValue, setToSearchValue] = useState("");
+  const [toSearch] = useState([
+    "Find By District",
+    "Find By PinCode",
+    "Find By Pincode & Date(for next 7 days)",
+    "Find By District & Date(for next 7 days)",
+  ]);
 
   const GetFormattedDate = () => {
     var month = selectedDate.getMonth() + 1;
@@ -106,65 +100,68 @@ const Home = () => {
       });
   };
 
-  const fetchDataUsingPincode = () => {
-    if (pin.length >= 6) {
+  const fetchDataUsingCalendarByPin = () => {
+    if (pin.length !== 6) {
       alert("Please enter correct pincode");
     } else {
       fetch(
         `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
-      ).then((res) => res.json());
-      // .then((data) => console.log(data));
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+        });
     }
   };
 
   return (
-    <div className="home">
-      <div className="home__intro">
-        <h2>Vaccine Availablity</h2>
-      </div>
-
-      <div className="home__options">
-        <div className="home__optionsTop">
-          <h4>Select State</h4>
-          <h4>Select District</h4>
-
-          <h4>Pincode</h4>
-          {pincodeMenu === true ? (
-            <ToggleOffIcon
-              fontSize="large"
-              onClick={() => setPincodeMenu(false)}
-              style={{ marginLeft: -70 }}
-            />
-          ) : (
-            <ToggleOnIcon
-              onClick={() => setPincodeMenu(true)}
-              fontSize="large"
-              style={{ color: "red", marginLeft: -70 }}
-            />
-          )}
-          <div className="home__optionsAlign">
-            <h4>Date</h4>
-            <DateRangeIcon />
+    <>
+      <Container maxWidth="md">
+        <div className="home">
+          <div className="home__intro">
+            <h2>Vaccine Availablity</h2>
+            <hr />
           </div>
-        </div>
-        <div className="home__optionBottom">
-          <div className="home__selects">
+
+          <div className="home_selectionHeader">
+            <h4>Select a method to search for slots</h4>
             <FormControl>
+              <InputLabel id="select-outlined-label">
+                Search Criteria
+              </InputLabel>
               <Select
-                variant="outlined"
-                value={stateCode}
-                onChange={onStateChange}
+                variant="filled"
+                value={toSearchValue}
+                onChange={(e) => setToSearchValue(e.target.value)}
               >
-                <MenuItem value="States">States</MenuItem>
-                {state?.map((stateData) => (
-                  <MenuItem value={stateData?.state_id}>
-                    {stateData?.state_name}
-                  </MenuItem>
-                ))}
+                {toSearch.map((functionName, index) => {
+                  return (
+                    <MenuItem key={index} value={functionName}>
+                      {functionName}
+                    </MenuItem>
+                  );
+                })}
               </Select>
             </FormControl>
-            {pincodeMenu === true ? (
-              <FormControl>
+          </div>
+
+          {toSearchValue === "Find By District" ? (
+            <div className="home_selectedHeaders">
+              <FormControl className="form-control">
+                <Select
+                  variant="outlined"
+                  value={stateCode}
+                  onChange={onStateChange}
+                >
+                  <MenuItem value="States">Select a State</MenuItem>
+                  {state?.map((stateData) => (
+                    <MenuItem value={stateData?.state_id}>
+                      {stateData?.state_name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl className="form-control">
                 <Select
                   variant="outlined"
                   value={districtCode}
@@ -180,53 +177,57 @@ const Home = () => {
                   ))}
                 </Select>
               </FormControl>
-            ) : (
-              <div style={{ display: "flex", alignItems: "center" }}>
+            </div>
+          ) : null}
+
+          {toSearchValue === "" && (
+            <h3 className="empty_error">Please Select an Option</h3>
+          )}
+
+          {toSearchValue === "Find By Pincode & Date(for next 7 days)" ? (
+            <div className="home_selectedPin">
+              <div className="home_selectedpincontainer">
                 <TextField
                   id="outlined-number"
                   margin="normal"
                   label="Pin Code"
                   type="number"
                   variant="outlined"
-                  InputProps={{
-                    className: classes.text,
-                  }}
+                  className="textField"
                   value={pin}
                   onChange={(e) => setPin(e.target.value)}
                 />
                 <SearchIcon
-                  onClick={fetchDataUsingPincode}
+                  onClick={fetchDataUsingCalendarByPin}
                   style={{
-                    margin: 10,
-                    background: "#347edd",
-                    color: "white",
+                    background: "#3f51b5",
+                    color: "#fff",
                     padding: 5,
                     cursor: "pointer",
                     width: 30,
-                    height: 43,
-                    marginBottom: 12,
-                    borderRadius: "2px",
+                    height: 45,
+                    marginTop: 16,
+                    borderRadius: "0 5px 5px 0",
                   }}
                   fontSize="medium"
                 />
               </div>
-            )}
-
-            <MuiPickersUtilsProvider utils={DateFnsUtils}>
-              <KeyboardDatePicker
-                margin="normal"
-                id="date-picker-dialog"
-                format="dd-MM-yyyy"
-                value={selectedDate}
-                onChange={handleDateChange}
-                InputProps={{ className: classes.input }}
-              />
-            </MuiPickersUtilsProvider>
-          </div>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="input"
+                />
+              </MuiPickersUtilsProvider>
+            </div>
+          ) : null}
+          <VaccineDataMain vaccineData={vaccineData} />
         </div>
-      </div>
-      <VaccineDataMain vaccineData={vaccineData}/>
-    </div>
+      </Container>
+    </>
   );
 };
 

From 920eca2b585ae2f308abc57cb91f4098b48b2843 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 18:23:23 +0530
Subject: [PATCH 19/35] Removed unwanted CSS:hammer:

---
 src/components/Home/Home.css | 51 ------------------------------------
 1 file changed, 51 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 1508510..551724b 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -153,54 +153,3 @@
     width: 380px;
   }
 }
-
-/*.home__optionsTop {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  border: 3px solid black;*/
-/*  margin-top: 10px;*/
-/*  text-align: center;*/
-/*}*/
-
-/*.home {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  flex-direction: column;*/
-/*  margin-top: -90px;*/
-/*}*/
-
-/*.home__optionsTop > h4 {*/
-/*  margin: 10px;*/
-/*  font-weight: 500;*/
-/*  width: 200px;*/
-/*}*/
-
-/*.home__optionsAlign > h4 {*/
-/*  font-weight: 500;*/
-/*  margin-top: -1px;*/
-/*}*/
-
-/*.home__optionsAlign {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  justify-content: center;*/
-/*  padding: 10px;*/
-/*  margin-left: 10px;*/
-/*}*/
-
-/*.home__optionBottom {*/
-/*  border: 2px solid black;*/
-/*  margin-top: 10px;*/
-/*}*/
-
-/*.home__optionBottom > div > .MuiFormControl-root {*/
-/*  margin-left: 20px;*/
-/*  width: 200px;*/
-/*  padding: 10px;*/
-/*}*/
-
-/*.home__selects {*/
-/*  display: flex;*/
-/*  justify-content: space-between;*/
-/*  align-items: center;*/
-/*}*/

From 93cec63930eb4b30ace5218f0996adb351496881 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 19:08:29 +0530
Subject: [PATCH 20/35] Edited alerts

---
 src/components/Home/Home.js | 63 +++++++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 4279f30..7e2d44e 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -21,7 +21,7 @@ const Home = () => {
   const [stateCode, setStateCode] = useState("States");
   const [districts, setDistricts] = useState([]);
   const [districtCode, setDistrictCode] = useState(
-    "PLEASE SELECT A STATE FIRST!!!"
+    "PLEASE SELECT A STATE FIRST"
   );
   const [pin, setPin] = useState("");
   const [formattedDate, setFormattedDate] = useState("");
@@ -102,7 +102,7 @@ const Home = () => {
 
   const fetchDataUsingCalendarByPin = () => {
     if (pin.length !== 6) {
-      alert("Please enter correct pincode");
+      alert("A Pincode must be of 6 digits");
     } else {
       fetch(
         `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=${pin}&date=${formattedDate}`
@@ -114,6 +114,20 @@ const Home = () => {
     }
   };
 
+  const fetchDataUsingByPin = () => {
+    if (pin.length !== 6) {
+      alert("A Pincode must be of 6 digits");
+    } else {
+      fetch(
+        `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByPin?pincode=${pin}&date=${formattedDate}`
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+        });
+    }
+  };
+
   return (
     <>
       <Container maxWidth="md">
@@ -122,7 +136,6 @@ const Home = () => {
             <h2>Vaccine Availablity</h2>
             <hr />
           </div>
-
           <div className="home_selectionHeader">
             <h4>Select a method to search for slots</h4>
             <FormControl>
@@ -143,8 +156,8 @@ const Home = () => {
                 })}
               </Select>
             </FormControl>
+            {/* {toSearchValue} */}
           </div>
-
           {toSearchValue === "Find By District" ? (
             <div className="home_selectedHeaders">
               <FormControl className="form-control">
@@ -179,11 +192,9 @@ const Home = () => {
               </FormControl>
             </div>
           ) : null}
-
           {toSearchValue === "" && (
             <h3 className="empty_error">Please Select an Option</h3>
           )}
-
           {toSearchValue === "Find By Pincode & Date(for next 7 days)" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
@@ -224,6 +235,46 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
+          {toSearchValue === "Find By PinCode" ? (
+            <div className="home_selectedPin">
+              <div className="home_selectedpincontainer">
+                <TextField
+                  id="outlined-number"
+                  margin="normal"
+                  label="Pin Code"
+                  type="number"
+                  variant="outlined"
+                  className="textField"
+                  value={pin}
+                  onChange={(e) => setPin(e.target.value)}
+                />
+                <SearchIcon
+                  onClick={fetchDataUsingByPin}
+                  style={{
+                    background: "#3f51b5",
+                    color: "#fff",
+                    padding: 5,
+                    cursor: "pointer",
+                    width: 30,
+                    height: 45,
+                    marginTop: 16,
+                    borderRadius: "0 5px 5px 0",
+                  }}
+                  fontSize="medium"
+                />
+              </div>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="input"
+                />
+              </MuiPickersUtilsProvider>
+            </div>
+          ) : null}
           <VaccineDataMain vaccineData={vaccineData} />
         </div>
       </Container>

From 76503a95abd8b72e3cf5188b8599120df559a785 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 19:26:14 +0530
Subject: [PATCH 21/35] Added date for searchByDistrict

---
 src/components/Home/Home.css | 10 +++++++++-
 src/components/Home/Home.js  | 27 ++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index 551724b..5f7cf70 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -29,10 +29,14 @@
 }
 
 .home_selectedHeaders .form-control {
-  min-width: 450px !important;
+  min-width: 300px !important;
   margin-top: 15px;
 }
 
+.districtDateInput {
+  margin-top: 37px !important;
+}
+
 .empty_error {
   margin-top: 10px;
   border-radius: 5px;
@@ -76,6 +80,10 @@
     flex-direction: column;
   }
 
+  .districtDateInput {
+    margin-top: 20px !important;
+  }
+
   .home_selectedHeaders .form-control {
     min-width: 270px !important;
     margin-top: 15px;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 7e2d44e..869c6eb 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -30,9 +30,9 @@ const Home = () => {
   const [toSearchValue, setToSearchValue] = useState("");
   const [toSearch] = useState([
     "Find By District",
-    "Find By PinCode",
-    "Find By Pincode & Date(for next 7 days)",
-    "Find By District & Date(for next 7 days)",
+    "Find By PinCode & Date",
+    "Find By Pincode & Date(Slots for next 7 days)",
+    "Find By District & Date(Slots for next 7 days)",
   ]);
 
   const GetFormattedDate = () => {
@@ -83,11 +83,11 @@ const Home = () => {
       });
   };
 
-  const onDistrictChange = async (e) => {
+  const findByDistrict = async (e) => {
     const districtCode = e.target.value;
 
     const url =
-      districtCode === "PLEASE SELECT A STATE FIRST!!!"
+      districtCode === "PLEASE SELECT A STATE FIRST"
         ? null
         : `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=${districtCode}&date=${formattedDate}`;
 
@@ -156,7 +156,6 @@ const Home = () => {
                 })}
               </Select>
             </FormControl>
-            {/* {toSearchValue} */}
           </div>
           {toSearchValue === "Find By District" ? (
             <div className="home_selectedHeaders">
@@ -178,7 +177,7 @@ const Home = () => {
                 <Select
                   variant="outlined"
                   value={districtCode}
-                  onChange={onDistrictChange}
+                  onChange={findByDistrict}
                 >
                   {districts?.length === 0 ? (
                     <MenuItem disabled={true}>Select a State First</MenuItem>
@@ -190,12 +189,22 @@ const Home = () => {
                   ))}
                 </Select>
               </FormControl>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="districtDateInput"
+                />
+              </MuiPickersUtilsProvider>
             </div>
           ) : null}
           {toSearchValue === "" && (
             <h3 className="empty_error">Please Select an Option</h3>
           )}
-          {toSearchValue === "Find By Pincode & Date(for next 7 days)" ? (
+          {toSearchValue === "Find By Pincode & Date(Slots for next 7 days)" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
                 <TextField
@@ -235,7 +244,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
-          {toSearchValue === "Find By PinCode" ? (
+          {toSearchValue === "Find By PinCode & Date" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
                 <TextField

From b7056eef3cbeb855e48973a7d8729355ec3142f1 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 22 May 2021 20:50:38 +0530
Subject: [PATCH 22/35] edited vaccine count badge

---
 src/components/Home/Home.js                   |  29 +--
 .../SingleVaccineData/VaccineDataSingle.js    | 171 ++++++++++--------
 2 files changed, 111 insertions(+), 89 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 869c6eb..f09329a 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,8 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { FormControl, MenuItem, Select } from "@material-ui/core";
-
-import InputLabel from "@material-ui/core/InputLabel";
-import TextField from "@material-ui/core/TextField";
+import {
+  FormControl,
+  MenuItem,
+  Select,
+  InputLabel,
+  TextField,
+  Container,
+} from "@material-ui/core";
 import {
   KeyboardDatePicker,
   MuiPickersUtilsProvider,
@@ -10,13 +14,11 @@ import {
 import "date-fns";
 import DateFnsUtils from "@date-io/date-fns";
 import SearchIcon from "@material-ui/icons/Search";
-import Container from "@material-ui/core/Container";
 
 import "./Home.css";
 import VaccineDataMain from "../VaccineData/VaccineDataMain";
 
 const Home = () => {
-  // const [pincodeMenu, setPincodeMenu] = useState(true);
   const [state, setState] = useState([]);
   const [stateCode, setStateCode] = useState("States");
   const [districts, setDistricts] = useState([]);
@@ -42,19 +44,17 @@ const Home = () => {
     var finalDate = day + "-" + month + "-" + year;
 
     setFormattedDate(finalDate);
+    // setSelectedDate(finalDate);
   };
 
   console.log(formattedDate);
 
-  console.log(pin);
-
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
         setState(data.states);
       });
-
     GetFormattedDate();
     // eslint-disable-next-line
   }, [setState, selectedDate, formattedDate]);
@@ -157,6 +157,11 @@ const Home = () => {
               </Select>
             </FormControl>
           </div>
+
+          {toSearchValue === "" && (
+            <h3 className="empty_error">Please Select an Option</h3>
+          )}
+
           {toSearchValue === "Find By District" ? (
             <div className="home_selectedHeaders">
               <FormControl className="form-control">
@@ -201,9 +206,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
-          {toSearchValue === "" && (
-            <h3 className="empty_error">Please Select an Option</h3>
-          )}
+
           {toSearchValue === "Find By Pincode & Date(Slots for next 7 days)" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
@@ -244,6 +247,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
+
           {toSearchValue === "Find By PinCode & Date" ? (
             <div className="home_selectedPin">
               <div className="home_selectedpincontainer">
@@ -284,6 +288,7 @@ const Home = () => {
               </MuiPickersUtilsProvider>
             </div>
           ) : null}
+
           <VaccineDataMain vaccineData={vaccineData} />
         </div>
       </Container>
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 4ff7095..9bc7c8b 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,87 +1,104 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Badge from '@material-ui/core/Badge';
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import Badge from "@material-ui/core/Badge";
 
-import HealingIcon from '@material-ui/icons/Healing';
-import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
+import HealingIcon from "@material-ui/icons/Healing";
+import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded";
 
-import "./VaccineDataSingle.css"
+import "./VaccineDataSingle.css";
 
 const useStyles = makeStyles((theme) => ({
-    paperMainDiv:{
-        width: "100%"
-    },
+  paperMainDiv: {
+    width: "100%",
+  },
 }));
 
-const VaccineDataSingle = (vaccine)=> {
-    const classes = useStyles();
+const VaccineDataSingle = (vaccine) => {
+  const classes = useStyles();
 
-    return(
-        <div className={classes.paperMainDiv}>
-            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
-                <div className="paper-left">
-                    <div>
-                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
-                    </div>
-                    <hr/>
-                    <br/>
-                    <div className="paper-left_vaccine_head">
-                        <h3>Vaccine Name</h3>
-                        <p>{vaccine.vaccine}</p>
-                    </div>
+  return (
+    <div className={classes.paperMainDiv}>
+      <Paper
+        variant="outlined"
+        className="wrapper"
+        style={{ backgroundColor: "#333333" }}
+      >
+        <div className="paper-left">
+          <div>
+            <h1>
+              {vaccine.name}{" "}
+              <VerifiedUserRoundedIcon style={{ color: "#009E60" }} />
+            </h1>
+          </div>
+          <hr />
+          <br />
+          <div className="paper-left_vaccine_head">
+            <h3>Vaccine Name</h3>
+            <p>{vaccine.vaccine}</p>
+          </div>
 
-                    <div className="paper-left_content">
-                        <h3>address</h3>
-                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
-                    </div>
-                    <div className="paper-left_content">
-                        <h3>pincode</h3>
-                        <p>{vaccine.pincode}</p>
-                    </div>
-                    <div className="paper-left_time">
-                        <div className="open-time time">
-                            Opening Time: {vaccine.from}
-                        </div>
-                        <div className="close-time time">
-                            Closing Time: {vaccine.to}
-                        </div>
-                    </div>
-                </div>
-                <div className="paper-right">
-                    <div className="paper-right_Badges">
-                        <div className="paper-right_capacity">
-                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
-                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
-                            </Badge>
-                        </div>
-                        <div>
-                            <p><span>Date:</span>{vaccine.date}</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Age</h3>
-                        </div>
-                        <div className="age_content">
-                            <p>{vaccine.min_age_limit} years</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Fare(₹)</h3>
-                        </div>
-                        <div className="age_content">
-                            <p>{vaccine.fee_type} </p>
-                        </div>
-                    </div>
-                    <div className="paper-right_slots">
-                        <h3>Slots Available</h3>
-                        <p>{vaccine.slots.join(",")}</p>
-                    </div>
-                </div>
-            </Paper>
+          <div className="paper-left_content">
+            <h3>address</h3>
+            <p>
+              {vaccine.block_name}, {vaccine.district_name},{" "}
+              {vaccine.state_name}
+            </p>
+          </div>
+          <div className="paper-left_content">
+            <h3>pincode</h3>
+            <p>{vaccine.pincode}</p>
+          </div>
+          <div className="paper-left_time">
+            <div className="open-time time">Opening Time: {vaccine.from}</div>
+            <div className="close-time time">Closing Time: {vaccine.to}</div>
+          </div>
         </div>
-    )
-}
+        <div className="paper-right">
+          <div className="paper-right_Badges">
+            <div className="paper-right_capacity">
+              <Badge
+                color="secondary"
+                badgeContent={
+                  vaccine.available_capacity !== 0
+                    ? vaccine.available_capacity
+                    : "0"
+                }
+              >
+                <h5>Available Capacity</h5>{" "}
+                <HealingIcon className="healing_icon" />
+              </Badge>
+            </div>
+            <div>
+              <p>
+                <span>Date:</span>
+                {vaccine.date}
+              </p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Age</h3>
+            </div>
+            <div className="age_content">
+              <p>{vaccine.min_age_limit} years</p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Fare(₹)</h3>
+            </div>
+            <div className="age_content">
+              <p>{vaccine.fee_type} </p>
+            </div>
+          </div>
+          <div className="paper-right_slots">
+            <h3>Slots Available</h3>
+            <p>{vaccine.slots.join(",")}</p>
+          </div>
+        </div>
+      </Paper>
+    </div>
+  );
+};
 
-export default VaccineDataSingle
\ No newline at end of file
+export default VaccineDataSingle;

From 9a4f4f97630b53b45c7c7e8e40242e345b71ff14 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sun, 23 May 2021 23:16:48 +0530
Subject: [PATCH 23/35] Added Date in the select by districts

---
 src/components/Home/Home.js                   | 43 +++++++++++++------
 src/components/VaccineData/VaccineDataMain.js | 14 ++++--
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index f09329a..bdda6ea 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -44,7 +44,6 @@ const Home = () => {
     var finalDate = day + "-" + month + "-" + year;
 
     setFormattedDate(finalDate);
-    // setSelectedDate(finalDate);
   };
 
   console.log(formattedDate);
@@ -57,10 +56,12 @@ const Home = () => {
       });
     GetFormattedDate();
     // eslint-disable-next-line
-  }, [setState, selectedDate, formattedDate]);
+  }, [selectedDate, formattedDate]);
 
   const handleDateChange = (date) => {
     setSelectedDate(date);
+    setVaccineData([]);
+    setDistricts([]);
   };
 
   const onStateChange = async (e) => {
@@ -179,20 +180,36 @@ const Home = () => {
                 </Select>
               </FormControl>
               <FormControl className="form-control">
-                <Select
+                {/* <Select
                   variant="outlined"
                   value={districtCode}
                   onChange={findByDistrict}
-                >
-                  {districts?.length === 0 ? (
-                    <MenuItem disabled={true}>Select a State First</MenuItem>
-                  ) : null}
-                  {districts?.map((districtData) => (
-                    <MenuItem value={districtData?.district_id}>
-                      {districtData?.district_name}
-                    </MenuItem>
-                  ))}
-                </Select>
+                > */}
+                {districts?.length !== 0 ? (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      {districts?.map((districtData) => (
+                        <MenuItem value={districtData?.district_id}>
+                          {districtData?.district_name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </>
+                ) : (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      <MenuItem disabled={true}>Select a State First</MenuItem>
+                    </Select>
+                  </>
+                )}
               </FormControl>
               <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <KeyboardDatePicker
diff --git a/src/components/VaccineData/VaccineDataMain.js b/src/components/VaccineData/VaccineDataMain.js
index 172c859..ba89b54 100644
--- a/src/components/VaccineData/VaccineDataMain.js
+++ b/src/components/VaccineData/VaccineDataMain.js
@@ -3,10 +3,16 @@ import VaccineDataSingle from "./SingleVaccineData/VaccineDataSingle";
 const VaccineDataMain = ({ vaccineData }) => {
   return (
     <>
-      {vaccineData.map((vaccine) => {
-        const { center_id } = vaccine;
-        return <VaccineDataSingle key={center_id} {...vaccine} />;
-      })}
+      {vaccineData.length !== 0 ? (
+        <>
+          {vaccineData.map((vaccine) => {
+            const { center_id } = vaccine;
+            return <VaccineDataSingle key={center_id} {...vaccine} />;
+          })}
+        </>
+      ) : (
+        <p>No data found</p>
+      )}
     </>
   );
 };

From d512fef43e662b5965974504be2aff0c5e0fd1a8 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Sun, 23 May 2021 23:37:38 +0530
Subject: [PATCH 24/35] fixed null district :hammer

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index bdda6ea..16bd4c3 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -61,7 +61,7 @@ const Home = () => {
   const handleDateChange = (date) => {
     setSelectedDate(date);
     setVaccineData([]);
-    setDistricts([]);
+    setDistrictCode("");
   };
 
   const onStateChange = async (e) => {

From 9b8c65803ac2a75bf61dbbf74e566c348f21e29f Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Mon, 24 May 2021 00:06:03 +0530
Subject: [PATCH 25/35] emptied the array when searchvalues chnages

---
 src/components/Home/Home.js                   | 5 ++++-
 src/components/VaccineData/VaccineDataMain.js | 4 +---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index bdda6ea..ff71daf 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -146,7 +146,10 @@ const Home = () => {
               <Select
                 variant="filled"
                 value={toSearchValue}
-                onChange={(e) => setToSearchValue(e.target.value)}
+                onChange={(e) => {
+                  setToSearchValue(e.target.value);
+                  setVaccineData([]);
+                }}
               >
                 {toSearch.map((functionName, index) => {
                   return (
diff --git a/src/components/VaccineData/VaccineDataMain.js b/src/components/VaccineData/VaccineDataMain.js
index ba89b54..d363718 100644
--- a/src/components/VaccineData/VaccineDataMain.js
+++ b/src/components/VaccineData/VaccineDataMain.js
@@ -10,9 +10,7 @@ const VaccineDataMain = ({ vaccineData }) => {
             return <VaccineDataSingle key={center_id} {...vaccine} />;
           })}
         </>
-      ) : (
-        <p>No data found</p>
-      )}
+      ) : null}
     </>
   );
 };

From 3bb95eebf460009f17074ba0c0ced79cc7c1a99e Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Mon, 24 May 2021 00:19:18 +0530
Subject: [PATCH 26/35] added options for find districts and date for next 7
 days

---
 src/components/Home/Home.js | 60 ++++++++++++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index ff71daf..5bdb1df 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -183,11 +183,63 @@ const Home = () => {
                 </Select>
               </FormControl>
               <FormControl className="form-control">
-                {/* <Select
+                {districts?.length !== 0 ? (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      {districts?.map((districtData) => (
+                        <MenuItem value={districtData?.district_id}>
+                          {districtData?.district_name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </>
+                ) : (
+                  <>
+                    <Select
+                      variant="outlined"
+                      value={districtCode}
+                      onChange={findByDistrict}
+                    >
+                      <MenuItem disabled={true}>Select a State First</MenuItem>
+                    </Select>
+                  </>
+                )}
+              </FormControl>
+              <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                <KeyboardDatePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  format="dd-MM-yyyy"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="districtDateInput"
+                />
+              </MuiPickersUtilsProvider>
+            </div>
+          ) : null}
+
+          {toSearchValue ===
+          "Find By District & Date(Slots for next 7 days)" ? (
+            <div className="home_selectedHeaders">
+              <FormControl className="form-control">
+                <Select
                   variant="outlined"
-                  value={districtCode}
-                  onChange={findByDistrict}
-                > */}
+                  value={stateCode}
+                  onChange={onStateChange}
+                >
+                  <MenuItem value="States">Select a State</MenuItem>
+                  {state?.map((stateData) => (
+                    <MenuItem value={stateData?.state_id}>
+                      {stateData?.state_name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl className="form-control">
                 {districts?.length !== 0 ? (
                   <>
                     <Select

From 2d7607ff3bb1b3b3cdd33a86c56b2e91fd7fed73 Mon Sep 17 00:00:00 2001
From: himanshu <himanshujasuja1040@gmail.com>
Date: Mon, 24 May 2021 14:44:28 +0530
Subject: [PATCH 27/35] a

---
 .../SingleVaccineData/VaccineDataSingle.css   | 493 ++++++++++--------
 .../SingleVaccineData/VaccineDataSingle.js    | 180 +++----
 2 files changed, 349 insertions(+), 324 deletions(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index 75dd4ed..1760f0d 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,293 +1,328 @@
+@import url("https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&family=Ubuntu&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
+/* font-family: 'Raleway', sans-serif;
+font-family: 'Roboto', sans-serif;
+font-family: 'Ubuntu', sans-serif; */
+
 .wrapper {
-    display: flex;
-    background-color: #333333;
-    height: 32vh
+  display: flex;
+  background-color: #333333;
+  height: 32vh;
 }
 
 .wrapper > * {
-    padding: 20px;
+  padding: 20px;
 }
 
 .paper-left {
-    width: 50%;
+  width: 50%;
 }
 
-.paper-left h1{
-    color: whitesmoke;
-    text-transform: uppercase;
-    font-family: monospace;
+.paper-left h1 {
+  /* color: white; */
+  text-align: center;
+  color: black;
+  text-transform: uppercase;
+  font-family: "Ubuntu", sans-serif;
+  font-size: 18px;
+  letter-spacing: 1px;
+}
+.paper-left_vaccine_head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.paper-left_vaccine_head{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.paper-left_vaccine_head h3 {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #275efe;
+  font-family: 'Fira Code', monospace;
+  letter-spacing: 2px;
+}
+.paper-left_vaccine_head p {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: black;
+  /* background-color: lightblue; */
+  box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25),
+    inset 0 2px 1px 1px rgba(255, 255, 255, 0.9),
+    inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
+  font-family: monospace;
+  background-color: #fff;
+  border: 1px solid;
+  padding: 10px;
+  border-radius: 7px;
+  text-align: center;
 }
 
-.paper-left_vaccine_head h3{
-    text-transform: uppercase;
-    font-weight: bold;
-    color: white;
-    font-family: "Fira Code Medium", "monospace";
+.paper-left .paper-left_content {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 
-.paper-left_vaccine_head p{
-    text-transform: uppercase;
-    font-weight: bold;
-    color: black;
-    font-family: monospace;
-    background-color: #009E60;
-    padding: 10px;
-    border-radius: 7px;
-    text-align: center;
+.paper-left .paper-left_content h3 {
+  /* color: #BB86FC; */
+  color: #212121;
+  font-weight: bold;
+  text-transform: capitalize;
 }
 
-.paper-left .paper-left_content{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
+.paper-left .paper-left_content p {
+  /* color: #F48FB1; */
+  color: red;
+  /* color: black; */
+  margin-top: 5px;
+  text-transform: capitalize;
+  font-family: "Raleway", sans-serif;
+  font-size: 16px;
+  letter-spacing: 1px;
 }
 
+.paper-left .paper-left_time {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 5px;
+}
+.paper-left .paper-left_time .time:hover {
+  color: #002060;
+}
+.paper-left .paper-left_time .time {
+  padding: 10px;
+  border-radius: 7px;
+  font-weight: bold;
+}
 
-.paper-left .paper-left_content h3{
-    color: #BB86FC;
-    font-weight: bold;
-    text-transform: capitalize;
+.paper-left .paper-left_time .open-time {
+  /* background-color: rgb(20, 209, 20);
+    -moz-box-shadow:    inset 0 0 10px green;
+    -webkit-box-shadow: inset 0 0 10px green;
+    box-shadow:         inset 0 0 10px green; */
+  background-color: white;
+  color: black;
+  border: 1px solid;
+  box-shadow: inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black;
+  font-family: "Raleway", sans-serif;
 }
 
-.paper-left .paper-left_content p{
-    color: #F48FB1;
-    margin-top: 5px;
-    text-transform: capitalize;
-    font-family: monospace;
+.paper-left .paper-left_time .close-time {
+  /* background-color: rgb(231, 31, 125);
+    background-color: white; */
+  color: black;
+  background-color: white;
+  box-shadow: inset 2px 0px 10px 2px white, inset 0px 0px 4px 0px black;
+  border: 1px solid;
+  font-family: "Raleway", sans-serif;
 }
 
-.paper-left .paper-left_time {
-    display: flex;
-    justify-content: space-evenly;
-    margin-top: 10px;
+.paper-right {
+  width: 50%;
 }
 
-.paper-left .paper-left_time .time{
-    padding: 10px;
-    border-radius: 7px;
-    font-weight: bold;
+.paper-right_Badges {
+  display: flex;
+  justify-content: space-between;
 }
 
-.paper-left .paper-left_time .open-time{
-    background-color: #009E60;
-    font-family: monospace;
+.paper-right_Badges h5 {
+  margin-right: 10px;
+  /* color: rgb(241, 11, 11); */
+  color: #275efe;
+  font-family: "Roboto", sans-serif;
+  font-size: 20px;
 }
 
-.paper-left .paper-left_time .close-time{
-    background-color: rgb(222,49,99);
-    color: white;
-    font-family: monospace;
+.paper-right_Badges .healing_icon {
+  color: white;
 }
 
-.paper-right {
-    width: 50%;
+.paper-right_Badges p {
+  color: #275efe;
+  font-size: 15px;
 }
 
-.paper-right_Badges{
-    display: flex;
-    justify-content: space-between;
+.paper-right_Badges p span {
+  color: rgb(255, 255, 255);
+  color: black;
+  font-family: monospace;
+  font-size: 20px;
 }
 
-.paper-right_Badges h5{
-    margin-right: 10px;
-    color: aquamarine;
-    font-family: monospace;
-    font-size: 22px;
+.paper-right_age {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
 }
 
-.paper-right_Badges .healing_icon{
-    color: white;
+.paper-right_age .age_text h3 {
+  color: rgb(10, 192, 107);
+  color: black;
+  font-family: "Raleway", sans-serif;
+  font-size: 17px;
 }
 
-.paper-right_Badges p {
-    color: whitesmoke;
-    font-size: 15px;
+.paper-right_age .age_content p {
+  margin-bottom: 5px;
+  font-size: 19px;
+  font-weight: 600;
+  color: red;
 }
 
-.paper-right_Badges p span{
-    color: aquamarine;
-    font-family: monospace;
-    font-size: 20px;
+.paper-right_age .age_content {
+  height: 25px;
+  width: 75px;
+  padding: 5px;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.paper-right_age{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
+.paper-right_slots h3 {
+  text-align: center;
+  font-weight: 700;
+  color: #275efe;
+  margin: 5px;
 }
 
-.paper-right_age .age_text h3{
-    color: aquamarine;
-    font-family: monospace;
-    font-size: 20px;
+.paper-right_slots p {
+  color: rgb(100, 4, 4);
+  color: #374957;
+  font-size: 17px;
+  text-align: center;
 }
 
-.paper-right_age .age_content p{
-    margin-bottom: 5px;
-    font-size: 20px;
+/*Media Queries*/
+@media screen and (max-width: 1024px) {
+  .wrapper {
+    height: 35vh;
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .wrapper {
+    height: 40vh;
+  }
 }
 
-.paper-right_age .age_content{
-    background-color: rgb(222,49,99);
-    height: 25px;
-    width: 75px;
+@media screen and (max-width: 500px) {
+  .wrapper {
+    height: 70vh;
+    flex-direction: column;
+  }
+
+  .paper-left {
+    width: 90%;
+  }
+
+  .paper-left_vaccine_head {
+    flex-direction: column;
+  }
+
+  .paper-left_vaccine_head h3 {
+    font-size: 15px;
+    margin-bottom: 10px;
+  }
+
+  .paper-left_vaccine_head p {
     padding: 5px;
+    font-size: 15px;
+    border-radius: 7px;
+    text-align: center;
+  }
+
+  .paper-left p {
+    width: 100%;
+  }
+
+  .paper-left .paper-left_content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .paper-left .paper-left_time {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .paper-left .paper-left_time .time {
+    margin-top: 5px;
+  }
+
+  .paper-right {
+    width: 90%;
+  }
+
+  .paper-right_Badges h5 {
+    margin-top: 5px;
+    margin-right: 3px;
+    color: aquamarine;
+    font-weight: bold;
+    font-size: 11px;
+  }
+
+  .paper-right_Badges .healing_icon {
+    font-size: 20px;
+  }
+
+  .paper-right_Badges p {
+    margin-top: 5px;
+    color: whitesmoke;
+    font-size: 15px;
+  }
+
+  .paper-right_Badges p span {
+    font-size: 15px;
+  }
+
+  .paper-right_age {
+    margin-top: 3px;
+  }
+
+  .paper-right_age .age_text h3 {
+    font-size: 13px;
+  }
+
+  .paper-right_age .age_content {
+    /* background-color: rgb(222,49,99); */
+    background-color: red;
+    height: 15px;
+    width: 65px;
+    padding: 3px;
     border-radius: 3px;
     color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+  }
 
-.paper-right_slots h3{
+  .paper-right_age .age_content p {
+    margin-bottom: 1px;
+    font-size: 13px;
+  }
+
+  .paper-right_slots h3 {
     text-align: center;
     font-weight: 700;
-    color: #BB86FC;
-    margin: 5px;
-}
+    color: #bb86fc;
+    margin: 3px;
+  }
 
-.paper-right_slots p{
+  .paper-right_slots p {
     color: whitesmoke;
-    font-size: 17px;
+    font-size: 15px;
     text-align: center;
+  }
 }
 
-
-/*Media Queries*/
-@media screen and (max-width: 1024px){
-    .wrapper {
-        height: 35vh;
-    }
+@media screen and (max-width: 400px) {
+  .wrapper {
+    height: 82vh;
+  }
 }
 
-@media screen and (max-width: 850px){
-    .wrapper {
-        height: 40vh;
-    }
+@media screen and (max-width: 360px) {
+  .wrapper {
+    height: 100vh;
+  }
 }
-
-@media screen and (max-width: 500px) {
-    .wrapper {
-        height: 70vh;
-        flex-direction: column;
-    }
-
-    .paper-left {
-        width: 90%;
-    }
-
-    .paper-left_vaccine_head{
-        flex-direction: column;
-    }
-
-    .paper-left_vaccine_head h3{
-        font-size: 15px;
-        margin-bottom: 10px;
-    }
-
-    .paper-left_vaccine_head p{
-        padding: 5px;
-        font-size: 15px;
-        border-radius: 7px;
-        text-align: center;
-    }
-
-    .paper-left p {
-        width: 100%;
-    }
-
-    .paper-left .paper-left_content{
-        display: flex;
-        flex-direction: column;
-    }
-
-    .paper-left .paper-left_time {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .paper-left .paper-left_time .time{
-        margin-top: 5px;
-    }
-
-    .paper-right {
-        width: 90%;
-    }
-
-    .paper-right_Badges h5{
-        margin-top: 5px;
-        margin-right: 3px;
-        color: aquamarine;
-        font-weight: bold;
-        font-size: 11px;
-    }
-
-    .paper-right_Badges .healing_icon{
-        font-size: 20px;
-    }
-
-    .paper-right_Badges p {
-        margin-top: 5px;
-        color: whitesmoke;
-        font-size: 15px;
-    }
-
-    .paper-right_Badges p span{
-        font-size: 15px;
-    }
-
-    .paper-right_age{
-        margin-top: 3px;
-    }
-
-    .paper-right_age .age_text h3{
-        font-size: 13px;
-    }
-
-    .paper-right_age .age_content{
-        background-color: rgb(222,49,99);
-        height: 15px;
-        width: 65px;
-        padding: 3px;
-        border-radius: 3px;
-        color: white;
-    }
-
-    .paper-right_age .age_content p{
-        margin-bottom: 1px;
-        font-size: 13px;
-    }
-
-    .paper-right_slots h3{
-        text-align: center;
-        font-weight: 700;
-        color: #BB86FC;
-        margin: 3px;
-    }
-
-    .paper-right_slots p{
-        color: whitesmoke;
-        font-size: 15px;
-        text-align: center;
-    }
-}
-
-@media screen and (max-width: 400px){
-    .wrapper {
-        height: 82vh;
-    }
-}
-
-@media screen and (max-width: 360px){
-    .wrapper {
-        height: 100vh;
-    }
-}
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 9bc7c8b..3605709 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,104 +1,94 @@
-import { makeStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
-import Badge from "@material-ui/core/Badge";
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Badge from '@material-ui/core/Badge';
 
-import HealingIcon from "@material-ui/icons/Healing";
-import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded";
+import HealingIcon from '@material-ui/icons/Healing';
+import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
 
-import "./VaccineDataSingle.css";
+import "./VaccineDataSingle.css"
 
 const useStyles = makeStyles((theme) => ({
-  paperMainDiv: {
-    width: "100%",
-  },
+    paperMainDiv:{
+        width: "100%"
+    },
 }));
+const VaccineDataSingle = (vaccine)=> {
+    const classes = useStyles();
+    return(
+        <div className={classes.paperMainDiv}>
+            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#E5E7EB", margin:"10px 0px"}}>
+                <div className="paper-left">
+                    <div>
+                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
+                    </div>
+                    <hr/>
+                    <br/>
+                    <div className="paper-left_vaccine_head">
+                        <h3>Vaccine Name</h3>
+                        {vaccine.vaccine==="COVISHIELD"?(
+                            <p style={{backgroundColor:"skyblue",color:"white"}}>{vaccine.vaccine}</p>
+                        ):(
+                            <p style={{backgroundColor:"slateblue",color:"white"}}>{vaccine.vaccine}</p>
+                        )}
+                    </div>
 
-const VaccineDataSingle = (vaccine) => {
-  const classes = useStyles();
+                    <div className="paper-left_content">
+                        <h3>address</h3>
+                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
+                    </div>
+                    <div className="paper-left_content">
+                        <h3>pincode</h3>
+                        <p>{vaccine.pincode}</p>
+                    </div>
+                    <div className="paper-left_time">
+                        <div className="open-time time">
+                            Opening Time: {vaccine.from}
+                        </div>
+                        <div className="close-time time">
+                            Closing Time: {vaccine.to}
+                        </div>
+                    </div>
+                </div>
+                <div className="paper-right">
+                    <div className="paper-right_Badges">
+                        <div className="paper-right_capacity">
+                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
+                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
+                            </Badge>
+                        </div>
+                        <div>
+                            <p><span>Date:</span>{vaccine.date}</p>
+                        </div>
+                    </div>
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                            <h3>Minimum Age</h3>
+                        </div>
+                        <div className="age_content">
+                            <p>{vaccine.min_age_limit} years</p>
+                        </div>
+                    </div>
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                            <h3>Minimum Fare(₹)</h3>
+                        </div>
+                        <div className="age_content">
+                            {vaccine.fee_type==="Free"?(
+                                <p style={{color:"green"}}>{vaccine.fee_type} </p>
+                            ):(
+                                <p style={{color:"red"}}>{vaccine.fee_type} </p>
 
-  return (
-    <div className={classes.paperMainDiv}>
-      <Paper
-        variant="outlined"
-        className="wrapper"
-        style={{ backgroundColor: "#333333" }}
-      >
-        <div className="paper-left">
-          <div>
-            <h1>
-              {vaccine.name}{" "}
-              <VerifiedUserRoundedIcon style={{ color: "#009E60" }} />
-            </h1>
-          </div>
-          <hr />
-          <br />
-          <div className="paper-left_vaccine_head">
-            <h3>Vaccine Name</h3>
-            <p>{vaccine.vaccine}</p>
-          </div>
-
-          <div className="paper-left_content">
-            <h3>address</h3>
-            <p>
-              {vaccine.block_name}, {vaccine.district_name},{" "}
-              {vaccine.state_name}
-            </p>
-          </div>
-          <div className="paper-left_content">
-            <h3>pincode</h3>
-            <p>{vaccine.pincode}</p>
-          </div>
-          <div className="paper-left_time">
-            <div className="open-time time">Opening Time: {vaccine.from}</div>
-            <div className="close-time time">Closing Time: {vaccine.to}</div>
-          </div>
-        </div>
-        <div className="paper-right">
-          <div className="paper-right_Badges">
-            <div className="paper-right_capacity">
-              <Badge
-                color="secondary"
-                badgeContent={
-                  vaccine.available_capacity !== 0
-                    ? vaccine.available_capacity
-                    : "0"
-                }
-              >
-                <h5>Available Capacity</h5>{" "}
-                <HealingIcon className="healing_icon" />
-              </Badge>
-            </div>
-            <div>
-              <p>
-                <span>Date:</span>
-                {vaccine.date}
-              </p>
-            </div>
-          </div>
-          <div className="paper-right_age">
-            <div className="age_text">
-              <h3>Minimum Age</h3>
-            </div>
-            <div className="age_content">
-              <p>{vaccine.min_age_limit} years</p>
-            </div>
-          </div>
-          <div className="paper-right_age">
-            <div className="age_text">
-              <h3>Minimum Fare(₹)</h3>
-            </div>
-            <div className="age_content">
-              <p>{vaccine.fee_type} </p>
-            </div>
-          </div>
-          <div className="paper-right_slots">
-            <h3>Slots Available</h3>
-            <p>{vaccine.slots.join(",")}</p>
-          </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className="paper-right_slots">
+                        <h3>Slots Available</h3>
+                        <p>{vaccine.slots.join(",")}</p>
+                    </div>
+                </div>
+            </Paper>
         </div>
-      </Paper>
-    </div>
-  );
-};
+    )
+}
 
-export default VaccineDataSingle;
+export default VaccineDataSingle
\ No newline at end of file

From f814188ac59c8c6fb4190fbe5819614f194c7a3d Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Mon, 24 May 2021 23:13:00 +0530
Subject: [PATCH 28/35] fixed data fetching using pincode and date :hammer:

---
 src/components/Home/Home.js                   |  23 +++
 .../SingleVaccineData/VaccineDataSingle.js    | 190 ++++++++++--------
 2 files changed, 125 insertions(+), 88 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 0fdfc0f..3995793 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -111,6 +111,28 @@ const Home = () => {
         .then((res) => res.json())
         .then((data) => {
           console.log(data);
+          const arena = data?.centers?.map((res) => ({
+            name: res?.name,
+            vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine),
+            block_name: res?.block_name,
+            district_name: res?.district_name,
+            state_name: res?.state_name,
+            pincode: res?.pincode,
+            from: res?.from,
+            to: res?.to,
+            available_capacity: res?.sessions
+              ?.slice(0, 1)
+              .map((res) => res?.available_capacity),
+            date: res?.sessions?.slice(0, 1).map((res) => res?.date),
+            min_age_limit: res?.sessions
+              ?.slice(0, 1)
+              .map((res) => res?.min_age_limit),
+            fee_type: res?.fee_type,
+            slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
+          }));
+          console.log(arena);
+
+          setVaccineData(arena);
         });
     }
   };
@@ -125,6 +147,7 @@ const Home = () => {
         .then((res) => res.json())
         .then((data) => {
           console.log(data);
+          setVaccineData(data.sessions);
         });
     }
   };
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 3605709..17e7fa3 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,94 +1,108 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Badge from '@material-ui/core/Badge';
-
-import HealingIcon from '@material-ui/icons/Healing';
-import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
-
-import "./VaccineDataSingle.css"
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import Badge from "@material-ui/core/Badge";
+import HealingIcon from "@material-ui/icons/Healing";
+import VerifiedUserRoundedIcon from "@material-ui/icons/VerifiedUserRounded";
+import "./VaccineDataSingle.css";
 
 const useStyles = makeStyles((theme) => ({
-    paperMainDiv:{
-        width: "100%"
-    },
+  paperMainDiv: {
+    width: "100%",
+  },
 }));
-const VaccineDataSingle = (vaccine)=> {
-    const classes = useStyles();
-    return(
-        <div className={classes.paperMainDiv}>
-            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#E5E7EB", margin:"10px 0px"}}>
-                <div className="paper-left">
-                    <div>
-                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
-                    </div>
-                    <hr/>
-                    <br/>
-                    <div className="paper-left_vaccine_head">
-                        <h3>Vaccine Name</h3>
-                        {vaccine.vaccine==="COVISHIELD"?(
-                            <p style={{backgroundColor:"skyblue",color:"white"}}>{vaccine.vaccine}</p>
-                        ):(
-                            <p style={{backgroundColor:"slateblue",color:"white"}}>{vaccine.vaccine}</p>
-                        )}
-                    </div>
+const VaccineDataSingle = (vaccine) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.paperMainDiv}>
+      <Paper
+        variant="outlined"
+        className="wrapper"
+        style={{ backgroundColor: "#E5E7EB", margin: "10px 0px" }}
+      >
+        <div className="paper-left">
+          <div>
+            <h1>
+              {vaccine?.name}{" "}
+              <VerifiedUserRoundedIcon style={{ color: "#009E60" }} />
+            </h1>
+          </div>
+          <hr />
+          <br />
+          <div className="paper-left_vaccine_head">
+            <h3>Vaccine Name</h3>
+            {vaccine.vaccine === "COVISHIELD" ? (
+              <p style={{ backgroundColor: "skyblue", color: "white" }}>
+                {vaccine?.vaccine}
+              </p>
+            ) : (
+              <p style={{ backgroundColor: "slateblue", color: "white" }}>
+                {vaccine?.vaccine}
+              </p>
+            )}
+          </div>
 
-                    <div className="paper-left_content">
-                        <h3>address</h3>
-                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
-                    </div>
-                    <div className="paper-left_content">
-                        <h3>pincode</h3>
-                        <p>{vaccine.pincode}</p>
-                    </div>
-                    <div className="paper-left_time">
-                        <div className="open-time time">
-                            Opening Time: {vaccine.from}
-                        </div>
-                        <div className="close-time time">
-                            Closing Time: {vaccine.to}
-                        </div>
-                    </div>
-                </div>
-                <div className="paper-right">
-                    <div className="paper-right_Badges">
-                        <div className="paper-right_capacity">
-                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
-                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
-                            </Badge>
-                        </div>
-                        <div>
-                            <p><span>Date:</span>{vaccine.date}</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Age</h3>
-                        </div>
-                        <div className="age_content">
-                            <p>{vaccine.min_age_limit} years</p>
-                        </div>
-                    </div>
-                    <div className="paper-right_age">
-                        <div className="age_text">
-                            <h3>Minimum Fare(₹)</h3>
-                        </div>
-                        <div className="age_content">
-                            {vaccine.fee_type==="Free"?(
-                                <p style={{color:"green"}}>{vaccine.fee_type} </p>
-                            ):(
-                                <p style={{color:"red"}}>{vaccine.fee_type} </p>
-
-                            )}
-                        </div>
-                    </div>
-                    <div className="paper-right_slots">
-                        <h3>Slots Available</h3>
-                        <p>{vaccine.slots.join(",")}</p>
-                    </div>
-                </div>
-            </Paper>
+          <div className="paper-left_content">
+            <h3>address</h3>
+            <p>
+              {vaccine?.block_name}, {vaccine?.district_name},{" "}
+              {vaccine?.state_name}
+            </p>
+          </div>
+          <div className="paper-left_content">
+            <h3>pincode</h3>
+            <p>{vaccine?.pincode}</p>
+          </div>
+          <div className="paper-left_time">
+            <div className="open-time time">Opening Time: {vaccine.from}</div>
+            <div className="close-time time">Closing Time: {vaccine.to}</div>
+          </div>
+        </div>
+        <div className="paper-right">
+          <div className="paper-right_Badges">
+            <div className="paper-right_capacity">
+              <Badge
+                color="secondary"
+                badgeContent={vaccine?.available_capacity}
+              >
+                <h5>Available Capacity</h5>{" "}
+                <HealingIcon className="healing_icon" />
+              </Badge>
+            </div>
+            <div>
+              <p>
+                <span>Date:</span>
+                {vaccine?.date}
+              </p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Age</h3>
+            </div>
+            <div className="age_content">
+              <p>{vaccine?.min_age_limit} years</p>
+            </div>
+          </div>
+          <div className="paper-right_age">
+            <div className="age_text">
+              <h3>Minimum Fare(₹)</h3>
+            </div>
+            <div className="age_content">
+              {vaccine.fee_type === "Free" ? (
+                <p style={{ color: "green" }}>{vaccine?.fee_type} </p>
+              ) : (
+                <p style={{ color: "red" }}>{vaccine?.fee_type} </p>
+              )}
+            </div>
+          </div>
+          <div className="paper-right_slots">
+            <h3>Slots Available</h3>
+            <p>{vaccine?.slots?.join(",")}</p>
+          </div>
         </div>
-    )
-}
+      </Paper>
+    </div>
+  );
+};
 
-export default VaccineDataSingle
\ No newline at end of file
+export default VaccineDataSingle;

From fdb358510a5e6e0adacc0eee113cab80d9c15279 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Tue, 25 May 2021 01:04:54 +0530
Subject: [PATCH 29/35] checkingsignedCommits

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 0fdfc0f..89b6938 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -204,7 +204,7 @@ const Home = () => {
                       value={districtCode}
                       onChange={findByDistrict}
                     >
-                      <MenuItem disabled={true}>Select a State First</MenuItem>
+                      <MenuItem disabled={true}>Select a Statee First</MenuItem>
                     </Select>
                   </>
                 )}

From 414077d2d0ce507dd2c40fb3f60aa004cf67df05 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Tue, 25 May 2021 01:06:42 +0530
Subject: [PATCH 30/35] checkingsignedCommits

---
 src/components/Home/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 89b6938..0fdfc0f 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -204,7 +204,7 @@ const Home = () => {
                       value={districtCode}
                       onChange={findByDistrict}
                     >
-                      <MenuItem disabled={true}>Select a Statee First</MenuItem>
+                      <MenuItem disabled={true}>Select a State First</MenuItem>
                     </Select>
                   </>
                 )}

From e47a283129a14c7028c344ba9f6b2df687b2680c Mon Sep 17 00:00:00 2001
From: Justin Varghese <69856008+Justinnn07@users.noreply.github.com>
Date: Tue, 25 May 2021 08:21:25 +0530
Subject: [PATCH 31/35] changed "arena" to "pincodeData"

---
 src/components/Home/Home.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 3995793..e1dd9c8 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -111,7 +111,7 @@ const Home = () => {
         .then((res) => res.json())
         .then((data) => {
           console.log(data);
-          const arena = data?.centers?.map((res) => ({
+          const pincodeData = data?.centers?.map((res) => ({
             name: res?.name,
             vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine),
             block_name: res?.block_name,
@@ -130,9 +130,9 @@ const Home = () => {
             fee_type: res?.fee_type,
             slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
           }));
-          console.log(arena);
+          console.log(pincodeData);
 
-          setVaccineData(arena);
+          setVaccineData(pincodeData);
         });
     }
   };

From 47c91e456e9815ecbf1d3fa4dbf65023c5db0058 Mon Sep 17 00:00:00 2001
From: Justinnn07 <justinv2006@gmail.com>
Date: Tue, 25 May 2021 08:27:34 +0530
Subject: [PATCH 32/35] changed arena to pincodeData and removed all console
 logs :fire:

---
 src/components/Home/Home.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index e1dd9c8..6b0a4e3 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -46,8 +46,6 @@ const Home = () => {
     setFormattedDate(finalDate);
   };
 
-  console.log(formattedDate);
-
   useEffect(() => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
@@ -97,7 +95,6 @@ const Home = () => {
       .then((data) => {
         setDistrictCode(districtCode);
         setVaccineData(data.sessions);
-        console.log(data);
       });
   };
 
@@ -110,7 +107,6 @@ const Home = () => {
       )
         .then((res) => res.json())
         .then((data) => {
-          console.log(data);
           const pincodeData = data?.centers?.map((res) => ({
             name: res?.name,
             vaccine: res?.sessions?.slice(0, 1).map((res) => res?.vaccine),
@@ -130,8 +126,6 @@ const Home = () => {
             fee_type: res?.fee_type,
             slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
           }));
-          console.log(pincodeData);
-
           setVaccineData(pincodeData);
         });
     }

From 35ace5347379eb4604f8c52ff813e57aba99f825 Mon Sep 17 00:00:00 2001
From: himanshu <himanshujasuja1040@gmail.com>
Date: Tue, 25 May 2021 17:19:45 +0530
Subject: [PATCH 33/35] done

---
 .../SingleVaccineData/VaccineDataSingle.css   | 139 +++++++++++++++---
 1 file changed, 117 insertions(+), 22 deletions(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index 1760f0d..06e7347 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -195,21 +195,120 @@ font-family: 'Ubuntu', sans-serif; */
 }
 
 /*Media Queries*/
+@media screen and (max-width: 1496px) {
+  .wrapper {
+    height: 37vh;
+  }
+}
 @media screen and (max-width: 1024px) {
   .wrapper {
-    height: 35vh;
+    height: 37vh;
   }
 }
-
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 916px){
+  .paper-left .paper-left_content p {
+    font-size: 15px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 15px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 15px;
+  }
+}
+@media screen and (max-width: 890px) {
+  .paper-left h1{
+    font-size: 16px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 13px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 13px;
+  }
+  .MuiSvgIcon-root {
+    font-size: 1.18rem;
+}
+}
+@media screen and (max-width: 812px) {
   .wrapper {
     height: 40vh;
   }
+  .paper-left .paper-left_content p {
+    font-size: 12px;
+  }
+  .paper-left .paper-left_time{
+    margin-top: 20px;
+  }
+  .paper-left h1{
+    font-size: 14px;
+  }
+  .paper-right_Badges h5{
+    font-size: 16px;
+  }
+  .paper-right_slots p{
+    font-size: 15px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 11px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 11px;
+  }
 }
-
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 722px) {
+  .wrapper {
+    height: 42vh;
+  }
+ 
+  .paper-left .paper-left_time .open-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_content p {
+    font-size: 11px;
+  }
+  .paper-right_Badges p{
+    font-size: 12px;
+  }
+  .paper-left .paper-left_time{
+    margin-top: 30px;
+  }
+}
+@media screen and (max-width: 690px) {
   .wrapper {
-    height: 70vh;
+    height: 47vh;
+  }
+  .paper-left_vaccine_head h3{
+    font-size: 15px;
+  }
+  .paper-right_Badges h5 {
+    font-size: 14px;
+  }
+  .paper-right_Badges p {
+    font-size: 10px;
+  }
+  .paper-left .paper-left_content h3{
+    font-size: 13px;
+  }
+  .paper-left .paper-left_time .open-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_time .close-time{
+    font-size: 10px;
+  }
+  .paper-left .paper-left_content p {
+    font-size: 11px;
+  }
+  .paper-right_Badges p{
+    font-size: 12px;
+  }
+}
+@media screen and (max-width: 646px) {
+  .wrapper {
+    height: 80vh;
     flex-direction: column;
   }
 
@@ -225,18 +324,24 @@ font-family: 'Ubuntu', sans-serif; */
     font-size: 15px;
     margin-bottom: 10px;
   }
-
+  .paper-left .paper-left_content h3{
+    font-size: 15px;
+  }
   .paper-left_vaccine_head p {
     padding: 5px;
     font-size: 15px;
     border-radius: 7px;
     text-align: center;
   }
-
+  .paper-left .paper-left_content p {
+    font-size: 15px;
+  }
   .paper-left p {
     width: 100%;
   }
-
+  .paper-left .paper-left_time{
+    margin-top: 20px;
+  }
   .paper-left .paper-left_content {
     display: flex;
     flex-direction: column;
@@ -246,6 +351,7 @@ font-family: 'Ubuntu', sans-serif; */
     display: flex;
     flex-direction: column;
     text-align: center;
+    letter-spacing: 2px;
   }
 
   .paper-left .paper-left_time .time {
@@ -259,7 +365,6 @@ font-family: 'Ubuntu', sans-serif; */
   .paper-right_Badges h5 {
     margin-top: 5px;
     margin-right: 3px;
-    color: aquamarine;
     font-weight: bold;
     font-size: 11px;
   }
@@ -270,7 +375,6 @@ font-family: 'Ubuntu', sans-serif; */
 
   .paper-right_Badges p {
     margin-top: 5px;
-    color: whitesmoke;
     font-size: 15px;
   }
 
@@ -287,13 +391,10 @@ font-family: 'Ubuntu', sans-serif; */
   }
 
   .paper-right_age .age_content {
-    /* background-color: rgb(222,49,99); */
-    background-color: red;
     height: 15px;
     width: 65px;
     padding: 3px;
     border-radius: 3px;
-    color: white;
   }
 
   .paper-right_age .age_content p {
@@ -304,25 +405,19 @@ font-family: 'Ubuntu', sans-serif; */
   .paper-right_slots h3 {
     text-align: center;
     font-weight: 700;
-    color: #bb86fc;
     margin: 3px;
   }
 
   .paper-right_slots p {
-    color: whitesmoke;
     font-size: 15px;
     text-align: center;
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 502px) {
   .wrapper {
     height: 82vh;
   }
 }
 
-@media screen and (max-width: 360px) {
-  .wrapper {
-    height: 100vh;
-  }
-}
+

From 6ac1c3aceb2ec6681a25a3d8b780293d4b8aec38 Mon Sep 17 00:00:00 2001
From: himanshu <himanshujasuja1040@gmail.com>
Date: Tue, 25 May 2021 22:27:51 +0530
Subject: [PATCH 34/35] finished with readmemd

---
 README.md | 45 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4e22227..4178150 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,47 @@
 
 ---
 
-> TechStack - React JS, Material UI
+## Installation
 
-_MORE INFO YET TO BE ADDED... STAY TUNED_
+The Open Event Frontend can be easily deployed on a variety of platforms, so just run the following commands when setting up for the first time:
 
-# DON'T JUST CLONE, PLEASE LEAVE A STAR, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT.
+- `yarn install or npm install  `
+- `yarn start or npm start `
+- Visit your app at [http://localhost:3000](http://localhost:3000).
 
-> NEW UI COMING UP , CHECK THIS SITE TO SEE THE LATEST UPDATES : [https://cowinvaccinetracker.stephinreji.me/](https://cowinvaccinetracker.stephinreji.me/)
+CoWIN Vaccination Slots Checking App is a website, mobile-ready,
+REACT JS-along with Material-UI
 
-### _NOTE:_ Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development
+## Features
+
+CoWIN Vaccination Slots Checking App is a user Friendly website
+that allow users to find vaccine in nearby available Center.
+
+> The overriding design goal for CoWIN is
+> helping people around nation to
+> book their slot by providing details of
+> available vaccine at particular Center
+> publishable as-is, as plain text, without
+> looking like it's been marked up with tags
+> or formatting instructions.
+
+## Tech
+
+CoWIN Vaccination Slots Checking App uses a number of open source projects to work properly:
+
+-REACT-JS
+-MATERIAL-UI
+
+---
+
+> _DON'T JUST CLONE, PLEASE LEAVE A STAR, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT_
+
+---
+
+#### NEW UI COMING UP , CHECK THIS SITE TO SEE THE LATEST UPDATES :
+
+##### https://cowinvaccinetracker.stephinreji.me/
+
+.
+
+#### NOTE: Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development

From 4bc1257972ce7532ea31c072a2fe4e6959f3e56b Mon Sep 17 00:00:00 2001
From: himanshu <himanshujasuja1040@gmail.com>
Date: Tue, 25 May 2021 23:45:07 +0530
Subject: [PATCH 35/35] Change readme file

---
 README.md | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 4178150..2a56ce3 100644
--- a/README.md
+++ b/README.md
@@ -4,45 +4,47 @@
 
 ## Installation
 
-The Open Event Frontend can be easily deployed on a variety of platforms, so just run the following commands when setting up for the first time:
+This repository is easily accessible , so just run the following commands when setting up for the first time:
 
 - `yarn install or npm install  `
 - `yarn start or npm start `
 - Visit your app at [http://localhost:3000](http://localhost:3000).
 
-CoWIN Vaccination Slots Checking App is a website, mobile-ready,
-REACT JS-along with Material-UI
-
 ## Features
 
 CoWIN Vaccination Slots Checking App is a user Friendly website
 that allow users to find vaccine in nearby available Center.
 
-> The overriding design goal for CoWIN is
+> The overall design goal for this project is
 > helping people around nation to
-> book their slot by providing details of
-> available vaccine at particular Center
-> publishable as-is, as plain text, without
-> looking like it's been marked up with tags
-> or formatting instructions.
+> book their slots by providing details of
+> available COVID19 vaccine at a particular Center
 
-## Tech
+## Technologies Used
 
-CoWIN Vaccination Slots Checking App uses a number of open source projects to work properly:
+CoWIN Vaccination Slots Checking App uses a number of open source projects :
 
--REACT-JS
--MATERIAL-UI
+- REACT  JS
+<br />
+- MATERIAL-UI
+<br />
+- STYLED COMPONENTS
+<br />
 
 ---
 
-> _DON'T JUST CLONE, PLEASE LEAVE A STAR, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT_
+> _DON'T JUST CLONE, PLEASE LEAVE A STAR 🌟, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT_
 
 ---
+<br />
 
-#### NEW UI COMING UP , CHECK THIS SITE TO SEE THE LATEST UPDATES :
+#### CHECK THE FOLLOWING LINKS FOR LATEST UPDATES :
 
-##### https://cowinvaccinetracker.stephinreji.me/
+ -   Production Link : https://cowinvaccinetracker.forcommunity.tech/
+   -   Staging Link: https://cowin-vaccine-availablity-checker.vercel.app/
+- New UI demo : https://cowinvaccinetracker.stephinreji.me/
 
-.
+<br />
+<br />
 
-#### NOTE: Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development
+#### *NOTE* : Please check the Projects section to see the progress and the discussion panel to add your ideas, which will eventually be picked up for development