Magic8.Club

Inspiration

We're a team that loves exploring silly ideas and bringing them to life. The 8ball idea actually comes from the birthday present we gave to one of the members of our team!

What it does

On Magic8.club, you can do two things: ask a question or answer a question. Some people may call it useless, but who wouldn't want to live their lifes by the words of others! In a world where social media is constantly influencing our every move, we decided to streamline that process.

How we built it

We from the beginning split up development into two subteams: Backend and Frontend.

The backend team was comprised of a singular person who saw the development of the backend from the beginning to the end. They went through a series of tech stacks before settling on one that balanced simplicity and features.

The frontend team, composed of a dev experienced in frontend and one that learned HTML 24 hours before the competition, began by dressing up a mock wireframe drawing of what the various pages would more or less look like in the final product and how users would reach them. The team then initialized the project using Nextjs, React, Typescript, TailwindCSS and shacdn. These technologies were chosen for familiarity, with the exception of Nextjs which no one in the team had used before.

Challenges we ran into

We used Terraform for the first time on this project and that gave us some trouble, especially since some error messages we encountered were vague at times.

Frontend-wise, we had several challenges, but none of them stopped us from developping a functionnal and visually appealing website. First, one of team members had never used HTML, CSS, JavaScript or React before the competition. They learned amazingly quickly the day right before the competition, and actually ended up doing most of the UI!

While that was happening, the second frontend team member was trying to learn Rive (rive.app), an animation maker that export to the web, which ended up being very time consumming for the first day. This software was used to make the animated 8Ball. At some point, the file actually became corrupted and unrecoverable: we had to redo it from scratch, which was much faster than the first time around, a testament to the power of learning.

Using Nextjs turned out to be a mistake. We were limited by its functionalities on several occasions and we believe we would have been much better off using React without it.

Accomplishments that we're proud of

We did a functionnal web app!! We are now market leaders in this user acquisition segment.

We had good team cohesion and we were efficient for a team of 3 out of 4 because one of our members got sick a few days before the hackathon...

We're also particularly proud of the one team member that learned almost all of our tech stack during the actual hackathon, and delivered!

What we learned

Nextjs is legitimitely bad for a static React client, just use React without it
Rive is pretty awesome as a design and animation tool
We also learned how to use a variety of technologies including MikroORM, Socket.io, Terraform, Nextjs, Rive, animations, etc.

What's next for Magic8Ball

To encourage users to answer questions, our next step would be to implement a rewards system. For each answered question, users would get a certain amount of BallBucks (our own custom currency) which they could use on lootboxes! These lootboxes would contain a variety of skins for our balls making our website more customizable for each user.