This is my completed work for COSC326 (Computational Problem Solving) at the University of Otago. I've built interactive visualizations for each étude (programming challenge) using Svelte and TypeScript, focusing on creating clear and engaging ways to understand the solutions.
Live at https://harrydoran.github.io/play-algorithms/
Each étude has its own interactive page that includes:
- Visual demonstrations of the solution
- Step-by-step explanations of my approach
- Detailed methodology and implementation notes
- Access to the original problem specifications
The interface is designed to be intuitive and educational, helping others understand both the problems and solutions.
- Node.js (v18 or later recommended)
- npm (included with Node.js)
# Install dependencies
npm install
# Start development server and open browser
npm run dev -- --opensrc/
├── lib/ # Shared utilities and components
│ ├── components/ # Reusable Svelte components
│ └── ... # Algorithm implementations
├── routes/
│ └── etude/ # Individual étude pages
└── static/
└── etude-specs/ # PDF specifications for each étude
- SvelteKit - Full-stack web framework
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first styling
- Lucide Icons - Icon library