fullstack · July 2026
SoftAcademy
A Georgian-language cybersecurity academy: a public marketing site that sells a live, instructor-led course, plus a complete admin panel that runs the business — courses, orders, promocodes, students, reviews, blog CMS, and an email/SMS broadcast tool. Fully in Georgian (ქართული), priced in lari (₾), mobile-first.
Tornike Kalandadze — software engineer & technical lead, client delivery since 2019 · Tbilisi (GMT+4)
Problem
A cybersecurity school needs its whole product surface — a site that sells the course and a back office that runs enrollments, discounts, moderation, and student messaging — in Georgian, before any backend exists to plug into.
Approach
One Next.js 14 App Router codebase, two route groups: (public) for the marketing site and /admin for the panel, sharing a ten-primitive typed UI kit. All data lives in a single typed module (mockData.ts, nine interfaces); getDemoStats() derives the dashboard KPIs from the records instead of hardcoding them, and mutations live in React state with toasts — so the demo is fully clickable with nothing behind it, and every seam (auth stub, data module, Twilio/SMTP settings) is shaped for a real backend to slot in per-file.
Impact
The entire product is walkable in one npm install: landing, blog, contact, auth, and ten admin sections — localized in Georgian with lari pricing and date-fns ka formatting, responsive down to a mobile drawer, and useful as a stakeholder demo, a design reference, or the front-end half of a real build.
Through every lens
01 · Full-stack
Next.js 14 App Router with route groups splitting the marketing site from the admin panel; TypeScript-strict mock-data layer (nine interfaces) standing in for the database, derived dashboard stats, in-memory mutations with toasts, and a hand-built ten-primitive UI kit instead of a component library.
Built with
Next.js 14 · React 18 · TypeScript 5 · Tailwind CSS 3.4 · lucide-react · date-fns (ka locale) · clsx + tailwind-merge
Notes
Two products sharing one design system. The public site opens on a dark hero with the featured course, a six-module curriculum bento grid, a blog with featured posts and read-time, a validated contact form, and split-screen auth pages. The admin panel behind /admin covers ten sections: a KPI dashboard, course and category management, a blog CMS with search and publish/feature toggles, order status management with promocode discounts, a promocode engine (percentage or fixed, usage caps, expiry), a student roster, a review moderation queue, an email/SMS broadcast composer for sending Meet links to buyers, and Twilio/SMTP settings. Everything runs on typed mock data — clone it and click through the entire product in under a minute, no database or env setup. The UI kit is ten hand-built primitives (Button, Modal, Toast, …) with zero component-library dependencies.