Book Finder App with Real-time Search and API Integration

🌦 Weather Web App – My 16th Project Built using HTML, CSS, and JavaScript, this web application allows users to type the name of a country or city and instantly get the current temperature of that location. A simple and interactive tool to check real-time weather conditions around the world. Features: Enter any city or country name to get current temperature. Built purely with HTML, CSS, and JavaScript. GitHub Repository: [https://lnkd.in/dGMG8k7A] Live Demo: [https://lnkd.in/dGTgTZK6] #WebDevelopment #JavaScript #HTML #CSS #WeatherApp #SMITStudent Shariq Siddiqui

🚀 Just Built: NoZeroDays — A Habit Consistency App I’ve started building and sharing one project every week. This week, I built NoZeroDays, a productivity app that helps track daily goals and maintain streak consistency. 🔹 The Idea The concept is simple: never let a day go by without progress. Even 1% counts. 🔹 Features ✔ Add and manage daily goals ✔ Track consistency streaks ✔ Persistent data using LocalStorage ✔ Multi-page navigation using React Router ✔ Clean and responsive UI with Tailwind CSS 🔹 Tech Stack • React.js • JavaScript (ES6+) • React Router • Tailwind CSS • LocalStorage 🔹 What I Learned Structuring a React project properly Managing state efficiently Handling side effects and data persistence Improving UI consistency Links in first comment 👇 Feedback is always welcome 🙌 #React #WebDevelopment #BuildInPublic #FrontendDeveloper #JavaScript

🚀 Built a **Product Filter & Search App** using **HTML, CSS, and JavaScript**. This web application allows users to dynamically search products, filter by category, and sort items by price. The project focuses on improving **JavaScript logic, DOM manipulation, and interactive UI development**. 🔹 Features: • Product search functionality • Category-based filtering • Price sorting (Low → High / High → Low) • Responsive product card layout This project helped me strengthen my understanding of **JavaScript array methods, event handling, and dynamic UI rendering**. 🔗 Live Demo: (https://lnkd.in/gfcuhEwt) 💻 GitHub Repo: (https://lnkd.in/g9YZBp3u) #FrontendDevelopment #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic

🌦️ Just built a fully functional Weather App using JavaScript & OpenWeatherMap API! 🚀 Body: I’m excited to share my latest mini-project! I built a clean and responsive Weather App that fetches real-time weather data for any city in the world. 🌍 This project was a great way to practice DOM manipulation, API integration, and asynchronous JavaScript (Async/Await). ✨ Key Features: Real-time Data: Fetches live temperature, humidity, and wind speed using the OpenWeatherMap API. Dynamic UI: The weather icon changes automatically based on current conditions (Clouds, Rain, Clear sky, etc.). Error Handling: Includes a user-friendly error message for invalid city names. Responsive Design: Looks great on both desktop and mobile devices. 🛠️ Tech Stack: HTML5 CSS3 (Custom styling) JavaScript (ES6+) OpenWeatherMap API Building this helped me solidify my understanding of how to handle JSON data and manage API responses effectively. Check out the demo/code below! 👇 https://lnkd.in/g34yvEf4 #webdevelopment #javascript #coding #frontend #api #project #learning #html #css #weatherapp

🚀 Built a Simple Calculator Web App Created a responsive calculator using HTML, CSS, and JavaScript with full keyboard support. Features: 💠Basic arithmetic operations 💠Keyboard input control 💠Custom delete (handles selected text & last digit) 💠Error handling using try–catch 💠Clean and user-friendly UI This project helped me strengthen my understanding of: 💠DOM manipulation 💠Event handling 💠Keydown events 💠Input validation #JavaScript #WebDevelopment #FrontendDeveloper #LearningByBuilding

🔢 Mini Project: Counter App (Increment & Decrement) Built a simple Counter application using HTML, CSS, and JavaScript that increases or decreases a value based on user interaction. 💡 What I learned: DOM manipulation Event handling in JavaScript State management using variables Clean UI updates in real time Small UI. Big logic practice. 🚀 🔗 https://lnkd.in/gvYBzuQp #JavaScript #FrontendDevelopment #MiniProject #HTML #CSS #LearningByDoing

58% smaller bundle? Here's what actually worked. Our Next.js app was embarrassingly slow. I finally sat down for a few days and dug into why. Turns out we were shipping a ton of JavaScript nobody asked for !! Here's the exact process I did: Step 1: Run `next build --analyze`  Found duplicate dependencies and unused code paths. Step 2: Lazy load heavy components  Moved chart libraries and rich text editors behind dynamic imports. Step 3: Split vendor bundles  Separated framework code from business logic. Step 4: Tree-shake aggressively  Replaced moment.js with date-fns. Removed lodash for native methods. Step 5: Test on real devices  Used Chrome DevTools throttling to simulate slow connections. Result: Load time dropped from 8.2s to 2.1s If your app feels sluggish, start there. The bundle analyzer doesn't lie. The best part? Zero changes to user-facing features. What's the last performance fix that genuinely surprised you? #WebPerformance #NextJS #JavaScript #WebDev #Frontend

If your website is only text and design, it’s static. DOM (Document Object Model) manipulation is the "magic" that makes it interactive like a real app. It allows JavaScript to see your HTML as a tree of elements so you can select, change, or remove them dynamically. Here is a quick breakdown of how DOM manipulation works. 🚀 #JavaScript #webdevelopment #codingtips

⚡ How to Avoid Unnecessary Re-Renders in React Native Unnecessary re-renders can slow down your app and affect performance. Here’s how to prevent them 👇 ✅ Use React.memo() Wrap functional components to prevent re-render if props haven’t changed. export default React.memo(MyComponent); ✅ Use useCallback() for functions Avoid recreating functions on every render. const onPressHandler = useCallback(() => { console.log('Pressed'); }, []); ✅ Use useMemo() for heavy calculations const computedValue = useMemo(() => expensiveFunction(data), [data]); ✅ Avoid inline functions & objects in JSX ❌ onPress={() => doSomething()} ✔ Move it outside using useCallback ✅ Optimize Lists Use FlatList or FlashList with proper keyExtractor and avoid anonymous renderItem. ✅ Keep State Local Don’t lift state up unnecessarily. 💡 Golden Rule: If props & state don’t change, your component shouldn’t re-render. #ReactNative #Performance #MobileDevelopment #CleanCode #JavaScript

Boobook is a personal book list web app where users can add, view, and delete books. Built with HTML, CSS, and JavaScript, it demonstrates dynamic UI interactions, DOM manipulation, and core CRUD functionality. Live at https://lnkd.in/g4KpB9aE.