Built a Simple File Explorer in React.js with Recursive Folder Structure

After building 50+ web apps, here's my brutally honest take on JavaScript libraries: Most developers overthink it. I've seen teams spend weeks debating Chart.js vs D3.js for a simple bar chart. My rule? Start minimal: • Charts? Chart.js first, D3.js only if you need custom • PDFs? jsPDF for client-side, Puppeteer for complex • Maps? Mapbox GL unless you need 3D (then CesiumJS) • Animation? GSAP. Period. • Dates? Day.js (Moment.js is dead, move on) The "perfect" library doesn't exist. The one that ships your project does. I've replaced "enterprise-grade" solutions with 5KB libraries and users couldn't tell the difference. Stop library shopping. Start building. What's your go-to JavaScript library that just works? #javascript #webdev #programming

Hi everyone 👋 I’m thrilled to share something small but meaningful from my dev toolkit — React Scroll Reveal 🎉 🔗 "GitHub Repo" (https://lnkd.in/gM6ah3Bw) Over time, I found myself reusing the same two files across multiple React projects to handle smooth, scroll-based animations. So I cleaned them up, added configurability, and open-sourced them for anyone who wants a lightweight, dependency-free animation solution. ✨ What makes it special ⚙️ Built entirely on the IntersectionObserver API, no GSAP or Framer Motion required 🎬 Includes two components: one for single-element animations and one for staggered sequences 🎛️ Fully customizable, direction, delay, duration, distance, easing, and trigger behavior ♿ Respects prefers-reduced-motion and stays accessible 🧩 Works with any setup. plain React, Vite, or Next.js 💡 Why I built it These two components became my go-to drop-ins for portfolios, dashboards, and landing pages, clean, minimal, and consistent every time. I decided to make them public so others can skip the setup hassle and focus on building. 📣 I’d love your input 💬 Try it in one of your React projects and share your thoughts 🐞 Report issues or suggest new features 🤝 Contribute enhancements like new animation presets or SSR support I’m genuinely excited to see how the community shapes this going forward. Thank you for taking a look and helping it grow! 🙌 #ReactJS #OpenSource #FrontendDevelopment #WebAnimation #JavaScript #TailwindCSS #DeveloperCommunity

🖼️ Project 4 — React Gallery Pro 📂 Repo → https://lnkd.in/giy74wV8 React Gallery Pro 🚀 What I Learned: This was the capstone project of the series — a polished gallery app fetching real data through APIs, designed with premium glassmorphic UI and advanced motion effects. 🧩 Key Concepts: API Fetching with useEffect State Management Framer Motion Animations Pagination & Smooth Transitions TailwindCSS Glass Design ⚡ Tech Stack: React ⚛️ | TailwindCSS 🎨 | Framer Motion 🎞️ | Picsum API 🌐 💬 Takeaway: Turning knowledge into experience — from props to APIs, this project marks the transition from learning React to building with confidence. Big thanks again to Sarthak Sharma for being an incredible guide and creating structured learning paths 🙌 On to the next phase 🚀 — building full-stack projects soon 👨💻💡 #ReactJS #Frontend #WebDevelopment #LearningJourney #FramerMotion #TailwindCSS #WebDesign #javascript #developerjourney

useEffect vs useLayoutEffect — the difference that actually matters! Most devs use useEffect for everything, but here’s what’s happening under the hood 👇 useEffect: Runs after the paint (i.e., after the screen updates). ✅ Great for API calls, event listeners, or logging. 🚫 Avoid for DOM measurements or layout changes — you’ll see a flicker. useLayoutEffect: Runs before the paint (right after DOM mutations but before the browser updates the screen). ✅ Perfect for reading layout, measuring elements, or synchronizing animations. 🚫 Avoid overusing it — it can block rendering and hurt performance. 💡 Quick rule: If it affects what you see → use useLayoutEffect If it affects after you see → use useEffect 💬 What’s your go-to use case for useLayoutEffect? Let’s make this a mini thread of learnings 👇 #ReactJS #FrontendDevelopment #WebDevelopment #useEffect #CodingTips #JavaScript #LearnInPublic

🚀 Project Showcase – Algorithm Visualizer I’ve built an Algorithm Visualizer using React.js, designed to help learners understand how sorting algorithms work step by step through real-time animations 🔄✨ 🎥 Here’s a quick preview video of the project in action! Currently, it includes: 🔹 Bubble Sort 🔹 Quick Sort 🔹 Merge Sort This is still an ongoing project, and I’ll be adding more sorting algorithms soon — along with UI improvements and new visualization features 🎯 💻 Check out the full project on GitHub: 🔗 https://lnkd.in/eArQfDgx Would love to hear your feedback or suggestions! 🙌 #ReactJS #JavaScript #Algorithms #SortingAlgorithms #WebDevelopment #OpenSource #FrontendDevelopment #LearningByBuilding #AlgorithmVisualizer

Ever thought about what it takes to recreate the VS Code experience? I just finished building a Visual Studio Code UI clone using React.js, TypeScript, and Redux Toolkit, and it’s been one of my most rewarding projects yet. What started as a course project quickly turned into something more. I didn’t just follow along – I pushed further: refined the UI, added new features, and aimed to recreate that smooth, polished experience we all know from VS Code. 🔧 What I built: → Implemented dark/light theme switching with React Context → Built a recursive file explorer with nested folders (Redux Toolkit for state) → Developed a dynamic tab system with context menus and smooth scrolling → Added a live search panel to explore file contents → Designed resizable panels and reusable components 💡 The biggest lesson? Managing dynamic UI state and realizing how tiny design details can make an interface feel right. This project reminded me why I love frontend development – building something that feels alive and functional. 🔗 Live Demo: [https://lnkd.in/dq2ArJbZ] 💻 Source Code: [https://lnkd.in/ddThUaJk] What’s a project that taught you the most? Would love to hear your story. #ReactJS #TypeScript #ReduxToolkit #Frontend #WebDevelopment

💣 Web Development Series – Day 26 💣 Today, I built a Dice Minesweeper Game using HTML, CSS, and JavaScript! 💻🎯 And honestly — it was an absolutely fantastic experience! 🤩 In this game, each dice roll 🎲 reveals a random cell on the grid — but watch out! Some cells hide mines 💥, while others are safe 🎉. It’s all about logic, luck, and timing! ⏱️ 🎮 Project Highlights: Designed the grid layout using HTML & CSS 🎨 Added dynamic gameplay using JavaScript logic & randomization ⚙️ Practiced DOM manipulation, event handling, and game logic design 🚀 💡 Learning takeaway: This project was a perfect mix of creativity and logic. It taught me how small ideas can become interactive games through the power of code and imagination! 💻✨ Here’s a quick look at my Dice Minesweeper Game: https://lnkd.in/gjbqMVdz #WebDevelopment #HTML #CSS #JavaScript #FrontendDevelopment #CodingJourney #30DaysOfCode #GameDevelopment #InteractiveProjects #CreativeCoding #FunWithCode #LearningByBuilding

🌀 Web Development Series – Day 28 🌀 Today, I built a Tilting Maze Game using HTML, CSS, and JavaScript! 💻✨ It was a fantastic and mind-twisting experience! 🤩 In this interactive game, players tilt the maze 🧭 to guide the ball ⚪ through tricky paths and obstacles — without falling into traps! Each movement feels dynamic and real, giving a fun blend of logic, control, and creativity. 🎯 🎮 Project Highlights: Built the maze structure using HTML Styled and animated the design with CSS 🎨 Controlled ball movements and tilt effects using JavaScript & event listeners ⚙️ Enhanced my understanding of physics simulation and real-time interaction 🚀 💡 Learning takeaway: This project helped me explore how JavaScript can bring motion and realism into web games. It’s amazing how a simple idea can turn into an interactive coding challenge! 💻🔥 Here’s a sneak peek at my Tilting Maze Game: https://lnkd.in/gjbqMVdz #WebDevelopment #HTML #CSS #JavaScript #FrontendDevelopment #CodingJourney #30DaysOfCode #InteractiveProjects #GameDevelopment #CreativeCoding #FunWithCode #MazeGame #LearningByBuilding

I was exploring React’s rendering behavior and the execution of useEffect in parent-child components, and it’s fascinating how the flow actually works. Consider this example: function Child() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("Child useEffect running"); setCount(c => c + 1); }, []); console.log("Child rendering", count); return <div>I am Child</div>; } function Parent() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("Parent useEffect running"); setCount(c => c + 1); }, []); console.log("Parent rendering", count); return ( <div> I am Parent <Child /> </div> ); } When you run this, you might see something like: Parent rendering count 0 Child rendering count 0 Child useEffect running Parent useEffect running Parent rendering count 1 Child rendering count 1 Notice a few things: First, React always renders the parent before the child. So the render logs appear top-down. Second, useEffect runs after the render phase, and interestingly, the child’s effect runs before the parent’s effect in the commit phase. Third, when useEffect calls setState, React batches updates and schedules a re-render. In the next render pass, both parent and child see the updated state. This simple behavior highlights how rendering and effects work separately. Render happens top-down, effects run bottom-up, and state updates are applied before the next render starts. I’d love to hear from the community: have you seen confusing behaviors like this when working with nested components or Strict Mode? How do you handle understanding and debugging state updates in complex React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactHooks #useEffect #ReactTips #Programming #WebDev #DeveloperLife #Coding #FrontendTips #ReactPatterns #StateManagement #TechCommunity

GitHub: https://lnkd.in/eN3aYT5M 🔥 Project 10/20 – Tabs / Accordion ✨ Create Interactive Tabs using JavaScript + Active Classes + DOM! ✨ Tabs are everywhere — from dashboards to portfolios. This project teaches how to build clean, responsive tabs using: 🧩 Active class toggling for switching content 🪄 DOM manipulation for interactivity 🎨 Smooth fade animations for better UX A practical, beginner-friendly JavaScript project that boosts your UI/UX game. Switch tabs like a pro. 🚀 #webdevelopment #javascript #frontenddevelopment #frontendprojects #htmlcssjs #tabsui #accordionmenu #vanillajs #learnjavascript #programming #webdesign #techcommunity #githubproject #uicomponents #frontendinspiration #modernui #creativefrontend #webdevcommunity #codinglife #developerlife #softwareengineering #programminglife #frontendskills #interactivedesign #codewithusman