CodeWithJess.ai

Login Page
Onboarding Page
Editor Page

Inspiration

The idea of CodeWithJess stems from a deeply personal experience that resonates with many. It all began when we witnessed a close friend struggle, constantly feeling overwhelmed and left behind in their classes, feeling like that their class was designed for those significantly more experienced in them despite it being an entry-level course. Their frustration ignited a spark within us — a realization that the traditional methods of teaching programming were failing countless aspiring coders.

The traditional way of solving this was with a personal tutor, but that was something inaccessible to many.

With Jess, this changes. Thanks to our implementation of modern AI technologies, we are enabling computer science education that is deeply personal yet accessible.

Jess builds a lesson plan fit just for you; you’re no longer bound to a rigid, fixed syllabus but one that is adapted to your personal skill. Whether you’ve never written a line of code or whether you’re looking to expand your skills, Jess creates a journey that’s deeply personal and adaptive.

Looking to combine the accessible approach of platforms like Khan Academy with the personalization of human tutors; we envisioned a solution that could promote coding education for all. Our mission is to create a learning experience using personalized AI that can adapt to each individual's pace and style, making the daunting world of programming more approachable and engaging. With CodeWithJess, we're opening up more people to the magic of learning how to code; we're nurturing curiosity and opening doors to the endless possibilities of programming.

What it does

CodeWithJess is an innovative, AI-powered coding education platform designed to revolutionize how people learn programming. At its core is Jess, an AI mentor that understands you and works alongside you. When you log onto the website, you chat with Jess casually, sharing your learning objectives and background; this allows Jess to craft a customized learning course from scratch. And as you learn, Jess continuously learns from your conversations, assesses your work, and adjusts the curriculum based on your progress, offering an incredibly personalized learning experience that molds to you — not the other way around. CodeWithJess aims to be more than just a textbook to be read; it is a companion on your coding journey, ready to support, challenge, and motivate you every step of the way.

Challenges in Development

In developing CodeWithJess, we encountered several significant challenges that tested our problem-solving skills and pushed us to innovate through persistence and creativity.

A significant challenge was styling our page accordingly to our intended UI design; our UI design makes use of tight spaces to create structure and a distinctive visual brand; this required the design to look pixel-perfect in many places to look right. Making sure that the chat interface, the main editor view, and others aligned pixel-perfectly with our design was a significant challenge in attention to detail.

A more targeted issue we encountered was in programming our execution backend, which was in charge of executing the student's code to provide immediate feedback. To address those issues, particularly maintaining Python state persistence, we implemented system that performed execution and environment serialization in tandem, allowing us to both maintain the state of functions and variables while also allowing for fast response times. This was crucial in achieving the tight feedback loop we wanted for the editor, allowing students to quickly experiment with changes to their code and get immediate feedback.

Another challenge we faced was a UI/UX problem — given the limited time provided and our aspirations for this project, we struggled to decide what features to prioritize; we ended up focusing on the ones that made CodeWithJess different — an innovative setup process where you engaged in casual conversation rather than filling out another glorified Google Form and personalized, collaborative planning with an AI system to achieve accessible, personalized learning.

To tackle the architectural design of system, we created a comprehensive map of the system where dependencies and responsibilities of every component was made clear. This enabled our team to divide and conquer — while one of us was working on the execution backend, another was working on the onboarding process, and yet another was working on our code editor. This allowed us to be significantly more productive and also ensured clarity in our work.

Accomplishments that we're proud of

We are proud to have harnessed the power of two state-of-the art language models (the newly announced OpenAI o1 and Anthropic's Claude 3.5 Sonnet) to their respective strengths. For example, we leveraged o1's long context reasoning capabilities to generate comprehensive lesson plans that are tailored to each user’s unique skill level and goals. On the other hand, we leveraged Claude 3.5 Sonnet's unique combination of speed and intelligence to provide instant on-demand support for exercises. With this adaptive approach, we take advantage of both models' strengths, guaranteeing both responsiveness and sophistication in the places where they matter most.

Another thing that we are proud of is our focus on practical experimentation; leveraging tools like the Anthropic Workbench and OpenAI's Playground, we meticulously tested and red-teamed our prompts to ensure that our AI systems behaved exactly as intended.

From a software design perspective, we’ve built a scalable backend with a focus on modularity. A standout example is the AssistantChat component, which serves as the backbone of our platform. It tracks conversations, communicates with our language models, and supplies them with external tools to augment their capabilities. By modularizing this component, we ensure its seamless and consistent integration across various pages, such as the onboarding page and the editor, while maintaining flexibility for future development.

Finally, we paid special attention to the onboarding process, making it feel more like a conversation than a setup. Instead of filling out forms, users are greeted by Jess, our AI assistant, who guides them smoothly and intuitively through our sleek design.

Our platform boasts a beautiful, intuitive UI/UX design that integrates seamlessly with our AI-driven features, creating a clean and enjoyable learning experience. Additionally, the editor communicates with our execution backend, functioning as a live REPL. It runs the user’s code and returns real-time feedback, ensuring that learning to code is interactive and engaging without directly involving the language model in code execution.

What we learned

How to implement and create AI prompt engineering
How to create effective data structures in TypeScript
How to collaborate, brainstorm, and design decoupled software architecture. Not only does this optimize team task distribution, progress, and time management to successfully get most of the work done, but also improve code maintainability and scalability.
How to code with Jess (just kidding)

What's next for CodeWithJess

As AI technology progresses, the platform can enhance its personalization capabilities, offering increasingly sophisticated and nuanced learning experiences.
Integration of emerging technologies like VR and AR could create more immersive coding environments, while expansion into new programming languages and frameworks will keep the platform aligned with industry trends.
Future developments may include collaborative community features: quizzes, forums, or peer interaction. Increasing a strong community bond and learning environment.
Helps support concurrency to handle large users’ parallel requests.