Week 2 of learning Next.js — getting deeper into how modern full-stack apps actually work. This week, I focused on Next.js Essentials (App Router) and built a project alongside the course. Here’s what I worked on: • File-based routing and dynamic routes • Pages, layouts, and project organization • React Server Components vs Client Components • Navigation and performance improvements • Image optimization using Next.js Image On the backend/full-stack side: • Setting up a SQLite database • Fetching and rendering dynamic data • Server Actions for handling form submissions • Input validation and basic XSS protection • Managing form state (useFormState, useFormStatus) • Handling loading states, errors, and not-found pages • Caching and revalidation Project built: Foodies App • Dynamic meal pages • Image uploads • Form handling with server actions • Database integration GitHub: https://lnkd.in/dgSKwPS7 Big takeaway this week: Next.js isn’t just about React — it brings backend and frontend together in a very structured way. Still learning, still building. #nextjs #reactjs #fullstackdeveloper #webdevelopment #learninginpublic #mern #developers

🚀 Day 9 of My React Learning Journey: React Router & Navigation Today I learned how to handle navigation in React using React Router 👇 🔹 What is React Router? React Router is a library used to handle routing in React applications. It allows navigation between different pages without reloading the browser. 🔹 What is Navigation? Navigation means moving between different pages or components in an application using links. ⚔️ React Router vs Navigation React RouterNavigationLibrary for routingAction of moving between pagesUses components like BrowserRouter, RouteUses links like <Link>Enables SPA behaviorImproves user experienceHandles URL-based routingSwitches UI without reload🔹 Simple Example (Using Both Concepts) import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; function Home() { return <h1>Home Page 🏠</h1>; } function About() { return <h1>About Page ℹ️</h1>; } function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> |{" "} <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ); } export default App; 💡 My Takeaway: React Router helps build single-page applications by enabling smooth navigation without page reloads. 📌 Next, I’ll be learning about API Calls in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #ReactRouter #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

1,000+ installs later. MASSIVE I’m looking at the dashboard for React Next JS Smart Snippets and honestly, I’m thinking back to where this started. It wasn't a "grand plan." It was pure frustration. I was tired of being stuck with the same problem: standard snippets just weren't "smart" enough for the modern Next.js App Router. You know the drill. You create a page.tsx inside a folder named /community. Most extensions just give you a component named Page. I hated that. I wanted it to be CommunityPage. Automatically. Without me having to manually rename it every single time. Consistency is the heartbeat of a clean codebase, and I felt like I was constantly fighting my tools to get it. Then there were the other gaps: Why were arrow functions and normal functions always lumped together? Why did I have to go find a library or snippet for a simple slugify or case converter? Why was setting up a Theme Provider in Vite or Next.js still a multi-step chore? So, I built the tool I needed. I didn't know if anyone else cared about these "tiny" friction points. But 1,000 installs later, it turns out I wasn't alone in wanting a better workflow. To every developer who downloaded it: Thank you for trusting my "annoyances" 😅 enough to make them part of your setup. We’re just getting started. If you’re still fighting with generic Page components, the link is in the comments. 🛠️ #ReactJS #NextJS #VSCode #DeveloperExperience #OpenSource #BuildInPublic #SoftwareEngineering

🚀 Just shipped my own URL Shortener from scratch! Built a full-stack web app with a dark anime-inspired UI — and it's live! 🎉 🔧 Tech Stack: • React + TanStack Router • Redux Toolkit • Node.js + Express • MongoDB Atlas • JWT Auth with cookies • Tailwind CSS ✨ Features: • Shorten any URL instantly • Custom slugs (pick your own short link) • Click analytics dashboard • Delete & manage your links • Protected routes with auth • Dark mode with animations 🌐 Live Demo: https://lnkd.in/gE7WS7Ku 💻 GitHub: https://lnkd.in/g-rp2EZp #webdevelopment #fullstack #reactjs #nodejs #mongodb #javascript #buildinpublic

I stared at my kitchen and saw butter, flour, eggs, and chocolate chips. No recipe in mind. No idea what to make. So I did what any developer would do — I built an app to solve it. 🧑💻 Introducing BakeWhatYouHave 🍳 — a responsive React app that finds you the perfect recipe based on ingredients you already have at home. No more switching between 10 browser tabs. No more "Oh I need heavy cream" moments halfway through. Just open the app, tick your ingredients, and bake. Here's what I built: → Searchable ingredient selector with tag-based UI → Smart recipe matching with a % match score → Highlights exactly what you HAVE and what you're MISSING → Full recipe detail modal with step-by-step instructions → 100% responsive → Built with React 18, hooks only (useState, useEffect, useMemo) — no Redux, no UI libraries The hardest part wasn't the code. It was resisting the urge to actually bake everything. 🍫 Github: https://lnkd.in/da-J_Csf #ReactJS #Frontend #WebDevelopment #JavaScript #BuildInPublic #React #OpenSource #HTML #CSS #BakeWhatYouHave

🚀 Day 5 of My React Learning Journey: State in React Today I learned about State, which makes React applications dynamic and interactive 👇 🔹 What is State? State is a built-in object in React used to store data that can change over time. When the state changes, the UI automatically updates (re-renders). 🔹 Why State is Important? Makes UI dynamic and interactive ⚡ Triggers re-render when data changes Helps manage component-specific data Used for user actions (clicks, inputs, etc.) 🔹 Key Concept State is mutable and managed inside the component using Hooks like useState. 🔹 Simple Example import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } function App() { return <Counter />; } 💡 My Takeaway: State is what makes React apps come alive by updating the UI based on user interactions. 📌 Next, I’ll be learning about Event Handling in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🖼️ Next.js Image Optimization Cheat Sheet This guide covers a few techniques that you can use to optimize the images in your next.js app. 📦 Basic usage 📱 Responsive images 🌐 Remote images ⚡ Priority loading 🌀 Blur placeholder 🖼️ SVG/static imports 🔧 Custom loader ✅ Best practices Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #Caching #Performance #CDN #Redis

🖼️ Next.js Image Optimization Cheat Sheet This guide covers a few techniques that you can use to optimize the images in your next.js app. 📦 Basic usage 📱 Responsive images 🌐 Remote images ⚡ Priority loading 🌀 Blur placeholder 🖼️ SVG/static imports 🔧 Custom loader ✅ Best practices Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #Caching #Performance #CDN #Redis

Just deployed my latest practice project: A React Notes App! 📝 To solidify my front-end skills, I built this application using React (Vite) and Tailwind CSS. The main goal of this project was to master core concepts by putting them into practice. I successfully implemented: ✅ Component-based architecture & Props ✅ Complex form handling ✅ Two-way data binding with useState It's amazing how much clearer things get when you build it yourself from scratch. Check out the live app or explore my code below! 👇 🌐 Live Demo: [https://lnkd.in/d4PX4MaH] 💻 GitHub Code: [https://lnkd.in/d_h6k-P6] #ReactJS #TailwindCSS #WebDev #100DaysOfCode #FrontendDevelopment

Many of you used my Project 3 Setup Guide to build your web apps. I figured it was finally time to use it myself. Introducing The Novigrad Underground — a Witcher-themed black market trading board built on the MERN stack. Here's what's under the hood: Listings Board — post items for sale with category, risk level, region, and pricing. Only you can edit or delete your own. Wanted Board — post what you're looking for and what you'll pay. Mark it fulfilled when someone delivers. Reputation System — vouch or burn other users. One rating per pair, enforced at the database level. Your score is vouches minus burns. Leaderboard — ranks the most trusted contacts in the network by reputation score, all clickable through to their profile. Inquiries — leave questions directly on a listing. Private, per-listing threads. JWT Auth — protected routes, ownership-gated edits, server-side identity. No client-supplied usernames. Full stack: MongoDB + Express + React + Node.js, Apollo GraphQL, Vite, GSAP, and custom CSS with no component libraries. Enjoy! Repo: https://lnkd.in/gCmx29ER Deployment: https://lnkd.in/gdiQAmTg #MERN #GraphQL #React #MongoDB #WebDevelopment #FullStack #JavaScript #OpenSource #100DaysOfCode #Bootcamp #WitcherFan #SideProject #CodeInPublic