Real Streak

Real Streak is an addictive web game that challenges players to distinguish between real photographs and AI-generated images. Players build up a streak by correctly identifying each image.

Comment

Inspiration

As a web designer, I wanted to see how quick Bolt could build something. With just 23 hours left in the hackathon, I decided to try to build a quick game to see if it was actually possible and if Bolt was something I could use professional as a web designer. My answer – YES! Bolt could be very beneficial to my everyday.

What it does

My idea was to build a simple game that let players guess if an image was real or AI generated. I wanted the game to keep track of you score, which I call streaks, to see how many images you can guess right in a row. If you guess an image correctly, you keep going as your streak grows. If you miss one, you have to start over. I also have a sharing feature where you can share your score on X.com or download the image to share anywhere.

Bolt's description of Real Streak

Real Streak is an addictive web game that challenges players to distinguish between real photographs and AI-generated images. Players build up a streak by correctly identifying each image, with the goal of achieving the highest possible score before making a mistake.

Key Features

  • Core Game Mechanics - Image classification with streak tracking
  • Responsive Design - Optimized for both mobile and desktop
  • Audio System - Custom sound effects using Web Audio API
  • Social Sharing - Auto-generated score cards with Canvas API
  • Performance Optimization - Efficient image loading and state management
  • Accessibility - Sound toggle and proper contrast ratios

How we built it

Frontend Framework & Languages:

  • React 18 with TypeScript for the main application
  • Vite as the build tool and development server
  • Tailwind CSS for styling and responsive design UI & Design:
  • Shadcn/ui components for consistent UI elements
  • Google Fonts (Pixelify Sans & IBM Plex Mono) for typography
  • Canvas API for generating shareable score images
  • CSS animations and transitions for smooth interactions Audio:
  • Web Audio API for procedurally generated sound effects (correct answers, wrong answers, hover sounds, streak milestones) Deployment & Hosting:
  • Netlify for hosting and deployment
  • Custom domain: playrealstreak.com Image Assets:
  • 150+ curated images (mix of real photos and AI-generated content)
  • Organized file structure with real photos (.jpg) and AI images (.png)

Approximately 8-12 hours of active development time!

Challenges we ran into

The main challenge I ran into was the UI styling. It was hard to get simple things like strokes and borders to work which took up a lot of time. I also noticed that anytime I made a change, it would break the UI and I'd have to start over trying to fix what re-broke. The other issue was deploying. I spent 3-4 hours trying to problem solve the deployment issues which ended up being a simple solution, I just duplicated the project and tried to deploy the new one and it worked.

Accomplishments that we're proud of

I honestly can't believe I did this in just one day. Blows my mind. With Bolt, I was able to create a game from scratch and even add sound effects with ease. Never thought I could build something on my own as I know ZERO coding. I'm proud of everything. From idea to deployment to submission–success!

What we learned

I learned to have more patience with my developers as there's stuff that just takes tinkering to figure out. I learned that Bolt is definitely usable for real work. Especially as it gets closer to nailing the design side of things. When it does that, it's going to be an incredibly powerful tool.

What's next for Real Streak

I'd love to keep building and adding more images, a leaderboard, different categories like landscape or people, and even a timer for added pressure. There's a lot of fun things I'd love to try.

Built With

Share this project:

Updates