🚀 Excited to share my latest project: GitHub Profile Finder I built a web application that allows users to search for any GitHub profile using just a username and instantly explore key details like repositories, followers, and more. The app fetches real-time data using the GitHub API and presents it in a clean, responsive UI. 💡 Key Features: 🔍 Search GitHub users by username 📊 View profile details (repos, followers, bio, etc.) ⚡ Fast and responsive interface 🌐 Real-time data fetching using API integration 🛠️ Tech Stack: React.js JavaScript (ES6+) GitHub API HTML & CSS 📚 What I learned while building this: Handling API calls and asynchronous operations Efficient state management in React Building responsive and user-friendly UI Debugging and improving performance This project helped me strengthen my frontend skills and gave me hands-on experience with real-world API integration. 🌐 Live Demo: https://lnkd.in/dvVFXTYS 👉 Feel free to check it out and share your feedback! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #GitHub #OpenSource #CodingJourney

🚀 Strengthening My React Fundamentals! In my recent learning sessions, I explored some core concepts that power React applications: 🔹 State – Learned how to manage dynamic data and update the UI based on user interactions 🔹 Hooks – Understood how useState and useEffect bring state and lifecycle features into functional components 🔹 Component Lifecycle – Gained clarity on mounting, updating, and unmounting phases 🔹 Unidirectional Data Flow – Learned how data flows from parent to child through props, making applications predictable and easier to debug These concepts helped me understand how React manages UI efficiently and keeps everything in sync. Every day I’m building a stronger foundation and getting closer to creating real-world projects 💻 #React #WebDevelopment #FrontendDevelopment #JavaScript #LearningInPublic

when I first started React I was so confused about useState and useEffect like what is the difference and when do I use which one so let me explain both with one simple real example 👇 imagine you are building a weather app that fetches weather data when the page loads here is how useState and useEffect work together in that const [weather, setWeather] = useState(null) useEffect(() => {  fetch('https://lnkd.in/g7JkAAtU')   .then(res => res.json())   .then(data => setWeather(data)) }, []) that is it. two hooks. one job each. useState stores the weather data useEffect fetches it when the component loads simple way to remember it 👇 useState = where you keep your data useEffect = where you do something when something happens when I understood this everything in React started making sense if you are just starting React and feeling confused about these two, save this post. you will need it 🙌 anything else in React that confused you when you started? drop it in the comments 👇 #React #JavaScript #Frontend #WebDev #ReactJS #100DaysOfCode #Programming #LearnToCode

🚀 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

🚀 Excited to share my latest project: React Todo Application with Authentication! I built a full-featured Todo App that allows users to manage their daily tasks efficiently with secure access and clean UI. 🔹 Key Features: * User Registration & Login system * Protected Routes using React Router * Add, Delete, and Mark tasks as Completed * Separate views for Pending & Completed tasks * Persistent data using JSON Server 🔹 Tech Stack: * React.js * JavaScript (ES6+) * HTML & CSS * JSON Server (Mock Backend) 💡 What I learned: * Handling state and side effects using useState & useEffect * Routing and navigation in React * Building reusable components * Working with APIs and data flow 🔗 GitHub Repository: https://lnkd.in/g-sx8vaH I’m continuously learning and improving — feedback and suggestions are welcome! 🙌 #React #JavaScript #FrontendDevelopment #WebDevelopment #FullStack #Learning #Projects

🚀 Leveling up my React skills: Building a Dynamic Quiz App! I just finished building a fully functional Quiz Application, and it was a fantastic deep dive into some of the more nuanced parts of React. What started as a simple UI project turned into a great lesson in state management and component lifecycles. Key things I learned/implemented: ✅ Mastering Effects & Cleanups: I implemented a QuestionTimer using useEffect to handle both a countdown progress bar (via setInterval) and a timeout logic (via setTimeout). Learning to properly clean up these side effects was crucial to avoid memory leaks! ✅ The Power of the key Prop: One of the "aha!" moments was using the key prop to reset component state. By passing key={activeQuestionIndex} to my timer component, I ensured it completely resets and restarts for every new question without complex manual logic. ✅ Optimization with useCallback: To prevent unnecessary re-renders and ensure stable function references for my effects, I utilized useCallback. This was essential for keeping the timer logic precise while passing handler functions down through props. ✅ Derived State: Instead of creating redundant state variables, I practiced deriving the "current question" logic directly from my existing answers array, keeping my state lean and predictable. This project was a great reminder that even "simple" features like a progress bar require a solid understanding of how React handles timing and component instances. Check out the snippet of my QuestionTimer logic below! 👇 #ReactJS #WebDevelopment #Frontend #CodingJourney #JavaScript #ReactHooks #Programming

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

Built a weather app with React.js— yes, I know it's been done a thousand times. 😄 But here's why I still built it: Working with a real API as a beginner is genuinely humbling. The data coming back from OpenWeatherMap wasn't just a clean string I could slap on the screen — it was nested objects, Unix timestamps, coded responses, and edge cases. Parsing all of that, handling loading states, managing errors, and keeping the UI clean taught me more than any tutorial section on useEffect ever could. Every line of this was written by hand. No AI generation, just me, the docs, and a lot of console.log(). What it does: → Live weather for any city worldwide → Temperature, humidity, wind, visibility, pressure → Sunrise & sunset times → Error handling for invalid cities Built with React.js, Tailwind CSS, and OpenWeatherMap API. Deployed on Netlify. 🔗 Live: https://lnkd.in/dkFSbatc 📁 GitHub: https://lnkd.in/dXnS7KUi #React #WebDevelopment #JavaScript #Frontend

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 10 — 10 days ago I didn't know what JSX was. Today I deployed a React app to the internet. Wrapping up this challenge with something I can actually share. Not a tutorial project. Something I designed, built, and deployed myself. A few things I learned beyond the technical stuff: Consistency beats intensity. 10 days of steady learning > one 10-hour weekend session. Confusion is part of the process. I was stuck on something almost every day. Working through it was always worth it. Building beats watching. Every tutorial I coded along with stuck better than every video I just watched. What's next? Going deeper on TypeScript and then starting a full-stack project with React and FastAPI. If you're thinking about starting your frontend journey — just start. It's awkward at first. It gets fun fast. Thanks to everyone who engaged with these posts. Genuinely kept me going. What should I build next? 👇 #webdevelopment #reactjs #frontenddeveloper #100daysofcode #learninpublic