Mission Vision Chrome Extension (Healthcare Theme)

The Chrome extension to take care of your eyes while working on your computer 👀

See Demo Video : https://youtu.be/nZRVMrnfxd4

On Chrome Web Store : ( Pending - Coming soon )

How to use this extension

Note : This extension will work on any chromium based browser such as Chrome, Brave, Edge etc.

Steps to Install

1. Clone this repository.
2. Run npm install in the root directory.
3. Run npm run-script build / yarn build in the root directory.
4. Navigate to chrome://extensions/
5. Toggle the developer mode (Activate it).
6. Click on 'Load Unpacked'.
7. Select the build folder.

Inspiration

More than 50% of the users face CVS(Computer Vision Syndrome) which gives a discomfort to their eyes due to the screen they are using. Reducing this stressful problem became our goal for this Hackathon.

What it does

Mission Vision is a Chrome Extension which reminds you to take a break from your busy and tedious schedule. This popup on your browser reminds you to look away every 20 minutes at an object that is about 20 feet away for a full 20 seconds. Mission Vision also makes you aware about lots of facts about your eyes.

How we built it

We used Figma for design prototype, Used React.js for frontend and Node.js for backend to serve dynamic fact via API.

Challenges we ran into

Our biggest challenge was figuring out how to make the extension work on most of the browsers. We used the chrome API to detect the browser and then we used the browser API to detect the version of the browser. Our 2nd challenge was to handle the server errors, thankfully React Query helped us actively handle the errors from server.

Accomplishments that we're proud of

We were able to implement a custom caching mechanism to store latest facts in the browser to serve offline. And yes, Our extension works on every chromium based browser.

What we learned

We learned about how exactly brower extentions work and how to make them work on most of the browsers. Also, We learned a lot about how to work in a team environment and how to break down a project into smaller pieces. We learned how to use the documentation for understanding the concepts.

What's next for Mission Vision

We are planning to add support to firefox browser & Improve the UI of our extension. Wanted to add fun activities in the extension which will keep your eyes healthy.

Application Links

FrontEnd Code -> https://github.com/Prathamesh-Dukare/Chrome-Extension-HTL
API Server running on -> https://replit.com/@PrathameshDukare/HTL-Project-Backend

Tech Stack

FrontEnd: Reactjs
BackEnd: Node-Express

Additional NPM Libraries

• react-query: 3.34.14
• express.js : 4.17.2
• react-browser-extension-scripts :4.0.10
• react-dom: 17.0.2

Styling: CSS

Deployment: Chrome Web Store (...Pending)

This Project is a part of Hack The Leauge Hackathon in the theme of HealthCare

Glad to see you here! Show some love by Connecting on socials