Building Weather App with HTML, CSS, JavaScript and GitHub Pages

🎬 I built my biggest React project so far — a Movie App with a funny twist on the legendary EgyBest — after learning React over the past few weeks. I pushed myself to build a real-world, fully functional application as a challenge… and this is the result 👇 🎥 Demo in the video below ✨ Features: • Search for any movie using an API • View detailed movie information • Rate movies ⭐ • Add movies to a watched list • Store data using localStorage • Delete movies from the list 🛠 Tech I used & learned: • React (Components, Props, State) • useState & useEffect • Custom Hooks (built my own reusable logic) • API integration (fetching data) • Conditional rendering • Event handling • Local Storage • Basic CSS for styling 🧠 What I learned: • How to structure a real-world React application • Managing state across multiple components • Persisting data in the browser ⚡ Biggest challenge: • Keeping the watched list synced correctly with localStorage This project is a big step forward for me, and I’m excited to keep improving 🚀 🔗 GitHub: https://lnkd.in/d6Uu-Xr6 I’d really appreciate your feedback 🙌 #ReactJS #ReactDeveloper #FrontendDeveloper #JavaScriptDeveloper #WebDevProjects #BuildInPublic #CodingJourney #JuniorDeveloper

🚀 Excited to share my latest project: GitHub Profile Finder I built a web application that allows users to search for any GitHub profile using just a username and instantly explore key details like repositories, followers, and more. The app fetches real-time data using the GitHub API and presents it in a clean, responsive UI. 💡 Key Features: 🔍 Search GitHub users by username 📊 View profile details (repos, followers, bio, etc.) ⚡ Fast and responsive interface 🌐 Real-time data fetching using API integration 🛠️ Tech Stack: React.js JavaScript (ES6+) GitHub API HTML & CSS 📚 What I learned while building this: Handling API calls and asynchronous operations Efficient state management in React Building responsive and user-friendly UI Debugging and improving performance This project helped me strengthen my frontend skills and gave me hands-on experience with real-world API integration. 🌐 Live Demo: https://lnkd.in/dvVFXTYS 👉 Feel free to check it out and share your feedback! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #GitHub #OpenSource #CodingJourney

🚀 Excited to share my latest project: React Todo Application with Authentication! I built a full-featured Todo App that allows users to manage their daily tasks efficiently with secure access and clean UI. 🔹 Key Features: * User Registration & Login system * Protected Routes using React Router * Add, Delete, and Mark tasks as Completed * Separate views for Pending & Completed tasks * Persistent data using JSON Server 🔹 Tech Stack: * React.js * JavaScript (ES6+) * HTML & CSS * JSON Server (Mock Backend) 💡 What I learned: * Handling state and side effects using useState & useEffect * Routing and navigation in React * Building reusable components * Working with APIs and data flow 🔗 GitHub Repository: https://lnkd.in/g-sx8vaH I’m continuously learning and improving — feedback and suggestions are welcome! 🙌 #React #JavaScript #FrontendDevelopment #WebDevelopment #FullStack #Learning #Projects

Week 2 of learning Next.js — getting deeper into how modern full-stack apps actually work. This week, I focused on Next.js Essentials (App Router) and built a project alongside the course. Here’s what I worked on: • File-based routing and dynamic routes • Pages, layouts, and project organization • React Server Components vs Client Components • Navigation and performance improvements • Image optimization using Next.js Image On the backend/full-stack side: • Setting up a SQLite database • Fetching and rendering dynamic data • Server Actions for handling form submissions • Input validation and basic XSS protection • Managing form state (useFormState, useFormStatus) • Handling loading states, errors, and not-found pages • Caching and revalidation Project built: Foodies App • Dynamic meal pages • Image uploads • Form handling with server actions • Database integration GitHub: https://lnkd.in/dgSKwPS7 Big takeaway this week: Next.js isn’t just about React — it brings backend and frontend together in a very structured way. Still learning, still building. #nextjs #reactjs #fullstackdeveloper #webdevelopment #learninginpublic #mern #developers

🚀 Just built a Redux Todo App — leveling up my React skills! I’ve been diving deeper into state management, and this project helped me truly understand how Redux Toolkit works in real-world applications. ✨ What I built: A clean and responsive Todo application where users can manage their daily tasks efficiently. 🔥 Features: ➕ Add new todo ✏️ Edit existing tasks 🗑️ Delete todo 📋 Centralized state using Redux 🧠 What I learned: ✔ How Redux store manages global state ✔ Creating slices (actions + reducers) ✔ Using useDispatch & useSelector ✔ Writing cleaner and scalable React code ⚙️ Tech Stack: React JS ⚛️ Redux Toolkit 🧠 Bootstrap 🎨 This project may look simple, but it gave me a strong foundation in state management, which is essential for building scalable apps. A huge thank you to my mentor Sonia George madam for the support throughout and guidance 💻 GITHUB :[https://lnkd.in/gVGVqpUQ] 🌐 LIVE DEMO[https://lnkd.in/gG2ET-eh] #ReactJS #Redux #WebDevelopment #FrontendDeveloper #JavaScript #100DaysOfCode

🚀 Mastering React Hooks: useState, useEffect & useRef As I continue my journey in React development, I’ve been diving deep into some of the most powerful hooks that make functional components efficient and clean. 🔹 useState Helps manage state in functional components. It allows dynamic updates and re-renders the UI when data changes. 🔹 useEffect Used for handling side effects like API calls, event listeners, and lifecycle management. It helps keep components in sync with external data. 🔹 useRef Provides a way to access DOM elements directly and store mutable values without triggering re-renders. 💡 Key Learning: Understanding when to use each hook is crucial for writing optimized and scalable React applications. 📌 Example Use Cases: ✔ Managing form data with useState ✔ Fetching API data using useEffect ✔ Focusing input fields using useRef React Hooks have completely changed the way we build components — making code more readable, reusable, and powerful. I’m excited to keep learning and building more projects using React! 💻 #ReactJS #WebDevelopment #Frontend #JavaScript #Learning #Coding #ReactHooks #100DaysOfCode

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

Learn the useMemo Hook in React JS step by step in this easy tutorial 💡 In this video, you’ll understand: ✅ What is useMemo? ✅ Why we use useMemo in React ✅ How useMemo improves performance ⚡ ✅ Real examples (including expensive calculations) ✅ Common mistakes & interview tips This tutorial is perfect for beginners who want to master React hooks and build fast web apps using modern tools like MERN & Next.js 🚀 📌 Full Stack Developer Playlist (MERN + Next.js): https://lnkd.in/dv7-ieNH

🌐 Today’s MERN Concept: React useEffect — The Side‑Effects Manager As part of my MERN learning journey today, I focused on understanding useEffect, one of the most essential hooks in React for handling side‑effects. ✨ What I learned today: useEffect helps React components run logic after rendering — logic that doesn’t belong directly inside the UI flow. Today’s key insights: 🔹 useEffect runs after the component renders 🔹 Perfect for: fetching data, subscriptions, timers, event listeners 🔹 The dependency array controls when the effect runs 🔹 Leaving the dependency array empty means it runs only once (like componentDidMount) 🔹 Returning a cleanup function prevents memory leaks My biggest realization today was: “Understanding useEffect isn’t about memorizing syntax — it’s about knowing when something should happen outside the render cycle.” This hook is a core part of writing predictable, efficient React apps. More MERN learnings tomorrow! #MERN #ReactJS #FrontendDevelopment #JavaScript #LearningJourney