Creating unique video dashboards for individual users

If you have kids or know anybody that has kids, then you’ve probably been exposed to the frustration surrounding the rapid and non-optional transition from a classroom learning environment to a remote one.

One of the primary sources of frustration for teachers and parents stems from the need for teachers and students to adopt new technology with which they are unfamiliar.

Imagine that you are a developer in the booming field of e-learning. Since you are smart, one of your primary goals is to make the interface as self-explanatory and straightforward as possible for teachers and students.

To accomplish that, you may decide that each student or teacher who logs in should, by default, see only videos relevant to them on their dashboard.

Implementing such customization may seem like a herculean task. After all, you’ve got hundreds of teachers and students and thousands of videos.

Don’t fret. It’s quite easy with api.video’s API.

Let’s dive in!

A bird’s eye view

Before looking at any code, let’s restate the problem. I’ll begin with the teacher's use case.

Problem: We have many teachers uploading videos, and we want each teacher to see only their videos on their dashboard.

Solution: We make use of api.video’s tagging feature on our backend.

There are two reasons for this:

1. We want to make this as simple as possible. This implementation is entirely invisible to the teachers and requires no action from them, not even a checkbox.
2. Having implemented a login on our backend means that we are holding a unique identifier (i.e., username, id) for our logged-in user. That makes tagging and accurate retrieval a breeze.

Upload

For simplicities sake, let’s assume that students and teachers share a table in our database that looks like this:

When a teacher logs in, we query this table to authenticate them. It’s trivial to grab the unique username at the same time.

Every time the logged-in teacher uploads a video, we include their “username/tag” in the ‘Create video’ request we make to the api.video API.

When creating the video, you can include tags in the request body like so:

We can take this a step further, allowing the teacher to select which course they are uploading the video to and adding a tag for that as well.

Retrieving the users' videos Every video is now associated with the unique identifier of the uploader. When a teacher logs into his video dashboard, all we need to do on the backend is to add their unique identifier to the query string when requesting the video list from api.video’s API.

For example, if the teacher’s unique tag is “einstein,” our request would look like so:

Our backend would get a response from api.video’s API that looks like this:

We can then handle that response however we’d like, passing on to the client app whichever properties we choose, confident that this user uploaded these videos.

What about the students? Applying the above technique to provide each student with a video dashboard tailored to them is simple.

Let’s say we have a table for courses that lists all the essential info for each course.

Our lookup table could look like this:

When a student logs in, it’s a simple query to get the tags of all their courses:

With this information, we can display a friendly UI allowing the student to choose which course they would like to see from a personalized course list.

Based on their selection, we’ll request their videos from our backend with the appropriate tag attached.

We can then pass the required fields from the response back to the client UI.

That’s all folks!

I hope you’ve got the picture. Remember, our community is here for you at community.api.video, and you can always reach out to us at hello@api.video.

Thanks for reading!