DEV Community: Shravan Bobade

🚀 I Published My First Python Package — bulk-file-organizer 🎉

Shravan Bobade — Fri, 17 Oct 2025 16:01:10 +0000

Hey folks 👋

After days of tinkering, testing, breaking things (and fixing them again), I finally published my first ever Python package to PyPI!

💡 What It Does

bulk-file-organizer is a simple CLI tool that helps you automatically organize messy folders by file type.

Whether it’s your Downloads folder that looks like a digital jungle 🌴 or your project assets scattered all over—this little tool tidies everything up into clean folders in one command.

Installation & Usage

pip install bulk-file-organizer
bulk-organizer --help

🧠 What I Learned

This was my first deep dive into:

Python packaging with setuptools
pyproject.toml configuration
Testing builds using TestPyPI
Creating and using command-line entry points
Managing metadata and dependencies

Honestly, I went through the whole loop—confusion ➜ research ➜ errors ➜ debugging ➜ triumph 🌀 and that’s what made it fun.

🛠️ Open Source & Contributions

The project is open-source on GitHub:

👉 github.com/Shravan250/bulk-file-organizer

If you try it out, I’d love your feedback! You can:

⭐️ Star it if you like it
🐛 Open issues for bugs
💡 Suggest features
🔧 Create pull requests

Every contribution counts and helps it evolve.

🎥 The Story Behind It

I also recorded a short video sharing my journey—from idea to publishing it on PyPI. It captures all the tiny details, moments of doubt, and that final “YES, it worked!” moment 😄

🌱 Final Thoughts

It might not be the biggest or most complex project, but it’s mine—built from curiosity, persistence, and a ton of trial & error.

And that, I think, is the real joy of being a developer. The small steps that make you go, “Huh, I can actually do this!”

Here’s to more experiments, small wins, and open-source adventures ahead ✨

MovieNest Gets a Mood Ring: Recommending Films with Weather, Time & Tears

Shravan Bobade — Fri, 27 Jun 2025 18:18:49 +0000

🎮 MovieNest Gets a Mood Ring: Recommending Films with Weather, Time & Tears

So I was staring out my window one rainy night, thinking:

“Wouldn’t it be cool if my app felt the vibe and showed me a romantic thriller?”

And that’s how I spiraled into turning my chill movie app into a mood-sensing, AI-powered, vibe-aware recommender system.

Spoiler: The mood logic was easier than the geolocation permission denial logic.

🔧 Goal: Make MovieNest Feel Emotions (Kind Of)

This update was all about personalization. I wanted the app to:

Detect the current weather and time
Guess your mood from that combo (like a fortune teller... but with JavaScript)
Recommend movies that match that vibe

Also:

Handle permission denial gracefully (not by throwing an error and dying 😵)
Keep everything snappy with virtual scroll + debounce

🧠 The (Questionable) AI Logic

Step 1: Mood Detection

I hooked into OpenWeather’s API + good ol’ Date() and assigned moods like:

Rainy Night → Romantic Thriller 🌧️🌙
Sunny Morning → Feel-Good Comedy ☕☀️
Foggy Afternoon → Mystery Drama 🕵️‍♀️

Basically, my app is now a softboi who asks,

*"Are you okay? Here's a comfort film."

Step 2: Mood → Genre

I made a neat moodGenreMapping object:

{
  feelgood: [35, 10751], // Comedy, Family
  cozy: [10749, 18], // Romance, Drama
  adventure: [12, 28], // Adventure, Action
  mystery: [9648, 53], // Mystery, Thriller
}

So each mood maps to TMDB genres — and my app fetches them dynamically.

Step 3: Smart Fetching Flow

If you allow location:
→ Weather + Time → Mood → Genre → Movies

If you deny location (you rebel):
→ Time-only Mood → Genre → Movies

If you search manually:
→ I shut up and show you what you want.

And just to be polite, I added a 🧠 Mood Explanation Banner —

“It’s raining in your area at night, so here’s a romantic thriller.”
Because transparency matters. Even in movie logic.

😮‍😴 Challenges, AKA “Why Am I Like This?”

❌ Weather API 401

I foolishly used OpenWeather's fancy 3.0 OneCall endpoint.
Turns out, that one costs real money 😭
So I switched to a free and functional endpoint. Budget dev life.

📍 No Location? No Problem.

I realized users could deny geolocation (how dare they), and I wasn’t handling it.
Now I fallback like a champion:\
→ Just use the time and pretend we know the weather 🕰️✨

♻ Infinite Fetch Bug

Forgot to reset the pagination page when a new mood or search triggered.
The app said, “More movies! More!”
I said, “Please stop.”
It now stops.

🤖 Mood Mapping Misfire

I passed the time directly into moodGenreMapping like a rookie.
What I needed was:
getMoodFromContext(weather, time) → mood → genres

Fixed it.
Cried a bit.

📱 Mobile Geolocation Weirdness

Some mobile devices didn’t even ask for permission.
Added logs and tested denial flow manually. (Felt like QA. Still unemployed.)

🚀 The Final Vibe

Now MovieNest can do this:

It’s raining in Mumbai at night?
→ You get romantic thrillers. 💖🕵️‍♂️
It’s sunny in Paris?
→ Boom, comedies and feel-goods. ☀️😂
Denied location?
→ It’s cool. We’ll guess. We’re chill like that.

🌈 What’s Next?

I’m building in public — crying in private. Here's what’s coming up:

🎞️ Collaborative watchlists
🔊 Voice-based search
🤖 Better mood prediction using AI (GPT meets weather forecast??)

🧩 Try It Out

Live App: https://shravandev.com/movienest\
Blog 1: Proxy, Debounce & Glassmorphism\
Blog 2: Virtual Scroll + Lazy Loading

Thanks for scrolling through my chaos.
If your app isn’t emotional yet…
Are you even building full-stack? 😌

Built with care, mood swings, and navigator.geolocation —
Shravan 💻🍿

Virtual Scrolling, Lazy Loading & a Little Bit of Crying: Optimizing My Movie App

Shravan Bobade — Sat, 21 Jun 2025 13:31:47 +0000

🎞️ Virtual Scrolling, Lazy Loading & a Little Bit of Crying: Optimizing My Movie App

Let’s be honest — I just wanted a smooth movie app.

No jank. No stutter. Just silky-smooth scrolling like Netflix on a Sunday morning.

What I got was a rabbit hole of virtualization, broken layouts, and spacing problems that haunted my dreams.

But hey… we made it (barely).

🪜 Step 1: Added Lazy Loading with Pagination

So TMDB API said:

“Bro, I give you 20 movies per page. That's it.”

Me:

“Cool, I’ll just keep asking you again and again.”

I added lazy loading logic:

Introduced page and hasMore state
Updated fetchMovies() to append new movies instead of replacing the list like Thanos snapping away my previous results
Hooked up the Intersection Observer API to keep an eye on the bottom of the list like a snitch. Whenever it saw the last card, boom — next page.

Honestly, lazy loading felt great. Not too tricky. It worked.

Confidence level: 100

Reality level: about to drop

💀 Step 2: Enter Virtual Scrolling (aka the Boss Level)

Scrolling was smooth… until the list got long. Real long. Like “my fan sounds like a jet engine” long.

So I said: “Let’s virtualize this bad boy.”

I found the magic duo:

react-window
react-virtualized-auto-sizer

👷‍♂️ Created a new component VirtualizedMovieGrid

🧠 Only renders the movies actually visible in the viewport.

📐 Dynamically calculates column count based on screen width

Everything was going great until…

💥 IntersectionObserver no longer worked because… the DOM wasn’t real anymore.

No actual DOM nodes = nothing to observe.

Switched to using onItemsRendered from react-window.

That saved the day. Kinda. Almost. Temporarily.

😵 Step 3: My Grid Betrayed Me

You know what they don’t tell you?

FixedSizeGrid only works if your cards are exactly the same height.

Which my cards… were not.

So my rows turned into this weird puzzle of overlapping nonsense. I felt like I was watching Inception — but in CSS.

Solution?

👉 Switched to VariableSizeGrid

👉 Dynamically calculated row heights

👉 Added caching because performance was dying

👉 Realized I had to position everything absolutely/relatively

👉 And then... responsiveness said BYE.

😭 Styling: My Personal Boss Fight

I spent more time tweaking margins than I spent watching actual movies this year.

Mobile was weird
Desktop was okay
Tablets? Who even owns those? (Still fixed them)
I cried a little.

Eventually, I added responsive spacing that:

Shrinks spacing on mobile to make cards bigger
Expands spacing on desktop for better layout
Respects the user's device, but NOT my sanity

It still isn’t perfect, but if you squint... it looks great.

(And if you don’t squint, just pretend it’s abstract art.)

🎉 Final Result: Scroll Nirvana Achieved

✅ Lazy loading with infinite scroll

✅ Virtual rendering with smooth UX

✅ Responsive, dynamic layout

✅ Survives even large datasets like TMDB's trending chaos

✅ My brain? Slightly melted, but satisfied

📌 Key Takeaways

React Window is magical… until styling gets involved
Fixed size is cute, but variable size is reality
Responsive layout + virtualization = many hours of trial and error
Don’t trust scrollbars
Tea/Coffee is a legitimate debugging tool

🔗 Try It Yourself

🧪 Live app: https://shravandev.com/movienest/

📖 Part 1: Building MovieNest: Design, Proxy, and Debounce

💬 P.S.

If you’ve ever battled virtualization + layout + responsiveness all in one go… I see you.

We are warriors of the grid.

Let me know how you handled it (or if you’re still stuck in the scroll trenches 😅).

Built with tears, love, and position: relative; by Shravan 💻
Follow my dev chaos on GitHub,Linkedin

Virtual Scrolling, Lazy Loading & a Little Bit of Crying: Optimizing My Movie App

Shravan Bobade — Sat, 21 Jun 2025 13:31:47 +0000

🎞️ Virtual Scrolling, Lazy Loading & a Little Bit of Crying: Optimizing My Movie App

Let’s be honest — I just wanted a smooth movie app.

No jank. No stutter. Just silky-smooth scrolling like Netflix on a Sunday morning.

What I got was a rabbit hole of virtualization, broken layouts, and spacing problems that haunted my dreams.

But hey… we made it (barely).

🪜 Step 1: Added Lazy Loading with Pagination

So TMDB API said:

“Bro, I give you 20 movies per page. That's it.”

Me:

“Cool, I’ll just keep asking you again and again.”

I added lazy loading logic:

Introduced page and hasMore state
Updated fetchMovies() to append new movies instead of replacing the list like Thanos snapping away my previous results
Hooked up the Intersection Observer API to keep an eye on the bottom of the list like a snitch. Whenever it saw the last card, boom — next page.

Honestly, lazy loading felt great. Not too tricky. It worked.

Confidence level: 100

Reality level: about to drop

💀 Step 2: Enter Virtual Scrolling (aka the Boss Level)

Scrolling was smooth… until the list got long. Real long. Like “my fan sounds like a jet engine” long.

So I said: “Let’s virtualize this bad boy.”

I found the magic duo:

react-window
react-virtualized-auto-sizer

👷‍♂️ Created a new component VirtualizedMovieGrid

🧠 Only renders the movies actually visible in the viewport.

📐 Dynamically calculates column count based on screen width

Everything was going great until…

💥 IntersectionObserver no longer worked because… the DOM wasn’t real anymore.

No actual DOM nodes = nothing to observe.

Switched to using onItemsRendered from react-window.

That saved the day. Kinda. Almost. Temporarily.

😵 Step 3: My Grid Betrayed Me

You know what they don’t tell you?

FixedSizeGrid only works if your cards are exactly the same height.

Which my cards… were not.

So my rows turned into this weird puzzle of overlapping nonsense. I felt like I was watching Inception — but in CSS.

Solution?

😭 Styling: My Personal Boss Fight

I spent more time tweaking margins than I spent watching actual movies this year.

Mobile was weird
Desktop was okay
Tablets? Who even owns those? (Still fixed them)
I cried a little.

Eventually, I added responsive spacing that:

Shrinks spacing on mobile to make cards bigger
Expands spacing on desktop for better layout
Respects the user's device, but NOT my sanity

It still isn’t perfect, but if you squint... it looks great.

(And if you don’t squint, just pretend it’s abstract art.)

🎉 Final Result: Scroll Nirvana Achieved

📌 Key Takeaways

React Window is magical… until styling gets involved
Fixed size is cute, but variable size is reality
Responsive layout + virtualization = many hours of trial and error
Don’t trust scrollbars
Tea/Coffee is a legitimate debugging tool

🔗 Try It Yourself

🧪 Live app: https://shravandev.com/movienest/

📖 Part 1: Building MovieNest: Design, Proxy, and Debounce

💬 P.S.

If you’ve ever battled virtualization + layout + responsiveness all in one go… I see you.

We are warriors of the grid.

Let me know how you handled it (or if you’re still stuck in the scroll trenches 😅).

Built with tears, love, and position: relative; by Shravan 💻
Follow my dev chaos on GitHub,Linkedin

Building MovieNest: A Chaotic Developer Adventure (ft. VPNs, Proxies & Glassmorphism)

Shravan Bobade — Tue, 17 Jun 2025 17:25:38 +0000

🎬 Building MovieNest: From Design Clone to Dev Debauchery (ft. VPNs, Bugs & Debounce)

Yo fellow netizens 👾,

Ever tried building a movie app and accidentally learned full-stack networking? Yeah… that happened.

So, I set out to build a movie discovery platform for my MovieNest base — a React frontend that was supposed to be a chill, “just-design-it” project. Spoiler alert: it wasn’t.

Let me walk you through the chaotic beauty that unfolded (with humor, caffeine, and broken CORS dreams).

🎨 1. Cloning JavaScript Mastery, but Make It ✨ Fabulous

Big shoutout to JavaScript Mastery for the amazing design base — your UI was my canvas, and I painted over it with:

Glassmorphism: Because who doesn’t love see-through boxes in 2025?
Framer Motion: Micro animations so smooth they could dance on butter.
Custom UI polish: Added my own spice to the layout with modern CSS to boost the UX.

So yeah, it started as a clone, but now it’s a clone with drip.

Before

After

🧠 2. Debounce or Die (API Rate Limit Edition)

TMDB be like:

"You hit me with too many requests… now you must suffer."

Me:

“Nah Bro, I got debounce() from npm.”

I wired up input fields with debounce logic so API calls chill out while users furiously type “Spiderrmaaan but with 3 a’s.”

Now my API server is less stressed than I am before a code review.

🔥 3. Trending? I Gotchu With My Homemade Algorithm

Who needs a data scientist when you can just… fake it till you make it?

I whipped up a very serious and definitely academic algorithm:

Every time you search for a movie, I increment a counter. Movies with more hits = more trending. Boom. DIY trending.

It’s like Google Trends but powered by your indecisive scrolling.

🌍 4. TMDB Ghosted My Region, So I Became the Proxy I Needed

Here’s where the real plot twist hit me harder than a JS bug in production.

TMDB didn’t show results in my region. Solution? VPN.

Then I had an epiphany 💡:

“What if... I became my own VPN?”

Boom. Proxy server time.

But wait — plot twist #2: my backend is Appwrite now.

Cue montage:

Me, reading docs.
Me, writing a serverless function.
Me, crying because of CORS.
Me, realizing URLs need decoding.
Me, breaking and fixing the same code 17 times.

Finally, I did it. Appwrite function deployed. Proxy working. I could see movies from all over the world again. The web was healing.

🧹 5. Virtual Scrolling? More Like Mental Scrolling

Currently diving into virtual scrolling so users don't download the entire TMDB database when they open the app.

Still learning… so if it breaks, it was probably on purpose. 🤡

🚀 6. Coming Soon: Parallelism, Lazy-Loading, and Magic

Future updates I’m planning to flex:

🚀 Parallel data fetching
🪄 Progressive loading
🧩 Code-splitting
💤 Lazy loading
🧠 Aggressive caching (because speed is a feature)

The goal? Butter-smooth UX and low time-to-first-interaction.

🤖 7. AI-Powered Madness Coming Soon

Also experimenting with spicy AI features like:

🎭 Mood-based recommendations
🎤 Voice search (talk to your screen, it's 2025)
📈 Real-time trends
🤝 Collaborative watchlists

Basically… making Netflix nervous.

🤝 Final Words

This app isn’t just a portfolio piece — it’s my dev journal, my test lab, my digital playground. I’m building it live, breaking stuff, fixing stuff, and learning out loud. If you see a bug, it’s a feature. If you see a delay, it’s probably me debugging at 2am with 17 console logs and a dream.

If you wanna follow the chaos and cheer me on, drop your thoughts below or follow me on GitHub and Linkedin.

Website

MovieNest,

Day 6 & 7: Mastering Queues and Trees in Programming

Shravan Bobade — Tue, 01 Apr 2025 15:37:42 +0000

What an exciting few days it's been! After exploring linked lists and stacks, I moved on to two new topics: queues and trees. These basic data structures complete the DSA family and add new dynamic visuals to my project. Let's go through the challenges, insights, and breakthroughs of Day 6 and 7!

Day 6: Crafting the Queue
**
**Understanding the Queue Concept

Queues have always interested me the simplicity of a First In, First Out (FIFO) system is just like the order of everyday tasks. Imagine it as a well-organized line at your favorite coffee shop: the first person to arrive is the first one served!

The Implementation Adventure

Implementing the queue was both challenging and fun. I set up the queue with clear enqueue and dequeue operations to ensure everything worked smoothly. The animations I created with D3.js made each push and pop come alive. Here are some highlights:

Enqueue Operation:
Adding new elements was like organizing a parade. Each element smoothly joined the queue, fitting in without disturbing the flow.
Dequeue Operation:
Watching the first element leave was like saying goodbye to an old friend smooth, satisfying, and well-animated. I carefully adjusted the timing to capture the perfect moment of departure.

Lessons Learned

Precision Matters:
Even a tiny mistake in the animation timing could disrupt the whole sequence. Every delay and easing function needed to be perfectly balanced.
Dynamic Visuals Enhance Understanding:
Using D3.js, each change in the queue was shown instantly, helping users (and me) better understand how the data moves.

Day 7: Sculpting the Trees

Branching Out with Trees

Trees combine structure and art, balancing hierarchy with the beauty of connected nodes. On Day 7, I tackled the challenge by creating binary search trees (BSTs), turning static data into dynamic visuals.

Implementation Highlights

Balanced BSTs:
Using what I learned before, I improved how to build a balanced BST. The tree now updates in real time, showing each insertion, deletion, and traversal with smooth animations that look like a tree growing.
Tree Traversals:
I added several ways to go through the tree (inorder, preorder, postorder, and level order) to show different ways of processing the tree. Each traversal is animated step-by-step, making it easy to see how data moves through the branches.

Overcoming Challenges

Complexity in Animation:
Coordinating animations for insertions, deletions, and traversals was like leading an orchestra. At times, the complexity was daunting, but each debugging session taught me more about improving performance and visual clarity.

Balancing Aesthetics and Functionality:
Making sure the visuals were both useful and interesting was a careful process. I tried different colors, timings, and easing effects until I found a balance that made the tree structure vibrant and engaging.

Final Thoughts

These last two days have shown how great it is to mix strong data structures with lively visuals. From the neat flow of queues to the branching beauty of trees, each part has deepened my understanding and improved my DSA Visualizer.

As I keep exploring new ideas, I'm excited about the endless possibilities ahead. Remember: every line of code, every animation change, and every debugging session is a step toward a brighter, more dynamic future.

Open for Comments and Suggestions

I am eager to hear your thoughts and feedback on my journey of creating a DSA Visualizer. Whether it’s about the tech stack, design choices, or any other aspect of the project, your insights are invaluable. Please feel free to share your comments and suggestions!

Connect with Me

I’m excited to connect with fellow developers and potential collaborators! You can find the project and follow my journey on GitHub and other social platforms:

GitHub: https://github.com/Shravan250/DSA-Visualizer

LinkedIn: https://www.linkedin.com/in/shravan-bobade/

Feel free to reach out, share your thoughts, or collaborate on this exciting project!

Stay Tuned

The adventure continues! Keep an eye out for more updates as I explore new data structures and refine my visualizer’s capabilities.

Keep coding, keep innovating, and never let a setback dim your creative spark!

Day 4 & 5: Exploring Data Structures and Building Dynamic Visualizations

Shravan Bobade — Fri, 28 Mar 2025 20:01:23 +0000

What a busy few days it's been! Today, I really got into linked lists and stacks, and I also learned to use D3.js for creating dynamic content. It's been a mix of exploring and trying things out—a great way to learn and grow through projects.

_________________________________________________________________

Linked Lists & Stacks: Basics of New Ideas

Day 4: Mastering the Linked List

Today, I focused on working with linked lists. I knew they were important in computer science, but creating one from scratch showed me how simple and beautiful they can be when you understand how they work.

Understanding the Concept:
A linked list is more than just a list; it's a chain of elements where each node points to the next one. This smart design allows for flexible memory use, making it efficient when the size of the data structure changes over time.

Implementation Challenges:
I ran into a few hurdles, like getting the hang of managing pointers correctly. It's a bit like trying to keep track of a bunch of strings tied together one wrong move, and everything gets tangled! And then there was the adventure of creating dynamic components with D3.js for visualization. Imagine trying to paint a moving picture while riding a roller coaster that's how hectic it felt! But every twist and turn taught me something new, and by the end, I was able to enjoy the ride.

Key Takeaway:
This exercise made me appreciate the basics even more. It showed me that even simple structures, when done right, can be very powerful and efficient. It's like learning the rhythm of a new language that connects directly with the core of computational logic.

_________________________________________________________________

Day 5: Growing with Stacks

The shift to stacks felt like a natural next step. If linked lists are like flowing rivers of data, stacks are the mountain climbers, handling data with precision using the LIFO (Last In, First Out) method.

Implementation Highlights:

Push Operation: Adding elements to the stack is like layering a cake, each new layer making it stronger and more delicious.
Pop & Peek Operations: Taking out and checking elements taught me the importance of precision and timing. Even a tiny mistake in indexing (those pesky off-by-one errors!) can turn a smooth process into a debugging mess.

Reflection:
These exercises highlighted the importance of focusing on the small details. In coding, just like in life, the little things matter a small oversight can lead to bigger problems later on.

_________________________________________________________________

D3.js: Painting Data with Code

Alongside working on data structures, I dove into D3.js for creating dynamic content. This amazing library is like a digital paintbrush that brings data to life but can also give some serious headaches for newcommers like me.

I have to say, making the dynamic parts for both the stack and linked list was quite a ride—especially the stack animations. Every time I thought I had it right, the code would act up, making things really tough. Debugging those animations felt like dealing with a tricky problem that kept confusing me. There were times I wondered if I'd ever get a smooth push or pop animation, or if I'd just keep getting frustrated. But through all the chaos and many facepalm moments, I've learned a lot about being patient, sticking with it, and not letting the code get the best of me—even if it made me question my sanity a few times.

_________________________________________________________________

Final Thoughts

These days have shown me how powerful curiosity is and how fun learning can be. As I keep working on the DSL Visualizer, I'm thrilled about all the possibilities ahead. Combining solid data structures with dynamic visuals is just the start—there's much more exciting innovation to come.

Stay tuned, keep coding, and remember: every line of code brings us closer to a brighter, more dynamic future.

_________________________________________________________________

Open for Comments and Suggestions

_________________________________________________________________

Connect with Me

I’m excited to connect with fellow developers and potential collaborators! You can find the project and follow my journey on GitHub and other social platforms:

GitHub: https://github.com/Shravan250/DSA-Visualizer

LinkedIn: https://www.linkedin.com/in/shravan-bobade/

Feel free to reach out, share your thoughts, or collaborate on this exciting project!

_________________________________________________________________

Stay Tuned

The adventure continues! Keep an eye out for more updates as I explore new data structures and refine my visualizer’s capabilities.

Keep coding, keep innovating, and never let a setback dim your creative spark!

Day 3: Implementing the Visualizer Features

Shravan Bobade — Tue, 25 Mar 2025 07:39:03 +0000

Yesterday, I finished creating the basic UI for my DSA visualizer and set up the sidebar functions for each data structure. Today, I started working on the visualizer features, full of enthusiasm and a new appreciation for D3 and SVG basics—thanks to The Code Blooded on YouTube for his clear explanations on D3!

Setting Up the UI and Sidebar

The groundwork is laid: the UI is ready, and the sidebar is filled with functions for different data structures. This foundational work has set the stage for what's next.

The Battle with Array Visualization

Armed with my "weapon," I set out to visualize my first data structure—an array. What should have been a simple task turned into a major challenge: nothing seemed to work! Frustration hit hard, and for a moment, I even questioned if programming was really for me.

A Much-Needed Break and Breakthrough

After stepping away for a bit, I decided to revisit the problem with fresh eyes. I spent some quality time with documentation and even asked GPT to explain every line of code—even the humble "const" got its spotlight! During a chat with a friend (a.k.a. ChatGPT), I learned that I could use Framer Motion to animate boxes and manage basic operations. Although I was initially frustrated, I quickly realized that every setback is just another opportunity to learn and innovate.

Overcoming Data Sharing Hurdles with React Hooks

Next came the challenge of sharing data across multiple files. With my sidebar handling functions and the visualizer rendering data, I needed a reliable way to pass data between them. Enter React Hooks! I dedicated hours to mastering shared state across components and ensuring the visualizer was flexible enough to handle various data structures in the future.

Well, what can I say? Reading and learning about hooks was much simpler than actually implementing them.

What I Learned

Component Communication:Using React Hooks to share data among descendants was a game-changer.

SVG and D3 Dynamics: Understanding how SVGs work and how D3 manipulates them gave me a deeper insight into data visualization.

Embracing Setbacks: Even when things don’t go as planned, every misstep is a stepping stone to mastery.

Final Thoughts and Key Takeaways

Today was full of ups and downs—a real journey through the world of coding. I learned new concepts, from React Hooks to the details of SVGs, and gained valuable insights into troubleshooting and improving my methods. Remember, every challenge is a chance to grow. Innovation isn't about never failing—it's about getting back up each time you do.

Open for Comments and Suggestions

Connect with Me

I’m excited to connect with fellow developers and potential collaborators! You can find the project and follow my journey on GitHub and other social platforms:

GitHub: https://github.com/Shravan250/DSA-Visualizer

LinkedIn: https://www.linkedin.com/in/shravan-bobade/

Feel free to reach out, share your thoughts, or collaborate on this exciting project!

Stay Tuned

The adventure continues! Keep an eye out for more updates as I explore new data structures and refine my visualizer’s capabilities.

Keep coding, keep innovating, and never let a setback dim your creative spark!

Blog 2: UI for DSA Visualizer

Shravan Bobade — Sun, 23 Mar 2025 17:45:13 +0000

Day 2 was focused on turning plans into pixels as I built the user interface for my DSA Visualizer. I aimed to create an engaging and easy-to-use layout that not only looks sleek but also makes exploring data structures and algorithms enjoyable.

Building the UI

I began by creating the Navbar and Footer, which serve as the welcoming bookends of the website. Using Tailwind CSS helped me quickly prototype with utility classes, ensuring the site stays responsive and visually consistent. Every element was designed with a modern, clean look in mind.

The Sidebar was a bit challenging. I wanted it to slide in and out smoothly on different screen sizes, so I used Framer Motion for smooth animations. This gives the interface a dynamic feel, almost like a stage where arrays and stacks perform their choreographed routines.

Bringing Visualizations to Life

The highlight of the project is the Visualizer section. Here, I included interactive elements that encourage users to explore various data structures. I added playful icons and hover effects to bring a bit of humor, making even recursive functions feel like part of a fun digital dance.

Using D3.js, I laid the foundation for future animations that will clearly show how algorithms work. While the logic for the visualizations is still in progress, the UI is now ready to present it all with style and clarity.

Exploring Other Pages

To provide a comprehensive look at the project, I designed several key pages:

About Me Page: A brief introduction, sharing my journey and passion for DSA.

Algorithm Page: A dedicated section for exploring various algorithms in action.

Contact Me Page: An easy way for visitors to reach out, share feedback, or collaborate.

Dark Mode Consideration

For a complete user experience, I prepared dark mode versions for all these pages:

Final Thoughts

Today was a whirlwind of creative coding, where I focused on detailed design while keeping the interface user-friendly. As I keep improving the experience, I'm excited about what's next. The UI is more than just attractive; it's a gateway to exploring the fascinating world of data structures and algorithms.

Stay tuned for more updates, and feel free to check out the project on GitHub if you'd like to join in or share feedback. Happy coding!

Open for Comments and Suggestions

Connect with Me

I’m excited to connect with fellow developers and potential collaborators! You can find the project and follow my journey on GitHub and other social platforms:

GitHub: https://github.com/Shravan250/DSA-Visualizer

LinkedIn: https://www.linkedin.com/in/shravan-bobade/

Feel free to reach out, share your thoughts, or collaborate on this exciting project!

Day 1: Laying the Foundation for My DSA Visualizer

Shravan Bobade — Sun, 23 Mar 2025 14:49:20 +0000

Today, I began my journey of creating a delightful DSA Visualizer. I've always found data structures and algorithms challenging and often felt bored by the repetitive exercises. As a programmer once said, "The best way to learn programming is through practical implementation." So, I decided to use a project-based approach to learn DSA and turn my struggles into a creative project.

Finalized Tech Stack

After brainstorming and a lot of research (with a little help from my friend, ChatGPT), I finalized the following tech stack:

1. Frontend Framework: React with Next.js

Why?
It offers a modern, component-driven architecture that is perfect for interactive UIs and supports server-side rendering when needed.

2. Visualization Library: D3.js

Why?
Ideal for crafting dynamic, data-driven visualizations that bring algorithms to life with fluid animations.

3. Styling Framework: Tailwind CSS and Shadcn

Why?
These streamline the design process with utility-first classes, ensuring a modern, responsive look with minimal effort. -Shadcn? Why? Because it’s the GOAT!!! I fcking love it! Shout out to Shadcn for their awesome contributions.

4. Bundler & Development Tool: Vite

Why?
Provides a fast, lean development experience with hot module replacement for rapid feedback during development.

5. State Management: React’s Built-in State (or Redux if needed later)

Why?
React’s native state management is sufficient for now. I can scale to Redux if the application demands more complex interactions.

6. Testing Frameworks:

Jest: For unit testing components.
Cypress: For end-to-end testing of user flows.

7. Deployment Platform:

Vercel or Netlify: Both offer quick and efficient deployment with built-in CI/CD support.

Planning and Design

After finalizing the tech stack, I began planning the essentials and creating my "own original design" (if you know, you know). Big thanks to Tomasz Gajda for the amazing Figma design inspiration!

I brainstormed the functionality and debated the best way to visualize the data structures and algorithms. I considered whether to include user interactions or keep it purely visual. It was a real challenge, but my savior, ChatGPT, helped me decide between building separate modes for "build" and "visualization" or combining them into a hybrid process. I chose the hybrid approach.

Signing Off

With the planning done and a clear vision in place, I headed off for what I hoped would be a good night’s sleep. Oh, wait — it’s already 4 AM. Guess it’s more like “good morning” as I embrace the early hours with excitement for the journey ahead!

Open for Comments and Suggestions

I am eager to hear your thoughts and feedback on my journey of creating a DSA Visualizer. Whether it's about the tech stack, design choices, or any other aspect of the project, your insights are invaluable. Please feel free to share your comments and suggestions!

Connect with Me

I'm excited to connect with fellow developers and potential collaborators! You can find the project and follow my journey on GitHub and other social platforms:

GitHub: https://github.com/Shravan250

LinkedIn: https://www.linkedin.com/in/shravan-bobade/

Feel free to reach out, share your thoughts, or collaborate on this exciting project!