How To Create The Next Youtube or Twitch using Blazor, .NET 5, and Microsoft Azure - Part I

 

There are countless types of solutions you can create when developing software.
Today, we will see a small introduction on how to create your very own Video Sharing Portal,
with Blazor, .NET 5, and Microsoft Azure.

The Architecture

Before starting to code any project, it is vital to have an understanding of the architectural components required by the system and how all of the pieces will interact.

The diagram displayed here is just one of the many ways in which you can implement Video Sharing Portals, there is no right or wrong architecture, since it ultimately depends on your own specific needs and business strategy, however, there are best practices, you can learn of those in the Azure Architecture Center, take a special look to the Reference Architectures section.

Our diagrams are the proposed solution for the Open Source Project FairPlayTube, which has the following items:

• Users
• Azure Web CDN
• Used to speed up load times.
• Blazor WebAssembly Client App
• .NET 5 Server API
• Azure Blob Storage
• Used to store users uploaded videos
• Azure SQL Database
• Use to store users and videos-related data, while enforcing Data Integrity.
• Power BI
• Used to visualize Error Logs from Desktop and Mobile App
• Azure AD B2C
• Used to allow secure and centralized users authentication
• .NET 5 Background Jobs
• Used to monitor the videos indexing progress and update data accordingly.
• Azure SignalR
• Used to notify users when their videos have been indexed, as well as when they have received new messages from other users.
• Azure Speech
• Used as an accessibility helper, to allow users to hear an audio representation of the content in the page.
• Azure Video Analyzer (formerly Azure Video Indexer)
• Used to analyze videos and generator insights
• Azure Personalizer
• Used to show the best content for the users
• Azure Translator
• Used to automatically translate the text-data to multiple languages
• Azure Cognitive Search
• Used to allow for high quality fast search of videos

You can find the repo here: FairPlayTube Repository

There you can check the Readme and the Wiki.

Here you can see a small sample of the development progress

Why you must move to Blazor

If your business develops applications on .NET, you probably have already heard of Blazor.

Blazor is a framework for building interactive client-side Web UIs with .NET, 
a dream come true, not only for .NET Developers, but also for companies who want to optimize their development speed, while maintaining high quality standards, avoid code duplication, and reuse existent code in both server-side and client-side.

Blazor allows you to create rich interactive UIs using C#, reducing and even eliminating
your need to create Javascript code.

Blazor allows you to share your logic written in .NET between server and client-side, e.g. a custom regex validation that needs to be performed in front-end and in back-end, well, with Blazor, you can reuse the actual validation classes between client-side and server-side, effectively implementing the validation only once.

Blazor allows you to utilize a lot of already existent .NET libraries, on your client-side!

Another great feature of Blazor, is that Blazor apps are based on components, which in Blazor are elements of UI such as a page, dialog or data entry, and since they are implemented as components, they can be reused throughout your application, and even be shared with other applications when you create them as a Component Library.

One of the best features of Blazor, is that, due to is design, it allows you to create fully-featured, nice-looking, rich Web Applications. in no time, even as low as a day, since it removes the need of using other frameworks like in the traditional SPA ( Single Page Application ) approach depending on Angular, React, or similar.

Blazor is in fact, the perfect framework for creating MVPs ( Minimum Viable Products ) and go to market quickly, without sacrificing quality.

Since Blazor runs fully on .NET, you can even create .NET based automated test for your front-end!

Tell us, when are you moving to Blazor?

We help you move to Blazor: Hire Us here