Relax Bro

• 

  Thumbnail

• 

  Onboarding Sequence

• 

  Settings Popup

• 

  Dashboard

Inspiration

My vision is absolute crap. Being a programming and staring at a monitor for hours probably doesn't help. Leaning in to see stuff even though I have some pretty thick glasses probably doesn't help either. Like many others, I often find myself straining my eyes and leaning in too close, damaging my already damaged eyes.

That's why I created Relax. Relax uses facial recognition and measures how far away you are from the monitor. If you pass a certain threshold, Relax will either send you a notification or a loud air horn to make sure you lean back!

What it does

As mentioned previously, Relax is probably the first software solution to fixing some posture related issue. Using face-api.js, we're able to get an estimate of a size of your face. We can use this as a "default value". Should you lean in, the size of your face increases and will exceed the "default value", prompting some sort of alarm to make sure you lean back. Relax also features a clean and animated design, making the app more accessible and approachable to users.

How we built it

This project was created with React and Electron. I had no prior experience with Electron, so much of the development process was either Googling on Stack Overflow or crying internally over old blog posts or just reading the documentation like a normal person.

Challenges we ran into

My lack of experience with the technologies I chose to use (especially Framer Motion for the animations) greatly hindered my overall development speed. Fortunately, I got the hang of things about a few hours in.

I also ran into a few unexpected behaviors because I was using JavaScript. For example, expressions with boolean operators do not have to evaluate to true. While this is fine for conditional rendering in React, it is less than ideal when trying to debug certain features when both conditions must be true (and not only the last one). Another issue I ran into was with React. I didn't realize that useEffect doesn't actually support async/await code, so my cleanup functions weren't actually firing. I figured I'd just scope the logic in an inline async function, which seemed fine until I also realized that could lead to more unexpected behavior.

Accomplishments that we're proud of

I am proud of completing this project within 7 hours with also 0 sleep. It's hard to maintain code quality without any rest, but I think I've managed to do a good job of separating logic and UI into hooks, components, and utilities.

What we learned

I learned how to use libraries I've never used before, including React Router v6 (routing), Framer Motion (animations), Zustland (new tool for state management), and Electron (hybrid desktop apps). In my other team I also learned how to communicate my ideas and effectively collaborate on Discord with voice calls and Github with pull requests.

What's next for Relax Bro

More testing to iron out existing features. I made this in 7 hours on zero sleep. There are bugs. Past that, I plan on adding more productivity features with analytics and running the app as a background process.

Thank you Talon for assisting me with this project!

Built With

• electron
• framer-motion
• react