Day 13 - 30 Days of 30 Projects challenge— HTML Previewer App with Next.js 🚀 As part of my 30 Days of 30 Projects challenge, I’ve built a HTML Previewer App using Next.js (App Router), TypeScript, Tailwind CSS, and shadcn/ui. ✨ What this app does: Write HTML in a textarea Instantly see the rendered preview Responsive & clean UI Built with modern Next.js practices This project helped me strengthen my understanding of: Client vs Server Components Dynamic HTML rendering Tailwind + shadcn integration Debugging real-world npm & dependency issues 💪 🔗 Live Demo: 👉 (https://lnkd.in/ddqC9mCh) Excited to keep pushing forward and learning by building 🚀 Feedback is always welcome! Asharib Ali #Day13 #30DaysOfCode #30Projects #NextJS #ReactJS #FrontendDevelopment #TailwindCSS #TypeScript #WebDevelopment #LearningByBuilding #DeveloperJourney #Coding #100DaysOfCode #FullStack #JavaScript #Frontend #WebDev #CodeNewbie #BuildInPublic

📖 Book Finder App:- I built a Book Finder Application using HTML, CSS, and JavaScript that allows users to search and explore books dynamically using an external API. 💡 Key Highlights: ✔️ Real-time book search ✔️ API integration for dynamic results ✔️ Clean and responsive UI ✔️ Improved understanding of DOM manipulation 🔗 Live Demo: https://lnkd.in/gvVK3wTZ 📚 What I Learned: • Working with external APIs • Handling asynchronous JavaScript (fetch / promises) • Rendering dynamic content on the UI • Improving frontend structure and responsiveness Building real-world projects like this helps strengthen my JavaScript fundamentals step by step. Feedback and suggestions are welcome 🙌 #JavaScript #FrontendDevelopment #WebDevelopment #LearningByBuilding #Projects #API

🧮 Day 13 — JavaScript 30 Days Challenge Day 13 complete — built a Multiplication Game App using Vanilla JavaScript. The app randomly generates multiplication questions and checks the user’s answer instantly. It keeps the experience interactive and a bit competitive. Features include: • Random number generation • Dynamic question rendering • Real-time answer validation • Score tracking • Instant feedback (correct / wrong) This project was more logic-focused than UI-focused, which is exactly what I want right now. Strengthening problem-solving speed and thinking through flow control. Code pushed to GitHub + Live sites links in the ReadMe file (Github link profile section). #JavaScript #WebDevelopment #FrontendDevelopment #css #html #javascript #bootstrap

Day 5 of 100: The JavaScript Task I used JavaScript to create a Random Number Generator app today. Based on user input, the app creates a random number within a given range. What I worked on: Utilising Math.random() Managing the values entered by the user Properly converting strings to numbers Although it's a straightforward project, it demonstrated the significance of data handling and logic in creating interactive applications. 5 days of consistency. #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic

⚛️ React.js Hooks Cheat Sheet React hooks are portals that let you tap into the magic of React. Some let you create and manage states, some let you perform side effects, and some improve the overall performance of your app. In this cheatsheet, let's discuss some of the most commonly used React hooks. ✅ useState ✅ useEffect ✅ useContext ✅ useRef ✅ useMemo ✅ useCallback ✅ useReducer ✅ useLayoutEffect ✅ useImperativeHandle ✅ useDebugValue ✅ useId ✅ useDeferredValue ✅ useTransition ✅ useSyncExternalStore ✅ useInsertionEffect ✅ Custom hooks ✅ Rules ✅ Best practices Save & share with your team! --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com & JavaScript Mastery for free tutorials on web development. Follow Muhammad Nouman for more useful content #React #Hooks #JavaScript #WebDevelopment #CheatSheet #Frontend #Coding

🚨 JavaScript Explained (Real Version 😅) You start with a simple idea: 👉 “Let’s build a small JS app… just 250 KB.” Then comes: 💻 "npm install" And suddenly… 📦 18 GB of "node_modules" 📦 Packages depending on packages depending on packages 📦 "final-final-utils-v2" (which probably just checks if a number is even 😂) Meanwhile, you’re sitting there like: 🧑💻 “Bro… I just needed ONE library…” Welcome to the beautiful chaos of modern JavaScript 💀 But hey — at least it works… (until it doesn’t) 🔥 Lesson of the day: Sometimes we don’t build apps… We just install the internet. #JavaScript #WebDevelopment #CodingLife #ProgrammerHumor #Developers #NodeJS #NPM #SoftwareDevelopment #TechHumor #CodingMemes #FrontendDevelopment #BackendDevelopment

⚛️ React.js Hooks Cheat Sheet React hooks are portals that lets you tap into the magic of React. Some let you create and manage states, some let you perform side effects, and some improves the overall performance of your app. In this cheatsheet, let's discuss some of the most commonly used React hooks. ✅ useState ✅ useEffect ✅ useContext ✅ useRef ✅ useMemo ✅ useCallback ✅ useReducer ✅ useLayoutEffect ✅ useImperativeHandle ✅ useDebugValue ✅ useId ✅ useDeferredValue ✅ useTransition ✅ useSyncExternalStore ✅ useInsertionEffect ✅ Custom hooks ✅ Rules ✅ Best practices Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://lnkd.in/gvzdeSJn --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com & JavaScript Mastery for free tutorials on web development. #React #Hooks #JavaScript #WebDevelopment #CheatSheet #Frontend #Coding

🚀 Just Built a Todo App with React + Tailwind I recently completed a Todo application where I focused on strengthening my understanding of: • React state management (useState) • Lifting state up for proper component communication • Controlled inputs • Conditional rendering • LocalStorage integration for persistence • Clean UI design using Tailwind CSS Instead of just building a basic form, I structured the app properly by separating concerns: Form handling component Todo display component Centralized state management Persistent storage sync with useEffect This project helped me move beyond “it works” thinking and start focusing on architecture and clean component design. Source Code (GitHub): 👉 https://lnkd.in/gf3_hHg4 Next steps: Implement better state management patterns Always building. Always improving. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #TailwindCSS #LearningInPublic #OpenSource

One mistake I was making in React (and how I fixed it) While doing some frontend projects, I noticed unnecessary re-renders were slowing down my app. After debugging with Chrome DevTools, I realized: 1. State was being updated at higher component levels 2. Causing child components to re-render unnecessarily Fix: ✔ Moved state closer to where it was needed ✔ Used proper conditional rendering ✔ Implemented lazy loading for better performance Result: Improved load performance and cleaner component structure. Still learning. Still improving. #ReactJS #FrontendDevelopment #JavaScript #LearningInPublic

Here is a mini-project in which I build a simple filter app . In this project I used forEach() for looping and filter() for give required data by user. #webdevelopment #html #css #js