Digimaker is a team of professionals with over 25 years of Information and Communications Technology, industry experience.
They impart computer science concepts in a fun and engaging manner to primary school children with an emphasis on STEM to develop critical thinking and problem-solving skills.
Digimaker wanted to motivate young students to embrace computer science enthusiastically, instead of viewing it as a geeky specialization.
About the Online Code Editor Project
The project was to create a web application for an online code editor with support for 6 different programming languages.
The application needed to be simple in design and navigation yet intuitive as the primary user group was young children who were just beginning their computer science journey.
Business Challenges
The challenges faced by the Digimaker team:
- Unreliable Open Public systems would go down often, leading to classes getting canceled.
- No way to save the learner’s work/code.
- Young learners find it difficult to master multiple public platforms, which negatively impacts their learning progress.
- The DM team had no way to track student progress or evaluate the work done by them.
- There was no way for parents to see the work done by their children in the class.
- Using public systems was not instrumental in advancing the Digimaker brand.
Key Requirements
The Digimaker team was looking to build a platform that would:
- Be a single unified platform for young students to learn to code in various programming languages
- provide a consistent user interface for all students, irrespective of the programming language they were learning
- allow the Digimaker team to manage various user roles and student subscriptions
- be used to define the structured course and lessons plans
- track student progress over the course of the term
- provide a highly secure, scalable, and reliable way to support thousands of learners simultaneously as Digimaker scales operations
Solution Design and Implementation
- Design
- It was imperative that the UI was kept simple and intuitive for use by young children.
- We showcased the design language and captured expected features and behavior using mock wireframes
- Code editors were designed to provide a familiar user experience across programming languages while accommodating language-specific features
2. Support for Multiple Programming languages
- Web-based Code Editors were developed to execute code in various programming languages – viz C++, Java, Python, SmallBasic, JavaScript, and Block Programming
- A plug-n-play architecture was developed to support the addition of any number of programming languages.
- Online code editor was implemented in a modular way so that they could run on independent infra stacks making them easy to manage.
A Look at the Various Code Editors
3. Save and Resume
- Students could save their work (reliably) on the cloud
- The save and resume worked for various file types
4. Flexible I/O
- The Web-based code editors were designed to handle click or console-based input from users
- Output from code execution could be text, images, animations, or files
5. Optimized Cloud Architecture
- Each online code editor works on separate infra stacks which means they can be managed, upgraded, and maintained independently without bringing the entire platform down.
- User files are stored on CDN-backed object storage to enable quick saves and fast retrievals
- A server-less architecture was implemented for non-kernel-based online code editors and static UI parts of the platform
- Auto-scaling and auto-fail-safe configuration ensure performance does not suffer when multiple study batches are conducted
- System Architecture
- The micro-services-based architecture was used to modularise each online code editor so that they run independently
- The core platform and online code editor are modular, however, they are integrated such that data flow and user sessions are seamless.
- Code execution done on kernels (for C++ and Java) is sandboxed (for each user) for security
- Code execution for kernel-based programming languages is optimized for speed so that learners can run and see output quickly – without the need for provisioning of redundant compute!
Our team enjoyed working with the Digimaker team to bring the love of programming to young minds!
We were able to incorporate every requirement of the client into the finished product. Besides we designed the system architecture in such a way that it ran with minimal cloud infrastructure cost, adding more value for the client. This gave the team a great sense of achievement.
The web IDEs created by us have been doing a wonderful job for the young students for whom it was designed, and Bitkraft is proud to be part of this journey for the students of the Digimaker programs.
What Did Our Client Say?
“The team was technically sound, and the quick turnaround times to resolve issues were impressive.” – Director, Digimaker PTY LTD.
Click below to read the client review:
Next Step
Contact us to see how we can help you with any projects you have in your mind.
Do subscribe to this blog if you want to receive more content like this!
