I used to copy-paste the same layout across multiple pages… and didn’t realize how much time I was wasting. Day 4 of my 30-day Next.js deep dive. Today I explored layouts and nested layouts in Next.js. It seems like a small concept—but it completely changes how you structure a real application. Instead of repeating UI, you define it once and reuse it smartly. Key Learnings - Layouts allow you to share common UI (like navbar, footer) across pages - Nested layouts help structure complex apps with different sections - Each route can have its own layout without affecting others - Keeps code DRY and easier to maintain - Makes scaling large applications much more manageable At first, I thought layouts were just about avoiding repetition. But while working through it, I realized: 👉 It’s actually about thinking in structure, not pages Instead of building isolated pages, I started thinking: “How should this app be organized as a whole?” That shift made everything feel more like real-world development. I’m learning to focus not just on building features—but on structuring applications in a clean and scalable way. Because in remote teams, readability and maintainability are just as important as functionality. How do you usually approach layout structure in your projects—plan first or adjust as you go? #NextJS #WebDevelopment #ReactJS #FullStackDeveloper #JavaScript #CleanCode #LearningInPublic #RemoteDeveloper

🎨 React Background Color Changer Project Built a simple yet interactive Background Color Changer using React.js, focusing on state management and dynamic UI updates. This project helped me understand how to: 🔹 Use useState hook for managing color state 🔹 Update UI dynamically on button click 🔹 Handle events and improve user interaction 🔹 Write clean and reusable React components A great hands-on practice to strengthen core React concepts while building something visual and interactive. Small projects like this build a strong foundation for creating real-world applications 🚀 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningJourney #100DaysOfCode

The DOM is officially a bottleneck. 🤯 Cheng Lou (former React core team) just dropped Pretext, and it is challenging how browsers have handled text layout for the past 30 years. For decades, figuring out how much space a paragraph occupies meant rendering it in the browser and measuring it. This triggers layout reflows (using tools like getBoundingClientRect), which is one of the most expensive and thread-blocking operations in web development. Enter Pretext: A pure JavaScript/TypeScript library that handles multiline text measurement without touching the DOM. Here is why it is so powerful: Instead of relying on CSS rendering, it uses an off-screen Canvas and a clever two-phase API (prepare() and layout()) to pre-calculate word sizes using pure arithmetic. The layout operations run in roughly 0.09ms. It natively supports platform-specific emojis, complex text directions (RTL), and different languages. It enables previously impossible UI effects, like text fluidly wrapping around moving, draggable obstacles in real-time. The project rocketed past 10,000 GitHub stars in just days because it solves a massive performance hurdle for the next generation of spatial and interactive UIs. #WebDevelopment #JavaScript #TypeScript #Frontend #SoftwareEngineering #TechNews #UIUX

🚀 Just built a NewsApp using React + TypeScript! I wanted to level up my frontend skills, so I created a real-time news application that fetches live headlines using APIs and displays them in a clean, responsive UI 📰 ✨ Features: ✅ Top headlines by category (Business, Science, Sports, etc.) ✅ Country-based news filtering 🌍 ✅ Pagination (Next / Previous navigation) ✅ Click to read full news article 🔗 ✅ Loading spinner for better UX 🛠️ Tech Stack: React • TypeScript • Bootstrap • REST API 💡 What I learned: Handling API integration and async data Managing state and pagination logic Improving UI/UX with reusable components Working with real-world data scenarios 📂 GitHub: https://lnkd.in/dM48ikgE I’m continuously improving this project — next step is adding infinite scroll and better UI 🚀 Would love your feedback and suggestions! #React #TypeScript #FrontendDevelopment #WebDevelopment #UIDeveloper #JavaScript #CodingJourney #Projects

Another project completed! 🚀 I'm excited to share my latest React build: a fully functional Task Manager (To-Do List). For this application, I focused on solidifying core React concepts and state management: 🔹 State Management: Utilizing useState to handle the dynamic array of tasks. 🔹 Array Methods: Implementing map and filter to render, complete, and delete specific items seamlessly. 🔹 Dynamic UI: Real-time updates and conditional styling for an intuitive user experience. Check out the video below to see the functionality in action! I'll leave the link to the GitHub repository in the first comment. 👇 #ReactJS #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

I learnt a lot doing this project. Understood the use of React like never before and how certain features are utilized. Features: -> Drag-and-drop tasks across the Todo, Working, Completed columns using a React Library -> Add, edit, and view tasks with modals -> State management using React Context -> Persistent tasks with localStorage -> Learned advanced React hooks, context, and dynamic UI handling This project helped me level up my React skills and understand interactive, state-driven UIs. React Todo Website: https://lnkd.in/eXKm3Hqn Check it out on GitHub: https://lnkd.in/exiv6Tpv #ReactJS #Frontend #WebDevelopment #UIUX #TodoApp #JavaScript

🚀 Day 10 of my #100DaysOfCode Challenge! ⚽ I’m continuing to build out my web development foundations! 🚀 I just wrapped up a new project: a fully responsive React Feedback Form. Handling user input is such a crucial part of building interactive UIs, so I used this project to really solidify my understanding of React Hooks and state management. Here is a quick look at what I implemented: ✅ Controlled Components: Utilized the useState hook to smoothly manage dynamic inputs for Name, Email, and Feedback text. ✅ Submission Validation: Added a native window.confirm step, allowing users to review their details before the form officially submits. ✅ Responsive Design: Wrote custom CSS to ensure the UI looks clean and functions perfectly across both desktop and mobile screens. Every project feels like a solid stepping stone toward mastering frontend architecture and eventually tackling full-stack applications. Getting these core mechanics down is key! You can check out the source code and how I structured the logic over on my GitHub: 🔗 https://lnkd.in/gJ5jg3NC #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #CodingJourney #BuildInPublic

🚀 Warning: This is NOT just a typical portfolio. It moves. It vibes. It plays music 🎧 𝑷𝒐𝒓𝒕𝒇𝒐𝒍𝒊𝒐 👉 https://lnkd.in/gxtb8X4G I didn’t just build a website… I built a whole mood. ✨ What’s inside? • Smooth animations that actually feel satisfying • Clean UI that doesn’t scream, but speaks • Projects that do things, not just sit pretty • And yes… a music widget to set the vibe while you scroll 🎶 ⚙️ Tech stack powering the vibe: • Next.js • React • Tailwind CSS • GSAP (for those buttery touches) • TypeScript Because why should portfolios be boring PDFs in disguise? This one’s alive. ⚡ Built with intention. 💻 Crafted to be experienced — not just viewed. ⚠️ Pro tip: Don’t just open it on your phone… 𝗖𝗵𝗲𝗰𝗸 𝗶𝘁 𝗼𝘂𝘁 𝗼𝗻 𝗮 𝗱𝗲𝘀𝗸𝘁𝗼𝗽/𝗹𝗮𝗽𝘁𝗼𝗽 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗳𝘂𝗹𝗹 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲. 𝗧𝗿𝘂𝘀𝘁 𝗺𝗲. If you like cool stuff on the internet — this might be your kind of thing 😉 Would genuinely love your thoughts! #Portfolio #WebDev #CreativeCoding #FrontendDeveloper #ReactJS #NextJS #UIUX #BuiltInPublic #TypeScript #GSAP

I recently came across something in React that completely changed how I think about it… 👇 You write JSX. React renders it. Looks simple, right? But how React decides what to update and when that's where the real magic lives. It's called React Fiber. And it quietly changed everything in React 16. 🧵 Here's the story in plain English: Before Fiber, React worked like a stubborn chef who refused to take new orders until the entire meal was cooked. Click a button mid-render? Ignored. Type in an input? Frozen. Smooth animation? Not today. React would grab the main thread and not let go until every single update was done. No pausing. No stopping. No mercy. ⚡ Fiber changed the rules. Instead of one giant chunk of work, Fiber breaks rendering into tiny units like a checklist instead of one long essay. This means React can now: → Pause work when something more urgent comes up → Prioritize user interactions (clicks, typing) over background updates → Resume right where it left off seamlessly Your click always gets handled. Your animation stays smooth. Your UI never freezes. Why should you care? Everything you love about modern React runs on Fiber: ✦ `useTransition` mark updates as non-urgent ✦ `Suspense` async-first data fetching ✦ Concurrent Mode multiple renders at once ✦ Streaming SSR faster page loads All of it. Built on Fiber. 💡 The one-liner to remember: > Fiber = React learning to multitask. Next time your React app feels buttery smooth that's Fiber doing its job silently in the background. 🧈 Repost if this helped someone on your feed understand React better. #ReactJS #WebDevelopment #Frontend #JavaScript #ReactFiber #SoftwareEngineering