Video Streaming Platform

Industry: HealthCare

Country: Netherlands
Vue.jsVuexNuxt.jsAxiosGoogle FirebaseSentry alertsCSSBulma CSS
MedisheScholing main

Description

MedisheScholing is a platform in the Netherlands for healthcare experts like therapists, surgeons, and pharmacists. The application allows them to search for and take professional courses provided by different companies for accreditation.

Alongside a text search, the system provides robust search features like the use of points on a map to search for courses by distance, the ability to choose them by profession, and the style of learning.

Courses have separate pages where every detail, like time estimation, descriptions, and price are displayed. The company that provides the course has it’s own page away from the course page. Also added sections with "similar courses" to the course pages. Also, inside the platform we have webinars pages. More details about them you can read below.

Webinars have two separate pages. The first page includes a discussion board where users can drop questions and have them answered by other users. It has a built-in broadcast, chat, video stream, and user data confirmation form for accreditation with the ability to edit.

This page includes a discussion board, chat, blog questions and answers, and survey forms/polls. Users ask questions here using a poll. Questions can appear both on schedule and at the right time manually

The second page is handled by the moderator. He sees and manages the streams, chats, questions (he can decide to hide or show questions), and sets times to post questions.

MedisheScholing Illustration 1

Client goals

This is a pre-existing software. Our job was to adding new functionality, redesign the application to have a more SEO-friendly site, which we did use NuxtJs

Main roles

Moderator

The moderator checks webinar streams and other interactive activities on the webinar page. He replies to chat, can hide questions, and only show what is necessary.

Users

These are the medical professionals like pharmacists on the application. They are the ones in need of accreditations.

Guests

Guests are not major users. They are usually invited to watch videos via a link

Company Owner

The company owner is a role managed by the organization giving out a particular course. This account designs and sells the professional syllabus needed by medical professionals. They create and edit company pages to suit their own profile.

Company Manager

They have roles similar to that of a company owner, but are limited to certain roles. They can create curriculums for an organization, but cannot create the invoice for it.

Admin

This role is handled by an employee. An admin has the power to create and edit company accounts. They also produce courses on behalf of the company

Super admin

This role is handled by a customer, who has access to everything and every process like creating landing pages that other roles do not have

MedisheScholing Illustration 2

Implemented features

Login

We implemented a login feature using a modal window. On certain pages and while performing certain activities like paying for a course, the system requires users to verify their identity. This means asking for their login details for confirmation before purchase.

A modal login page appears as a pop-up box right on the screen. The user can give their details and continue their activity without leaving the page. Once the process is confirmed, the modal window closes and the payment processing continues.

Webinars page

The webinar page comes with a two-factor authorization, notification bar, and forms.

When there is an uncompleted profile, the user or hospital gets a notification prompting them to fill out their profile.

Every doctor has a registration or identification number in the Netherlands. We made provisions for this number to be added during registration. Also, you can restore your account by specifying Bignumber instead of email.

Streaming pages

We designed this component in such a way that each page is tied to a course. Streaming done from a specific page is only for that course. To be able to stream, a card has to be created. This can be read, edited, and deleted.

Streaming cannot be done directly as we are yet to develop a component for this. Rather we use video services already available like Vimeo.

Stream management console

We implemented CRUD functionality for streaming platforms to be handled by the admin. (CRUD - an acronym for the four basic functions used when working with databases: create, read, update, delete).

This way, they can effectively control the questions - to either show or hide them, get results, supervise the chats of the users, answer users' inquiries and handle the questions on the discussion board. Also, admin has possibility to answer in chat; answer questions personally to the moderator; delete messages; move messages from general chat to private messages, enable/disable chat, service board, change videos on the stream.

MedisheScholing Illustration 3

Stream viewing page

A course's stream viewing page is where most activities take place. First, we created a waiting room where specialists could wait if the stream is yet to begin and users are already on the page.

Users also have to confirm their vocation for approval on the stream page since not all vocations are eligible.

This page also holds a chat section and the questions that could get specialists accredited or not. Answers to questions can be changed if the results show that those answers were incorrect.

The questions are dynamically generated from the polls created by the doctor. In the streams have be subsidiary streams, where user can switch between them.

Questionnaire form designer

The questionnaire form page is designed to take any votes and surveys the professionals might have. It takes different questions with different formats - text, select options with dropdowns, ratings, scales, date, and time formats. The user chooses which format best suits the question.

A questionnaire can be created, read, updated, and deleted as needed.

Invoice page

We built an invoice page to be used by the company owners. Invoices generated there are sent to the users for payment. They can be generated, read, modified and deleted.

Invoices are generated by a third-party payment service called Mollie payments. To integrate, the user needs to create an account with Mollie or authenticate with a Facebook or Google account.

MedisheScholing Illustration 4

Tickets

To view a stream, a user needs to buy tickets. We will be building an advanced system where the company owner can decide how many people will buy a ticket and specify the type of email the user will receive after procurement.

After payment is confirmed, we also added functionality that redirects the user to the course page for which the receipt was obtained. We have the UI and front end ready for this. The backend is yet to be released.

MedisheScholing Illustration 5

Course page

The course page contains the details of a particular curriculum. We designed this page to have distinct features for both users and company manager's roles.

From the course page, company managers could create receipts, and ask for additional information from users.

Users had the option to choose to buy tickets, and specify the fields for each ticket that can be added to the one purchased. Each one purchased is a subscription to that learning path. Users also have the option to unsubscribe and see the list of courses they are subscribed to.

From a course page, a user can be redirected to a webinar, if there is an ongoing one.

Details

Testing

1 QA (temporary)

Hosting

We used AWS for hosting. Deployment - Client

Methodology of development

Scrum

Timeline

2020 November - ongoing

Team

2 Front end developers, 1 QA engineer

Used Technologies

Video Streaming Platform Vue.js

Vue.js

Video Streaming Platform Vuex

Vuex

Video Streaming Platform Nuxt.js

Nuxt.js

Video Streaming Platform Axios

Axios

Video Streaming Platform Google Firebase

Google Firebase

Video Streaming Platform Sentry alerts

Sentry alerts

Video Streaming Platform CSS

CSS

Video Streaming Platform Bulma CSS

Bulma CSS

We use cookies in this website to give you the best experience on our site and show you relevant ads. To find out more, read our privacy policy rules.