State Sketchr

Test your memory of the U.S. states in this fun game, as you must draw them from memory! You have one minute to draw, then your drawing is compared to the real state's outline.

Comment

Inspiration

-We were inspired by web based .io games like Globle, Flagle, Countrydle, etc. We wanted to create our own web-based game that was based around geography but also has not been done before. We started doodling ideas on a whiteboard and had an idea to draw states from memory, which is when the idea was born!

What it does

-It is a website that challenges users to draw the 50 states from memory. They can either choose their own state to draw, be given a random one, or do all 50 in a row alphabetically. Then, their drawing is compared to the actual state outline, and the user can judge how they did.

How we built it

-We began our process by using Google AI Studio. We inputted a general idea for our game and in return, it outputted a great starting template. Next, we worked with the files to understand the syntax and understand how they work. Next, we attempted to integrate Gemini API into our project but eventually failed (more on that below). After that, we edited the files to have the features and design that we wanted, such as colors, features (such as the undo and clear buttons). As a fun design bonus, we also had to painstakingly screen grab all 50 state outlines for the results screen. Then, we hosted the website on Vercel and gave it a better domain name using No-IP. Now the website is live!

Challenges we ran into

-Our original plan was to include a Gemini API that judges the user's drawing and gives it an accuracy rating 0-100%. It worked nicely until we ran out of our free quotas, in which case, we decided to pivot the accuracy to just be based on comparing the drawing to the state outline, so quotas were not even a factor. Despite spending hours on the problem, the accuracy ratings were either too generous or too harsh. Eventually, due to lack of time, we decided to scrap the accuracy and just allow the user to judge their own drawing.

Accomplishments that we're proud of

-We built a functional website and game in less than 24 hours! -We created a unique and fun idea that promotes learning geography -We all learned skills and tools we did not have before Steelhacks

What we learned

-We learned how to use Google Gemini AI and how to implement an API in our program (even though it ended up scrapped!) -We learned how to use typescript -We learned how to contribute to a project on GitHub with multiple people working at once

What's next for State Sketchr

-Eventually, we want to expand to including the outlines of countries for users to draw (and then we suppose a rebranding would be necessary!) -Give the accuracy rating another try without the time constraints -Add better finishing touches, such as music, dynamic animations, and a better domain name.

Built With

Share this project:

Updates