Leopardy
A Better Game Show
overview
Purpose and introduction
The focus of this case study is its process. I challenged myself to create this project for my friend's birthday, without any coding experience.
Creating this web app was one of the most engaging experiences I've ever had. I had a vision and learned everything I needed to achieve my goal.
(access to site coming soon…!)
process
Learning New Things
Before starting the project, I looked for new tools to help me. I landed on Figma Make (a new AI-assisted website creation tool), and learned how to use it in order to design the interface.
It was convenient, but I wanted more customizability. I pushed myself to attempt coding with VS Code (a source code editor), but with a twist. Because I didn't know how to code yet, I utilized Deepseek (an AI) to help me vibe code the project.
Once I finalized the layout, concept, and design solutions, developing was easy.
Challenges
The challenge of this project was learning things I wasn't comfortable with. During this project, I really had no idea what coding even was, and had never touched Figma Make, VS Code, Github, or Deepseek.
Features and Interactions
Since this project was created to be used, every interaction is practical.
The main section holds the point and category cards. If a point card is clicked, it will trigger an card popup with game text. If the lower section of the point card is clicked, it will deactivate the card to "mark as done" until reversed. Transitions and components have bouncy animations for a better experience.
The left section is the live scoreboard. The right section is where you control separate scores for players and teams (in case of any potential player swaps…).
Edit Mode
The settings panel controls custom names for players and teams, as well as an "edit mode" toggle. Edit mode allows you to change text of category cards and point cards directly on the game board. For a seamless experience, the panel features reset buttons for various interface parameters, and accidental page refreshes will not change any progress.
results
Growth and Insights
This project showed me how things have changed. Being a programmer isn't a core necessity for building functional websites and anymore. The main challenge was actually learning how to connect and work together with AI.
Jeopardy is a good example on how a good idea and a passion to learn can turn into a full functional digital product.
