Check out the winners for 2022! See Winners

TIMELORD

Description:

TIMELORD is a toggl clone. Create time entries by writing a description and hitting the "play" button and a timer will begin. When finished, hit the stop button and it will finish the time entry.  A dashboard updates via turbo-stream when teammates start a new entry. This lets you see who's working on what and for how long, without refreshing the page.

Went well:
  • Authentication from scratch. You can see devices and IPs for active sessions and log out of those sessions.
  • Flash notices. The stimulus controller and turbo navigation really give it an SPA feel. Flash notices are well styled, dismiss-able and make good use of view_component. Some types of flashes will auto-dismiss. Demonstrated on "home" page.
  • Sidebar looks snazzy and makes use of view_component.
  • Timer page styling looks 👌 and I like how the timer stimulus controller turned out.
  • Dark mode! 🌚
Didn't go so well:
  • Didn't dedicate as much time as I wanted and spent more time than expected on the JS aspects of the timer and styling -_-.
  • Wasted time trying to implement a time select tailwind component. Didn't go well and didn't need it.
  • Team mates create action when users selected is not working. Tom select is submitting the wrong params. Just made a team and team members through seeding to get around this.
  • Ran out of time and couldn't finish the turbo stream for the team show page 😭.
To use:
App can't send email so just log in with a seeded credential:
email: [email protected]
pass: password
Just use the play / stop button for time entries. Changes to the time select fields have no special handling.

Built with:

Has auth from scratch implementation.
Used this JS vanilla stopwatch and adapted it to a Stimulus controller.

Application Screenshots

Complete
4 votes