Deploying My First React App in 10 Days

🚀 Progress Update: Strengthening My React Fundamentals Lately, I’ve been focusing on going back to the basics and strengthening my core understanding of React. Instead of rushing into advanced topics, I’m making sure my foundation is solid — because that’s what truly makes a difference in the long run. 💡 Concepts I’m Revisiting: Components & Reusability Props vs State useState & useEffect (deep understanding) Handling forms in React Conditional rendering Component lifecycle (in a simple way) 🛠️ What I’m Doing: Rebuilding small features from scratch Practicing clean and readable code Understanding why things work, not just how 📌 Key Learning: Strong fundamentals make everything easier — debugging, scaling, and even learning advanced concepts like Next.js or state management. 🎯 Next Focus: API integration in React (Fetch / Axios) Building small but meaningful projects Consistency over complexity 💯 #ReactJS #WebDevelopment #FrontendDevelopment #LearningInPublic #JavaScript #100DaysOfCode

Most beginners think React / Next.js is just about writing code… but the real game starts when you understand components. At this stage (Month 5–6), everything changes. You stop building random pages… and start building reusable systems. A button is no longer just a button. It becomes a component you can use anywhere. A simple UI turns into a structured application powered by props, state, and hooks. This is where you learn: ✔ How to break complex UI into small pieces ✔ How to manage data with state & props ✔ How to build dynamic, fast, and scalable apps ✔ How Next.js takes it further with performance (SSR & CSR) This phase separates beginners from real developers. Because real developers don’t just write code… they build smart, reusable, and scalable architectures. 👉 Master components, and you unlock the real power of frontend development. #ReactJS #NextJS #FrontendDevelopment #WebDevelopment #CodingJourney #JavaScript #LearnToCode #DevelopersLife #UIEngineering #TechSkills

I know React. I understand state, hooks like useState and useEffect, and how components work. I’ve explored Node.js, APIs, authentication, and even touched real-time features like sockets. I can follow tutorials, understand the logic, and explain what’s happening. On paper, it appears that I have the knowledge to build something meaningful. And still, when I sit down to build something as simple as a small website on my own, my mind just crashes. Not because I don’t know things, but because I try to think everything at once — UI, backend, future features, perfect structure — all before even finishing the first step. Instead of building one small piece, I try to build the whole system in my head, and that’s where everything breaks. The truth is uncomfortable: my problem is not lack of knowledge, it’s my approach. I learned by watching and understanding, but not by building from scratch. So when there’s no tutorial guiding me, I freeze — even on simple things. It’s a strange place to be — knowing so many concepts, yet struggling to create something basic on your own. Perhaps the real struggle isn’t learning more, but learning how to effectively build upon what I already know. #LearningInPublic #BeginnerDeveloper #WebDevelopmentJourney #ReactJS #NodeJS #BuildInPublic #CodingStruggles #DeveloperMindset #SelfTaughtDeveloper #Consistency #KeepBuilding

React used to feel simple… until it didn’t. Most developers think React is getting more complex with every version. But React 19 is actually making things simpler and more predictable. It just demands better thinking. Working with React 19 builds: * Patience — because async behavior needs clarity, not guessing * Logic — understanding how state and actions flow * Grit — debugging new patterns like server actions * Adaptability — learning to trust new built-in features over old hacks At first, it feels overwhelming. New APIs. New patterns. Things breaking that used to “just work.” But this is exactly what makes you better. Because instead of memorizing fixes… you start understanding how React actually works. And that’s where real growth begins. Still learning… Still breaking things… Still improving every day… #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #react

What is NestJS and why should you care? When working with Node.js, you get a lot of freedom. But as your project grows, that freedom can turn into messy and hard-to-manage code. 👉 This is where NestJS helps. NestJS is a framework for building backend applications in Node.js. It uses TypeScript and gives your project a clear and organized structure from the start. 💡 Why do developers like NestJS? ✔️ Clean structure It helps you organize your code properly so your project doesn’t become confusing over time. ✔️ Simple building blocks Controllers → handle requests Services → contain logic Modules → group related features. ✔️ Easy to test With built-in dependency injection, you can easily test different parts of your app. ✔️ Scales well You can start small and grow your app without rewriting everything. ✔️ Useful tools included It supports things like databases, authentication, APIs, and more without much setup. 🎯 In short: NestJS helps you write clean, organized, and scalable backend code without the usual headaches. Have you tried NestJS? What do you think about it? #NodeJS #NestJS #Backend #WebDevelopment #Programming

Why I swapped Redux for Zustand in my latest Next.js project 🛠️ As projects at Codings First grew, I noticed a recurring bottleneck: Redux boilerplate was slowing down our development velocity. While Redux is a powerhouse, for many modern React.js applications, it can feel like using a sledgehammer to crack a nut. The Challenge: We needed to manage global user authentication and deeply nested filtering states. Using Redux meant creating actions, reducers, and types files for every minor update. This led to a "heavy" codebase that was difficult to maintain. The Solution: A move to Zustand. As a Senior Frontend Developer, I look for tools that offer the best balance of power and simplicity. Here’s why Zustand won: Zero Boilerplate: I can create a store in minutes, keeping the code clean and readable. Performance: It only re-renders the specific components that subscribe to the state, significantly reducing overhead. Next.js Integration: It plays perfectly with the App Router and Server Components. The Result: We saw a 30% reduction in state-related code and much faster debugging cycles. Choosing the right tool is always more important than choosing the most popular tool. What’s your current go-to for State Management? Are you Team Redux, Team Zustand, or are you keeping it simple with the Context API? Let's discuss in the comments! 👇 #ReactJS #NextJS #StateManagement #Zustand #MERNStack #FrontendDevelopment #CleanCode #SoftwareEngineering #PerformanceOptimization

When I first started out as a React developer, I was all about following tutorials. Every time I faced a challenge, I would look for a video or guide to show me exactly how to fix it. Then, I hit a wall. The tutorials weren’t helping anymore because they didn’t cover the complex problems I was starting to face in real projects. I had to figure out how to solve issues that weren’t covered in those step-by-step instructions. That’s when I realized: real growth comes from tackling real-world problems. I stopped avoiding the tough stuff and started jumping into the messy challenges - whether it was optimizing performance or handling edge cases. So, if you’re still relying on tutorials for everything, it might be time to step up your game. Are you stuck or are you growing? #ReactJS #MERNStack #WebDevelopment #TechGrowth #LearningByDoing #CodingJourney

Next.js 14 dropped a while back now, and I've finally spent enough time with it to have an actual opinion rather than just reading the release notes like everyone else. The Server Components story is genuinely solid. I've built three client projects on it this year, and the mental model actually makes sense once you stop thinking about it like traditional React. What's catching people out though: they're treating it like magic. "Just use Server Components and your app gets faster." No. You still need to understand what's happening. You still need to think about where data lives, when it fetches, what gets sent to the browser. The framework just gives you better tools to make sensible decisions. I've watched junior devs ship absolute nightmares because they assumed Next.js would handle the complexity for them. It won't. It just moves the complexity around. The real win isn't the framework. It's developers who actually understand the trade-offs. Are you using 14 in production yet, or still on an older version? Curious what's holding teams back. https://lnkd.in/eCQG6X47

Day 6 — React hooks are either magic or terrifying, depending on the day. Today: mostly magic. useEffect finally makes sense to me. It's for things that happen outside the React world — API calls, timers, subscriptions. The dependency array is not optional. I learned that the hard way with an infinite loop at 11pm. Built a custom hook today — useFetch — that handles loading, error, and data states. Reused it in two components. That reusability feeling is something else. useRef was a surprise. I thought it was just for accessing DOM elements. Turns out it's also for keeping values across renders without triggering re-renders. Subtle but powerful. useMemo and useCallback: don't reach for them immediately. Optimise when you actually have a problem. What hook tripped you up the most when learning React? #reactjs #hooks #webdevelopment #frontenddeveloper

Day 14 - React.memo (Stop Unnecessary Re-renders) One of the biggest reasons React apps become slow is something most developers ignore: Unnecessary re-renders. Even when nothing changes, components keep re-rendering and that directly affects performance. That’s where React.memo helps. What React.memo does: • Prevents re-rendering when props don’t change • Improves performance in large applications • Helps optimize expensive components • Works using shallow comparison of props Simple idea: Without React.memo → Component re-renders every time parent renders With React.memo → Component re-renders only when props change When should you use it? • Large components • Lists with many items • Performance-critical UI parts • Components with expensive calculations Important note: Don’t use React.memo everywhere. Unnecessary memoization can actually hurt performance. Key takeaway: Optimization is not about using every tool it’s about using the right tool at the right place. Next, we’ll dive into useMemo and useCallback and how they help in real-world optimization. #Day14 #ReactJS #Performance #WebDevelopment #Frontend #JavaScript #Developers #Coding #LearningInPublic