How It Started

It all began while helping a student who was completely lost. They didn't know how to write basic code or even where to begin. This made us ask an important question. What if we built a simple, motivating way for students to learn programming from square one? Most websites we looked into use overcomplicated lessons, give challenges far too difficult for beginners, and skip certain fundamentals entirely. We wanted something different, something simple, and beginner-friendly. JavaFlow is designed to instill core programming fundamentals, memorization through repetition, and discipline through consistent practice.

How we built it

We started with three project ideas, but JavaFlow stood out because it solved a real problem we encountered while helping classmates during group projects. before writing any code, we:

  1. Choose the programming languages and frameworks
  2. Sketched out the website layout
  3. Looked at other learning platforms for inspiration
  4. Identified what they did well- what they didn't
  5. Designed a minimal, user-friendly interface
  6. Created a text database to experiment with This planning phase gave us a blueprint for the front-end, back-end, and user experience.

Building the Frontend

We used Svelte for its speed, simplicity, and clean component structure. Every page followers the same philosophy:

  1. Receive data from the back-end
  2. Create the page

Front-end Features

  • Home page that loads weekly content
  • Problems page that displays question sets
  • Learn page that renders markdown lessons
  • Code editor integrated into the UI
  • theme selector
  • Settings saved in JSON
  • Clean UI transitions and routing We focused more on ease of use, especially for brand-new programmers

Building the Back-end

The back-end handles all processing, validation, and data storage

Back-end Features

  • Receives data from front-end and validates it
  • Reads from an SQL database
  • Turn the information from the database into JSON format
  • Runs user code through API fact-checker

Challenges and What We Learned

throughout development we learned

  • New programming languages
  • JSON file structuring
  • SQLAlchemy file structuring
  • Creating and building lesson plans
  • Integrating Gemini API
  • Restructure code editor for ease of use
  • Connecting front-end and back-end structures
  • Designing question sets that teach java fundamentals

Accomplishments that we're proud of

Theme Selector

We Built a fully customizable theme selector that allows users to personalize their learning environment.

Question Sets

Structuring the weeks and lessons was a lot of fun. We created: Clear difficulty progression Beginner-friendly Prompts Coding exercises that reinforce concepts

Learning new programming languages

Over the course of this program we learned: New front-end frameworks Back-end tools and database workflows API integrations JSON to SQL conversion How to build and connect a full-stack system

What we learned

Structuring the Front-end and Back-end

One of the biggest learning experiences was understanding how to properly structure a full-stack application. We Learned:

  • Component-Based UI-design
  • Routing and page Structure -Handling user inputs and state

Working with JSON Files

  • Structuring JSON data for lessons, problems, and settings
  • Sending results as JSON
  • Converting JSON into SQLAlchemy models

Learning Svelt

Before this project we had never used Svelte through JavaFlow, we learned:

  • component- based UI design
  • Reactive variables
  • Routing and page structure
  • Handling user inputs and state
  • Rendering Markdown content Dynamically Svelte was a big cornerstone of the project

Lesson Plans

  • Break down Java concepts into small, digestible pieces
  • Teach one idea at a time
  • Use examples and build understanding

What's next for JavaFlow

User Accounts

  • we plan to introduce a full account system that allows different types of users to be made.
  • Teachers would be able to create Lesson plans
  • Peer leaders can add questions, challenges, and explanations -Students can track progress across multiple courses

Access Key for Courses

we want to support private courses for schools or independent teachers:

  • Institutions can control who can join specific classes -Schools, tutoring groups, and clubs to host their own curriculum
  • Students to join courses using unique access keys

Add More Languages

  • All the languages we learned during this project, are things we want to integrated, to even start teaching Full Stack and different development types. stack.

Built With

Share this project:

Updates