DoiT Case Study: How We’ve Managed an E-learning Website Development

Introduction

• Product: DOiT
• Frontend stack: React, Redux, TypeScript
• Backend Tech Stack: Node.Js, Nest.js, TypeScript, PostgreSQL, Redis, Docker, AWS EC2, AWS S3, AWS RDS
• Industry: Edtech
• Platforms: Web platform + admin panel

What is DOiT

DOiT is an adaptive e-learning platform meant for internal corporate usage. The edtech website provides various assignments for those employees who want to improve their soft skills. The assignments, or DOiTs as we called them, are short gamified training modules. The modules are designed to help the employees improve creativity, communication, and collaboration.

Project goals

• Provide an internal platform for soft-skill training in various organizations.
• Provide a comfortable platform for admins to create DOiTs and manage the users.

What We Did:

We created the platform from scratch. So the project included these stages:

• Discovery Stage
• Design
• Development
• Deployment

The website is mobile-friendly of course. And it has an admin panel. The project is delivered in the German language.

Our scope of work also included the security, availability, and scalability of the platform. It did not include multi-language support, web notification, and creation of questionnaires.

Read more: How to Develop a Mobile App Architecture for E-Learning Project?

Essential Features of the e-Learning Platform

DOiT as a platform is similar to the familiar edtech platforms like Coursera and Udemy. In the sense that it also provides the users with learning materials and ways to interact with them. DOiT website has the standard features of every e-learning platform.

We designed over 10 DOiTs:

A DOiT is created from the admin area by the administrators. Here’s how it looks:

Dashboard of the Edtech Project

We divide the DOiT platform users into Participants and Admins. The dashboard is the main screen for Participants. Here they can track their progress and get useful insights about their work.

DOiT statuses:

1. Active and To Do – violet with a label name of the status.
2. Active and Doing – orange with a label name of the status.
3. Active and Done – green with a label name of the status.
4. Not active – grey with a label name of the status.

Along with the status labels, there is also the number of the card and labels:

• D for DOits
• Q for questionnaires

Hover on a DOiT shows its name (within the border of the DOiT). We don’t show the hover on mobile though. On smaller screens, the Dashboard has the label (D or Q), number, name, and status (within the border of a DOiT).

Clicking on a DOiT opens the first screen of the assignment. Only active DOiTs can be accessed. Inactive DOiTs are inaccessible and shown as grey.

Notifications and reminders

Notifications and reminders are essential features for any edtech platform. They help keep the users informed about upcoming events, new courses, and assignments. They are good for sending recommendations and updates. But you have to be careful, no one likes to get email notifications about every new course. A monthly newsletter with curated recommendations for each user is much more appealing.

With this in mind, we developed a notification system for DOiT as well. The notification triggers for DOiT are:

• successful registration;
• successful message sent (to reset a password);
• successful password change;
• not active DOiT (by direct link).

Admin panel

And of course, we had to create an admin panel. This is the main screen for the Admins. Here they manage content and users on the website. Edit or delete courses, generate and check statistics reports. Here they manage notifications, and newsletter emails as well. The admin area is divided into three parts:

• Organizations. Here we have a list of organizations put in a table. They have statuses (active/inactive) and a number of users within an organization. There’s also a button to activate/deactivate an organization.
• DOiTs.  Here the administrators create the DOOiTs for users.
• Admins. This is simply a list of administrators.

Let’s have a closer look at the Organizations tab screens. Here an admin can:

• Add and deactivate organizations:

• Look through and edit the list of DOiTs for each organization:

• Add and delete users from an organization:

• Send invites to a person to have them join the platform:

• See the list of users with their first name, last name, and email. Here the admins also have the status and DOiT numbers, radio button answer, file answer, and text answer.

Team Structure & Contract type

The team that worked on the DOiT project consisted of one backend/DevOps engineer, two front-end developers, one PM, and one QA.

We did this project under the Fixed price contract. This type of contract we offer when the project won’t take longer than 2 months. The technologies that are to be used for the project have to be familiar to us. And the project can be considered somewhat standard.

We offer Fixed price contracts to our clients for whom we did a discovery stage. Or if the project has documentation checked and approved by our PM and BA.

This type of contract can also be applied when the project is an MVP with a tight budget. Or a fixed deadline. Read more: How to Sign Win-Win Contracts with Vendors

Technologies

Every project Fulcrum takes on is done with the latest technologies the industry has to offer. Below is the full list of tech we used for DOiT.