CODESHEETS AI

Learn to code with coding worksheets built around your favorite superhero, videogame, or movie! Solve unique problems in our coding editor, with real test cases, solutions, skeleton code, and more!

Comment

💡 INSPIRATION 💡

Learning how to code is BORING even though programming is the fastest-growing field! We want to inspire students to learn by presenting engaging, friendly, and unique content based on the student’s personal interests.

Before this event, we conducted interviews with teachers and professors (some here at UC Berkeley!):

  • Instructors agree that there isn’t a simple way to give coding problems to students where they can TEST THEIR CODE
  • Students aren’t learning REAL-WORLD skills
  • Students aren’t ENGAGED

With this in mind, we wanted to utilize GPT-4 to bring a new era of personalized learning using CodeSheets!

⚙️ WHAT IT DOES ⚙️

CodeSheets is a revolutionary platform that custom tailors coding worksheets (CodeSheets!) to a users’s interests and skillsets. By filling out a simple form, users can let our CodeSheets AI create exciting unique worksheets, equipped with REAL WORLD TEST CASES, SOLUTIONS, SKELETON CODE, AND MORE!

Simply tell CodeSheets:

  • “I’m a beginner who loves Overwatch and wants to learn about Graphs!”
  • “I’m an expert in computer networking who wants to learn more about Minimum Spanning Trees”

or even…

  • “I want to be a pirate who finds treasure!!”
  • “I love Fortnite but hate coding!!”

… and CodeSheets will make a custom worksheet just for you!!!

🛠️ HOW WE BUILT IT 🛠️

UI/UX: Created a mock-up in Figma

FE: React app connected to backend with AWS Amplify and NodeJS, utilized react-router-dom, fuzzy-search.

BE: AWS Amplify to deploy an AppSync GraphQL API, user authentication using AWS Cognito and user pools.

Code Execution Engine: Open-source Judge0 Code Execution sandbox running in Docker containers

ML: integrated into GPT-4 to auto-generate complex and unique CodeSheets along with test cases, solutions, and skeleton code. Used DALL-E to create banner images for each CodeSheet.

😣 CHALLENGES WE RAN INTO 😣

  • We had PLENTY of npm issues, but nothing a little --force couldn’t solve. It wouldn’t be a hackathon without some much-needed hacking.
  • Parsing GPT-4 response for our custom API was BRUTAL as our complex GraphQL schema required structured data about CodeSheets, problems, test cases, skeleton code, and solutions.
  • Executing code in a scalable sandbox environment was incredibly difficult, and structuring the dynamically generated test cases to run was even tougher.
  • POWER + CHARGING ISSUES! 😣

🎉 ACCOMPLISHMENTS WE ARE PROUD OF 🎉

  • Getting GPT-4 and DALL-E to work was huge. Making it integrate with our custom GraphQL schema was even more amazing
  • USER AUTHENTICATION WORKS!! ( つ•̀ω•́)つ
  • Using a bunch of different frameworks and APIs to somehow make them work together cohesively
  • Submitting on time 😎😎😎

📚 What we learned 📚

This was our FIRST time using AWS Amplify to deploy a full-stack application, and was our FIRST time using GraphQL. We ran into plenty of issues with npm and conflict issues.

This was also our FIRST time using GPT-4 and DALL-E, so we’re SUPER proud that we were able to make such an exciting application using unfamiliar technology.

⏭️ WHAT'S NEXT FOR CodeSheets AI ⏭️

We want to bring CodeSheets to the market to inspire a new generation of students to learn how to program. We want to make learning interesting, and branch into different education sectors to create customized learning plans around individual students.

Up next is refining our product, adding additional features (like our AI Coding Buddy!), and updating our UI (only so much you can do in 36 hours!).

Built With

Share this project:

Updates