EarlyGoose

Home Page Idea - Figma
Example of Home Page
Shop Menu - Theoretical design
Shop Menu and Sleep Goals - on Website
Motion Technology - Sleeping
Motion Technology - Not Sleeping
Interactive Sleep Goals - design
The Team Hard at Work
Full Body Track

Inspiration

Our team was inspired by a friend and his unique routine of listening to David Goggins in the morning as his alarm. We wanted to create a website that helps people like ourselves wake up in the morning without lying on our beds the whole day lose track of time and eventually rot to death without someone screaming in your ears... is that too much to ask?

We eventually expanded on our original idea (an avatar that sends notifications to you in the morning), incorporating PoseNet motion to calculate if the user is still lying on their bed or has already gotten up. We wanted our app to be about more than sleep, but keeping up healthy habits and promoting that using a gamified approach - taking inspiration from apps like Flora. We wanted a lighthearted, fun and aesthetic design to make the process that much more enjoyable!

What it does

Earlygoose.tech is an interactive website implementing ReactJS and TailwindCSS with the goal of promoting positive habits among users. The premise of the project involves having an avatar (would initially be a goose) that goes through different emotions depending on the habits of the user and is responsive depending on if the user follows their habits correctly. In a world primarily focused on addiction and dependence on technology, we aim to maintain the well-being of the user in real life through a game lens.

How we built it

We learned ReactJS, Figma, and HTML through YouTube in 36 hours, with a generous sprinkle of trial and error. We also got some Figma wisdom from the Workshops available (shout out Galaxia and Amir!). We threw in some Google's TensorFlow & PoseNet, to check if you're still in dreamland.

Challenges we ran into

Learning Figma and ReactJS wasn't easy, but we powered through. Oh, and staying awake for epic coding sessions? Got sick multiple times. No sleep. Let's just say coffee was our best friend. And then, making our website look as good as it did in Figma while keeping it responsive? That was a puzzle worth solving.

Accomplishments that we're proud of

We went from minimal coding experience to crafting a fully functional website. Through hard perseverance and dedication, we made SOMETHING. We also tried to balance workshops and coding. Plus, we threw some motion tech into the mix – pretty cool, right? Honestly, we are proud we made something aesthetic and fun.

What we learned

Web design: ReactJS & Tailwind CSS
Figma applications
Motion detection

What's next for EarlyGoose

Add a more convenient UI/UX within our website, like designing some more animated avatars
Adding more customizability: switching up the items and avatars available for the user
Incorporating Cohere's RAG AI to improve the generation of motivational quotes and be more personalized to the goals of the user
Improve the Bread currency
Adding a "Start" timer that is synced to the PoseNet Motion detectors to not lose currency unintentionally