A full-stack, multilingual VPN subscription platform built with Next.js (App Router), featuring authentication, automated payments, subscription management, and SEO-optimized content delivery.
This project was built as a production system for a real VPN service and showcases end-to-end ownership: frontend, backend integrations, payments, database, internationalization, and SEO.
EscapeTheMatrix is the marketing site and customer dashboard for a VPN service. Users authenticate, manage their subscriptions, and pay through integrated payment providers, while the platform serves localized content (5 languages) optimized for organic search.
Live focus areas:
- Customer-facing subscription management (purchase, renewal, status)
- Dual authentication: Google OAuth and Telegram-bot-issued access keys
- Payment processing with webhook-based status callbacks
- Multilingual content delivery and SEO-first architecture
- A growing content hub (blog) with structured data for search engines
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router, Server & Client Components) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Authentication | NextAuth.js (Google OAuth) + custom token-based login |
| Database | Remote database service (accessed via internal API layer) |
| Payments | CryptoCloud Pay, YooKassa |
| i18n | Custom translation system (ru, en, es, de, zh) |
| Deployment | Vercel |
- Google OAuth via NextAuth.js for one-click sign-in
- Profile key login — an alternative auth flow where users receive a unique access key through a Telegram bot, which is verified server-side against the subscription database
- Session-aware profile dashboard with automatic data refresh
- Full subscription lifecycle: purchase, renewal, and status tracking
- Dual payment gateway integration:
- CryptoCloud Pay — cryptocurrency payments
- YooKassa — card/local payment methods
- Dedicated webhook endpoints handling
successful-paymentandfailed-paymentcallbacks, keeping subscription state in sync with payment provider events - Real-time subscription info displayed in the user dashboard (plan, expiry, status)
- Fully localized UI and content across 5 languages: Russian, English, Spanish, German, Chinese
- Centralized translation dictionary with strict typing (
TranslationSet) - Locale-aware routing via query parameters with
hreflangalternates for SEO
- Per-page
Metadataexports (title, description, Open Graph, Twitter cards, keywords) hreflangalternates for all 5 locales plusx-default- JSON-LD structured data (
schema.org/Article) on blog posts for rich search results - Canonical URLs, semantic HTML (
itemScope,itemProp), and crawlable breadcrumb navigation - Custom 404 page matching the site's design system
- Statically defined, fully localized articles (5 languages each)
- Reusable content-block renderer supporting intros, headings, paragraphs, lists, images, and conclusions
- "Related articles" recommendations (3 most recent posts) on every article page
- Dedicated
/blogindex listing all posts
- Dedicated Privacy Policy and Terms of Service pages
- Personal data processing consent flow integrated into the OAuth login screen
- Maintained, up-to-date list of recommended VPN client apps across platforms (iOS, Android, desktop), with protocol-specific guidance (VLESS, Hysteria2, etc.)
- Centralized type definitions (
lib/types.ts) shared across components, API routes, and payment/database layers - Clear separation between server-rendered metadata (SEO) and client-rendered interactivity (
"use client"components) - Modular component structure:
Navbar,Footer,FAQSection,ProfileDashboard,ProfileLogin,CompareSection, etc.
- Production system, not a demo — built for real users, real payments, and real traffic
- Two independent auth flows working side by side (OAuth + custom token-based login via external Telegram bot)
- Two payment providers with reconciled webhook handling for both success and failure states
- 5-language localization across UI, blog content, and SEO metadata
- SEO-first design: structured data, hreflang, canonical URLs, and a custom 404 — built to rank
This repository is shared as a portfolio piece to demonstrate engineering capability and project scope. It is not intended for reuse, redeployment, or as a template.