Day 28: Todo List App — 30 Days of 30 Projects Challenge 🚀 Building a Todo List App with Next.js Excited to share my latest project — a fully functional Todo List App 📝✨ built using Next.js, Tailwind CSS, and Shadcn UI! What this app can do: ✅ Add new tasks and manage them easily ✅ Mark tasks as completed ✅ Edit and update task text ✅ Delete tasks ✅ Persist tasks using localStorage ✅ Clean, responsive, and user-friendly UI This project helped me strengthen my skills in: React state management (useState, useEffect) Handling forms, events, and conditional rendering LocalStorage integration for data persistence Building interactive UIs with Shadcn UI & Tailwind CSS 🔗 Live link: 👉 https://lnkd.in/d6X2bApM Learning by building every day — 28 days down, 2 to go! 💪✨ Every project is a step forward in my journey as a developer 🚀 Asharib Ali #NextJS #ReactJS #FrontendDeveloper #WebDevelopment #JavaScript #TypeScript #TailwindCSS #ShadcnUI #TodoApp #BuildInPublic #30Days30Projects #CodingJourney #DeveloperLife #WomenInTech #PakistanDevelopers #LearningByDoing #NextJSDeveloper #FrontendProjects #UIUX #100DaysOfCode

🚀 Confused between Props and Context API in React? Let’s simplify it. When I started building React apps, I relied heavily on props to pass data between components. 💡 It works well… until your app grows. 👉 Problem: Passing data through multiple layers (props drilling) becomes messy and hard to maintain. 💡 Solution: Use Context API when needed. Example: const UserContext = React.createContext(); <UserContext.Provider value={user}> </UserContext.Provider> 👉 Now any component can access user without passing props manually. 🔍 Props vs Context API: ✔ Props • Best for simple & direct data passing • Easy to understand • Great for small apps ✔ Context API • Avoids props drilling • Shares global data easily • Better for medium-scale apps ⚠️ But don’t overuse Context! Too much global state can: • Make components harder to reuse • Impact performance if not optimized 🔥 Lesson: Use Props by default. Use Context when props become a problem. What do you prefer — Props, Context API, or Redux? #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #FullStackDevelopment

🚀 Just Built: NoZeroDays — A Habit Consistency App I’ve started building and sharing one project every week. This week, I built NoZeroDays, a productivity app that helps track daily goals and maintain streak consistency. 🔹 The Idea The concept is simple: never let a day go by without progress. Even 1% counts. 🔹 Features ✔ Add and manage daily goals ✔ Track consistency streaks ✔ Persistent data using LocalStorage ✔ Multi-page navigation using React Router ✔ Clean and responsive UI with Tailwind CSS 🔹 Tech Stack • React.js • JavaScript (ES6+) • React Router • Tailwind CSS • LocalStorage 🔹 What I Learned Structuring a React project properly Managing state efficiently Handling side effects and data persistence Improving UI consistency Links in first comment 👇 Feedback is always welcome 🙌 #React #WebDevelopment #BuildInPublic #FrontendDeveloper #JavaScript

Most React apps slow down not because of bad code. But because of bad decisions made early. Here are 3 React mistakes I stopped making as a Full Stack Developer 👇 1. Re-rendering everything unnecessarily: If your component re-renders on every keystroke, your app feels broken. React.memo and useCallback exist for a reason. Use them deliberately. 2. Treating useEffect as a catch-all: useEffect is not where your logic lives. It's where your side effects live. Big difference. Most bugs I've debugged trace back to this exact confusion. 3. Ignoring performance until it's too late: A request waterfall adding 600ms of waiting time makes every other optimization pointless — it doesn't matter how optimized your useMemo calls are. Build fast from day one. Not as an afterthought. These aren't theory. These are lessons from building real projects with React — from client dashboards to AI-powered web apps. Which React mistake took you the longest to unlearn? 👇 #ReactJS #FullStackDevelopment #WebDevelopment #JavaScript #Tech2026 #DeveloperLife #FrontendDevelopment #FreelanceDev

React Hooks are a fundamental concept to master if you are just starting your journey with React. They unlock the full potential of functional components, but knowing where to begin can feel overwhelming. These 5 hooks form the essential foundation for nearly every modern React application. Learn them well, and you'll be building powerful features in no time. Here's my 'must-know' list for every React beginner: 1️⃣ **useState**: This is your tool for adding dynamic, interactive state to your components. Want a counter or a toggling element? This is where you start. 2️⃣ **useEffect**: Use this to perform 'side effects'—things like fetching data from an API, subscribing to services, or manually changing the DOM. It's crucial for any real-world app. 3️⃣ **useRef**: Sometimes you need a persistent reference that doesn't trigger a re-render. A great use case is directly accessing and interacting with a DOM element (like an input field). 4️⃣ **useContext**: Stop 'prop drilling'! This hook allows you to easily share data (like user information or theme settings) deeply across your entire component tree. 5️⃣ **useNavigate**: While not part of the core React library, it's essential for navigation in nearly all web apps. It's the standard way to change the route or URL programmatically. What's your advice for someone learning React? Is there another hook you would add to the list? Share your thoughts below! #ReactJS #ReactHooks #WebDevelopment #CodingForBeginners #Frontend #TechEducation #LearnToCode

I recently spent time debugging a slow React Native screen, and it reminded me how small things can destroy mobile performance When my React Native app feels slow or laggy, these are the first 5 things I always check: 1. Images that are too heavy Large images can quietly kill performance. Compress them and make sure the resizeMode actually fits the use case. 2. Too many unnecessary re-renders Components re-rendering again and again can slow everything down. Using React.memo or useCallback in the right places can make a noticeable difference. 3. Using ScrollView for big lists This is a common mistake. ScrollView renders everything at once. For long lists, FlatList is almost always the better choice. 4. Heavy work happening on the JS thread If expensive calculations run on the main thread, the UI will stutter. Moving that work with InteractionManager can help keep the interface smooth 5. Bloated bundle size Sometimes the problem is simply too many dependencies. It’s worth reviewing your packages and removing the ones you don’t actually need. Good performance usually goes unnoticed. But the moment an app lags, freezes, or stutters… users notice immediately. Curious — which one has caused the biggest issues in your projects? #ReactNative #Performance #MobileDev #JavaScript #CodingTips #AppDevelop

One thing I’ve noticed working on React apps at scale… Performance issues rarely come from “slow code”. Most of the time, it’s just too many unnecessary re-renders happening quietly. And you don’t really notice it early on. Everything feels fine when the app is small. Then features keep getting added… More components, more state, more API calls… And suddenly: UI starts feeling a bit laggy Debugging gets harder Small changes have unexpected impact When I started digging into these issues, a pattern kept showing up: → State was lifted higher than needed → Components were doing too many things → Objects/functions were getting recreated every render → Everything was technically “correct”… but not efficient What helped: • Keeping state closer to where it’s actually used • Breaking components into smaller, focused pieces • Being careful with reference changes (this one is easy to miss) • Using memoization only where it truly makes a difference One thing I’ve learned the hard way: Using useMemo/useCallback everywhere doesn’t fix performance. It just makes the code harder to reason about. Most of the real gains came from fixing structure, not adding optimizations. At some point, you realize — performance is less about tweaking and more about how you design things upfront. #ReactJS #FrontendDevelopment #WebPerformance #JavaScript

🚀 Next.js Frontend Best Practices for Modern Web Apps Building a great Next.js app isn't just about features; it's about architecture, performance, and developer experience. Here’s a quick-start guide to the best practices: - Use 'use client' carefully: Stick with Server Components by default for better performance, and use client components only when you need interactivity or browser-specific APIs. - Make components reusable: Build atomic UI pieces that can be easily shared across pages. - Optimize images: Always use the native <Image /> component to automatically handle resizing, scaling, and lazy-loading. - Use <Link /> for nav: Leverage Next's <Link> component for client-side navigation and automatic prefetching. - Simplify your UI: Prioritize a clean, intuitive, and efficient user experience. Avoid unnecessary visual noise. - Organize UI structure: Keep your codebase maintainable by grouping related files like components, hooks, and styles into separate folders. - Optimize bundle size: Keep your JavaScript bundle lean. Use code-splitting and dynamic imports, and be mindful of your library choices to ensure a smaller and faster app. Are you using these practices in your current projects? Let's discuss in the comments! 👇 #NextJS #WebDevelopment #FrontendEngineering #React #JavaScript #AIera