Bash Quest

Inspiration

I love games, and I love programming. I usually learn through building projects with a new language. Since Bash is often used as more of a utility language, I've found it harder to learn this way. I think learning through an interactive game can be a way to see both the ways it can be used, and remember what you learn as you apply it yourself.

What it does

Bash Quest is a single-page, interactive game that teaches you real Bash commands in a completely simulated, safe browser environment. You play as an agent on a mission to infiltrate a server to locate a secret password.

How I built it

I gave Bolt.new a single, highly-detailed behavioral prompt describing the entire application. The AI generated the complete Next.js project structure, Tailwind CSS setup, component shells, and the initial client-side state management logic.

Challenges we ran into

My biggest challenge was taming the terminal! Integrating a non-React library like Xterm.js into a declarative React lifecycle is tricky. I encountered and squashed several bugs:

The Ghost Cursor: I initially saw a phantom second cursor and had the terminal resetting on every quest update. I solved this by carefully managing the Xterm.js instance in a useRef and only forcing a full re-mount via a React key prop when the entire game is reset, not on simple quest progression.

The Blank Output: There was a point where exploratory commands like ls produced no output. I solved this by re-working the command processing logic to ensure it always simulates a command's output first, and then checks if that command also fulfilled a quest objective.

Accomplishments that we're proud of

Creating a genuinely fun and engaging way to learn a technical and often intimidating subject.

Building a robust, client-side Linux command simulator that provides immediate feedback for a wide range of commands.

Successfully using Bolt.new for the initial "one-shot" creation.

The final product feels polished, with a cohesive theme, smooth animations, and a satisfying game-play loop from the intro to the final "Quest Complete!" celebration.

What I learned

I learned that while AI is phenomenal at scaffolding and generating boilerplate, the nuanced, stateful logic of a complex component like an interactive terminal still requires human insight and debugging. I gained a much deeper understanding of React's lifecycle and useEffect for managing non-React libraries, and it reinforced the importance of good game design principles (feedback, guidance, clear objectives) in educational tools.

What's next for Bash Quest

Bash Quest has huge potential to grow from a hackathon project into a full-fledged learning platform.

Multiplayer Modes: I envision co-op quests where two agents with different command sets (e.g., a "Navigator" and a "System Analyst") must communicate and work together to solve challenges.

Expanded Curriculum: I could add more quests covering advanced topics like user permissions (chmod), process management (ps, kill), networking (curl, ping), and basic shell scripting.

AI-Powered Tutor: Integrating a conversational AI to provide dynamic, intelligent hints and explain why a command works, creating a truly personalized learning path.

Built With

• bolt.new
• framer-motion
• github
• netlify
• next.js
• react
• tailwind
• typescript
• xterm