Recall

Calendar Page: Self Habit Tracker part 1
Habit Page: Adding List of Habits User Wants to Track
Account Page
Calendar Page: Self Habit Tracker part 2(alternative dates)

Inspiration

Forgot how much you paid for dinner two days ago, or struggling to remember your sleep quality the week leading up to that physics exam? It happens to the best of us. You might find yourself seeking a way to easily note down the things that happen for future reference. Which leads us to…

What Recall does

Recall is a web app for Amnesiacs to record things they want to remember doing in past days. Amnesiacs can decide what to record on a daily basis, with huge flexibility and no pressure - purely for memory’s sake.

Recall has a calendar page, where Amnesiacs can choose a day to view and add notes to. To optimize for quick jots, the daily view is pre-populated with fields that the user can customize.

How we built it

We built Recall using reflex. We thought it would be interesting to learn a new framework, but with a language that is more familiar to us, Python. Throughout this hack weekend, we have researched how reflex is able to store states, display components, and work with the formatting of said components. While building the project, we used Git as our primary form of version control and Google Slides for prototyping and design.

Challenges we ran into

Some challenges we ran into include flex boxes, which led to hours of figuring out why buttons worked on certain window sizes and not others. Also, with managing states, since unlike React, reflex’s states are packed into an inaccessible object that cannot be printed, only rendered on the screen.

Accomplishments that we're proud of

We are proud to have learned and implemented a project with a previously unknown framework this weekend. Amnesiacs are able to edit their main habits, and fill in additional labels and notes related to such habits.

What we learned

We learned that a lot of CSS and HTML components in reflex are similar to those of React. However, there are differences as well. For example, reflex’s states are unable to be printed directly on the console, and instead we must render them through a component to view the contents. In addition, it was really interesting to see how reflex can wrap React components and use them just as we would in React. It was through wrapped react components that we ultimately figured out how to display a calendar on our website, since a calendar isn’t a built-in reflex component.

What's next for Recall

Being a memory app, Recall sees a lot of potential. For example, customizable memory-jogging prompts would be a great addition to an Amnesiac’s arsenal.

With more time, we would have liked to develop reordering of habits based on priority levels of the user. In addition, integrating AI to generate colorful and creative visualizers based on habit completion or giving daily affirmations for the user to view each day.