GitHub Finder Live: Search GitHub Profiles with React and TypeScript

Installs one npm package node_modules: “We brought friends… and their friends too.” 😂 This is why understanding dependencies is so important. As developers, it’s not just about writing code but also managing what runs behind it. #webdevloper #fullstackdeveloper #developer #javascript #node.js

Day 25: Best React Folder Structure (Production Level) Last Post for REACTJS Learning series. One of the biggest problems developers face is: ❌ Messy folder structure ❌ Difficult to scale projects ❌ Hard to maintain code A good folder structure makes your React app: ✅ Clean ✅ Scalable ✅ Easy to debug ✅ Easy to collaborate 📌 Recommended React Folder Structure src/ ├── assets/ ├── components/ ├── pages/ ├── routes/ ├── hooks/ ├── context/ ├── services/ ├── utils/ ├── styles/ ├── App.js └── main.jsx 📌 Folder Explanation ✅ assets/ Images, icons, fonts ✅ components/ Reusable UI components (Button, Navbar, Card) ✅ pages/ Pages like Home, About, Dashboard ✅ routes/ All routing logic (React Router setup) ✅ hooks/ Custom hooks (useFetch, useAuth) ✅ context/ Context API files (AuthContext, ThemeContext) ✅ services/ API calls and backend communication (axios setup) ✅ utils/ Helper functions (formatDate, validation) ✅ styles/ CSS, Tailwind config, global styles 📌 Why this structure is best? 🔥 Keeps code modular 🔥 Easy to find files 🔥 Helps in team collaboration 🔥 Makes project scalable for production 📌 Pro Tip 👉 Keep components small and reusable. If a component becomes too large, split it into sub-components. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #SoftwareEngineering

📅 Day 21/21 – React Hook Form & Validation (Final Day 🎯) ⚛️ On the final day of my challenge, I learned how to handle forms and validation efficiently using React Hook Form. 🔹 What is React Hook Form? It is a library that simplifies form handling in React with: ✔ Less code ✔ Better performance ✔ Built-in validation support 🔹 Why use it? Instead of managing multiple states manually: • It uses refs internally • Reduces unnecessary re-renders • Makes forms cleaner and scalable 🔹 Basic Example import { useForm } from "react-hook-form"; function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> <button type="submit">Submit</button> </form> ); } 🔹 Validation Example <input {...register("email", { required: "Email is required" })} /> 💡 Final Takeaway from 21 Days Over the last 21 days, I learned: ✔ Core JavaScript concepts ✔ React fundamentals ✔ Real-world development thinking ✔ Consistency and discipline This journey helped me grow from learning concepts → building projects → understanding how things work internally. 🙏 Thanks to Devendra Dhote and Sheryians Coding School for the guidance throughout this journey. 🚀 This is not the end… just the beginning. #ReactJS #JavaScript #FrontendDeveloper #LearningInPublic #Consistency #WebDevelopment

🎬 I built my biggest React project so far — a Movie App with a funny twist on the legendary EgyBest — after learning React over the past few weeks. I pushed myself to build a real-world, fully functional application as a challenge… and this is the result 👇 🎥 Demo in the video below ✨ Features: • Search for any movie using an API • View detailed movie information • Rate movies ⭐ • Add movies to a watched list • Store data using localStorage • Delete movies from the list 🛠 Tech I used & learned: • React (Components, Props, State) • useState & useEffect • Custom Hooks (built my own reusable logic) • API integration (fetching data) • Conditional rendering • Event handling • Local Storage • Basic CSS for styling 🧠 What I learned: • How to structure a real-world React application • Managing state across multiple components • Persisting data in the browser ⚡ Biggest challenge: • Keeping the watched list synced correctly with localStorage This project is a big step forward for me, and I’m excited to keep improving 🚀 🔗 GitHub: https://lnkd.in/d6Uu-Xr6 I’d really appreciate your feedback 🙌 #ReactJS #ReactDeveloper #FrontendDeveloper #JavaScriptDeveloper #WebDevProjects #BuildInPublic #CodingJourney #JuniorDeveloper

🚀 Just Built: GitHub Popular Repositories App (React JS) Excited to share my latest project where I built a dynamic web app using React that displays popular GitHub repositories based on selected programming languages. ✨ Key Features: • Filter repositories by language (JavaScript, Ruby, Java, CSS, All) • API integration for real-time data fetching • Loader while fetching data • Error handling with failure view • Clean and responsive UI 🛠️ Tech Stack: React JS | JavaScript | CSS | REST API 💡 What I learned: ✔ Component lifecycle methods ✔ State management ✔ API handling ✔ Conditional rendering 🌐 Live Demo: https://lnkd.in/gx3r5u7q 💻 GitHub Repo: https://lnkd.in/gSkYbKQZ Would love your feedback and suggestions! 🙌 #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #Projects #Learning #GitHub #100DaysOfCode

✨React is no longer just a library… it’s an entire ecosystem. There was a time when learning React meant understanding components, props, and state. Today? That’s just the beginning. ⸻ 💡 Modern React development is about choosing the right tools from its ecosystem: ⚡ Next.js — For production-ready apps SSR, routing, performance — all handled seamlessly. 🧠 State Management (Redux / Zustand) — Manage complex state with clarity and scalability. 📡 React Query / TanStack Query — Fetching, caching, syncing server data — made simple. ⸻ ⚠️ But here’s where many developers get stuck: Trying to learn everything at once. ⸻ 🔥 The truth is: You don’t need every tool. You need the right tool for your use case. Because: ✔ Over-engineering slows you down ✔ Simplicity scales better ✔ Clarity beats complexity ⸻ 💭 A better approach: Start with core React → Add tools as problems grow → Learn by building real projects ⸻ ⚡ Remember: Great developers don’t just know tools… They know when NOT to use them. ⸻ 💬 Question: What’s your go-to React library right now — and why? ⸻ 📌 Save this post if you’re exploring the React ecosystem. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #NextJS #Redux #Zustand #ReactQuery #Programming #Developers #SoftwareEngineering #TechStack #LearnToCode #BuildInPublic

𝗙𝗿𝗼𝗺 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝘁𝗼 𝗣𝗿𝗼𝗯𝗹𝗲𝗺-𝗦𝗼𝗹𝘃𝗶𝗻𝗴: 𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗠𝘆 𝗙𝘂𝗹𝗹-𝗦𝘁𝗮𝗰𝗸 𝗕𝗹𝗼𝗴 𝗔𝗽𝗽 A few weeks ago, I decided to build a full-stack blog app. The app includes Add Blog, Subscription Form, Subscription List, Blog Detail Page, and Admin Page. I used Next.js, Tailwind CSS, Node.js, MongoDB, Axios, and React-Toast. The most challenging part was API testing for images. 😅 I could see the data, but the images weren’t storing in the database. After hours of debugging and checking multiple times, I finally figured out the issue. ✅ That moment reminded me how patience and systematic debugging can save the day. 𝗪𝗵𝗮𝘁 𝗜 𝗕𝘂𝗶𝗹𝘁 ✨ Full-stack blog app with clean UI ✨ Add & manage blogs easily ✨ Subscription management ✨ Admin panel to control content ✨ Responsive and modern design 𝗪𝗵𝗮𝘁 𝗜 𝗟𝗲𝗮𝗿𝗻𝗲𝗱 This project taught me that full-stack development is not just coding — it’s about problem-solving and debugging. ✔ API testing & debugging strategies ✔ Handling data & media storage in MongoDB ✔ Integration with React front-end & backend ✔ Importance of persistence & patience 𝗟𝗶𝘃𝗲 𝗗𝗲𝗺𝗼 : https://lnkd.in/d-8M44_w LIKE and SHARE FOllOW Muhmmad Qasim #programming #web #developer #javascript #react #tailwindcss #nodejs #mongodb #axios #reacttoast #fullstack #projects #coding #frontend #backend #nextjs #webdevelopment

🚀 Understanding Hooks in React (Simple Explanation) When I first started learning React, I thought state management was only possible with class components… but then I discovered Hooks — and everything changed. 👉 Hooks are special functions in React that allow functional components to use features like state and lifecycle methods. 💡 Example: With useState, we can easily manage state inside a function component — no need for classes anymore. Why Hooks are powerful: ✔ Cleaner and more readable code ✔ Reusable logic across components ✔ Less boilerplate compared to class components ✔ Makes development faster and more scalable Some commonly used Hooks: 🔹 useState – manage state 🔹 useEffect – handle side effects (API calls, timers) 🔹 useRef – access DOM elements 🔥 One simple line: Hooks = extra powers for functional components. Learning Hooks really changed how I write React code — and made development feel much more intuitive. #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #Developers

I posted every single day for 12 days straight about React. Here's what actually happened — and what I learned building this series from scratch. 𝗧𝗵𝗲 𝗵𝗼𝗻𝗲𝘀𝘁 𝗻𝘂𝗺𝗯𝗲𝗿𝘀 𝗳𝗶𝗿𝘀𝘁: 12 posts. 12 carousels. 60 slides designed from scratch. Somewhere between 3–5 hours of work per post when you count the research, writing, designing, and editing. Nobody tells you that before you start. 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱 𝗮𝗯𝗼𝘂𝘁 𝘁𝗲𝗮𝗰𝗵𝗶𝗻𝗴: The posts I thought would perform best — didn't. The post I almost didn't publish (Day 5 on useEffect) got the most saves. Teaching a concept forces you to actually understand it. I thought I knew useEffect. Writing Day 5 proved I had gaps. I thought I knew Redux. Writing Day 9 made me realise I'd been using it wrong for a year. 𝗪𝗵𝗮𝘁 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱 𝗮𝗯𝗼𝘂𝘁 𝗟𝗶𝗻𝗸𝗲𝗱𝗜𝗻: People don't want perfect. They want honest + useful. The posts with "I made this mistake too" outperformed the ones that sounded like documentation. Comments matter more than likes. One good comment thread is worth 500 silent likes. Consistency is the only real hack. The algorithm didn't care that I posted on Day 1. It started paying attention around Day 7. 𝗪𝗵𝗮𝘁'𝘀 𝗰𝗼𝗺𝗶𝗻𝗴 𝗻𝗲𝘅𝘁: I'm building something real — in public. A full React + Next.js data dashboard. Every decision, every bug, every shipped feature — posted here as it happens. No more just teaching theory. Time to show the work. If this series helped you, drop the Day number that clicked the most. I'm genuinely curious which one lands differently for different people 👇 Save this post if you want to follow what's coming next 📌 #ReactJS #BuildInPublic #LearnInPublic #JavaScript #Frontend #WebDevelopment #TechLinkedIn #Gramener

🌐 Today’s MERN Concept: React useEffect — The Side‑Effects Manager As part of my MERN learning journey today, I focused on understanding useEffect, one of the most essential hooks in React for handling side‑effects. ✨ What I learned today: useEffect helps React components run logic after rendering — logic that doesn’t belong directly inside the UI flow. Today’s key insights: 🔹 useEffect runs after the component renders 🔹 Perfect for: fetching data, subscriptions, timers, event listeners 🔹 The dependency array controls when the effect runs 🔹 Leaving the dependency array empty means it runs only once (like componentDidMount) 🔹 Returning a cleanup function prevents memory leaks My biggest realization today was: “Understanding useEffect isn’t about memorizing syntax — it’s about knowing when something should happen outside the render cycle.” This hook is a core part of writing predictable, efficient React apps. More MERN learnings tomorrow! #MERN #ReactJS #FrontendDevelopment #JavaScript #LearningJourney