Inspiration
We wanted to make coding relatable and fun by framing it as a heroic journey. Drawing from classic puzzle-adventure games, Beep Boop Bot transforms abstract programming concepts into tangible challenges—rescuing a curious robot from a stranded spaceship.
What it does
Players queue up simple commands (move, rotate, jump) to navigate B3 through a 5×5 grid full of boxes and exits. Each level introduces new obstacles, encouraging logical sequencing, spatial reasoning, and debugging skills in an interactive, game-like environment.
How we built it
- Frontend: React for component-based UI, styled mobile-first with CSS Grid/Flex
- State Management: Redux handles robot state, level data, and command queues
- Animations: GSAP (GreenSock) for smooth robot movements and pop-up feedback
- Deployment: Hosted on Surge for zero-config continuous updates
Challenges we ran into
- Command timing: Ensuring queued commands run at consistent intervals without overlap
- Grid collisions: Accurately detecting when B3 can’t move off-grid or onto occupied tiles
- Responsive layout: Adapting the two-panel interface to small screens without losing clarity
- State reset logic: Returning B3 to the exact start position on “Stop” or level retry
Accomplishments that we’re proud of
- Adaptive difficulty: Automated level progression that subtly increases challenge
- Intuitive UX: Clear visual cues (arrows, highlights, pop-ups) that guide first-time players
- Robust Redux design: Easily extendable data models for new commands or board types
- Mobile-first polish: Seamless play on phones, tablets, and desktops with zero layout bugs
What we learned
- Sequencing is key: Handling asynchronous animations alongside synchronous state updates taught us to balance React hooks with Redux middleware.
- Importance of wireframes: Early sketches saved hours of refactoring by locking in our mobile and desktop layouts.
- User feedback loops: Playtesting highlighted critical UX fixes—like disabling command edits mid-run—that improved the overall flow.
What’s next for Beep Boop Bot (B3)
- Loops & conditionals: Introduce “repeat” and “if-then” commands for true programming logic
- Custom level builder: Empower teachers to craft and share their own puzzles
- Sound & storytelling: Add audio cues and a narrative layer so B3 gains personality as levels progress
- Analytics dashboard: Track learner progress and surface insights to parents and educators
Ready to guide B3 to safety? 🚀 Play now at beepboopbot.surge.sh and join us in turning commands into discovery!
Log in or sign up for Devpost to join the conversation.