-
-
This is how user will get notification reminder after 20 each minutes
-
This is how user will get new fact after clicking on extension quick button
-
Mission Vision Thumbnail
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.
Log in or sign up for Devpost to join the conversation.