Merge pull request #95 from stephin007/staging

Staging merge to master for Prod Release

README.md

@@ -1,14 +1,50 @@
 # CoWIN Vaccination Slots Checking App.
---- 
 
-> TechStack - React JS, Material UI
+---
 
-_MORE INFO YET TO BE ADDED... STAY TUNED_
+## Installation
 
-# DON'T JUST CLONE, PLEASE LEAVE A STAR, MOTIVATES US TO ADD MORE FEATURES TO THE PROJECT.
+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).
 
+## Features
 
+CoWIN Vaccination Slots Checking App is a user Friendly website
+that allow users to find vaccine in nearby available Center.
 
+> The overall design goal for this project is
+> helping people around nation to
+> book their slots by providing details of
+> available COVID19 vaccine at a particular Center
 
-### _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
+## Technologies Used
+
+CoWIN Vaccination Slots Checking App uses a number of open source projects :
+
+- 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_
+
+---
+<br />
+
+#### CHECK THE FOLLOWING LINKS FOR LATEST UPDATES :
+
+ -   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

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"
   },

src/App.js

@@ -1,12 +1,30 @@
 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 (
-    <div className="app">
-      <Home />
-    </div>
+    <Router>
+      <div className="app">
+        <Header />
+        <Switch>
+          <Route exact={true} path="/">
+            <Main />
+          </Route>
+          <Route path="/vaccines" exact={true}>
+            <Home />
+          </Route>
+          <Route path="/about" exact={true}>
+            <About />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
   );
 };
 

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;
+    }
+}

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

src/components/Header/Header.css

@@ -0,0 +1,55 @@
+.header__leftImg {
+  width: 120px;
+  padding: 20px;
+  margin-top: -40px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  width: 100%;
+  font-family: "Fira Code Medium", "monospace";
+}
+.header__right {
+  display: flex;
+  margin: 25px;
+}
+
+.header__right > h3 {
+  font-weight: 400;
+  margin-left: 30px;
+  margin-right: 30px;
+  cursor: pointer;
+}
+
+.header__right > h3 a {
+  text-decoration: none;
+  color: black;
+}
+
+@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;
+}

src/components/Header/Header.js

@@ -0,0 +1,29 @@
+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><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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;