The Diveloper Experience

Home Page
Level 1
Level 2
Level 3
Level 4
Final Screen

Prize Tracks: most centered div, lowkey actually kind of good, would blow up on tiktok, best overall yay

Inspiration

Everyone knows the first step to become a developer is centering a div. The Diveloper Experience was born from the immense challenges emerging developers face. Why is there no center option and what even is a div? These questions continue to stump even the most experienced developers, and this game encapsulates that frustration. You can be 95% centered and go to the next level, but are you really satisfied with that? That's the true diveloper experience.

What it does

The Diveloper Experience is a web game that tests a player's ability to center a div with precision and timing. Players are presented with a moving blue div that oscillates left and right within a container. The objective is simple: stop the div as close to the center of the container as possible. When the game starts, the div begins moving automatically. Players must click the "Stop" button at the precise moment they believe the div is centered. After stopping, the game calculates and displays a percentage score based on how close the div is to the exact center, and also saves it to a leaderboard if you're signed in.

How I built it

The game is built using React and TypeScript with Next.js for the frontend, Tailwind CSS for styling, Convex for the database, and Clerk for user auth.

Challenges I ran into

Choosing the Brainrot: With so many options to choose from, I ended up asking my friends on their favourite brainrot and using it for each level.
Performance: Ensuring smooth animation at 60 frames per second while keeping the code clean and readable.
State Management: Showing different pictures and playing different audio based on the different game phases (idle, playing, scored).

Accomplishments that I'm proud of

Creating a functioning easy to play game with a competitive aspect through the leaderboard system
Implemented LeGoat, LeChosenOne, LePourHoneyOnMyGoat and brainrot that my friends liked