React Router Blog App with Multi-Page Navigation and Routing

View Transitions API: The SPA Killer Nobody's Talking About We spent a decade building complex JS frameworks for smooth page transitions. React Router, Next.js, SvelteKit—all solving the same problem. Then browsers shipped native view transitions. Client-side routing might be obsolete. One Line Does Everything document.startViewTransition(() => { // DOM update }); Browser captures old state, updates DOM, morphs at 60fps. No hooks, no JavaScript animations. Native and GPU-accelerated. The Real Power: view-transition-name .hero { view-transition-name: hero; } Browser tracks elements across pages. Same name on next page? Seamless morph even with different HTML. You eliminated: shared layouts, routing state, animation libs, framework bloat. Why SPAs Lost MPAs can now: ▸ Animate between pages ▸ Maintain scroll/focus ▸ Morph shared elements Without: ▸ Hydration overhead ▸ Router complexity ▸ JS bundles ▸ State management Server HTML just won. Cross-Document Magic (Chrome 126+) @view-transition { navigation: auto; } Every link = smooth transition. No framework. No router. Zero client JS. Browser Support Chrome/Edge: ✅ Safari 18+: ✅ Firefox: Coming 70%+ coverage = production ready. The Controversial Take When browsers natively handle state snapshots, DOM diffing, and animations what's React for? React 19 and Next.js 15 are scrambling to add this. But it works better without them. Astro proved it: Zero JS, server-rendered, SPA-smooth, faster. The Shift Old: Server → Hydrate → Client routing → Framework transitions New: MPA → View Transitions → Progressive JS We built an entire ecosystem to solve what the browser now does natively. The future isn't more JavaScript. It's less with smarter platform APIs. The frameworks that survive will embrace this, not fight it. #WebDevelopment #ViewTransitionsAPI #WebPerformance #JavaScript #WebPlatform

🚀 Built a Feature-Rich To-Do Web Application using HTML, CSS & JavaScript This project helped me strengthen my understanding of frontend development, DOM manipulation, application state management, and real-time UI updates. 🔑 Key Features: - Add, edit, delete, and complete tasks - Automatic task status detection (Pending / Incomplete / Completed) based on real date & time - Live clock and date display - Real-time progress tracking with animated circular indicators - Persistent data storage using browser localStorage (tasks survive refresh & reload) - Responsive design for mobile, tablet, and desktop - Visual task highlighting based on status - Smart handling of deadlines (date-only, time-only, or full deadlines) 🛠️ Built entirely with Vanilla JavaScript (no frameworks) Focused on clean logic, performance, and user experience. 🔗 GitHub Repository: https://lnkd.in/d8kMqqxv 🔗 Live Demo: https://lnkd.in/drSrcbNK Feedback and suggestions are welcome! 🙌 #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #VanillaJS #LocalStorage #ResponsiveDesign #UIUX #PortfolioProject #LearningByBuilding #SoftwareEngineering #CodingJourney #StudentDeveloper #WebApps

So you wanna build a killer carousel in React. It's a great idea. Pure React Carousel is the way to go - it's super lightweight and flexible. First off, you gotta make sure you've got the right setup: Node.js version 14.0 or higher, a package manager like npm, yarn, or pnpm, and a React project that's up to date. And, of course, you should know the basics of React components and be comfy with JavaScript or TypeScript. Now, let's get started. You can install Pure React Carousel using your favorite package manager - just run one of these commands: npm install pure-react-carousel, yarn add pure-react-carousel, or pnpm add pure-react-carousel. Here's the thing: there are a few key concepts you need to wrap your head around. Natural slide width and height are crucial - they control the aspect ratio of your slides. You also need to know about total slides, and each slide needs a unique index. And, yeah, it's responsive - it'll adjust to the container size automatically. Styling is easy too - just import the CSS file for default styles. You can build a basic image carousel with navigation buttons, no problem. Or, if you're feeling fancy, you can create a product carousel with multiple visible slides. Just remember: if your carousel's not displaying, check that CSS import and those natural slide width and height settings. And if your slides aren't showing up, make sure each Slide component has a unique index prop. Aspect ratio issues? Use naturalSlideWidth and naturalSlideHeight. And if navigation's not working, double-check that ButtonBack and ButtonNext are inside the CarouselProvider. So, what's next? You can dive deeper into advanced carousel configurations, explore autoplay and interval settings, and even implement thumbnail navigation. Adding touch gesture support is a great idea too. And, if you're feeling creative, you can create custom slide transitions. Check out this resource for more info: https://lnkd.in/gG-QeaMg #React #Carousel #WebDevelopment #JavaScript

Building a Custom, Smooth Image Slider in React without Heavy Libraries Thrilled to share my a custom image slider built purely with React, Tailwind CSS, and a touch of vanilla JavaScript logic! My goal was to demonstrate that elegant and smooth UI components can be crafted without relying on extensive external libraries like shadcn, focusing instead on core React principles and CSS transitions. This slider showcases: Minimal Dependencies: No heavy libraries, just React's useState for state management. Smooth Transitions: Achieved with simple CSS transform and transition properties. Customization: Fully customizable and adaptable to various design needs. Clean, Understandable Code: Easy to follow logic for navigation and rendering. I'm particularly proud of how responsive and fluid the slider feels while maintaining a small footprint. This project has been a fantastic learning experience, reinforcing the power of fundamental web technologies. Check out the full code and contribute:https://lnkd.in/gDVhETrb #ReactJS #JavaScript #TailwindCSS #CustomComponents #WebDevelopment #FrontendDevelopment #ImageSlider #NoDependencies #OpenSource

New Blog Live: How Browsers Render a Web Page (Frontend Fundamentals) Understanding how a browser turns HTML, CSS, and JavaScript into a visible web page is crucial for frontend developers, whether using Angular, React, or any other framework. In my latest blog, I break down the browser rendering process step by step with simple explanations and diagrams, covering: - Parsing HTML into the DOM - Creating the CSSOM - Building the render tree - Layout (Reflow) and Paint - JavaScript execution and its impact on performance If you have ever wondered why some UI changes feel slow or how layout and repaint affect performance, this article is for you. Read it here: https://lnkd.in/g68dTze4 I’d love to hear your thoughts: - Did you learn something new? - Have you faced performance issues related to rendering? - What topic should I cover next in the Frontend Fundamentals series? Feel free to comment or share with fellow developers.

🍽️ Cookpad-Style Recipe Website | React.js Project Excited to share one of my recent frontend projects — a Cookpad-inspired Recipe Website built using React.js, focusing on clean UI, component-based architecture, and smooth user experience. 🥗 Project Overview This application allows users to explore recipes, search based on preferences, view detailed cooking instructions, and add new recipes — all within a modern, responsive interface. 🛠 Tech Stack React.js (Functional Components & Hooks) JavaScript (ES6+) HTML5 & CSS3 React Router (Navigation) Bootstrap / Modern CSS for responsive UI ✨ Key Features Recipe listing with clean grid layout Search & filter functionality Detailed recipe view (ingredients & steps) Add new recipes with form validation Reusable and modular React components Responsive design for all screen sizes 🎯 What I Learned Component-based design and state management in React Using hooks like useState and useEffect effectively Implementing client-side routing Managing forms and user input Writing clean, maintainable React code 📌 This project helped me strengthen my React fundamentals and understand how real-world applications are structured. I’m actively learning and building more projects — feedback and suggestions are always welcome! #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Projects #ReactHooks #UIUX #Cookpad #LearningByBuilding

Built a Todo List web app from scratch ✅ This project helped me practice: Structuring HTML & CSS for a clean UI Handling task add/delete logic with JavaScript Keeping the interface simple and responsive I focused on writing readable code and improving my frontend fundamentals. 🎥 Demo in the video below 🔗 GitHub Repo: link in comments Feedback is welcome! #WebDevelopment #Frontend #JavaScript #CSS #HTML #Projects #Learning

🚀 Just launched my portfolio + blog website built with Next.js 15 This project brings together two things I care deeply about: Building scalable, well-structured web applications Explaining how things work under the hood, not just how to use them What’s inside: 📘 A technical blog with deep dives into JavaScript internals and system design 🧭 A custom-built Table of Contents for long articles (scroll-aware & responsive) 🌗 Mobile-first UI, clean typography 👤 A single About page combining my portfolio + experience Built using Next.js 15, MDX, Tailwind CSS, and modern frontend patterns. I’ll be continuously adding content around frontend architecture, performance, and backend systems. 🔗 Live: https://lnkd.in/gixhWYtb Feedback is always welcome! #NextJS #WebDevelopment #SoftwareEngineering #FrontendDevelopment #JavaScript

Frontend performance can make or break user experience. Here’s what I’ve learned: 1. **Minify Assets**: Use tools like Terser and CSSnano to reduce file sizes. Every kilobyte counts. 2. **Lazy Load Images**: Use `loading="lazy"` on images to delay loading until they're in the viewport. It’s a simple tweak but can drastically improve initial load times. 3. **Code Splitting**: Implement dynamic imports to load parts of your app only when needed. Use tools like Webpack for easy configuration. 4. **Reduce JavaScript Execution Time**: Keep your scripts lean. Avoid large libraries unless absolutely necessary. 5. **Leverage Caching**: Set proper cache headers on your server. Use service workers when applicable. This will keep your assets fresh for returning users. 6. **Use a CDN**: Distribute your assets globally with a CDN like Cloudflare. It reduces latency and speeds up delivery. 7. **Optimize Fonts**: Load only the character sets you need. Use font-display: swap to avoid rendering delays. 8. **Remind Users to Update**: Many developers underestimate the performance boost of keeping dependencies updated. Regular updates can improve performance and reduce vulnerabilities. 9. **Profiling**: Utilize Chrome DevTools to identify bottlenecks in your application. Analyze the performance tab to spot issues. 10. **Stay Informed**: Follow key web performance blogs to keep up with the latest trends. Simple changes can lead to significant improvements. That’s it. Optimize, test, and repeat. What strategies have you used to optimize frontend performance? Share below! #FrontendDevelopment #PerformanceOptimization #WebDev #JavaScript #CodingTips

I mostly build UI in framework-land (like react js). But lately one term kept frequently popping up in modern web discussions: Web Components. So I decided to go back to the platform and learn how they actually work. In this article I cover: - What Web Components are (Custom Elements + Shadow DOM + Slots) - Why they matter when you want components that work across frameworks - How to write one from scratch using a practical <ui-card> example - The key lifecycle hooks (constructor, connectedCallback, attributeChangedCallback) and a simple render batching pattern. If you’ve been curious about Web Components and want a beginner-friendly walkthrough, here you go 👇 https://lnkd.in/dHW-9itJ #WebComponents #JavaScript #FrontendDevelopment #WebDev #DesignSystems