Architecture

CSESoc Learn is architected with simplicity and developer experience in mind.

• Simplicity: The less moving parts there are, the less that can go wrong.
• DX: The better the development experience is, the faster team members can ship new features and learn.

---

• Framework: Next.js - proven in production, great DX, dynamic routing + API routes + optimisation + SSG/SSR
• Content: MDX + Contentlayer - Define content schema with automatic type definitions, intuitive DX, MDX allows interactive content
• Language: TypeScript - Catch errors and ensure high code quality
• Styling: Stitches - Fully-typed API for great DX + component variants + lightweight + easy creation of themes
• Miscallaneous: Stork (search), Radix Primitives (design system), Phosphor Icons - Stork: Local search that's fast, Radix Primitives: Unstyled component primitives that adhere to accessibility standards with great DX, Phosphor Icons: has everything