🚀 My First Full-Stack Web Application – Weather Dashboard 🌦️ I’m excited to share my first full-stack project, a Weather Dashboard built using modern web technologies. While building this project, I learned how to connect a React frontend with a Node.js and Express backend, manage data with MongoDB, and structure a complete web application. 🔧 Features 🔒 User Authentication – Secure login and registration system using JWT authentication and bcrypt password hashing. ⭐ Favorite Cities – Users can save their preferred cities and quickly access weather information from a personalized dashboard. ⚡ Performance Optimization – Implemented in-memory caching (Map()) and background pre-fetching to improve API response time from the Open-Meteo API. 💡 What I Learned Full-stack development with React, Node.js, Express, and MongoDB REST API design and backend architecture Authentication and security basics Using Git and GitHub for version control and project management This project was a great learning experience and helped me understand how real-world applications are built from frontend to backend. 🌐 Live Demo: https://lnkd.in/gnduSQ_A 💻 GitHub Repository: https://lnkd.in/g2EY5HW8 I’d really appreciate any feedback or suggestions for improvements! #ReactJS #NodeJS #ExpressJS #MongoDB #FullStackDevelopment #GitHub #WebDevelopment #JavaScript #LearningJourney

🚀 Understanding Props vs State in React — Simplified! In React, everything revolves around data. But there are two ways to handle it: 👉 Props 👉 State Understanding the difference is crucial for building scalable apps. 💡 What are Props? 👉 Props (short for properties) are used to pass data from parent to child function Greeting({ name }) { return <h1>Hello {name}</h1>; } <Greeting name="React" /> ✅ Read-only ✅ Passed from parent ✅ Cannot be modified by child 💡 What is State? 👉 State is data managed inside a component const [count, setCount] = useState(0); setCount(count + 1); ✅ Mutable ✅ Managed within component ✅ Triggers re-render ⚙️ How it works 🔹 Props: Flow: Parent → Child Immutable Used for communication 🔹 State: Local to component Can be updated Controls UI behavior 🧠 Real-world use cases ✔ Props: Passing data to components Reusable UI components Configuring child behavior ✔ State: Form inputs Toggle UI (modals, dropdowns) Dynamic data 🔥 Best Practices (Most developers miss this!) ✅ Use props for passing data ✅ Use state for managing UI ✅ Keep state minimal and local ❌ Don’t mutate props directly ❌ Don’t duplicate state unnecessarily ⚠️ Common Mistake // ❌ Mutating props props.name = "New Name"; 👉 Props are read-only → always treat them as immutable 💬 Pro Insight 👉 Props = External data (controlled by parent) 👉 State = Internal data (controlled by component) 📌 Save this post & follow for more deep frontend insights! 📅 Day 8/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

By default, React is fast. But as data grows, unnecessary re-renders quietly kill performance. Today I learned two hooks that every serious React developer needs to know: 🗒️ useMemo — A cache for heavy calculations. Instead of re-running expensive logic on every render, React stores the result and reuses it. Think of it like a sticky note your genius friend writes so they don't have to solve the same problem twice. 🔗 useCallback — Stabilizes your functions. In JS, functions are objects — so a "new" one gets created on every render. This hook keeps the reference the same, stopping child components from re-rendering for no reason. The senior wisdom I picked up today? Don't over-optimize. These hooks cost memory. Only reach for them when you actually see a lag — not before. Understanding when to optimize is what separates professional developers from the rest. Tomorrow: I'm building my own tools with Custom React Hooks! 👀 Question for you: Do you optimize as you go, or wait until something feels slow? Drop your strategy below 👇 #CodeWithWajid #ReactJS #WebDevelopment #100DaysOfCode #LearningToCode #BuildingInPublic #ReactOptimization #WebPerf

"EJS is Underrated And Nobody Talks About It" Today I didn't know nothing about what to do with my forecast page in my weather app. No idea what data to have, what layout design to implement, which API's to get exactly, only the desire to make it work. In about 10-15 min of idea reasearching I ended up with: - Live weather data for 10 cities - A temperature sparkline - Trending cities grid - Global snapshot section showing the hottest, windiest and the coldest cities in real time. - Next 5-days forecast - Saved Cities EJS templating is definitely underrated, I can write HTML simple as that and the server renders before it even hits the browser. No loading states, No useEffect no hydration issue headaches. Only data - rendered, clean, done. The stack i use mostly nowadays: - Node.js + Express for the server - EJS - Dynamic Templating - Whatever API's for whatever app I need 😁 - Tailwind (must have nowadays - I run away from media-queries most of the time 😉) - Railway - for production and deployment Time flies when the stuck works and the data flows ... Let's bring EJS back 😉 skyCast is live at - https://lnkd.in/dpyXm335 (still in development) #EJS #templating #webdevelopment #nodejs #nextjs #customcode #html #expressjs

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

After working on state, routing, and UI in earlier projects, I wanted to build something that depends on external data and real-time updates 🌍 Built a Weather App where you can search any city and get current conditions in a clean, responsive UI 🌦️ What this added for me 1. Working with API data instead of static state 2. Handling loading and error states properly 3. Keeping the UI clear even when data changes dynamically 📱 Stack: React, Vite, Tailwind CSS, Vercel 🔗 Live: https://lnkd.in/gZGcnUFS 💻 Code: https://lnkd.in/gasfj-vK Still building and improving, open to feedback or connections 👍 #React #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #LearningInPublic #API #Vite #TailwindCSS #DevCommunity #TechCareers #SoftwareDevelopment Error Makes Clever

🌦️ Excited to Share My Weather App Project! I built a Weather Application using React.js that fetches real-time data from the OpenWeatherMap API. This project helped me understand how real-world applications interact with external APIs and handle dynamic data. 🛠️ Tech Stack: • React.js • Vite • OpenWeatherMap API • Thunder Client (for API testing) ✨ Key Features: ✔️ Search weather by city ✔️ Real-time temperature, humidity & conditions ✔️ Clean and responsive UI ✔️ API integration with proper error handling 💡 What I Learned: How to fetch and display API data using useEffect Testing APIs using Thunder Client before integration Managing state effectively in React Handling asynchronous operations in frontend apps 🔗 GitHub: https://lnkd.in/dJsygHxz 🌐 Live Demo: https://lnkd.in/d6KRhaWQ This project is part of my journey as a self-taught frontend developer, and I’m continuously working on improving my skills. Feedback and suggestions are always welcome! #ReactJS #WebDevelopment #FrontendDeveloper #JavaScript #APIs #OpenWeatherMap #LearningJourney

I Just built and deployed a Weather App 🌤️ This project helped me understand how to work with APIs and handle real-time data using JavaScript… Features include: • Search weather by city • Real-time temperature and conditions • Weather icons • Clean and responsive UI (though basic) Try it here: 👉 https://lnkd.in/ea_SveTQ View code: 👉 https://lnkd.in/ervqjNiN More projects coming — currently building and improving daily 🚀 #FrontendDeveloper #JavaScript #WebDevelopment #BuildInPublic

Modern React apps often need to work with data that lives outside React: browser APIs, global stores, or third-party libraries. That’s exactly where useSyncExternalStore comes in. It’s a specialized hook that lets you safely subscribe to external data sources — while staying compatible with React’s concurrent rendering and avoiding bugs like inconsistent UI state (“tearing”). What is useSyncExternalStore? useSyncExternalStore connects your component to an external store and keeps it in sync. Instead of managing state inside React (useState, useEffect), you: - subscribe to changes - read the current snapshot - let React re-render when data updates const value = useSyncExternalStore(subscribe, getSnapshot); Where: - subscribe → tells React how to listen for changes - getSnapshot → returns current data - optional getServerSnapshot → for SSR React will re-render only when the external value actually changes. useSyncExternalStore is not a “daily hook” — but when you need it, nothing else fits as well. #react #frontend #webdev #javascript #reactjs #hooks

🚀Why Loading Too Much Data Can Break Your Application While working on an infinite scrolling feature in React, I came across an important real-world problem 👇 ❌ Problem: If the backend sends a very large amount of data at once, both the website and server start slowing down. 🔍 Why does this happen? ▪️ Large API responses take more time to transfer over the network. ▪️The browser struggles to render too many items at once. ▪️Memory usage increases significantly. ▪️Server load increases when handling heavy requests. 👉 I was using the GitHub API, and it helped me understand how important it is to control the amount of data being fetched. 📦 Solution: Pagination + Infinite Scrolling ▪️Instead of loading everything at once: ▪️Fetch data in smaller chunks (pagination) ▪️Load more data only when needed (infinite scroll). ⚡ Benefits: ▪️Faster initial load time ▪️Better performance ▪️Smooth user experience ▪️Reduced server stress 💡 What I learned: ▪️Efficient data fetching is crucial in frontend development ▪️Performance optimization matters as much as functionality ▪️Real-world applications are built with scalability in mind 🎯 Key takeaway: It’s not about how much data you can load — it’s about how efficiently you load it. #ReactJS #JavaScript #WebDevelopment #Frontend #Performance #LearningInPublic #CodingJourney