Inspiration

As two college students, we fully understand what burnout feels like as well as FOMO. For this project, we were inspired by the recent rise of the counter-FOMO phenomenon, JOMO (Joy of Missing Out). We wanted to simplify the heavily commercialized notion of “self-care” and remind everyone to prioritize themselves. No social media or expensive splurges required. We are just here to spread love and positive energy✨.

Who we are

We are Linda (Linh & Dan), 2 girls with similar interests and background. We like to code, design and work on fun projects. We believe in boba and have the dream to make this world a better place 💕.

What it does

:poofy is a web experience with cozy, dreamy vibes to help you wind down and embrace JOMO (Joy of Missing Out). It shows that treating yourself can be as effortless as listening to some chill lo-fi music and popping some poofy clouds.

How we built it

We used Adobe Illustrator and Figma to design our own original graphics and create responsive views for the web app. We used React to code it. We started with the create-react-app starter code and built up from there using React hooks and CSS animations. We used some libraries for certain features such as simple-youtube-api and react-burger-menu.

Challenges we ran into

  1. Stay awake for a 36-hour Hackathon.
  2. Collaborate using Git and Zoom.
  3. Many bugs that we weren't sure how to fix.
  4. Ensure the website is responsive to all devices.
  5. Obtain a public music API that doesn't require authentication.
  6. Stay on schedule to build all the features.
  7. Run out of time to build all the features we would like to include for this project.
  8. Translate some of the Javascript codes into React.

Accomplishments that we're proud of

  1. We both learned many new things about React.
  2. We might be able to easily build some of the features with existing tools, but we decided to challenge ourselves and build them from scratch.
  3. We successfully applied Youtube API.
  4. We build a meaningful, cute and functional website.
  5. We were able to debug some of the code.
  6. We were able to get some sleep during this Hackathon.
  7. We both contributed code and design to this project. The idea and aesthetic are something we both like.
  8. We tried to include all users and all devices.

What we learned

  1. It's helpful to identify what features we want to include and prioritize in advance.
  2. Knowing how to assign tasks to each team member is important.
  3. Responsive website design using React.
  4. Youtube API & React.
  5. Lots of CSS.

What's next for Poofy

  1. Debug music player for mobile view.
  2. Adjust responsive views and refine cloud gameplay.
  3. Add other interactive scenes.
  4. Add a color version.
  5. Enable the music player to obtain new playlists automatically .

Built With

Share this project:

Updates