The Holistica.Education one-page web application is built using a modern web architecture that integrates several advanced technologies to deliver a seamless, secure, and user-friendly experience. Key components include:
- «» .NET Web API for backend operations.
- «» Blazor WebAssembly (WASM) for the frontend.
- «» SQLite database management powered by Entity Framework.
- «» Microsoft Localization for multi-language support.
- «» Stripe API for handling payments.
- «» Twilio API for email communication with users.
This technology stack provides a fast and responsive user experience, making it easy for visitors to explore and interact with the platform.
Features and Content
The website offers a variety of educational resources, including articles, videos, and links to an educational club. It also provides detailed descriptions of courses, allowing users to register for free courses or purchase premium ones directly on the platform. A built-in announcement mechanism highlights selected materials at the top of the page.
The platform is available in three languages—Ukrainian, English, and Russian—with a single-click language switcher. Each language version may include unique content, such as tailored course descriptions, pricing, and currency options.
- Image
- Image
Backend Architecture
At the core of Holistica.Education’s backend lies the .NET Web API, which uses RESTful endpoints to manage data exchange between the Blazor WASM frontend and the server. Authentication and authorisation are managed using JSON Web Tokens (JWTs).
The Content Controller provides anonymous endpoints for reading content, while data modification and customer information access are restricted to authorised users with the roles of "Editor," "Manager," or "Admin."
Database Management
The database is implemented using Entity Framework, a natural choice for a C# .NET project. The lightweight SQLite engine was selected due to its serverless, self-contained architecture, making it ideal for a project of this scale.
Key database tables include:
- Users: Authentication and authorisation data.
- Customers: Contact and payment information.
- Products: Announcements, articles, and media across all languages.
- Rates: Pricing and descriptions for each product.
- Media: Links to video content.
- Image: checkout leading to stripe payment
- Image: manager's page
Frontend and UI
The Blazor WASM framework powers the frontend, ensuring a fast and responsive interface. The UI leverages Bootstrap for layout and design, enhanced by MudBlazor UI components for advanced visual elements.
The single-page application (SPA) architecture ensures ultra-fast interactivity by preloading most content during the initial visit.
Multi-Language Support
The Microsoft Localization package enables multi-language support. Resource files store translations for UI elements such as menus, buttons, and links. The selected language is saved in the browser’s local storage, ensuring the preferred language is loaded automatically on future visits. Each language version can provide unique content, such as course descriptions, rates, and announcements.
Payment Integration
Payments are handled through the Stripe API. The payment controller collects payment details and redirects users to Stripe’s secure payment page. Stripe processes the transaction, encrypting all sensitive data, and redirects users back to the application. The server then confirms the payment, notifies the customer, and sends a confirmation email.
For free subscriptions, the platform uses zero-amount payments via Stripe. Users provide their contact information without entering card details, allowing the platform to manage both free and paid subscribers without requiring a full user registration process.
Communication Management
The Twilio API is integrated to handle communication tasks, including sending payment confirmations to users and alerting site administrators about completed transactions. It is also used to send messages from site visitors.
Content Management Features
Authorised users with the "Editor" role can access the "Manage" section, which includes:
- Creating, editing, and deleting courses, rates, and announcements for all languages.
- Managing video gallery content, such as adding or rearranging YouTube links.
- Setting visibility options for courses and videos without deleting them.
The Quill HTML Editor is utilised for editing course content, enabling text formatting, image insertion, and hyperlinking.
Payment Management
Managers with appropriate authorisation can access the Payments page, where customer details (e.g., name, email, phone) and transaction data (e.g., date, amount, product, rate) are recorded and managed.
- Image
- Image
This robust integration of technologies ensures that Holistica.Education provides an efficient and intuitive platform for learners and administrators alike.