Remembrify

Remembrify is a Single Page Application (SPA) made in React + Typescript. The app allows you to set multiple reminders with a sound alarm, helping you to maintain your health routines while you are at your desk, without losing focus.

Project Purpose and Goal

While working at my desk, I often find myself deeply engrossed in the task at hand, navigating through multiple StackOverflow discussions, experimenting with various code snippets, and engaging in a cycle of testing and reading.

However, it's crucial to remember that maintaining one's health requires regular breaks: experts suggest standing up for about three minutes every 30-60 minutes, drinking water hourly, and for someone like me who wears contact lenses, ensuring my eyes are hydrated consistently.

Setting alarms on my phone was my initial strategy, but this approach led to distractions due to incoming messages and notifications. I wondered, how could I implement a straightforward reminder system tailored to individual needs?

Problems and Thought Process

My primary requirement was a flexible countdown system: one that's simple to configure, allows for additions or deletions on the fly, and offers both individual and collective control.

React emerged as the obvious choice. It enabled me to develop a single component's logic and replicate it, along with UI elements such as buttons and counters. The application could run in a browser tab, quietly operating in the background during my work sessions.

After establishing the countdown mechanism, I could have a fixed amount of them to meet my personal needs. But what if a different person was using the app? Yet, considering potential diverse users prompted me to leverage browser LocalStorage for saving user-specific countdown data, circumventing the need for an external database. This decision maintained the app's simplicity while integrating a crucial customization feature.

Lessons Learned

I had to provide some kind of validation logic in the "Add your countdown" component. I managed the Change and Blur events for form inputs, and this proved to be a challenging yet informative experience, especially for a form with just two inputs, teaching me valuable lessons for managing more complex forms in the future.

Moreover, hosting the app on a website introduced certain limitations. Ideally, a standalone executable file would enhance accessibility and convenience. Exploring Electron as a solution for creating desktop applications from web technologies is something I plan to consider moving forward.

The project was not originally designed with TypeScript integration in mind; however, I took the initiative to refactor it to utilize TypeScript. This decision was motivated by the desire to enhance type safety, incorporate custom types, and effectively manage event types within React, thereby elevating the project's code quality and maintainability.