SketchBounce

Inspiration

The inspiration truly came from the opportunity to have a playground with AI and code where I can dive into the comfortable world of vibe coding and see its usefulness not just as a trend but as the new modus operandi for developers. Plus, a piece of the 25K and actually winning some contest would be a first for me.

What it does

The app is a fun puzzle-physics sketch game where the player attempts to sketch a path for the ball to reach the basket.

How we built it

SketchBounce was crafted using modern react native and web technologies using the bolt.new engine with some co-help from Chatgpt.

• Frontend: React Native CLI with community packages for Web & mobile builds
• Styling: Tailwind CSS via tailwind-rn for utility-first, responsive design
• State Management: Zustand for in-memory line data, game state, and scoring
• Logic: react-native-game-engine + matter-js for physics; gyro input via react-native-sensors
• Features: Freehand line drawing, bounce simulation, basket win detection, dynamic button visibility ## Challenges we ran into The following challenges were faced in the app's development with bolt:
• The Bolt.new engine, while revolutionary, has a tendency to match incorrect package versions, especially from the Expo repo for instance "expo-sensors": the correct version is "~14.1.4," but Bolt tries ~15.1.0, which doesn't exist. To combat this, I had to explicitly mention the version for packages or correct it as it came up.
• When building native apps, there are instances where web code may be injected because of the web container used to display it. It took refining the prompt to accommodate for both web and native so it could be previewed. ## Accomplishments that we're proud of To name a few, I was ecstatic to feel the power and potential I can now leverage in my career. Proud of making a fun game. Proud of entering a contest to showcase some skills and have the confidence to make acquaintances around the world. ## What we learned Vibe coding is precision, patience, and repetition. It takes a whole skill to refine and troubleshoot to get the desired result from these engines. I do look forward to a superb future of development. ## What's next for SketchBounce I will improve the game to include better aesthetics and visual effects. Adding in a score sharing and possibly a co-op mode would also add value. ##Challenge Compliance *One-Shot Competition: SketchBounce was conceived and executed from the prompt: "You are Bolt.new, the ultimate zero-backend instant app & game generator. In one shot, build a fully playable, visually engaging mobile sketch–physics game—no database, no auth, no external APIs—using only community-driven React Native packages. The game starts with a splash screen with a line and a ball and the name 'SketchBounce.' The game allows users to draw freehand lines to guide a bouncing ball, which stays stationary for 2 seconds before falling into a visible basket below. After pressing Play, or when the user starts drawing, hide the Play button and randomize the basket position at the bottom. The Reset button remains at the top and resets the score. When the ball reaches the basket (shown clearly before drawing), display “You Win!”; otherwise, “Try Again,” which would not reset the score. Ensure the gyro function works even for the web. Add vibrant colors and textures to the game and make the overall app visually appealing. "

Built With

• react-native
• tailwind