Domain.com registered domain: yeeet.tech

Inspiration

Due to upcoming AP exams, I felt that yeeting oneself would be the most appropriate method to cope with stress. Thus, I woke up today and made this masterpiece (/s).

What it does

TLDR: It does what the title says.

How it's supposed to work':

  1. You create an account.
  2. Then, sign in.
  3. Then you will be able to view the yeeet.tech/space page where you can interact with the planets by dragging/ hovering/ tapping.
  4. You will also be able to yeet yourself by clicking on the button.
  5. After you yeet yourself, you can log out.
  6. Repeat steps 2-5 as many times as desired.

How we built it

I built the web app using the Next.js framework and Tailwind CSS for styling. I also used the Framer Motion API to add animations to make site interactive and improve the user experience. Prior to building out the site, I created wireframes and designed the UI in Figma. I also drew a few of the images (SVGs) in Figma because I was not able to find free graphics online that were fit for this project.

Challenges we ran into

Before this hackathon, I had never implemented authentication into any of my projects. It took me a while to figure out how to make a new project on Firebase, and in the end, I wasn't able to successfully implement it into my app (which is why the register/login pages don't actually work like they're supposed to).

It was also my first time using Framer Motion, and I didn't understand the documentation at first. However, by looking at the examples, I was able to figure out how use the components in motion library.

Also, the CSS was a huge pain to get right because it was difficult to adjust the z-indicies while maintaining a responsive grid layout.

A small challenge I had when designing the site was getting the images because many of the designs I found online were either not free or not in SVG format. Thus, I had to draw and design the graphics from scratch.

Accomplishments that we're proud of

I'm proud that I was able to learn something new and build an app with an interactive experience. Going into this hackathon, my main goal was to learn something new, and I'm glad I attempted to use new technologies. Even though things didn't go as planned, I was still able have fun and learn something new.

What's next for Yeet Me Into Space

A feature I think would add purpose to this project letting users choose different values to be yeeted at. For example, they could choose to be yeeted on a specific planet each of which have different forces of gravity. Users would also be able to choose their mass, velocity, acceleration, etc, and various resulting measurements like force or distance would be calculated and displayed on the screen.

Built With

  • framer-motion
  • nextjs
  • tailwind
Share this project:

Updates