01 / 06

Educative was designed to cater both beginners and professional developers with self paced learning courses to advance their technical knowledge and coding skills. The Educative team chose OnGraph to transform their idea into an advanced online learning web application.

Educative is not only making it easier for individual developers to enhance their programming skills but the cloud based web app is also designed for corporate teams and enterprises that are looking to augment their skills to develop cutting edge applications. The text-based courses, slick coding environment, self paced learning, and essentially no set up, makes it an ideal solution for learners. Not only this the courses are designed keeping in mind the learning path or trajectory of both beginners and advanced developers. Educative offers flexible payment options to learners where they can pay for each course individually or take a learning track and pay a monthly subscription for all the courses included in the learning track. Corporate teams have yearly subscription plans per user and enterprises get unlimited, on-demand access to course catalog and user analytics.

GO TO WEBSITE

02 / 06

Goals & Objectives

Tailor-Made Courses and Learning Environments for Software Developers
  • Date

  • Meet

  • Interact

  • Share ideas

03 / 06

Technology & Tools

04 / 06

Business Challanges

Educative was designed to be a one stop shop for learning coding. With endless course offerings and learning tracks to choose from, the development journey of this web app was not easy. Also the application had to be developed for individuals as well as teams and enterprises. In an effort to provide an easy to learn course structure, personalised coding environment, secure transactions and multiple integrations, for all users, we encountered the following major challenges.

Code Format

Users may find it easy to write a code without following the code format. As a code becomes more complex, following the format makes the code consistent and helps in understanding the code quickly.especially if you are trying to add or edit the code later.

UI/UX Design

Certain sets of code may require using multiple programming languages. For example HTML, CSS and JavaScript are used together to form the front-end design of a website but the length of code written on each one of them could differ substantially.

Directory Structure

Directory structure and depth could vary for each learner. So one of the biggest challenges was to create a sortable directory structure along with easy drag & drop and cut-paste features for the real time data maintained at the application backend.

Growing Users

We developed Educative at the time when learning technical skills online was in high demand. The application was expected to have a large user base quickly and so building a robust and high performing application was a must.

05 / 06

Visuals

06 / 06

The Solution

Our team’s unwavering commitment, dedicated hours of work, effective project management and successful collaboration with the client has made Educative one of the leading source of learning programming and other technical skills. To make educative stand the test of time and performance, we resolved the above mentioned challenges with sustainable solutions as summarised below:

Styling Rules

Since Educative offers a myriad of programming languages and technology courses, we defined and saved styling rules for each one of them separately. This allowed a user to write a code without worrying about the format, as the code was auto formatted on run time based on the styling rules for the language in use.

Custom Editor Layout

To accommodate and manage the use of multiple languages with varying lengths of code on run time, we built a flexible user interface of the editor by using custom CSS and animation. The learner could change the view by choosing from various editor layout options such as left or right side display, or top of the page layout along with the adjustable panes and theme color.

Sortable Directory npm

To create a sortable directory we used the React Sortable Tree npm. The npm provided drag and drop features for folders but only for static data i.e. for directories that were only maintained at the front end. Since we wanted the application to save the structure for every user individually which meant saving all the data on the backend, we created our own sortable tree using the API.

Scalable Architecture

We designed Educative with a scalable architecture to ensure high-load tolerance and zero down-time. To achieve this we considered every aspect of the application to identify the stress points of the application and how the runtime of the potential hard-hit areas can be reduced, and the ways to reduce memory footprint with efficient caching.