HalcyonDays

• 

  Main page - default

• 

  Click on "My Settings" to edit your wake-up, relaxation (rest), and sleep times

• 

  Time bar (pink = completed tasks, orange = incomplete tasks, yellow = buffer time, light blue = rest, dark blue = sleep)

• 

  Main page - All functions open (My Notes, My Countdowns, My Stats, My Tasks)

• 

  The "My Stats" box will help you keep track of your daily progress

• 

  Little messages will be visible on the screen throughout your day :)

Inspiration

As students who organize their tasks by how long they take rather than when to do them, we decided to create an alternative scheduling app that focuses on allotting chunks of time to tasks. It also encourages the user not to overwork by setting specified relaxation and sleep times.

What it does

The center bar has a marker that moves forward in time throughout the day. The user can change what time they'd like their day to start, as well as what time they'd stop working (relaxation) and the time they'd sleep.

When the user adds tasks in the right-most menu (My Tasks), they show up in the center time bar, with widths that correspond to how long each task takes. Checking off tasks marks them as complete in the tasks menu and in the time bar. By navigating to different days, the user can add/edit/delete tasks for any day.

In the "My Stats" section, the user can view how much work they've accomplished, how much they still need to finish, and how long they have to rest and sleep.

In the left-most menu (My Notes), the user can create different notes.

In the "My Countdowns" section, the user can add deadlines or special events.

How I built it

• Adobe XD to create the design.
• Firestore database to store user data.
• React.js to build the user interface and link to the database.

Challenges I ran into

• Animations and connecting boards in Adobe XD.
• Translating a design into CSS.
• Firebase authentication/email verification.
• Changing the widths in the center time bar to reflect the user's task, work, relaxation, and sleep times.
• Allowing the user to change their day so that it doesn't start at 12 am, but rather when the user wakes up.

Accomplishments that I'm proud of

• Learning Adobe XD from scratch.
• Designing and developing a detailed prototype of the app.
• Implementing a customizable time bar for tasks, work, relaxation, and sleep.
• Allowing the user to navigate to different days and add tasks to these days; this allows users to view archived past days and plan ahead for future days.

What I learned

• Adobe XD to create an intuitive UI.
• Better understanding of Firebase authentication and React.js.
• The importance of user feedback in app design and development.

What's next for HalcyonDays

The following are features we initially aimed to achieve and have since added in our most recently updated app:

• Visually displaying tasks in the center bar, with task widths proportional to how long they take to complete.
• Adding note-taking functionality.
• Improving UI with colours, graphics, and animations for a more calming experience.
• Archiving each day so that the user can access that data again.
• Adding reminders to relax, sleep, etc. throughout the day.

Built With

• adobe-xd
• firestore
• javascript
• react.js