├── src ├── Pages │ ├── Home │ │ ├── Home.css │ │ └── Home.jsx │ ├── CovidHospitalDetails │ │ ├── CovidHospitalDetails.css │ │ └── CovidHospitalDetails.jsx │ ├── Login │ │ ├── google.png │ │ ├── Login.css │ │ └── Login.jsx │ ├── Loading │ │ └── Loading.jsx │ └── VaccinationDetails │ │ └── VaccinationDetails.jsx ├── features │ ├── Counter.js │ └── userSlice.js ├── Components │ ├── ChatBot │ │ ├── ChatBot.css │ │ ├── Themed.jsx │ │ └── ChatBot.jsx │ ├── NotFound.jsx │ ├── CovidHospitalComponents │ │ ├── CovidHospitalComponent.css │ │ └── CovidHospitalComponent.jsx │ ├── VaccinationPageComponents │ │ ├── FourCardsVaccination │ │ │ ├── FourCardsVaccination.css │ │ │ └── FourCardsVaccination.jsx │ │ └── StateWiseVaccineTable │ │ │ ├── StateWiseVaccineComponent.css │ │ │ └── StateWiseVaccineComponent.jsx │ ├── avatarModal │ │ ├── AvatarModal.css │ │ ├── Group.svg │ │ └── AvatarModal.jsx │ ├── StateData │ │ ├── StateData.css │ │ └── StateData.jsx │ ├── NavBar │ │ ├── NavBar.css │ │ └── NavBar.jsx │ └── FourCards │ │ ├── Styles │ │ └── FourCards.css │ │ └── FourCards.jsx ├── App.css ├── index.css ├── app │ └── store.js ├── setupTests.js ├── firebase.js ├── index.js ├── logo.svg ├── App.js └── serviceWorker.js ├── .firebaserc ├── public ├── robots.txt ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── firebase.json ├── .gitignore ├── README.md ├── package.json └── .firebase └── hosting.YnVpbGQ.cache /src/Pages/Home/Home.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/features/Counter.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/ChatBot/ChatBot.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Pages/CovidHospitalDetails/CovidHospitalDetails.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "covtrack19" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinjacob2001/CovTrack/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinjacob2001/CovTrack/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/Pages/Login/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinjacob2001/CovTrack/HEAD/src/Pages/Login/google.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body{ 4 | height: 100vh; 5 | background-image: linear-gradient(to right, #354762, #394a6a, #3e4d72, #45507a, #4c5381); 6 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | 3 | font-family: 'Jost', sans-serif !important; 4 | } 5 | 6 | *{ 7 | margin: 0; 8 | padding: 0 ; 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import userReducer from '../features/userSlice'; 3 | 4 | export default configureStore({ 5 | reducer: { 6 | user: userReducer, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /src/Components/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function NotFound() { 4 | return ( 5 |
6 |

NOT FOUND

7 |
8 | ) 9 | } 10 | 11 | export default NotFound; 12 | -------------------------------------------------------------------------------- /src/Components/CovidHospitalComponents/CovidHospitalComponent.css: -------------------------------------------------------------------------------- 1 | .covid__hospital__heading{ 2 | margin-top: 6rem; 3 | } 4 | 5 | 6 | @media only screen and (max-width: 600px){ 7 | .covid__hospital__Table{ 8 | font-size: small; 9 | } 10 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/Components/VaccinationPageComponents/FourCardsVaccination/FourCardsVaccination.css: -------------------------------------------------------------------------------- 1 | .four__cards__vaccine{ 2 | margin-top: 6rem !important; 3 | } 4 | 5 | @media only screen and (max-width: 600px) { 6 | .four__cards__vaccine{ 7 | margin-top: 7rem !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/Components/avatarModal/AvatarModal.css: -------------------------------------------------------------------------------- 1 | .avatarImage:hover{ 2 | cursor: pointer; 3 | } 4 | 5 | 6 | 7 | .toggle__btn:hover{ 8 | background: #374967 !important; 9 | } 10 | 11 | .modal__card{ 12 | width: 17rem !important; 13 | } 14 | 15 | 16 | .footer__div{ 17 | display: flex; 18 | align-items: center; 19 | } 20 | 21 | .toggle__btn{ 22 | margin-top: 1rem !important; 23 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/Components/StateData/StateData.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 600px) 2 | { 3 | 4 | .state__data__Text{ 5 | font-size: 2rem !important; 6 | font-weight: bold; 7 | } 8 | } 9 | 10 | .accordian{ 11 | background-repeat: no-repeat; 12 | background-size: cover; 13 | background-image: url("https://s3.pixers.pics/pixers/700/FO/61/70/23/74/700_FO61702374_b335dfa84806c6fde21ead5bc3326570.jpg"); 14 | } -------------------------------------------------------------------------------- /src/Pages/Loading/Loading.jsx: -------------------------------------------------------------------------------- 1 | import {Circle} from 'better-react-spinkit' 2 | 3 | function Loading() { 4 | return ( 5 |
6 | 7 |
8 |

CovTrack19

9 | 10 |
11 | 12 |
13 | ) 14 | } 15 | 16 | export default Loading 17 | -------------------------------------------------------------------------------- /src/features/userSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | export const userSlice = createSlice({ 4 | name: 'user', 5 | initialState: { 6 | user: null 7 | }, 8 | reducers: { 9 | login: (state,action) => { 10 | state.user = action.payload; 11 | }, 12 | logout: state => { 13 | state.user = null; 14 | } 15 | }, 16 | }); 17 | 18 | export const { login, logout } = userSlice.actions; 19 | 20 | export const selectUser = state => state.user.user; 21 | 22 | export default userSlice.reducer; 23 | -------------------------------------------------------------------------------- /src/Pages/CovidHospitalDetails/CovidHospitalDetails.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ThemedExample from '../../Components/ChatBot/Themed' 3 | 4 | import CovidHospitalComponent from '../../Components/CovidHospitalComponents/CovidHospitalComponent' 5 | import NavBar from '../../Components/NavBar/NavBar' 6 | 7 | function CovidHospitalDetails() { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default CovidHospitalDetails 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CovTrack19 2 | 3 | ## OVERVIEW 4 | 5 | Developed an end-to-end and easily accessible platform that can provide all kinds of data including live vaccination details and hospital beds count. 6 | 7 | ### TECHNOLOGY STACK 8 | 9 | Technologies used include: React.JS, Redux Boostrap4 and Firebase. 10 | 11 | 12 | ### `npm start` 13 | 14 | Runs the app in the development mode.
15 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 16 | 17 | ### Developed by: 18 | - Front end was developed by Kevin Jacob 19 | - Mail send integration using sendgrid was developed by Deepak Mathews Koshy 20 | -------------------------------------------------------------------------------- /src/Components/ChatBot/Themed.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import ChatBot from './ChatBot'; 4 | 5 | // all available props 6 | const theme = { 7 | background: '#f5f8fb', 8 | fontFamily: 'Jost', 9 | headerBgColor: '#232F41', 10 | headerFontColor: '#fff', 11 | headerFontSize: '15px', 12 | botBubbleColor: '#232F41', 13 | botFontColor: '#fff', 14 | userBubbleColor: '#fff', 15 | 16 | userFontColor: '#4a4a4a', 17 | }; 18 | 19 | 20 | const ThemedExample = () => ( 21 | 22 | 23 | ; 24 | 25 | ); 26 | 27 | export default ThemedExample; -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase'; 2 | 3 | const firebaseConfig = { 4 | apiKey: "AIzaSyAlubYYClKeBeVyEF_3iwSeAnII5MnXjTI", 5 | authDomain: "covtrack19.firebaseapp.com", 6 | projectId: "covtrack19", 7 | storageBucket: "covtrack19.appspot.com", 8 | messagingSenderId: "671754797847", 9 | appId: "1:671754797847:web:63de779113850763bbed52" 10 | }; 11 | 12 | 13 | const firebaseApp=firebase.initializeApp(firebaseConfig); 14 | firebase.analytics(); 15 | const auth=firebase.auth(); 16 | const provider=new firebase.auth.GoogleAuthProvider(); 17 | const db=firebaseApp.firestore(); 18 | export {auth,provider} 19 | export default db; -------------------------------------------------------------------------------- /src/Pages/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Home.css"; 3 | 4 | import NavBar from "../../Components/NavBar/NavBar"; 5 | import FourCards from "../../Components/FourCards/FourCards"; 6 | import StateData from "../../Components/StateData/StateData"; 7 | import ThemedExample from "../../Components/ChatBot/Themed"; 8 | 9 | function Home() { 10 | return ( 11 | <> 12 | {/* Navbar */} 13 | 14 | 15 |
16 | {/* 4 CARDS SECTION */} 17 | 18 | 19 | 20 |
21 | 22 | 23 | ); 24 | } 25 | 26 | export default Home; 27 | -------------------------------------------------------------------------------- /src/Components/VaccinationPageComponents/StateWiseVaccineTable/StateWiseVaccineComponent.css: -------------------------------------------------------------------------------- 1 | .vaccine__table{ 2 | font-size: large; 3 | } 4 | .vaccine__heading{ 5 | margin-top: 2rem; 6 | } 7 | 8 | 9 | @media only screen and (max-width: 600px) { 10 | .vaccine__table{ 11 | font-size: x-small; 12 | } 13 | .download__btn{ 14 | font-size: small !important; 15 | } 16 | } 17 | 18 | 19 | .download__btn__Section{ 20 | display: flex; 21 | justify-content: flex-end; 22 | } 23 | .download__btn{ 24 | background: #232F41 !important; 25 | border: 0 !important; 26 | } 27 | 28 | .download__btn:hover{ 29 | box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; 30 | border: 0 !important; 31 | 32 | } -------------------------------------------------------------------------------- /src/Components/NavBar/NavBar.css: -------------------------------------------------------------------------------- 1 | .navbar__bg{ 2 | background: #232f41 !important ; 3 | width: 100vw; 4 | z-index: 5; 5 | 6 | position: fixed !important; 7 | top: 0; 8 | } 9 | 10 | .nav__black{ 11 | transition-timing-function: ease-in; 12 | transition: all 0.5s; 13 | 14 | background-color: #354762 !important; 15 | 16 | } 17 | 18 | .custom-toggler.navbar-toggler { 19 | border-color: rgb(255, 255, 255) !important; 20 | 21 | background-color: rgb(238, 228, 228) !important; 22 | } 23 | .navbar__link:hover{ 24 | color: #47517c !important; 25 | } 26 | .navText__color{ 27 | color: white !important; 28 | } 29 | 30 | .navbar__link,.navbar__link:hover{ 31 | text-decoration: none !important; 32 | } 33 | 34 | -------------------------------------------------------------------------------- /src/Pages/VaccinationDetails/VaccinationDetails.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ThemedExample from "../../Components/ChatBot/Themed"; 3 | import NavBar from "../../Components/NavBar/NavBar"; 4 | import FourCardsVaccination from "../../Components/VaccinationPageComponents/FourCardsVaccination/FourCardsVaccination"; 5 | import StateWiseVaccineComponent from "../../Components/VaccinationPageComponents/StateWiseVaccineTable/StateWiseVaccineComponent"; 6 | 7 | function VaccinationDetails() { 8 | return ( 9 | <> 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | ); 18 | } 19 | 20 | export default VaccinationDetails; 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import store from './app/store'; 6 | import { Provider } from 'react-redux'; 7 | import * as serviceWorker from './serviceWorker'; 8 | import 'bootstrap/dist/css/bootstrap.min.css'; 9 | import "antd/dist/antd.css"; 10 | 11 | ReactDOM.render( 12 | 13 | 14 | 15 | 16 | , 17 | document.getElementById('root') 18 | ); 19 | 20 | // If you want your app to work offline and load faster, you can change 21 | // unregister() to register() below. Note this comes with some pitfalls. 22 | // Learn more about service workers: https://bit.ly/CRA-PWA 23 | serviceWorker.unregister(); 24 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/Pages/Login/Login.css: -------------------------------------------------------------------------------- 1 | .login__btn{ 2 | left: 50%; 3 | bottom: 50%; 4 | transform: translate(-50%,-50%); 5 | position: absolute; 6 | width: 20rem; 7 | background: #5b618b !important; 8 | border-radius: 20px; 9 | height: 4rem; 10 | border: 0 !important; 11 | font-size: x-large !important; 12 | } 13 | .login__btn:hover{ 14 | background: #232F41 !important; 15 | 16 | } 17 | 18 | @media only screen and (max-width: 600px) { 19 | .login__btn{ 20 | background: #5b618b !important; 21 | width: 15rem; 22 | font-size: large !important; 23 | } 24 | .footer__text{ 25 | font-size: small; 26 | } 27 | } 28 | 29 | .footer__signin__text{ 30 | bottom: 0 !important; 31 | position: relative; 32 | margin: 0 !important; 33 | 34 | } 35 | 36 | .bottom__signin__text{ 37 | text-align: center !important; 38 | 39 | } 40 | 41 | .container-footer { 42 | height: 200px; 43 | position: relative; 44 | 45 | } 46 | 47 | .vertical-center { 48 | bottom: 0; 49 | left: 50%; 50 | position: absolute; 51 | transform: translate(-50%,-50%); 52 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "covapp19", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@ant-design/icons": "^4.5.0", 7 | "@material-ui/core": "^4.11.3", 8 | "@material-ui/icons": "^4.11.2", 9 | "@material-ui/lab": "^4.0.0-alpha.57", 10 | "@reduxjs/toolkit": "^1.5.0", 11 | "@testing-library/jest-dom": "^4.2.4", 12 | "@testing-library/react": "^9.5.0", 13 | "@testing-library/user-event": "^7.2.1", 14 | "antd": "^4.13.0", 15 | "axios": "^0.21.1", 16 | "better-react-spinkit": "^2.0.4", 17 | "bootstrap": "^4.6.0", 18 | "firebase": "^8.2.9", 19 | "moment": "^2.29.1", 20 | "react": "^17.0.1", 21 | "react-bootstrap": "^1.5.0", 22 | "react-datetime": "^3.0.4", 23 | "react-dom": "^17.0.1", 24 | "react-firebase-hooks": "^3.0.3", 25 | "react-number-format": "^4.4.4", 26 | "react-redux": "^7.2.2", 27 | "react-router-dom": "^5.2.0", 28 | "react-scripts": "4.0.3", 29 | "react-select": "^4.1.0", 30 | "react-simple-chatbot": "^0.6.1", 31 | "react-time": "^4.3.0", 32 | "styled-components": "^5.2.1" 33 | }, 34 | "scripts": { 35 | "start": "react-scripts start", 36 | "build": "react-scripts build", 37 | "test": "react-scripts test", 38 | "eject": "react-scripts eject" 39 | }, 40 | "eslintConfig": { 41 | "extends": "react-app" 42 | }, 43 | "browserslist": { 44 | "production": [ 45 | ">0.2%", 46 | "not dead", 47 | "not op_mini all" 48 | ], 49 | "development": [ 50 | "last 1 chrome version", 51 | "last 1 firefox version", 52 | "last 1 safari version" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.firebase/hosting.YnVpbGQ.cache: -------------------------------------------------------------------------------- 1 | logo192.png,499162500000,ebf380e341383bbf65d6a762603f630a9f7610c97f32bd297bc097635bc37ee3 2 | logo512.png,499162500000,c55d034d9cf7abfac7600919cbf4f4ce2f3ea3478df91d01177e8ff136f58918 3 | manifest.json,499162500000,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840 4 | robots.txt,499162500000,53d2dcecb15666b4f7db4041361d3b6ea115483937dd38b66216deda98adaa4a 5 | asset-manifest.json,1624962973979,765178fa652385c21607e047428986068be82567c1d296cc92e6b6eac485f37f 6 | index.html,1624962973979,49c1f4dcef95db009d9ff662798c417131126db9b0da7c60534fd9739db90e1e 7 | static/css/main.b33d0e70.chunk.css,1624962973983,e8e6e2a86de02174f80e9cff5de11765b046f2c336b7321d8e61c20a23cbdf4e 8 | static/css/main.b33d0e70.chunk.css.map,1624962974007,808a867f57c841361ccea044fc85a6a8a951cf7b45ae66afd0784862972ea4b2 9 | static/js/2.103a8272.chunk.js.LICENSE.txt,1624962974007,55588b3b169051ec56c1df9694dc7948675a7888f74c9788a9315ab1ceeb1ba0 10 | static/js/main.6ea2424d.chunk.js,1624962973980,17bd55c7181cc9dafadba01ffde73d5a3128eea335d47926314150f97a764013 11 | static/js/runtime-main.7ae54092.js,1624962974007,93e03312e1e22d299c5c0617bf352907736be64e1049c9cc1d90eb64c266fdc2 12 | static/js/runtime-main.7ae54092.js.map,1624962974007,d057efc1165d3889b2c42e8678d05b90345d66a032a7437b171c60c5b01e1798 13 | static/js/main.6ea2424d.chunk.js.map,1624962974007,6a8e54a6f10813a5328561522227b176c23d5eb395f3fb5f785cc10dcd39f21e 14 | static/media/google.3b44a32b.png,1624962973980,db4d9eeaef5169193abb4fa9e92c3ff3de6cbd8990a2254a95af7defe4480c16 15 | static/css/2.d0c5a933.chunk.css,1624962974007,d2839dc66982de35923392ad9cbc7e4b2be0b5fb3b18ffbb5ac5431dd973da50 16 | static/js/2.103a8272.chunk.js,1624962974008,8f0f774aa8c8c98005994d47e494df2b7d62d206ef3c836445ca9e9cccfddff4 17 | static/css/2.d0c5a933.chunk.css.map,1624962974008,5d99a28e29b7e3990913953068ea0f2932eaa89171f5b51b95ab5efc3524abfc 18 | static/js/2.103a8272.chunk.js.map,1624962974010,cd588889db216d5c29a120a4d5f6868e7b9e6ced59a9f8056c4688e4a656f588 19 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 29 | CovTrack19 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/Pages/Login/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { auth, provider } from "../../firebase"; 4 | import { login, logout } from "../../features/userSlice"; 5 | 6 | import Google from "./google.png"; 7 | import "./Login.css"; 8 | import { useHistory } from "react-router-dom"; 9 | import { Button } from "react-bootstrap"; 10 | 11 | function Login() { 12 | const dispatch = useDispatch(); 13 | const history = useHistory(); 14 | const signIn = () => { 15 | auth 16 | .signInWithPopup(provider) 17 | .then((result) => { 18 | dispatch( 19 | login({ 20 | username: result.user.displayName, 21 | profilePic: result.user.photoURL, 22 | id: result.user.uid, 23 | emailId: result.user.email, 24 | }) 25 | ); 26 | history.push("/home"); 27 | }) 28 | .catch(() => { 29 | console.log("INVALID"); 30 | }); 31 | }; 32 | useEffect(() => { 33 | auth.onAuthStateChanged((authUser) => { 34 | if (authUser) { 35 | dispatch( 36 | login({ 37 | uid: authUser.uid, 38 | photo: authUser.photoURL, 39 | email: authUser.email, 40 | displayName: authUser.displayName, 41 | }) 42 | ); 43 | history.push("/home"); 44 | } else { 45 | //user is logged out 46 | dispatch(logout()); 47 | history.push("/"); 48 | } 49 | }); 50 | }, [dispatch, history]); 51 | 52 | return ( 53 |
54 |
55 |

56 | CovTrack19 57 |

58 |

An End-to-end COVID-19 stats platform

59 |
60 | 64 | 65 |
66 |
67 |

68 | Proudly from India, for the Globe. 69 |

70 |
71 |
72 |
73 | ); 74 | } 75 | 76 | export default Login; 77 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { 3 | BrowserRouter as Router, 4 | Route, 5 | Switch, 6 | useHistory, 7 | } from "react-router-dom"; 8 | import "./App.css"; 9 | import Home from "./Pages/Home/Home"; 10 | import Login from "./Pages/Login/Login"; 11 | import NotFound from "./Components/NotFound"; 12 | import { useAuthState } from "react-firebase-hooks/auth"; 13 | import { useDispatch, useSelector } from "react-redux"; 14 | import { login, logout, selectUser } from "./features/userSlice"; 15 | import { auth } from "./firebase"; 16 | import VaccinationDetails from "./Pages/VaccinationDetails/VaccinationDetails"; 17 | import CovidHospitalDetails from "./Pages/CovidHospitalDetails/CovidHospitalDetails"; 18 | import Loading from "./Pages/Loading/Loading"; 19 | 20 | function App() { 21 | const user = useSelector(selectUser); 22 | const [loading]=useAuthState(auth); 23 | const dispatch = useDispatch(); 24 | 25 | 26 | useEffect(() => { 27 | 28 | auth.onAuthStateChanged((authUser) => { 29 | //console.log("user is", authUser); 30 | if (authUser) { 31 | dispatch( 32 | login({ 33 | uid: authUser.uid, 34 | photo: authUser.photoURL, 35 | email: authUser.email, 36 | displayName: authUser.displayName, 37 | }) 38 | ); 39 | 40 | } else { 41 | //user is logged out 42 | dispatch(logout()); 43 | 44 | } 45 | }); 46 | }, [dispatch]); 47 | 48 | 49 | return ( 50 | 51 | 52 | {user ? ( 53 | <> 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | ) : ( 70 | <> 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | )} 81 | 82 | ); 83 | } 84 | 85 | export default App; 86 | -------------------------------------------------------------------------------- /src/Components/ChatBot/ChatBot.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import ChatBot from "react-simple-chatbot"; 4 | import { selectUser } from "../../features/userSlice"; 5 | 6 | import "./ChatBot.css"; 7 | 8 | function ChatBotComponent() { 9 | const user = useSelector(selectUser); 10 | 11 | return ( 12 |
20 | 78 |
79 | ); 80 | } 81 | 82 | export default ChatBotComponent; 83 | -------------------------------------------------------------------------------- /src/Components/NavBar/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import React,{useEffect,useState} from "react"; 2 | import {Link} from 'react-router-dom' 3 | import { Nav, Navbar } from "react-bootstrap"; 4 | 5 | 6 | import "./NavBar.css"; 7 | import AvatarModal from "../avatarModal/AvatarModal"; 8 | 9 | function NavBar() { 10 | const [show,handleShow]=useState(false); 11 | 12 | 13 | const transitionNavBar=()=>{ 14 | 15 | if(window.scrollY>100){ 16 | handleShow(true); 17 | } 18 | else{ 19 | handleShow(false); 20 | } 21 | } 22 | 23 | 24 | useEffect(()=>{ 25 | window.addEventListener("scroll",transitionNavBar) 26 | return ()=>window.removeEventListener("scroll",transitionNavBar) 27 | },[]) 28 | 29 | return ( 30 | <> 31 | 32 | 33 | 34 |

CovTrack19

35 | 36 | 37 | 38 | 39 | {/* */} 42 | 61 | 62 | 63 | 64 | ); 65 | } 66 | 67 | export default NavBar; 68 | -------------------------------------------------------------------------------- /src/Components/avatarModal/Group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/Components/FourCards/Styles/FourCards.css: -------------------------------------------------------------------------------- 1 | .card_section { 2 | justify-content: center; 3 | } 4 | .card__mainText { 5 | text-align: center; 6 | } 7 | 8 | .date_text{ 9 | text-align: center; 10 | color: white; 11 | margin-top: 2rem; 12 | } 13 | 14 | .card_section { 15 | margin-top: 2rem; 16 | } 17 | .card__mainText { 18 | font-weight: bold; 19 | } 20 | 21 | .card_single { 22 | border-radius: 5px !important; 23 | margin: 10px; 24 | background-position: center center; 25 | width: 15rem; 26 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 27 | height: 13rem !important; 28 | background-image: url("https://s3.pixers.pics/pixers/700/FO/61/70/23/74/700_FO61702374_b335dfa84806c6fde21ead5bc3326570.jpg"); 29 | } 30 | 31 | .img__description { 32 | position: absolute; 33 | 34 | bottom: 0; 35 | 36 | right: 0; 37 | color: rgb(112, 109, 109); 38 | visibility: hidden; 39 | opacity: 0.3; 40 | 41 | /* transition effect. not necessary */ 42 | transition: opacity 0.2s, visibility 0.2s; 43 | } 44 | 45 | .card_single:hover .img__description { 46 | visibility: visible; 47 | opacity: 1; 48 | } 49 | .card_single:hover { 50 | box-shadow: rgba(14, 14, 34, 0.25) 0px 13px 27px -5px, 51 | rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; 52 | cursor: pointer; 53 | transform: scale(1.03); 54 | transition: 450ms transform; 55 | } 56 | 57 | 58 | @media only screen and (max-width: 600px) { 59 | .card_single { 60 | width: 8rem !important; 61 | height: 9rem !important; 62 | } 63 | .card__number { 64 | font-size: .9rem !important; 65 | } 66 | .card_section { 67 | margin-top: 2rem; 68 | } 69 | .card__mainText { 70 | font-size: 0.9rem !important; 71 | } 72 | .card__number { 73 | margin-top: 1rem !important; 74 | font-size: 2.4rem; 75 | } 76 | .removed__text { 77 | display: inline-block; 78 | } 79 | .img__description { 80 | font-size: x-small; 81 | } 82 | .date_text{ 83 | text-align: center; 84 | color: white; 85 | margin-top: 7rem; 86 | font-weight: lighter !important; 87 | font-size: smaller; 88 | } 89 | } 90 | 91 | @media only screen and (min-width: 600px) { 92 | .removed__text { 93 | display: none; 94 | } 95 | } 96 | 97 | .card__caseCount { 98 | text-align: center; 99 | } 100 | .card__number { 101 | margin-top: 1rem !important; 102 | font-size: 2rem; 103 | } 104 | 105 | .date_text{ 106 | text-align: center; 107 | color: white; 108 | margin-top: 7.5rem; 109 | font-weight: lighter !important; 110 | font-size: smaller; 111 | } -------------------------------------------------------------------------------- /src/Components/VaccinationPageComponents/StateWiseVaccineTable/StateWiseVaccineComponent.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import { Table, Button } from "react-bootstrap"; 4 | import "./StateWiseVaccineComponent.css"; 5 | import GetAppIcon from '@material-ui/icons/GetApp'; 6 | import NumberFormat from "react-number-format"; 7 | 8 | function StateWiseVaccineComponent() { 9 | const [stateData, setstateData] = useState([]); 10 | 11 | useEffect(() => { 12 | async function fetchData() { 13 | const request = await axios.get( 14 | "https://www.mygov.in/sites/default/files/covid/vaccine/vaccine_counts_today.json" 15 | ); 16 | //console.log(request.data["vacc_st_data"]); 17 | setstateData(request.data["vacc_st_data"]); 18 | } 19 | fetchData(); 20 | }, []); 21 | return ( 22 | <> 23 |

24 | State wise vaccine details 25 |

26 |
27 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | {stateData.map((state) => { 41 | return ( 42 | 43 | 44 | 45 | } 51 | /> 52 | } 58 | /> 59 | } 65 | /> 66 | 67 | 68 | ); 69 | })} 70 | 71 |
StateDose 1Dose 2Total doses
{state?.st_name}{value}{value}{value}
72 | 73 | ); 74 | } 75 | 76 | export default StateWiseVaccineComponent; 77 | -------------------------------------------------------------------------------- /src/Components/avatarModal/AvatarModal.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Modal, Button } from "antd"; 3 | import { Avatar } from "antd"; 4 | import { useSelector } from "react-redux"; 5 | import { auth } from "../../../src/firebase"; 6 | import { useDispatch } from "react-redux"; 7 | import { useHistory } from "react-router-dom"; 8 | import { UserOutlined } from "@ant-design/icons"; 9 | import "./AvatarModal.css"; 10 | import CheckIcon from '@material-ui/icons/Check'; 11 | import ToggleButton from '@material-ui/lab/ToggleButton'; 12 | import db from '../../firebase' 13 | import { logout, selectUser } from "../../features/userSlice"; 14 | 15 | 16 | 17 | function AvatarModal() { 18 | 19 | 20 | 21 | const [selected, setSelected] = React.useState(false); 22 | const [modal1Visible, setModal1Visible] = useState(false); 23 | const dispatch = useDispatch(); 24 | let history = useHistory(); 25 | const logoutUser = () => { 26 | 27 | auth 28 | .signOut() 29 | .then(() => { 30 | dispatch(logout()); 31 | history.push("/"); 32 | }) 33 | .then(() => {}); 34 | }; 35 | const user = useSelector(selectUser); 36 | 37 | 38 | 39 | const confirmMail=()=>{ 40 | if(!selected){ 41 | db.collection('users').doc(user?.uid).set({ 42 | email:user?.email 43 | }) 44 | } 45 | else{ 46 | db.collection("users").doc(user?.uid).delete() 47 | } 48 | } 49 | 50 | return ( 51 |
52 | setModal1Visible(true)} 58 | /> 59 | 60 | setModal1Visible(false)} 64 | width={350} 65 | zIndex={99999} 66 | className="modal__card" 67 | onCancel={() => setModal1Visible(false)} 68 | footer={null} 69 | > 70 |
71 | } 74 | size={74} 75 | src={user.photo} 76 | > 77 |

78 | {user?.displayName} 79 |

80 |

81 | {user?.email} 82 |

83 | 84 |
85 |

86 | Do you want to receive daily COVID-19 updates? 87 |

88 | 89 | { 95 | setSelected(!selected); 96 | }} 97 | className="toggle__btn" 98 | > 99 | 100 | 101 | 102 |
103 |
104 | 105 |
106 | ); 107 | } 108 | 109 | export default AvatarModal; 110 | -------------------------------------------------------------------------------- /src/Components/VaccinationPageComponents/FourCardsVaccination/FourCardsVaccination.jsx: -------------------------------------------------------------------------------- 1 | import React,{useEffect,useState} from 'react' 2 | import axios from 'axios' 3 | import NumberFormat from 'react-number-format'; 4 | import {Card} from 'react-bootstrap' 5 | import './FourCardsVaccination.css' 6 | 7 | function FourCardsVaccination() { 8 | const [datas,setDatas]=useState([]) 9 | useEffect(()=>{ 10 | async function fetchData(){ 11 | const request=await axios.get("https://www.mygov.in/sites/default/files/covid/vaccine/vaccine_counts_today.json"); 12 | 13 | setDatas(request.data); 14 | return request; 15 | } 16 | fetchData(); 17 | },[]) 18 | 19 | return ( 20 | 21 | 22 |
23 |
24 |

Vaccination details

25 |
26 | 27 | 28 | 29 |

COUNTRY

 30 | 31 | . 32 | 33 | 34 | 35 |
INDIA
} /> 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |

DOSE 1

 45 | 46 | India 47 | 48 | 49 | 50 |
{value}
} /> 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |

DOSE 2

 59 | 60 | India 61 | 62 | 63 | 64 |
{value}
} /> 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |

TOTAL DOSES

 74 | 75 | India 76 | 77 | 78 | 79 |
{value}
} /> 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
90 |
91 |
92 | ) 93 | } 94 | 95 | export default FourCardsVaccination 96 | -------------------------------------------------------------------------------- /src/Components/FourCards/FourCards.jsx: -------------------------------------------------------------------------------- 1 | import React,{useEffect,useState} from "react"; 2 | import axios from 'axios' 3 | 4 | import { Card } from "react-bootstrap"; 5 | 6 | import "./Styles/FourCards.css"; 7 | import NumberFormat from 'react-number-format'; 8 | 9 | function FourCards() { 10 | let now = new Date().toString().substring(0,25) 11 | const [datas,setDatas]=useState([]) 12 | 13 | useEffect(()=>{ 14 | async function fetchData(){ 15 | const request=await axios.get("https://corona.lmao.ninja/v2/countries/india"); 16 | //console.log(request.data) 17 | setDatas(request.data); 18 | return request; 19 | } 20 | fetchData(); 21 | },[]) 22 | 23 | return ( 24 |
25 |

{now}

26 |
27 | 28 | 29 | 30 |

TOTAL CASES

 31 | 32 | India 33 | 34 | 35 | 36 |
{value}
} /> 37 | 38 | 39 |
Cases today:{datas.todayCases}
40 | 41 | 42 | 43 | 44 | 45 |

ACTIVE CASES

 46 | 47 | India 48 | 49 | 50 | 51 |
{value}
} /> 52 | 53 |
Critical:{datas.critical}
54 | 55 | 56 | 57 | 58 | 59 |

RECOVERED CASES

 60 | 61 | India 62 | 63 | 64 |
{value}
} /> 65 | 66 |
Recovered today:{datas.todayRecovered}
67 | 68 | 69 | 70 | 71 |

TOTAL DEATHS

 72 | 73 | India 74 | 75 | 76 |
{value}
} /> 77 | 78 |
Deaths today:{datas.todayDeaths}
79 | 80 | 81 |
82 |
83 | ); 84 | } 85 | 86 | export default FourCards; 87 | -------------------------------------------------------------------------------- /src/Components/CovidHospitalComponents/CovidHospitalComponent.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState,useEffect } from "react"; 2 | import Select from "react-select"; 3 | import axios from "axios"; 4 | 5 | import "./CovidHospitalComponent.css"; 6 | import { Table } from "react-bootstrap"; 7 | 8 | function CovidHospitalComponent() { 9 | const [hospitalData, sethospitalData] = useState([]); 10 | const [flag, setFlag] = useState(false); 11 | const [selectedOption, setselectedOption] = useState(null); 12 | 13 | let options1 = [ 14 | { value: "Kerala", label: "Kerala" }, 15 | { value: "Goa", label: "Goa" }, 16 | { value: "Andhra Pradesh", label: "Andhra Pradesh" }, 17 | { value: "Assam", label: "Assam" }, 18 | { value: "Tripura", label: "Tripura" }, 19 | { value: "Punjab", label: "Punjab" }, 20 | { value: "Rajasthan", label: "Rajasthan" }, 21 | { value: "Sikkim", label: "Sikkim" }, 22 | { value: "Goa", label: "Goa" }, 23 | { value: "Chandigarh", label: "Chandigarh" }, 24 | { value: "Chhattisgarh", label: "Chhattisgarh" }, 25 | { value: "Haryana", label: "Haryana" }, 26 | { value: "Gujarat", label: "Gujarat" }, 27 | { value: "Himachal Pradesh", label: "Himachal Pradesh" }, 28 | { value: "Jammu & Kashmir", label: "Jammu & Kashmir" }, 29 | { value: "Jharkhand", label: "Jharkhand" }, 30 | { value: "Karnataka", label: "Karnataka" }, 31 | { value: "Maharastra", label: "Maharastra" }, 32 | { value: "Meghalaya", label: "Meghalaya" }, 33 | { value: "Odisha", label: "Odisha" }, 34 | { value: "Puducherry", label: "Puducherry" }, 35 | { value: "Tamil Nadu", label: "Tamil Nadu" }, 36 | { value: "Telangana", label: "Telangana" }, 37 | { value: "Delhi", label: "Delhi" }, 38 | { value: "Madhya Pradesh", label: "Madhya Pradesh" }, 39 | { value: "Uttarakhand", label: "Uttarakhand" }, 40 | { value: "Bihar", label: "Bihar" }, 41 | { value: "Uttar Pradesh", label: "Uttar Pradesh" }, 42 | { value: "West Bengal", label: "West Bengal" } 43 | 44 | ]; 45 | 46 | const handleChange = (selectOption) => { 47 | setselectedOption(selectOption.value); 48 | 49 | //console.log(selectOption) 50 | 51 | }; 52 | 53 | useEffect(()=>{ 54 | async function fetchData() { 55 | const request = await axios.get( 56 | "https://api.rootnet.in/covid19-in/hospitals/medical-colleges" 57 | ); 58 | let arr, arr2; 59 | arr = request.data.data.medicalColleges.map((individual) => ({ 60 | value: individual.state, 61 | city: individual.city, 62 | label: individual.name, 63 | admissionCapacity: individual.admissionCapacity, 64 | hospitalBeds: individual.hospitalBeds, 65 | })); 66 | 67 | 68 | arr2 = arr.filter((data) => { 69 | return data.value === selectedOption; 70 | }); 71 | 72 | sethospitalData(arr2); 73 | 74 | setFlag(true); 75 | 76 | } 77 | 78 | fetchData(); 79 | 80 | },[selectedOption]) 81 | 82 | 83 | return ( 84 |
85 |

86 | Covid hospital details 87 |

88 |