Eye Want To Rest

• 

  Before Task

• 

  Doing Task

• 

  Finished Task

• 

  Eye Exercise After Task

Inspiration

In 2010, an estimated 1.9 billion people were myopic. And in 2050, it's slated that about nearly 5 billion people (almost 50% of the world) will be myopic.

With the increasing dependency on technology nowadays, it becomes almost impossible to not look at a screen every day. But that's also why it's imperative that we take care of our eyes, as we only have one pair. The most common rule to rest your eyes is the 20-20-20 rule, which recommends people to rest their eyes every 20 minutes and look at an object about 20 feet (6m) for about 20 seconds. But even then, work will sometimes overtake us, so I think it will be of great help when people are reminded to rest by an external influence, like Eye Want to Rest.

What it does

Eye Want to Rest is a mobile application that reminds the user every 20 minutes to rest their eyes by doing a set of randomised eye exercises. These exercises can be done from 30 seconds to 10 minutes, but there is no strict rule that it must be done at what timing, only a recommendation and list of steps to follow.

The timer of 20 minutes is started when you click on the eye in the middle of the screen. The timer is meant to be started anytime you're working, be it looking at the screen or screening through documents. As long as your eyes are being used, you need to rest them. As it is a mobile application, the user is able to use it anywhere he or she goes, setting it down on the table where it will eventually reminder the user after 20 minutes to rest their eyes

How we built it

I built this application with React Native & Expo Toolchain. Used date-fns for date formatting and rn-tailwind for quick and easy styling of components. I also used expo-linear-gradient to create a dark gradient background that's easy on the eyes.

Challenges we ran into

Within the time period of the application, there were many features I couldn't implement, and kinks I couldn't iron out. I wasn't able to work the full 24-hours as I'm still in National Service and only returned home at about 6pm yesterday.

Main issues came with the Timer component, which, because of the timing module, state wasn't always up-to-date. After some tinkering did I finally find out about refs, which allowed for consistent state updates. Additionally, creating the countdown required some complex calculations and functions to be triggered exactly when the timer hit 0. It also required a lot of time to properly test out its features

Accomplishments that we're proud of

I'm proud of the timer function, which ran surprisingly smoothly despite the initial challenges, worked as intended. The timer counted down normally from seconds, to minutes.

Images and sounds were all taken off the Internet. Despite the limited options, I managed to make do with what I had and improvised as I couldn't find any illustrations of eye exercises with a consistent art style. I ended up taking screenshots from WikiHow.

Everything ended up working as planned. . Although it is a small project, given the limited time I have and that I was working solo, I'm quite proud that a lot of the features I planned for the project could be implemented in the final project.

What we learned

I learnt a lot about aspects of programming with time and date in this project, and it's not fun at all. At any point in time (no pun intended), a millisecond could throw a wrench in my plans and suddenly the timer is counting the opposite way!

What's next for Eye Want To Rest

• More fluid eye animation. Rather than two separate images, I want to animate the eye using an animation library instead.
• More eye exercises
• More customisation for the timer (e.g. timer can be modified to be 15mins or 30mins
• Statistics screen for the user to track how often they've been exercising their eyes for
• Rewards for the user for diligently keeping to the routine

Built With

• expo.io
• react
• react-native
• tailwind