Helios banner

Helios

Created by: jakeperrin2307
17 devlogs
30h 44m 14s

In my final year of school, juggling assessments, homework, and study time has made it clear how disjointed some existing tools are. Over the years I tried Todoist, Notion, Timetable, YTP, and many others (I actually quite liked Todoist) but I think that the biggest problem was that any one of these app’s couldn’t do it all. This is where I am trying to step up, my project is an attempt to build an app I wish I’d had. Which is a central control room for managing school life, with features like assessment tracking, task management, calendars, study timers, and maybe even structured note-taking. While student-focused, the system is designed to be extensible for anyone who wants better control over their time and responsibilities.

Repository

README

Loading README...
jakeperrin2307
jakeperrin2307 worked on Helios
6 days ago
0h 47m logged

Debugged a bunch of stuff and tried to streamline alot of stuff as well.

Example: When opening the timetable tool it would always show the earliest time (5:00am) but now it will center to the current time so it is easy to navigate to what is on next and after that.

Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
7 days ago
2h 14m logged

The reflections tab turned out great!

What was added for the reflections tab:

  • Little information icon
    • Warns about bad mental health, and that if someone is relying on this tool they should also seek proper help since bad mental health is a serious issue.
  • Questions
    • 5 daily questions to gauge your general mood
    • Once completed they will disappear
  • Journal
    • Can write a journal log with a title and body text
    • Text will stay, and any changes will result in edits in the archive tab
  • Archive
    • Can search any day you have completed a journal log or questions and navigate ot them to see your past logs
    • Can delete past logs or questions

Thats it!

Attachment
Attachment
Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
7 days ago
3h 45m logged

Alot has happened since my last log, and I’m sorry for not splitting this up. But the timetable required alot of work.
List of additions:

  • New icons, I always intended to change the emoji’s (they were placeholders) so I did that here.
    • I used SF symbols for the new icons, it is a mac app and it has a bunch. Definitely check it out.
  • Working timetable
    • Weekly, fortnightly, and monthly scheduling
    • Easy to set up blocks
      That is the very basic run down of what was added. I had to do alot of debugging with the sidebar. As it was, it would shift the whole container when pressed and squish the whole screen and nodes so I essentially redid it.
0
jakeperrin2307
jakeperrin2307 worked on Helios
9 days ago
0h 34m logged

I didn’t like context tab name (as I mentioned) so it has been changed to “on now”, and instead of extra context it will display what is next.

I also though the todo area could be improved. Since in the todo node you can chose dates and subheadings. If the tab couldnt do those things then there was no point in it being easier/faster. So I added those things.

0
jakeperrin2307
jakeperrin2307 worked on Helios
9 days ago
1h 46m logged

Added:

  • Context tab (I have to think of a new name XD)
    Basically, you press the tab on the side and it will open up when you have now and what you have next, some information on it (if there is any) and the option to add a todo task
    When this window is open, only four apps will be visible and the user can scroll up/down to see the others. Apps cant be re-ordered in this orientation and there is no back button (because it became too cluttered).

Thats it for now!

Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
10 days ago
1h 49m logged

This session I added:

  • more of a framework for the new nodes
  • nodes can now be re-arranged (extra user customisation)
  • node move is triggered by a button that appears when hovering over a node
  • completely rethought the design mainly the fonts, I realised that I was using like 5 different fonts and it just wasn’t cohesive. So in sticking with the apple theme I made them all similar

I doesn’t sound like much for almost 2 hours of work, but alot of time was me trying to find a good way for everything look. I also wanted to set up a solid framework for the new nodes.

Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
10 days ago
1h 6m logged

I decided that for this project to really stand out for the user, especially when Notion and other apps are an option it needs to have better/unique features.
So I chose to add 4 new nodes:

  1. Calendar
    Will sync to the timetable. Work block can be linked to the pomodoro app so that when clicked on will take the user to the pomodoro node.

  2. Focus Tracker
    See how on task you are in a few categories, as of now these categories are how much work is completed before deadlines and pomodoro usage.

  3. Reflections
    Can reflection on how the day was, how the weather was, how the people are you made you feel and journal. A wellbeing node. Will think about more things for the user to reflect on.

  4. Goals
    User can set goals and see how they are tracking with them. E.g. might be “I want to always complete my work before the date it is due.” and the node will try to track that.

With these the user can do alot more on this app.

Of the new nodes, my favourite is the reflections. With a large workload and pressure, I think good wellbeing is the most important thing to consistency deliver good work and still enjoy yourself. Journalling is regarded as one of the best ways to help with wellbeing so I decided to include that in the app too.

Right now it is a bit buggy, and for now this work has been done to scaffold these new features.

Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
11 days ago
0h 21m logged

I realised that when completing a task, it wound’t actually do anything, so I fixed it up.

When completing a task, it will slowly fade away, if the box is unchecked in that period it won’t delete (it will cancel the completion). Also, the other tasks will move up to take its spot.

Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
11 days ago
2h 40m logged

This session I just about finished the todo node.
A list of things I added/considered when designing and making the todo node:

  • I wanted it to be easy to see what work the user had coming up.
  • Work could be listed under ‘subheadings’ if wanted, in a schooling context these subheadings could be the subjects like seen in the photos.
  • Dates to stay on top of deadlines
  • Can remove todos and subheadings
  • Can mark them as completed
  • I wanted the left side to have the ‘subheadings’ (as can be seen) because that would allow the rest of the screen to show the todo’s which would increase readability

It still has a little refining to happen in order for it to be of an acceptable standard.

**Side thing I changed. I wasn’t happy with how the windows/nodes would open, so I changed it to an instaneous open ‘animation’ rather than a slide or fade effect.

Attachment
Attachment
Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
12 days ago
3h 43m logged

Alot has happened since my last devlog (and I’m sorry for leaving it this long).
A little list of what has been added/changed:

  • Pomodoro looks better now (I still think I’ll want to change it a bit to look more Apple-esque)

  • Added light/dark to automatically match the devices choice

  • Planned and executed on a very basic ‘Peaceful Display’, 2 modes, winter and summer.
    In winter: Snow falling, snowy hills
    In summer/autumn/spring: leaves falling, sun, grassy hills

  • If the user clicks on the clock on the ‘Peaceful Display’ it will bring up a bunch of options for the clock and background. E.g. you can change the clock font, font color, 24hr time or 12hr time, and what season you want it to be.

A bit of context around the ‘Peaceful Display’…
When studying or trying to do work, there are so many distraction all around us (phones, laptop, etc…), so this display is an attempt to remove one of these distractions so that when someone is working, they can flip on this display and it will show them the time rather than lure them to distractions.

That’s it for now, time to work on the todo node!

1

Comments

jakeperrin2307
jakeperrin2307 12 days ago

tried to replace photo’s but it wouldn’t let me…

jakeperrin2307
jakeperrin2307 worked on Helios
14 days ago
2h 54m logged

I worked on alot of stuff in this session so I’ll try not to yap alot.
Here is a list:

  • Fixed the dark mode
  • Added basic node infrastructure
  • Made it so node hover glow was based off the option in settings
  • Pomodoro basic function (needs improvement in regards to UI)
  • Debugged, alot 😭
    That’s about it.

The main thing that took me a while here was fixing issues I had accidentally made while coding at the beginning. For example, the MainScreen app container actually went from the left wall of the app container to the left wall of the screen which was bugging alot the UI.

I want to add more personalisation, please let me know if you think anything should be added 🙏🏻

Attachment
Attachment
Attachment
Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
15 days ago
0h 43m logged

When testing my app, my friend commented on how he hates the sound that the StartupScreen makes, at first I was just going to dismiss the thought but I realised that it would be a real let down if an app I liked played an annoying sound all the time. So I made a setting that allows for the noise on startup to not happen.
Also, I wanted there to be a way for users to go back to the StartupScreen, so I introduced a back button. (It also changes with dark mode).

Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
16 days ago
3h 16m logged

This session was finalising the settings window for now and embracing my perfectionist self.

For the settings tab, I wanted a feature that made it a bit more personal to the user and to add a little flair, for this I decided on a glow effect (idea sparked from the shadows of the app container), this glow effect would essentially just be a coloured shadow around the main screen app container. I give the user a few options for colours: none, blue, red, orange, green, purple, and pink.

As for the second part in this session, I wasn’t 100% happy with the way the app felt. I really want this project to do well so I spent a good amount of time fiddling with margins, padding, the dark and light mode as well as some other things to truely make the app feel alot cleaner and I think I’ve managed to achieve that.

Lastly, for this log, I’d like to know if you guys have any settings suggestions for me that you like to see added.

Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
18 days ago
0h 22m logged

After creating the main screen I realised I much preferred the app container look, and that I wasn’t vibing the the ‘Bump.wav’ sound effect. So I did what any reasonable person would and changed it.

It wasn’t exactly a difficult change but it contributed alot to the design imo.

After adding the app container I made changes so that the Helios title and logo reminded in the middle of the page (since after adding the container it shifted them to the right for some reason).

The new sound plays a little earlier and I also made the screen fade a bit longer so the sound wasn’t getting cut off. It sound more like a synth which suits it better.

Also, since both pages are now on app containers of the same size, it fades alot cleaner.

Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
18 days ago
1h 50m logged

After finishing the startup screen, the next obvious step was to do the ‘MainScreen’ which is where everything will be. I was at a bit of a loss for what I wanted to add first, but after a bit of time I managed to organise my thoughts, i wanted a Chrome-ish aesthetic, this can been seen in the top bar.

The ‘Type something…’ area was a random addition I decided to make to learn a bit more, it has a 50 character limit, and it will show you make many characters are left as you type (then it will disappear). This is just an area where someone can write a short message for themself, not extremely useful but it adds to the looks.

Next I add the settings cog, I had alot of problems with this where it wouldn’t load on the page and I spent alot of time trying to fix it. In the end I just did a 140px offset from the right side which works for now. It has hover effects and will later be used for the settings options.

One of the bigger aesthetic choices I made was to do the app container, especially with the shadows, it adds a nicer look to it and grounds the layout. I also made sure to add a Helios name at the bottom which fades in and out.

Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
18 days ago
2h 19m logged

For this session I just worked on the startup page. I wanted the startup screen to have the name “Helios” obviously, but also the app icon and a click to start guide. To make this feel authentic I made it so that the Helios title has a small fade it as the app opens, and the prompt to “click to start” is on a slow cycle of fading in and out which makes this screen look really nice.

As for the transition to the main page, I wanted the logo to move around or do something. I decided on a little jump, so that as the logo lands the startup screen will fade onto the main screen. For this I did a simple transition and animation.

But I found when I played it back it lacked something, there wasn’t a good feel to it. So I decided to add a little Thump sound effect as the logo landed back down and thus it would also signal the page to fade away. I did this and it all came together really well.

Attachment
Attachment
0
jakeperrin2307
jakeperrin2307 worked on Helios
19 days ago
0h 26m logged

My friend recommended I use electron + vite + react. That lead me to do a little research on what it is, and what some of my other option were. In the end I decided to go along with it.

The set up was quite confusing and took me a while. I even got to the point where a Github file was too large to push and I didn’t know how to change it so I just reset my code. The second time around it didn’t take anywhere near as long.

Now it’s time to get into it, I can’t wait!

Attachment
0