+43 676 4484 655[email protected]
WP Masters - Our Projects - Vue.js - Web App Development for Programming Courses via WordPress, Vue.js, and Customized Plugins

Web App Development for Programming Courses via WordPress, Vue.js, and Customized Plugins

Codegree is a platform for studying programming with a focus on backend languages. We helped our clients build a web app for it. 

Client & Challenges 

A German startup, Codegree, reached out to us on Upwork and asked us to develop the web app for their project. They planned it to be a learning platform for people to study programming languages and tools, mostly related to backend development: Python, Java, C#, C++, SQL, and others — and asked us to build it. 

Codegree wanted us to build an app that creates an environment for rapid coding practice. Coming up with a pre-defined SDK for the project, they asked us to use Vue.js. They also needed to integrate a payment gateway with different subscription options and LMS (Learning Management System) functionality into the project. 

We were to create an interactive, engaging learning app: simple, laconic, and fitting for efficient studying of programming.

Solutions 

The development of the Codegree web app included many tasks. During five months of working on the app, WP Masters managed to:  

  • Integrate the LearnDash plugin with WordPress to create a Codegree LMS. We customized it to fit hands-on learning and structure materials in a way for learners to avoid distractions; 
  • Build an IDE (Interactive Development Environment) within that LMS that would allow course participants to try to write code, test it, and receive feedback for it. We weren’t too familiar with building such a dynamic functionality with Vue.js, but we’ve succeeded, wrapping up iFrames and feedback-related modals into the framework; 
  • Integrate the Chargebee plugin into a backend as a payment gateway and set up functionality that allowed to subscribe and unsubscribe from the app and add to users’ subscription tier. After buying a premium subscription for one of the programming courses, users received access to the entirety of the learning materials for the language. Each course requires a separate payment, and a subscription to a course expires after about a year. 
  • Customize the WordPress theme according to Figma mockups and design guidelines Codegree presented us with, and make the design mobile-friendly;
  • Build login page, student profile, and other small student-facing functionality.  
  • Integrate the platform with an Intercom chat so users could inquire about details of the free trial, subscriptions, and programming courses they’re interested in. 

During our work on that part of the project, we’ve used HTML, CSS, PHP, Vue.js, WordPress, JavaScript, and Advanced Custom Field. The project is already showing significant value — it was recently launched in the client’s prod. 

Value 

A frontend and backend developers and PM worked to make sure that Codegree becomes: 

A core toolset for programming courses that bring results. Codegree’s IDE needed to be robust, responsive, and highly performative to be an efficient practicing tool — and we’ve built it like that. With an opportunity to apply programming concepts they’ve learned in different languages, students can quickly learn if they got the materials right. 

An environment for affordable self-education. While a lot of similar tools offer students an opportunity to communicate with teachers, Codegree was designed as an app for self-directed education. Learning Dash and other LMS functionality allow users to easily control their progress, pick the modules of the course they want to prioritize, or organize their learning process in a linear way. Affordability is an important factor here: many programming languages require buying licenses for languages, IDEs, frameworks, etc. to start studying, — and Codegree, where people can simply start writing code in whatever language they’ve chosen, eliminates that need. 

A space where it’s easy to focus. With designs defined by the client and our amazing team of developers, we’ve managed to make the UI look concise, easily discernible, and absent of distraction. It’s only logical that an environment for effective learning of programming would have to be focused on two things only: learning materials (10%) and practice (90%). 

Codegree has the potential to become an amazing learning tool first for German, then for international audiences, — and we’re glad we’ve contributed to this project.