I built a full Instagram Clone from scratch — and deployed it live in under an hour. 🚀 Not a tutorial. Not a copy-paste project. I designed it, built it, and shipped it myself. 🔗 Live App → https://lnkd.in/d7TmCPyu 💻 GitHub → https://lnkd.in/dvycQWmQ — — — Here's what's inside: ✅ Add & delete posts (with image preview) ✅ Like / Unlike with heart animation ✅ Comment section per post ✅ Dark mode toggle ✅ Data persists with localStorage (no backend!) ✅ Fully responsive — mobile + desktop ✅ Built with React + Vite, deployed on Vercel — — — What I learned building this: → How to manage state across components with custom hooks → How localStorage works for client-side persistence → How to structure a React project properly (components / pages / hooks / utils) → How to go from code → GitHub → Vercel in minutes Every developer talks about building projects. Few actually ship them. This one is live. Anyone can use it. 👇 🔗 https://lnkd.in/d7TmCPyu If you're learning React — just build and ship. That's the only way. #ReactJS #WebDevelopment #Frontend #JavaScript #Vite #OpenSource #100DaysOfCode #BuildInPublic #Vercel #GitHub

🚀 Built an Image Gallery App using React! Today I took another step forward in my React journey by learning an important React Hook — useEffect. It is used to handle side effects in React components, such as fetching data from an API, and it also helps control when the code should run. I also learned about Axios, a JavaScript library used to make HTTP requests to servers. To practice these concepts, I built a Gallery Application that fetches images from the Lorem Picsum API and displays them in a responsive UI. While building this project, I solved a couple of challenges: 1. Pagination I implemented pagination using a state variable for the page index. When the Next or Prev button is clicked, the page number changes and new images are fetched from the API. 2. Loading State I also added a loading indicator that appears while the images are being fetched. Once the data is loaded, the images are rendered in the gallery. What I practiced in this project: • React useState • React useEffect • Axios for API requests • Pagination logic • Conditional rendering (Loading state) • Component-based UI design Building small projects like this helps me understand how React works in real-world applications. Looking forward to building more and improving my skills! 🚀 #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment

Built a small Background Changer app while learning React. Simple idea, but a good exercise for understanding components and data flow. Instead of hardcoding colors, I created a reusable Button component and used .map() to render them dynamically with props. Also experimented with Tailwind CSS for smooth hover effects and a small magical text touch. ✨ Step by step, React concepts are starting to click. Click carefully… It’s magic. 😉 #reactjs #webdevelopment #chaiaurcode #tailwindcss

This is one of my recently built project, a simple Quiz App using React, and it turned out to be a great revision of core concepts. 🔹 State Management (useState) Handled multiple states like current question index and user answers. 🔹 Updating State Without Mutation Instead of pushing directly into arrays, I used: setUswerAnswer([...uswerAnswer, ans]); This reinforced why React needs immutable updates to re-render properly. 🔹 Conditional Rendering Displayed questions, score, and results based on the index: Show questions while quiz is running Show result when quiz ends This made me more comfortable with dynamic UI rendering. 🔹 Handling Lists & Events Mapped over options and attached click handlers to capture user answers. Also learned the importance of keys in lists. Quiz Link : https://lnkd.in/g_TU_Puy Still learning and improving step by step #ReactJS #JavaScript #FrontendDevelopment #LearningByBuilding

🚀 I built a Random Joke Generator Web App… and learned a lot along the way! At first, working with APIs felt confusing 😅 But this project helped me finally understand how things actually work. 💡 What it does: • Generates random jokes using API • Supports multiple categories (Programming, Dark, etc.) • Text-to-speech feature 🔊 • Copy jokes instantly 📋 🧠 What I learned: • API handling (fetch, async/await) • DOM manipulation • Making UI more interactive 🔗 Live Demo:https://lnkd.in/g8yyVQp6 I’m still improving my frontend skills every day. 👉 Which feature should I add next? #WebDevelopment #Frontend #JavaScript #100DaysOfCode

I Finally Understood useEffect… Somehow A few days deeper into React, and things are starting to click, not perfectly, but enough to feel real progress. At first, hooks felt confusing. Especially useEffect. Why does it run? When does it run? Why does it run again? It didn’t make sense… until I stopped overthinking it and started building. Here’s what I’ve worked on so far: -> useState Understanding how state drives UI changes made everything feel more dynamic and controlled. -> useEffect Still not “mastered”, but now I understand how it handles side effects, especially API calls and controlled execution. -> Built small apps Counter app (state updates, re-rendering) Meme generator (API hit using useEffect, dynamic content, event handling) These small builds did more than tutorials ever could, they forced me to connect the dots. The biggest shift? I have stopped trying to memorize React… and started trying to think in React. Still early, but now it feels like direction instead of confusion. Next: Better structure, deeper hooks, and more real-world projects. For developers: How do you clearly decide when to use useEffect, and when not to? #ReactJS #FullStackDeveloper #WebDevelopment #BuildInPublic #JavaScript #LearningJourney

🧠 Today I learned something powerful in React: Zustand As I continue building my frontend skills, I explored a lightweight state management library called Zustand — and honestly, it changed the way I think about managing state in React apps. Before this, I mostly used useState and props drilling, which works fine for small apps. But when the app grows, sharing state between components becomes messy and hard to maintain. That’s where Zustand comes in. 🚀 What I learned about Zustand: It allows you to create a global state store outside components Any component can access or update the state directly No need for Context Provider or complex Redux setup Clean, minimal, and very easy to use 💡 Simple idea that helped me understand it: Instead of passing data through components → Zustand keeps the data in one shared store that every component can use directly. This made my code: ✔ Cleaner ✔ More scalable ✔ Easier to manage I really enjoy discovering tools like this because they show me how real-world React applications are structured. Still learning, still building, and getting better every day 💻 #ReactJS #Zustand #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic

⏱️ Just built a fully functional Stopwatch App using React.js + Vite! If you're learning React or looking for a clean beginner-friendly project, this video breaks down how to create a fast, modern stopwatch with start, stop, and reset functions — all powered by React Hooks. This project includes: ✨ Real-time timer using useEffect & useRef ⚡ Ultra-fast development with Vite 🎨 Clean UI styling for a professional look 📚 Perfect for beginners learning React fundamentals 🧩 Covers state management, intervals, and component structure Whether you're building your portfolio, practicing React, or understanding how time-based apps work — this project is a great addition to your frontend journey. #reactjs #reactdeveloper #vite #javascript #frontenddevelopment  #webdevelopment #programming #codingprojects #reactproject #uiux  #softwareengineering #learnreact #javascriptproject #devcommunity  #frontend #coders #reacthooks

When I first learned about useMemo, I thought: “Great! This will make my React app faster.” So I started adding it everywhere 😅 But later I realized something important: 👉 useMemo is not always necessary. Example: ❌ Overusing useMemo const doubled = useMemo(() => count * 2, [count]); For a simple calculation like this, React is already fast enough. Using useMemo here actually adds unnecessary complexity. ✅ useMemo is useful when: Expensive calculations Large lists filtering/sorting Preventing unnecessary re-renders in heavy components Example: const filteredUsers = useMemo(() => { return users.filter(user => user.active); }, [users]); The real lesson I learned: Optimization should come after clarity. First write clean code. Then optimize when needed. What’s your rule for using useMemo? #ReactJS #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment

I remember struggling with forms in React… trying different libraries, fixing validation issues, and optimizing performance. ⚛️ That’s when I explored Formik vs React Hook Form. Formik felt simple and quick to start. But as projects grew, I started leaning more towards React Hook Form for better performance and flexibility. Now my go-to depends on the project: • Formik → quick and lightweight setups • React Hook Form → scalable & performance-focused apps There’s no “one perfect choice” - it’s about what fits your use case. Which one do you prefer for your React projects? 👇 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactDevelopers