Starting MERN Developer Journey: Building a Counter App

🧮 Day 25 — JavaScript 30 Days Challenge Day 25 complete — built a Factorial Calculator App using Vanilla JavaScript. This app calculates the factorial of a given number. The user simply enters a number and the app computes the factorial instantly. Features include: • Number input field • Instant factorial calculation • Basic input validation This project focuses heavily on algorithmic thinking and implementing mathematical logic in JavaScript. Code pushed to GitHub + Live hosted link in GitHub ReadMe (Github link in Profile section). Day 25 done. Just a few more to go. 🚀 #JavaScript #WebDevelopment #FrontendDevelopment #30DaysOfCode #FactorialCalculator #BuildInPublic #CodingJourney

🚀 Just built a full-featured Todo App in React! ✅ Add, Edit & Update tasks ✅ Mark tasks as Complete / Pending ✅ Filter by All / Completed / Pending ✅ Persistent data with LocalStorage ✅ Clean UI with counters & interactive buttons This project helped me strengthen my React skills, state management, and UI handling. 🌟 Source Code: 👉https://lnkd.in/dSRsWdeM Muhammad Osama Saylani Mass I.T Training (S.M.I.T) #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #ProjectShowcase #TodoApp

🚀 Built a React Quote Generator! I created a simple Quote Generator Web App using React that fetches random quotes from an API. 🔹 Features: • Random quote generator • Clean UI with gradient background • Built using React Hooks (useState & useEffect) 🔹 Tech Stack: React | JavaScript | CSS | Fetch API 🔗 GitHub Repository: https://lnkd.in/gFAKmCXR #react #javascript #webdevelopment #frontenddeveloper #coding #projects

🚀 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

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

🚀 Built a Dynamic Box Creator with React.js I recently developed a Dynamic Box Creator App with React.js, allowing users to create various boxes dynamically by entering the number of boxes, entering custom text, and selecting a box color. This project assisted me in improving my React state management, events, and dynamic rendering skills. 🔹 Features of the Application: Enter the number of boxes to create Enter custom text to display inside boxes Select a color for boxes Click Add to dynamically create boxes Beautiful, clean, and responsive UI This application assisted me in better understanding React hooks, dynamic components, and interactive user interface concepts. 💻 GitHub Repository: https://lnkd.in/dwwfbZgv 🌐 Live Demo: https://lnkd.in/dyUh2z23 I continue to develop more projects to improve my React and front-end development skills. #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #SoftwareDeveloper #GitHub #OpenSource #LearningInPublic Coding Thinker

🚀 #Day60 #100DaysOfCode – React Todo App Today I built a Todo App using React to understand how state management and component-based UI work in modern web development. 🛠️ Tech Stack Used Frontend: ▪️ React.js ▪️ JavaScript ▪️ HTML ▪️ CSS Concepts Practiced: ▪️ useState Hook ▪️ useEffect Hook ▪️ Event Handling ▪️ Local Storage 📂 Project Overview This Todo App allows users to: ▪️ Add new tasks ▪️ Mark tasks as completed ▪️ Delete tasks ▪️ Clear all tasks ▪️ Tasks remain saved even after page refresh using Local Storage 💡 Key Learning Today I understood how React state works and how we can build interactive applications using reusable components. Building small projects like this helps strengthen the undamentals of React and frontend development. 🔗 GitHub Repository: https://lnkd.in/dBfWK3QH #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #100DaysOfCode #Day60Complete 🚀

🚀 Used React to build a To-Do List App. js Well recently, I created a simple yet useful ToDo List Application using React. js that covers fundamental React ideas such as useState, structure pointers, and event processing. 🔹 Features: • Add new tasks • Delete tasks • Clean and responsive UI Working on this project teaches me about React state management and functional components, which both helped me to get familiar with frontend development tools. 💻 GitHub Repository: https://lnkd.in/dWQWx8AU 🌐 Live Demo: https://lnkd.in/dhDS9VNR I am constantly working on projects to improve my frontend and React skills. If you have any feedback or suggestions, feel free to leave your comments! 🙌 #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #SoftwareDeveloper #GitHub #OpenSource #LearningInPublic Coding Thinker

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