Week 5 of learning Next.js in public. Continuing the JavaScript Mastery Next.js course — this week something clicked differently. Not a bug fix. Not a new feature. Just a shift in how I think about building things. The topic was Application Navigation — and I used to think navigation just meant "add a navbar and some links." Turns out, it's one of the most architectural parts of a frontend app. The decisions you make here ripple through everything else. The Mobile Sidebar Built a slide-in panel using Shadcn's Sheet component. While doing this, I learned why Button uses asChild. Nesting a Link inside a Button is invalid HTML — two interactive elements inside each other causes real accessibility issues. With asChild, the Button passes its styles down to the Link instead of rendering a button tag. One small prop, a lot of meaning. The NavLinks Component — One Component, Two Places Instead of writing nav links separately for mobile and desktop, I built a single NavLinks component reused in both. All nav items live in a constants file. It detects active links using pathname, handles a special case for the profile route by appending userId dynamically, and wraps links in SheetClose for mobile or React.Fragment for desktop — controlled by one isMobileView prop. The Left Sidebar Once NavLinks was solid, LeftSidebar was straightforward. Dropped it into the root layout alongside Navbar in a flex container. This is what good component design feels like — you do the hard thinking once, reuse becomes easy. The Right Sidebar and TagCard Shows Hot Questions and Popular Tags. Built a TagCard using Shadcn Badge. The best part was writing getDeviconClassName(name) in lib/utils.ts — a utility that maps any tag name to its Devicon class automatically. Small function, works for every tag, no repetition. What this week actually taught me — navigation is not a UI problem, it's a system design problem. How you structure components, where constants live, how you make something context-aware without tight coupling — all of it compounds over time. I came in to learn sidebars. I left thinking about how production apps are actually organized. #NextJS #WebDevelopment #LearningInPublic #FullStackDeveloper #JavaScript #React #Shadcn

🚀 Sharing My JavaScript Practice Projects! I recently built a few small but useful JavaScript projects to strengthen my front-end development skills. These helped me improve my understanding of DOM manipulation, event handling, and basic UI logic. 🔹 Counter App A simple app to increment, decrement, and reset values. 🔗 Live Demo:https://lnkd.in/gmKUGScN 🔹 To-Do List Application Add, delete, and manage daily tasks with ease. 🔗 Live Demo: https://lnkd.in/gRcN8fyn 🔹 Celsius → Fahrenheit Converter A quick tool to convert temperatures using JavaScript. 🔗 Live Demo: https://lnkd.in/gKQtQ9xW Building these projects helped me practice: ✔ JavaScript basics ✔ User interface design ✔ Logical thinking ✔ Deployment using GitHub Pages / Netlify I’m excited to continue learning and working on more projects! Feedback is always welcome 😊 #JavaScript #WebDevelopment #LearningJourney #FrontendDeveloper #Projects

🚀 Built a Dynamic To-Do Web App using Django & JavaScript Sharing a short demo of my project where I focused on creating a smooth and interactive user experience. 🔧 Key Features: ✔️ Add, edit, and delete tasks ✔️ Inline editing without page reload ✔️ Mark tasks as completed with persistent state ✔️ Real-time UI updates using JavaScript 💡 This project helped me understand how frontend and backend work together in real-world applications. Excited to keep improving and building more! Would love your feedback 🙌 TechnoHacks EduTech Official Sandip Gavit #Django #JavaScript #FullStack #WebDevelopment #Learning

🚀 Just Built a Beautiful To-Do List App using JavaScript! Excited to share my latest mini project — a sleek and interactive To-Do List Web App built using HTML, CSS, and JavaScript. ✨ Key Features: ✔ Add & delete tasks dynamically ✔ Mark tasks as completed ✔ Smart progress tracking bar 📊 ✔ Motivational messages based on progress 💡 ✔ Glassmorphism UI with smooth animations 💻 Tech Stack: HTML5 CSS3 (Glass UI + Animations) JavaScript (DOM Manipulation & Event Handling) This project helped me strengthen my understanding of: 🔹 DOM manipulation 🔹 Event listeners 🔹 Dynamic UI updates 🔹 Clean UI/UX design 📌 Next Improvements: Local storage (save tasks) Edit task feature Dark/Light mode toggle I’m continuously learning and building — feedback is always welcome! #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode #CSE #Projects #Learning

Just Brush up My React Concept today using Mini Project: Tic Tac Toe! I'm excited to share a project that helped me solidify some fundamental React concepts! Building a Tic Tac Toe game taught me so much more than just game logic. Here are the key learnings: ✨ Key Concepts I Mastered: 🔗 Passing Functions as Props The game works because I pass callback functions (onSquareClick) from the parent TicTac component down to child Square components. This is the foundation of parent-child communication in React! 📤 Getting Values from Child Components (Lifting State Up) Instead of trying to manage state in child components, I centralized it in the parent. When a child Square is clicked, it calls the handler function passed via props, which updates the parent's state. Data flows down, events flow up! 🔐 Closures in Action My handleClick function is a perfect example of closures. It has access to the outer scope variables (squares, xIsNext, setSquares) even though it's called later. Every time a square is clicked, the handler "remembers" these variables. This is JavaScript magic! ✨ 🎯 State Management & Conditional Rendering Used useState to track game state (whose turn, board state, winner) and conditional rendering to show/hide the game based on the start state. ⚙️ Game Logic Implemented winner detection, turn management, and prevented overwriting filled squares. What I Learned: 💡 React is fundamentally about managing data flow and making components talk to each other 💡 Understanding closures is KEY to understanding how React hooks work 💡 Lifting state up reduces complexity and makes your app more maintainable This project proved that strong JavaScript fundamentals (especially closures!) are essential for mastering React! Fellow junior developers: Don't skip the basics. Building something simple teaches you more than watching 10 tutorials. 🚀 #React #JavaScript #WebDevelopment #Learning #FrontendDevelopment #TicTacToe #ReactJS #Closures #StateManagement

🚀 #Day 3# Just Built a Fully Functional To-Do List App! 🚀 As part of strengthening my front-end development skills, I created a dynamic and interactive To-Do List Application using HTML, CSS, and JavaScript. 🔧 Key Features: • Add, edit, and delete tasks easily • Mark tasks as completed • Clean and responsive UI for better user experience • Real-time updates without page reload • Local storage integration to save tasks 🎯 What I learned: • DOM manipulation and event handling • Writing clean and structured JavaScript logic • Designing user-friendly interfaces with CSS • Managing application state effectively This project may seem simple, but it’s a strong step toward mastering front-end development and building real-world applications. I’m excited to keep learning, building, and improving 🚀 🔗 Next goal: Adding advanced features like filters, deadlines, and drag-and-drop functionality. #FrontendDevelopment #JavaScript #WebDevelopment #Projects #LearningByDoing #CodingJourney #100DaysOfCode

🧩 Just built a Quiz Web App using HTML, CSS & JavaScript! I recently completed a fully functional quiz application that fetches real-time questions using an API and lets users attempt a 10-question MCQ quiz. 🔧 Features: Dynamic questions using Open Trivia API Randomized options each time Next / Previous navigation Answer selection with instant UI feedback Option restoration when navigating back Score calculation on submit Reset functionality 💡 What I learned while building this: Deep DOM manipulation Handling async API calls (fetch, async/await) Managing application state using arrays Debugging real UI bugs (event handling + DOM issues) Importance of clean HTML structure (IDs & labels matter a lot ) This project helped me understand how real-world frontend apps manage state and user interactions without frameworks. Next step: improving UI/UX and converting this into a React-based version. Feedback is welcome. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #APIs #FetchAPI #AsyncJavaScript #DOMManipulation #Coding #Programming #WebDevJourney #100DaysOfCode #BuildInPublic #LearnToCode #StudentDeveloper #DeveloperJourney #Projects #FrontendEngineer #TechCommunity #SoftwareDevelopment

🚀 Built a Dynamic List Creator using JavaScript | DOM Project Recently, I created a List Creator App using DOM manipulation, packed with interactive features. This project pushed me beyond the basics and gave me a clearer understanding of how real-time UI updates respond to user actions. ✨ Key Features: → Add new items to the list → Edit items with a simple double-click → Delete items instantly with a button → Dynamic element creation using DOM methods → Stronger grasp of event handling & user interactions One of the most interesting parts was implementing double-click editing — it made the app feel much closer to a real-world product. Grateful to Suraj Kumar Jha for the constant guidance and support throughout the cohort 🙌 🔗 GitHub Repository: https://lnkd.in/gVEsDaY3 Hitesh Choudhary | Chai Code | Piyush Garg | Jay Kadlag | Akash Kadlag | Anirudh J. #JavaScript #WebDev #DOM #DynamicList #LearnToCode #LearnInPublic #ChaiCode #Cohort2026

#WebDevlopmentBootcamp #Day_93 React.js • Tailwind CSS • DaisyUI • JavaScript (ES6+) • React Toastify ✨ Highlights: • Dynamic product listing & cart system • Add/remove functionality with real-time updates • Toast notifications for better user experience • Clean UI based on Figma design • Fully responsive across all devices This project strengthened my skills in React state management, component-based architecture, and responsive UI design. Live link: https://lnkd.in/gV44NTiQ Programming Hero #WebDevelopment #CodingBootcamp #HTML #CSS #javaScript #NextJs #tailwindCss #React #Git #GitHub #LearningInPublic #BuildInPublic #SoftwareEngineering #TechJourney #JuniorDeveloper

🚀 Just built a Number Guessing Game using JavaScript! This project helped me practice: ✅ DOM Manipulation ✅ Event Handling (click & Enter key) ✅ Conditional Logic ✅ Game State Management 🎮 Features: - Random number between 1–100 - Limited attempts - Feedback (Too High / Too Low) - Win counter & restart option I’m currently improving my JavaScript skills and building small projects daily to get better 🚀 Next step: Moving towards React and building more interactive apps! 💻 Feedback is welcome 🙌 #JavaScript #WebDevelopment #Frontend #CodingJourney #100DaysOfCode