Sorting Visualizer - Portfolio Project - Next.js, TypeScript, Tailwind, Vercel

Portfolio project tutorial that walks through every step to create and deploy a Sorting Visualizer from scratch.

🔗 Links from video 🔗

⏰ Time Stamps ⏰
0:00 Project overview
2:14 Setting up the project
3:03 Visualizer context
10:17 Implement main layout
18:48 Create reset function
24:21 Algorithm speed control
29:02 Selected algorithm control
33:22 Run animation function
41:52 Bubble sort
48:35 Fix reset bug
50:32 Add ending animation
53:17 Algorithm description component
59:01 Selection sort
1:02:44 Implement remaining algorithms
1:03:42 Deploy to vercel
1:04:32 Extension ideas

Preparing for a technical interview?

#techprep #portfolioprojects #sortingvisualizer

[dynamiteSoul]

Awesome..want more portfolio project.. thank you ❤

[iancarlosortega]

keep doing videos mate, I love your channel and the way you explain everything!

[aissasemaoui]

Thanks for the Great content
every time you hit enter you hit me as well 😂

[rasteferi]

Great video and thank you, but for next time zoom in to the top part where you are writing your code and record your videos its hard to see

[arshiagholami]

This just proves that people use technolgies like nextjs where it doesn't belong to

[sravan]

Great content but your speed is too fast. Why don't you slow a bit down and explain what your code is actually doing. You keep writing code and expect the viewer to understand it as if it is trivial.

Please keep in mind that viewer needs to know what your code is doing before they can implement it on their own