SPSubhajit Pradhan
ResumeEmailGitHubLinkedIn
Projects

Product and frontend platform engineer

CSCosmos

CSCosmos is a React and TypeScript learning platform that maps 172 computer science topics, tracks 34 live microsites, and routes learners through domain pages, search, topic details, and live module launches.

Metrics

Proof in numbers

Planned modules
172
Live microsites
34
Domains
8
Core routes
Home, topics, about, domain, detail

Workflow proof

Learning platform map

The hub turns a large topic catalog into searchable domains, topic detail routes, status badges, and launch paths for live microsites.

  1. Browse domain
  2. Search topic
  3. Inspect status
  4. Launch microsite

Architecture

System shape

A Vite React SPA uses React Router for domain and topic routes, TypeScript data modules for the topic catalog, Tailwind CSS for the UI, local storage for theme persistence, and Vercel rewrites for deep-link support.

  1. Topic catalog

    TypeScript data source for 172 modules, status, domains, slugs, and URLs.

  2. Domain routes

    React Router groups modules into Full Stack, DSA, Web3, Security, AI, Core CS, DevOps, and Advanced Systems.

  3. Search and filters

    Learners can find topics without knowing the domain hierarchy first.

  4. Topic detail

    Each module exposes status, context, and a launch path when live.

  5. Microsites

    Live modules run as focused deployments linked from the central hub.

Proof

  • Models 172 topics across Full Stack, DSA, Web3, Security, AI, Core CS, DevOps, and Advanced Systems.
  • Links 34 live microsites from a single searchable hub with active versus coming-soon states.
  • Ships metadata, robots.txt, sitemap.xml, and llms.txt to make the platform easier to inspect.

Problem

Computer science visualizers are usually scattered across separate demos and articles, which makes it hard for learners to see relationships between fundamentals, system internals, Web3, AI, DevOps, and advanced engineering topics.

Users and context

Built for self-directed developers who want a navigable map of computer science topics and direct links into focused visual learning modules.

Product workflow

A learner searches or browses by domain, opens a topic detail page, checks whether the module is live, and launches the related microsite when available.

Key engineering decisions

  • Kept the topic catalog in TypeScript so counts, badges, routes, and launch links all derive from one source of truth.
  • Separated domains from topics to support both high-level browsing and direct topic discovery.
  • Used active and coming-soon states so the platform can honestly show live modules while preserving the broader roadmap.
  • Added static discovery files around the SPA so reviewers and AI tools can understand the project even before client-side rendering.

Tradeoffs and limitations

  • The Vite SPA keeps the hub fast to build and easy to deploy, but it does not produce rich per-route HTML before hydration.
  • Separate microsite deployments isolate each topic, but they increase maintenance work across many small projects.
  • A TypeScript data catalog is simple and reviewable now, but a larger platform may eventually need MDX, generated content, or a CMS.

Next improvements

  • Migrate the hub to static or server-rendered routes so each domain and topic page ships crawlable HTML.
  • Generate sitemap entries for every active topic and live microsite.
  • Add screenshots, difficulty labels, prerequisites, and related-topic links for stronger learning paths.