DSA Visualizer

Next.jsTailwind

Friday, May 31, 2024

Image

The DSA Visualizer is a web application developed with Next.js, Tailwind CSS, React Hook Form, Zod, and ShadcnUI, designed to provide an interactive tool for visualizing data structures and algorithms. The application offers real-time visualization, step-by-step updates, and automatic playback with adjustable speed, allowing users to follow the algorithm's execution closely. The user interface is modern, enhanced with custom components for logs, titles, buttons, and lists, ensuring a seamless and engaging user experience.

Leveraging Next.js, the application uses Tailwind CSS for a clean, responsive design, and integrates React Hook Form with Zod for efficient form handling and validation. The project also includes a code display feature using react-code-blocks to show the algorithm's implementation, providing a comprehensive understanding of its functionality.

You can check it out at: https://dsa-visulaizer.vercel.app/