Development of Lydiob7 Digital Academy Platform

Web: https://lydiob7.com

Lydiob7 | Digital Academy is a full-stack educational platform focused on programming, software development, and technology education.

I designed and developed the platform from the ground up using Next.js, TypeScript, PostgreSQL, and Prisma, covering the complete development lifecycle from application architecture and database design to frontend development, authentication, deployment, and infrastructure.

The platform combines technical articles with structured courses and interactive lessons. Lessons integrate video content, picture-in-picture playback, progress tracking, and coding playgrounds that allow students to experiment with code without leaving the learning experience.

Alongside the public platform, I built a custom administration system for managing courses, lessons, blog posts, users, categories, and other platform content. The project is designed as a long-term product, with a strong focus on maintainability, performance, SEO, scalability, and developer experience.

The main challenge was designing an educational platform that could support very different types of content and interactions while remaining maintainable as the product grows. Unlike a conventional content website, courses introduce relationships between users, courses, modules, lessons, progress, media, and interactive exercises. At the same time, the platform also operates as a publishing system with its own blog, authentication, user profiles, analytics, and administration tools. The main engineering requirements included:

Design a full-stack architecture around Next.js and PostgreSQL.

Model courses, modules, lessons, users, progress, blog content, reactions, and other relationships in a relational database.

Build a custom administration system instead of relying on an external CMS.

Implement authentication and authorization with multiple authentication methods.

Create interactive lessons combining text, video, and executable code examples.

Track student progress across courses and lessons.

Build a responsive video experience with picture-in-picture support.

Optimize public content for search engines and social sharing.

Maintain good performance as the amount of educational content grows.

Integrate analytics and product monitoring.

Create a production deployment architecture using containers and a reverse proxy.

Keep the architecture extensible enough to introduce new learning features without redesigning the core platform.

Full-stack Next.js architecture I built Lydiob7 as a full-stack Next.js application using TypeScript and the App Router. Next.js handles both the public-facing application and server-side functionality, allowing the platform to share types, validation logic, authentication, and domain models across the stack.

Server-side rendering is used where appropriate for content-heavy and SEO-sensitive pages, while interactive areas of the platform use client-side React functionality.

This provides a balance between a content platform optimized for discovery and a highly interactive web application.

PostgreSQL serves as the primary database, with Prisma ORM providing a typed interface between the application and its data model.

I designed the relational schema around the different domains of the platform, including users, courses, lessons, blog posts, categories, comments, reactions, authentication, and user activity.

Using a relational model was particularly important for the educational side of the platform, where courses, lessons, users, and progress have strongly interconnected relationships.

Prisma provides type-safe queries and migrations while keeping the database model closely integrated with the TypeScript application.

Lessons were designed as interactive environments rather than static content pages.

A lesson can combine educational content, video, navigation, and coding exercises within the same interface.

Integrated coding playgrounds allow students to experiment with concepts while following a lesson instead of constantly switching between the platform and an external editor.

The video system also supports picture-in-picture playback, allowing students to continue watching an explanation while interacting with other parts of the lesson.

Progress is persisted so users can leave a course and later continue from where they stopped.

Instead of introducing an external CMS, I built a custom administration interface directly into the platform.

The administration system provides centralized management of the application's educational and editorial data, including courses, lessons, blog posts, categories, and users.

Because the administration layer uses the same application and database models as the public platform, new product functionality can be reflected directly in the content-management workflow without having to adapt an external CMS.

This gives the platform complete control over both the data model and the editorial experience.

I implemented a custom authentication system supporting user accounts and OAuth providers.

Authentication is handled using secure server-side sessions/tokens, with protected application routes and role-based access to administrative functionality.

The account system provides the foundation for personalized functionality such as course progress, profiles, reactions, comments, and other user-specific features.

The blog is integrated directly into the platform rather than being hosted through a separate publishing system.

Blog content uses the same application infrastructure and database while being optimized for server-side rendering and search engine discovery.

I implemented technical SEO features including metadata generation, structured data, sitemap generation, robots configuration, semantic URLs, and social sharing metadata.

This allows editorial content to work both as an educational resource and as an acquisition channel for the broader platform.

Performance was an important consideration because the application combines content-heavy pages with authenticated and interactive functionality.

I designed data-fetching and rendering strategies according to the requirements of each part of the platform rather than applying a single rendering model everywhere.

Public educational and editorial content can take advantage of server rendering and caching, while personalized areas remain dynamic.

Images, application assets, database queries, and client-side JavaScript are also optimized to minimize unnecessary work and keep page loads responsive.

I integrated analytics and product instrumentation to understand how users interact with the platform.

Google Analytics provides traffic and acquisition data, while Statsig is integrated for product analytics and experimentation.

A stable user identification strategy connects anonymous activity with application sessions where appropriate, providing a foundation for understanding user behavior and evaluating future product changes.

The production application is containerized with Docker and deployed behind Nginx.

The deployment architecture separates application infrastructure from the external network layer, with Nginx acting as a reverse proxy and Cloudflare providing the public-facing network layer.

This required working beyond application development with container builds, environment configuration, networking, SSL, firewall configuration, database deployment, and production debugging.

The result is an infrastructure setup that I can operate and evolve alongside the application itself.

The interface is built with React and Tailwind CSS around a reusable component system.

GSAP is used selectively for animations and richer visual interactions without making animation a dependency of the core application experience.

The UI was designed to work across the very different contexts of the platform—from long-form technical articles and course discovery to video lessons, coding environments, user profiles, and administration screens.

Lydiob7 evolved from a content website into a complete educational platform with its own application layer, database, CMS, authentication system, learning environment, and production infrastructure. Building the platform from the ground up gave me ownership of decisions across the entire stack: from relational data modeling and backend architecture to frontend interactions and deployment. The architecture provides a foundation where new courses, lessons, articles, users, and educational features can be introduced without creating separate systems for each part of the product. From an engineering perspective, the project has also been an opportunity to work on problems that are often hidden behind third-party platforms: authentication, content management, database design, caching, SEO, analytics, deployment, and production infrastructure. Rather than integrating these pieces as isolated features, the main challenge has been designing them as parts of a cohesive product that can continue evolving over time.

Frontend

Next.js

React

TypeScript

Tailwind CSS

GSAP

Responsive Web Development

Server & Client Components Backend & Data

PostgreSQL

Prisma ORM

Server Actions

API Design

Relational Data Modeling

Zod

Authentication & Authorization Product Engineering

Course & Lesson Architecture

Interactive Coding Environments

Video Integration

User Progress Tracking

Custom CMS / Administration Tools

Product Analytics Infrastructure

Docker

Nginx

Cloudflare

Linux

Production Deployment Web

SEO

Server-Side Rendering

Performance Optimization

Structured Data

Analytics