02 / Project case study
AlgoSphere
An interactive learning platform for classic algorithms and data structures, featuring multi-language code viewers, performance tables, and Big-O visualizations.
React / TypeScript / Vite / TanStack Router
Overview
The problem.
Students and developers need a centralized, structured way to learn and reference algorithms across multiple programming languages. Without organized visual aids and side-by-side code comparisons, understanding algorithmic patterns and complexity becomes difficult.
The approach.
A React + TypeScript SPA that presents algorithms with multi-language code implementations (Python, Java, JavaScript, C++), interactive performance tables, and SVG-based Big-O complexity charts, all organized through intuitive routing and responsive design.
What the project focuses on.
- Multi-language code viewer with syntax highlighting
- Sorting algorithm performance tables
- Data structure operations reference
- SVG-based Big-O complexity chart
- Route-driven navigation (Fundamentals, Core, Advanced)
- Responsive mobile-first design
- Global search functionality
- Code snippets for every algorithm
Screenshots
Engineering notes
A problem worth understanding.
- Challenge
- Displaying the same algorithm across multiple languages required loading raw source files with proper syntax highlighting.
- Cause
- Inlining code strings or creating separate components per language led to duplication and maintenance overhead.
- Solution
- Built a reusable `CodeTab` component using Vite's `?raw` loader and `react-syntax-highlighter` for side-by-side language comparison.
- Result
- Clean, maintainable code presentation with automatic highlighting across 4 programming languages.
The engineering focus.
The engineering focus is building a scalable front-end architecture that presents complex algorithmic concepts through reusable components, visual aids, and multi-language comparisons, making computer science education accessible and engaging for learners.
What I took away.
- Design reusable React components that handle multiple data sources and rendering modes.
- Leverage build-time tools (Vite's `?raw` loader) to import non-JS assets as strings for display.
- Structure a TypeScript SPA with file-based routing for scalable navigation.
- Create visual educational aids (tables, charts) that complement code examples.
- Balance developer experience (ESLint, Prettier, Vitest) with user-facing polish.
- Use Tailwind CSS for consistent, responsive styling across components.