Siddhi Gate's Blog

Siddhi Gate's Blog

Eye Care - An app that will help you to take care of your eyes

Eye Care - An app that will help you to take care of your eyes

Introducing Eye Care

Background

As a software developer, I am in front of my screen 24/7. With everything being remote, my screen time just went up. This increase in screen time only caused my eye strain to increase. It was then I realized how harsh it was for my eyes and how much the health of my eyes mattered. Sooner, I came across 20-20-20 rule.

The rule says that for every 20 minutes spent looking at a screen, a person should look at something 20 feet away for 20 seconds. Following the rule is a great way to remember to take frequent breaks. This should reduce eye strain caused by looking at digital screens for too long.

Though this rule sounds easy to follow, it is much harder to maintain discipline. That's when I thought of making an app that will remind me to follow this rule and thus, help to take care of my eyes.

How does it work

  • Eye Care will remind you every 20 minutes to look 20 ft away for 20 seconds.
  • The main challenge is to stay disciplined, for that:
    • This app will plant a flower
    • Every time eye care reminds you, you should follow the rule
    • The more you stay disciplined, your flower will bloom happily.

Features

Reminder to follow the 20:20:20 rule

timer.png reminder.png

Score based on your discipline

dashboard.png

  • Every time you follow this rule your score will increase.
  • As your score increases, your flower will bloom

Technologies

Frontend built with

  • JavaScript
  • HTML
  • CSS

Backend built with

  • Node.jS
  • Express.jS
  • HarperDB

Building Eye Care

I'm new to web development. That's why, even though, the functionalities seem easy, it was quite challenging for me to implement.

To simplify the development of this app, I formed smaller tasks which were:

Section 1: Frontend

  1. Timer
  2. Modal dialog
  3. Sign in, sign up pages
  4. Api calls through JavaScript
  5. Authentication

Section 2: Backend

  1. Getting familiar with HarperDB
  2. REST API for CRUD operations
  3. Authentication
  4. Authenticated private routes

After performing the tasks, I later integrated them into one, which turned out to be this Eye Care app.

What's next

I am looking forward to add more features this app.

  • Garden of flowers - A feature where user will be able to plant a garden of flowers with a variety of different flowers.

  • Back care - As almost everything is now being remote, we are constantly sitting in front of our screens. Maintaining a good posture while sitting is important. A feature to detect bad posture will help to notify the user to sit straight. This feature is next on the list.

  • and more

This is my submission for the #harperdbhackathon. I hope this app helps you.

#harperdbhackathon
ย 
Share this