Algorithms Visualized

Interactive visualizations of core algorithms to demonstrate understanding.

Fractal BootcampReactTypeScriptNext.jsFramer Motion
About This Project

I've created interactive visualizations for fundamental algorithms that demonstrate my understanding of each algorithm's mechanics and implementation.

Each algorithm is presented with step-by-step animations, allowing users to see exactly how the algorithm works under the hood.

This was created aspart of the Fractal Bootcamp curriculum.

Technical Implementation

Frontend Stack

  • • Next.js 14 with App Router
  • • TypeScript for type safety
  • • Tailwind CSS for styling
  • • Framer Motion for animations
  • • Shadcn/ui components

Key Features

  • • Interactive step-by-step animations
  • • Real-time algorithm visualization
  • • Custom input validation
  • • Responsive design
  • • Smooth transitions and effects
Learning Objectives

Through this project, I've deepened my understanding of:

  • • Algorithm complexity analysis
  • • Recursive problem-solving
  • • State management in React
  • • Animation and user experience design
  • • TypeScript best practices
  • • Modern React patterns (like tRPC)
  • • Component architecture
  • • Performance optimization