Knight's Code | Devpost

Inspiration

Our inspiration for this project came from the theme “Codequest” and the allure of fantasy storytelling. We wanted to create a coding game that went beyond traditional exercises by weaving them into an overarching narrative, making the learning experience more exciting and immersive. While brainstorming, we recalled tools like Zybooks, which present coding challenges alongside course units. Taking inspiration from that, we envisioned a platform tailored specifically for UCR students in the CS010 series—an interactive learning resource that combines education with adventure.

What it does

Our platform offers both teacher and student interfaces. Teachers can upload a syllabus or a PDF of course topics, which our backend uses the Gemini API to parse into chapters and subtopics, storing them efficiently in AstraDB. On the student side, we transform learning into a game: a medieval kingdom has been shaken by a murder, and the student plays detective. Each multiple-choice question (MCQ) and coding challenge tests the student on topics from the syllabus. Completing topics rewards the student with “items,” which provide hints to unravel the mystery. These items are stored in an inventory that the student can access anytime from the main screen. Our goal is to promote learning through an engaging, story-driven experience.

How we built it

The frontend is crafted with TypeScript, React, and Next.js, brought to life through Tailwind CSS and Framer Motion for smooth animations and a modern, polished UI. The backend is powered by Python’s FastAPI framework, integrating AstraDB, an interactive IDE API, and Gemini API to deliver a dynamic and memorable experience.

Challenges we ran into

We faced several challenges along the way. Ensuring the IDE could accurately validate student code submissions was a technical hurdle. Managing cloud database operations—such as inserting and updating user data and progress—required careful planning. On the frontend, implementing custom fonts and ensuring consistent themes across the team was tedious, especially for members new to Tailwind CSS and Framer Motion. Each challenge taught us valuable lessons in teamwork, troubleshooting, and learning new technologies on the fly.

Accomplishments we’re proud of

We’re particularly proud of creating a game that balances learning with gameplay. Features like a progression system, inventory, interactive IDE, and coding challenges all come together in a stylish and user-friendly interface. Equally impressive was our ability to coordinate as a team and seamlessly integrate our individual contributions into a cohesive final product.

What we learned

One key takeaway from this hackathon is the importance of scope management. While our ambitious vision allowed us to explore many features, we learned that focusing on a core set of well-polished features can sometimes be more effective than trying to implement everything at once. This experience has strengthened our ability to plan, prioritize, and iterate efficiently for future projects.

What's next for Knight's Code

Looking forward, we aim to enhance the storytelling experience with animations and cutscenes to introduce characters and deepen immersion. Additional animations and UI improvements will further enrich the user experience. Our ultimate goal is to make Knight’s Code not just an educational tool, but a truly memorable adventure for students learning to code.