Case 09 / 17 · Website · 2026

MXVI

A collection of hands-on guides to server deployment, administration and backend tooling, with interactive tools and learning quizzes.

https://mxvi.ru

  • Development time: 12 days
  • Articles at launch: 15+
  • Lines of code: 4,500+
  • Quizzes: Per article (optional)

Challenge

Developers and engineers often lack a compact, tested and up-to-date set of recipes for server setup, deployment and security — existing material is scattered or outdated.

Solution

A lightweight content portal with article ratings, search, categories and built-in interactive tools: articles are written as React/TSX modules, each able to export quizzes and handy snippets; the site is SEO-optimised and deploys fast on Vite.

Highlights

React + TypeScript + Vite · Articles-first · Interactive quizzes · SEO-ready

What was built

  • Structured articles as React/TSX components with automatic reading time
  • Interactive quizzes at the end of an article: questions exported from the modules themselves
  • A home page with search, category filters, pinned articles and saved bookmarks
  • An interactive tools page (utilities, commands, checks)
  • Support for notes, footnotes and highlighted code blocks
  • A responsive modern UI with Tailwind-like styles and serif headings
  • SEO: OpenGraph/Twitter meta tags plus a dynamic favicon and theme-color
  • A simple workflow for adding articles: a TSX file → import into the registry → it shows up in the catalogue automatically
  • A mail link for submissions: submit@mxvi.ru (footer)
  • Lightweight content testing and checks (lint, TypeScript types)

Stages

  1. Analysis and prototype (1 day) — Defined the article format, the registry structure and the quiz UX
  2. Content and migration (4 days) — Writing the first 10–15 articles, moving existing notes into TSX modules
  3. Frontend and components (4 days) — Layout, ArticleLayout, CodeBlock, Footnotes, utility components and the home page
  4. Interactive elements (2 days) — Quizzes, handy commands, DNS/section checks, bookmarks and site search
  5. SEO, favicon and deployment (1 day) — Meta tags, a dynamic SVG favicon, the Vite build and hosting config

Next project: Episodr