Inspiration

Inspiration has been around for quite some time, the Worthy Web app challenge was a trigger to wake it up. It first came to me when I was searching for the right topic for my final thesis. There have been so many ideas and options, and I had a hard time choosing what to do. And then, suddenly, a flash of light came across my eyes, and it hit me: Light is the answer. I have to build something that has to do with light and colors. I always loved to see those fractal animations, and spacey, mathematical stuff. I chose to build a software with eye exercises. The reasoning behind this is that I had eye troubles myself - this is where exact inspiration came from. Eventually, I build a prototype and decided to update it in the future. As years were passing by, I always had my "light app" in my mind, but I never had the time to start working on it. Eventually, when I lost my recent job, I decided to invest my time in what was probably the greatest inspiration ever. And Web App challenge came to me at the perfect time. So here I am.

Eye Lighter is not a complex app

And that is how it should be. The main idea behind the app is to provide users with the chance to completely relax, not think about what they have to do. The functionalities of the app are to make users both physically and mentally relaxed.

First build

Before I found out about Worthy Web App challenge, I started building this app with ZIMJS. It seemed like a perfect choice, because the app is suppose to include animations. Therefor, I made two animations with ZIM, and then I had to start thinking about how to implement KendoReact components withing the project.

Converting ZIMJS animation to React component

Initially, I figured I have to convert the ZIM code to a React component. I managed to do it, but displaying that component remains a challenge, and this is probably due to lack of React knowledge. I also wanted to make at least one animation with KendoReact Animation. Here I was struggling with how to track an object's position when it moves through time. For example, the circle has reached the position close to the right side of the window, make it stop. I made the right calculations, but I think that the code was not in the right place in React component. Anyway, as a temporary solution, I used setInterval method, but I am aware this is not perfect either.

Good job

I am proud of all the work I have done regarding this app, but especially for converting ZIM to React. I am also very grateful to know about Telerik and KendoReact, this was a chance for me to learn more about React in general.

What I have learned

I have learned (again) that assignments best get done when you don't force anything, when you are relaxed and you believe and know that you can do the work that you planned to do. I have learned a great deal about ReactDOM, and other React important stuff, and often used methods, such as lifecycle methods.

Next steps

There will be more to do. First thing's first, refactoring the code. I am aware there are better approaches for certain situations, so I will adjust the code accordingly. Perfecting the details and adding more exercises will come next as well.

How this app is for a good cause?

The Eye Lighter application consists of functionalities that act like exercises for human eye muscles. The exercises should improve several eye functions, such as tracking and working together at the same time, but also they should make us feel more relaxed and even improve our vision and insight. All of it achieved simply by looking at the moving objects and different colors. The idea is to not struggle, but to feel relaxed. If we can find ourselves in that state during the use of application, then we can surely be like that at any time. All it takes is the practice. This app can make us more relaxed and more focused in situations when needed. The good part of it is that when we are in a relaxed state of mind, we are most likely able to think better and make better decisions. This improves our life in general, and makes the entire collective healthier.

Built With

Share this project:

Updates