Update: Readme, Testing out Antigravity skills

README.md

@@ -1,112 +1,130 @@
-# Team codeBlooded
+<div align="center">
+  <img src="Web-Components/assets/banner.png" width="80%" alt="HopeVid Banner" />
+</div>
+
+<h1 align="center">HopeVid</h1>
 
-Official Entry of Team codeBlooded, from SRM Institute of Science and Technology, Kattankulathur, to HackRx, by Health Rx Bajaj Finserv. <br>
-![Collaborators](https://img.shields.io/badge/collaborators-4-red)
-![Status](https://img.shields.io/badge/status-under_development-yellow)
-![Issues](https://img.shields.io/badge/issues-0-blue)
-[![made-with-Markdown](https://img.shields.io/badge/Made%20with-Markdown-1f425f.svg)](http://commonmark.org)
-[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/)
+<p align="center"><b>The full HopeVid build — chatbot, video consultation, and web app — that took 2nd Runners Up at HackRx 1.0.</b></p>
 
+<p align="center">
+  <img src="https://img.shields.io/badge/Hackathon-HackRx%201.0-e30613?style=for-the-badge&logo=bajaj&logoColor=white" />
+  <img src="https://img.shields.io/badge/Year-2020-1f425f?style=for-the-badge" />
+  <img src="https://img.shields.io/badge/Award-2nd%20Runners%20Up-f4b400?style=for-the-badge" />
+  <img src="https://img.shields.io/badge/Stack-React%20%2B%20Firebase-61dafb?style=for-the-badge&logo=react" />
+  <img src="https://img.shields.io/badge/License-MIT-3da639?style=for-the-badge" />
+</p>
 
-## Problem Statement 🚧
+---
 
-- COVID Tracking and Escalation
+## About
 
-## Background 📖
+- **What** — HopeVid is a preventive, personalized COVID-19 web + mobile platform with two AI chatbots (symptom screening + mental health), in-app video consultation, lab test booking, and community reporting.
+- **Who** — Team **codeBlooded**, SRM Institute of Science and Technology, Kattankulathur: Aaishika S Bhattacharya (Team Lead), Souharda Biswas, Akash Ramjyothi, and Gyanesh Samanta.
+- **When** — June 2020, during the first COVID-19 wave.
+- **Where** — **HackRx 1.0** by Bajaj Finserv Health — finished as **2nd Runners Up**.
+- **Why** — Hospital capacity, not the curve, was the binding constraint. HopeVid was built to "raise the line."
 
-As of 12th June 2020, there are 290,000+ cases of the novel Corona Virus reported in India, out of which  about 8,500 people have lost there lives, and the worse part is this number is still growing. 
-There are two ways to combat COVID-19, Flattening the curve, or raising the line. While flattening the curve is achieved by people being socially distant, raising the line is achieved by raising the capacity of healthcare facilities available. Our Web Application is based on the second aspect, i.e raising the line.
- The Novel Coronavirus has four stages of transmission:
-- Stage 1: First Appearance
-- Stage 2: Local Transmission
-- Stage 3: Community Transmission
-- Stage 4: National Epidemic <br>
+> This repository is the **full HopeVid monorepo** — the React chatbot, the Agora video consultation room, and the static web shell that ties them together. (The companion [HackRx1.0](https://github.com/GyaneshSamanta/HackRx1.0) repo holds the original hackathon submission of the static layer alone.)
 
-India as of today has entered *stage 3* and there still isn't any sign of vaccines or drugs. So the only way out currently is to stop further spread of this virus as much as we can.
+## The Story
 
+By June 2020 India had crossed 290,000 confirmed cases and entered Stage 3 community transmission. People with mild or ambiguous symptoms had no fast way to know whether to isolate, see a doctor, or book a test — and clinics were either locked down or overwhelmed. Mental health, the silent second pandemic, had no product attention.
 
-## About Our Product 🔧
-### What
- We at team codeblooded, propose a Web-application which is preventive, personalized and most importantly affordable. Our web-app called, **'HopeVid'**, serves the purpose of tracking and escalation of people who might be COVID suspects based on the inputs provided by individuals. This information is provided by the user voluntarily and stays safe within our database. We do not store any essential data, as Security of the system is our priority. The WebApp provides minimalist interface aimed at users from all age groups. 
+Team codeBlooded designed **STAE-C — Systematic Tracking and Escalation Checking**: a chatbot pre-screen for symptoms, automatic referral to a doctor inside an in-app video consultation, lab test booking via partner pathology labs, and conditional escalation to authorities only when results returned positive. A second **mental-health chatbot** ran in parallel doing mood check-ins and suggesting engaging activities. Everything was wrapped in deliberately minimalist UI so users across age groups could navigate it.
 
-With our product, we implement two chatbots, one of them is designated for a pre screening of the patient which is done before assigning a doctor, and the other a 'Mental Health' Chatbot, which is aimed to check the User's mood and provide them engaging and fun activities. 
-The second phase of the WebApp is aimed at reaching out to available doctors, booking tests and provides news information about the current state of COVID around the world. It also implements a feature of 'reporting people' using which people can report probable COVID suspects.
-There's a third separate section in which we embed reliable information from sources such as YouTube, News Sources, and Quizzes as the basic informational guide.
+The build broke into three modules — a **React + Bulma chatbot SPA** (Create React App, Node 13 / npm 6 era), an **Agora RTC 3.1.1 video room**, and a **multi-page static web shell** with Firebase auth and Firestore — plus a thin React Native WebView wrapper for mobile. End result: **2nd Runners Up** at HackRx 1.0.
 
-HopeVid is expanded to a mobile application which is a WebView of our WebApplication and is built using React Native.
+## Gallery
 
-We also implement a 'tracking' feature for the User to track their health visually by synthesizing data in the form of vitals taken during the User's conversation with our Chatbot.
+<div align="center">
+  <img src="Web-Components/assets/banner.png" width="80%" alt="HopeVid banner" />
+  <br/><br/>
+  <img src="Web-Components/assets/about-header.jpg" width="60%" alt="About header" />
+  <br/><br/>
+  <img src="Web-Components/assets/mask1.jpg" width="40%" alt="Mask graphic 1" />
+  <img src="Web-Components/assets/mask2.jpg" width="40%" alt="Mask graphic 2" />
+</div>
 
-We also plan to have an in house Mental Assessment Quiz that will help the User stay happy and sane even when they are restricted to four walls.
+A detailed [API Approach.pdf](chatbot/API%20Approach.pdf) ships inside `chatbot/` for the system / API design.
 
-### Why
-With HopeVid, we aim at providing a simple interface so users from all age groups can use it, and can be aware about the situation. Due to restrictions in movement, and the lockdown that we are under, most people are unable to consult physicians/doctors or book tests. Our Product, HopeVid comes to aid as it connects individuals with doctors provides features as online pathology labs, which are functional in the zone so the user can avail these neccesities without having to step out of their houses. We would be able to integrate DRx, LabRx, ActiveRx, and PharmRx to provide better service in future. We provide simple and minimal UI/UX in a small storage space as we provide a simple WebView of our Web App in a React Native Application.
+---
 
-### How
-We have come up with an idea, 'STAE-C', which expands to 'Systematic Tracking and Escalation Checking' for COVID-19. The Process Flow is in the following order:
-- First the User takes a screening test about symptoms while having a conversation with our Chatbot.
-- If the Chatbot predicts that the User might be carrying significant symptoms, it refers a Doctor to the User.
-- Data fed to the chatbot (Health Vitals) is used for visual representation for better analysis. 
-- The User can interact with the Doctor using a  after booking an appointment and report about more symptoms and vital information.
-- If the Doctor confirms that the User might be a probable patient of COVID-19, the Doctor suggests the required tests for confirmation.
-- HopeVid now helps connect the User to the Pathology Lab, wherein the User's sample can be taken for further evaluation.
-- If the test results come positive, details of the user are shared with designated authorities for a better escalation.
+## Tech Stack
 
-The User's personal details as Address or Mobile Number are kept private. Only Name, Age, gender and other essential details are shared with the Doctor. Aforementioned details and the Email Address of the user are shared with the Pathology Lab to enable the User to view and connect with the Lab and vice versa. Only if the result is positive, all required details are shared with authorities.
+- **Frontend (chatbot SPA):** React 16, Create React App, Bulma, Bootstrap, Materialize CSS, axios
+- **Frontend (web shell):** HTML5, CSS3, vanilla JS, Bulma
+- **Mobile:** React Native (WebView wrapper)
+- **Chatbots:** Google DialogFlow — symptom screen + mental-health bot
+- **Video Consultation:** Agora RTC SDK 3.1.1
+- **Maps:** Mapbox GL
+- **Auth / Database:** Firebase, Firestore
+- **Cloud:** Microsoft Azure
+- **Hosting:** Netlify (initial testing)
 
-This process reduces unwanted hastle by reducing the time and effort that needs to be put up by a user to test himself or herself for COVID. Users will be at ease to use the app irrespective of their age because of its simplicity and integration, all at one place, while boosting the efficiency in monitoring the situation and people.
+## Repo Structure
 
-## Timeline ⏰
+```
+Team-codeBlooded/
+├── index.html              # Entry point (web shell)
+├── Web-Components/         # Static multi-page web shell
+│   ├── Hero.html, About.html, HopeVid.html, News.html
+│   ├── Chatbot.html, MHealth.html, Statistics.html, Report.html
+│   ├── Login.html, Register.html, Timeline.html, NavBar.html
+│   ├── auth.js, loginAuth.js, reportStorage.js
+│   ├── styles.css, log.css
+│   └── assets/             # Banners, headers, masks
+├── Video-Conference/       # Agora RTC video consultation room
+│   ├── index.html, AgoraRTCSDK-3.1.1.js, vendor/, assets/
+└── chatbot/                # React (CRA) chatbot SPA
+    ├── public/, src/, scripts/, config/
+    ├── package.json
+    └── API Approach.pdf
+```
 
-- Week 1: Research and Initial Documentation
-- Week 2: Initial Pitch in the form of Presentation
-- Week 3: Prototype Development (During Hackathon)
+## Getting Started
 
-## Technology Principles Proposed 💡
+**Prerequisites:** Node 13.7 / npm 6.13 (per `chatbot/package.json` engines), or Node 16 with `--legacy-peer-deps`.
 
-- Cloud First
-- Mobile First
-- Interoperable
-- Modular
-- Minimalist Design
-- Reusable
-- Open APIs
+```bash
+git clone https://github.com/GyaneshSamanta/Team-codeBlooded.git
+cd Team-codeBlooded
 
-## Proposed Technology Stack 💻
+# 1. Static web shell — open directly or serve
+npx http-server .                  # then http://localhost:8080
 
-- Firebase/Firestore
-- Azure
-- React
-- React Native
-- HTML, CSS, JavaScript
+# 2. React chatbot SPA
+cd chatbot
+npm install                        # add --legacy-peer-deps on modern Node
+npm start                          # CRA dev server on :3000
+npm run build                      # production build
 
-## Tools and APIs
+# 3. Video consultation room
+cd ../Video-Conference
+# open index.html (set your Agora App ID inside)
+```
 
-- Bulma
-- Bootstrap (ChatVid)
-- Materialize CSS (DocVid)
-- Netlify (For Initial Testing)
-- DialogFlow by Google
-- LineIcons
-- Font Awesome
+Add your DialogFlow agent ID, Firebase config, Mapbox token, and Agora App ID to the relevant files before running chatbot, auth, maps, or video features.
 
-## Attributions
+## Contributing
 
-- [Mapbox](https://www.mapbox.com/)
+Issues and PRs welcome. This is an archived hackathon project — responses may be slow.
 
-## Use Cases 🤝
+## License
 
-1. Reusable code that can be customized for other health hazards.
-2. Effective in dealing with the current situation.
+Released under the [MIT License](https://lbesson.mit-license.org/).
 
-## Future Upgrades 👀
+## Team / Credits
 
-1. Addition of AIML Models for Predication and Analysis
-2. Introduction of a Super Cheap Microcontroller based apparatus that can be used to measure health vitals of the user.
+Team **codeBlooded**, SRM IST Kattankulathur:
 
-## Collaborators 🤖
+- [Aaishika S Bhattacharya](https://github.com/aaishikasb) — Team Lead
+- [Souharda Biswas](https://github.com/TheSouharda)
+- [Akash Ramjyothi](https://github.com/Akash-Ramjyothi)
+- [Gyanesh Samanta](https://github.com/GyaneshSamanta)
 
-- [Aaishika S Bhattacharya](https://www.github.com/aaishikasb)
-- [Souharda Biswas](https://www.github.com/TheSouharda)
-- [Akash Ramjyothi](https://www.github.com/Akash-Ramjyothi)
-- [Gyanesh Samanta](https://www.github.com/Gyanesh-Samanta-123)
+Special thanks to **Bajaj Finserv Health** for hosting HackRx 1.0.
+
+<div align="center">
+  <br/>
+  <i>2nd Runners Up — HackRx 1.0 (Bajaj Finserv Health, 2020).</i>
+</div>