Excited to share a recent school group project (Group 6) where we built an interactive image gallery using React! Our gallery allows users to: Apply image filters like brightness and contrast in real-time Toggle between grid and list views seamlessly Enjoy smooth, modular UI powered by custom hooks and the compound components pattern For image processing, we used CSS filters and the Canvas API to manipulate images efficiently. Check out the live project here: https://lnkd.in/eCBhwCKD Explore the code on GitHub: https://lnkd.in/e8JqBzFk Also, watch our video demo to see it in action! 🎥 This project strengthened my skills in React, frontend design, state management, and collaborative development, and highlighted the importance of clean, reusable code. #ReactJS #FrontendDevelopment #WebDevelopment #CustomHooks #CompoundComponents #Teamwork #ComputerScience #UniversityOfPortHarcourt

🚀 Do you REALLY understand React Hooks execution order? Most developers think they do… until logs prove otherwise 👀 I created a small React example using almost every core hook to deeply understand what runs when — during mount, render, and re-render. 👇 Hooks used in this example: useState useReducer useMemo useRef useLayoutEffect useEffect 🧠 What’s happening here? ✅ useMemo runs during render, not after ✅ useLayoutEffect runs after DOM mutation but before paint ✅ useEffect runs after paint ✅ useLayoutEffect can block UI — use it intentionally ⚠️ ✅ State update inside useEffect triggers a full re-render ✅ Parent renders → Child renders → effects execute ✅ Cleanup runs before next effect cycle or unmount This setup helps visualize: 🔹 When Parent & Child functions are called 🔹 When useMemo runs (spoiler: during render 👀) 🔹 Difference between useLayoutEffect vs useEffect 🔹 How state updates trigger re-renders 🔹 Cleanup execution timing 🔹 Why refs are updated before paint 🔹 How dispatching useReducer affects render cycle 🧪 Key takeaways (VERY IMPORTANT 👇) ✅ useMemo is NOT async — it runs during render ✅ useLayoutEffect blocks paint (use carefully ⚠️) ✅ useEffect runs after UI is painted ✅ State updates inside useEffect always trigger re-render ✅ Cleanup runs before the next effect cycle ✅ Parent renders → then Child → effects run bottom-up 🧪 Bonus detail Try clicking the button 👇 It dispatches a reducer action and shows: 💠 Which hooks re-run 💠 Which ones stay memoized 💠 Why dependency arrays matter more than we think If you ever struggled with: ❓ “Why is this log printing twice?” ❓ “Why is my UI flickering?” ❓ “Why does this effect run before that one?” 👉 THIS is the mental model you need. #ReactJS #JavaScript #FrontendDevelopment #ReactHooks #WebDevelopment #LearningInPublic #SoftwareEngineering #DeveloperLife #ReactTips

⚛️ React Rendering Cycle Explained in Simple Words Most React devs say: 👉 “React is fast because of Virtual DOM” But do you know HOW React actually renders Parent & Child components? 👇 In this example: 1 Parent Component   2 Child Components (ChildA & ChildB) --- 🧠 React Rendering has 2 Phases: 🟡 Render Phase (Virtual DOM) - constructor() - render() - Builds Virtual DOM - Finds what changed   👉 No browser DOM updates here (pure JavaScript) --- 🟢 Commit Phase (Real DOM) - componentDidMount() - componentDidUpdate() - useEffect()   👉 Now browser DOM updates happen --- 📌 Execution Order (Parent + Children): 1️⃣ Parent constructor   2️⃣ Parent render   3️⃣ ChildA constructor   4️⃣ ChildA render   5️⃣ ChildB constructor   6️⃣ ChildB render   7️⃣ ChildA componentDidMount   8️⃣ ChildB componentDidMount   9️⃣ Parent componentDidMount  👉 Parent finishes last because children must mount first. --- 💡 Pro Tip: React separates Render Phase and Commit Phase to minimize expensive DOM operations and improve performance. Do you remember this execution order, or did React lifecycle confuse you too? 😄  #ReactJS #JavaScript #Frontend #WebDevelopment #MERN #SoftwareEngineering

Headline: Leveling Up My Frontend Skills with CSS Grid! 🚀 I’ve just wrapped up a clean, responsive Contact Us page layout using CSS Grid! 💻✨  Grid has completely changed the way I think about layouts. For this project, I focused on creating a structured, multi-column interface that maintains its alignment across different sections—from the information cards to the integrated message form.  Key features of this build: Grid Layout: Utilized grid-template-columns to create a seamless 4-column info section. Form Design: Structured a functional "Send Us A Message" section using nested grid properties. Clean UI: Focused on white-space management and consistent padding for a professional user experience.  Every small project is a step forward in mastering the modern web. Check out the snippet below! ⬇️ #WebDevelopment #HTML5 #CSSGrid #FrontendDeveloper #CodingJourney #SoftwareEngineering #WebDesign #Programming #TechCommunity #entrielevate #illinoisTech

A while ago I was given a site to use to practise my Frontend Development skills (Frontend Practise: https://lnkd.in/dDUicDqS) So I vowed to build 1 page from the various levels given once a week, starting with Level 1. This week for my first page, I built WOW Studio Factor, a business-card style website focused purely on strengthening my JavaScript (ES6) fundamentals — an imitation of Oh.Studio. This demo was about translating UI behaviour into clear, maintainable logic — managing state through class toggling, event listeners, and conditional rendering. What I implemented in JavaScript: • Scroll-based reveal animations using the Intersection Observer API • Event listeners to control interactive UI behaviour • Conditional logic to determine what shows/hides dynamically • Dynamic class toggling to trigger image transforms and transitions • Modular, readable functions to keep behaviour structured Live demo: https://lnkd.in/dJq7Sjwy Inspired by: https://lnkd.in/dgRsgmFZ Desktop view only. #frontenddevelopment #javascript #webdevelopment #buildinpublic #womenintech #reactdeveloper #shecodes

Excited to share my latest front-end project: Birthday Reel Maker! 🎬 Have you ever wondered if we can generate and download an HD video directly in the browser without using any backend server, FFmpeg, or cloud API? Yes, it is 100% possible with just JavaScript! 🤯 I recently built a purely client-side web app. It takes simple user inputs (Name, Date, Sender) and automatically creates a premium 30-second birthday video reel. 🌐 Try it live here: https://lnkd.in/dmMyywXY 👈 🛠️ How it works (The Tech Stack): 🔹 HTML5 Canvas: Used to dynamically draw every single frame, including glowing particles, smart text wrapping, and glass-like cards. 🔹 MediaRecorder API: Used to capture the live canvas stream and save it directly as an .mp4 file on the user's device. 🔹 Web Audio API: Used to generate a synthetic "Happy Birthday" melody directly from code (no external MP3 files used!) and mix it with the video. 🔹 Tailwind CSS: For a modern and responsive user interface. ✨ Key Features: ✅ Zero Server Cost: The entire rendering engine runs locally in the user's browser. ✅ Dynamic Scene Cuts: The background gradient automatically changes with every new text line to keep the video engaging. ✅ Auto Audio-Video Mixing: The generated audio and canvas video streams are combined into a single, ready-to-share file. ✅ Smart Variations: The app randomly selects different scripts and shapes based on the mood (Funny, Sweet, Hype). My main goal for this project was to explore the hidden power of modern Browser APIs. As a Frontend Developer, it’s amazing to see how much heavy processing we can handle using just client-side technology! Test the live demo and let me know your thoughts in the comments! 👇 #JavaScript #FrontendDevelopment #WebAudioAPI #HTML5Canvas #Innovation #WebDevelopment #Coding #DeveloperLife #TechTrends

I’m excited to share my frontend project CANVO - a mini browser-based design tool built using HTML, SCSS and JavaScript. CANVO is a DOM-focused application where users can create and customize elements directly on a canvas. The main goal of this project was to understand how dynamic elements, layers, and property controls work using pure JavaScript without any backend integration. 🔹 Create rectangles and text elements 🔹 Drag, resize and rotate elements 🔹 Move elements using arrow keys for precise positioning 🔹 Modify width, height and position manually from the properties panel 🔹 Control layers using z-index (bring elements forward or backward) 🔹 View all created elements in a layer panel with unique IDs and select them directly 🔹 Delete elements using a button or the keyboard Delete key 🔹 Save designs using Local Storage 🔹 Download the canvas as HTML or JSON This project is focused entirely on frontend logic and DOM manipulation. Some UI components are visual-focused as the goal was to strengthen JavaScript fundamentals and understand how browser-based design tools function internally. Through CANVO, I improved my understanding of DOM manipulation, event handling, dynamic styling, layer management logic, Local Storage API, and file generation in the browser. Live Demo: https://lnkd.in/gBTweJda GitHub: https://lnkd.in/gbfPZupk Currently optimized for desktop view. Feedback is always welcome. #FrontendDevelopment #JavaScript #WebDevelopment #HTML #SCSS #PortfolioProject

🎨 Week 6 Project – Dynamic Image Gallery ✨ Error Makes Clever For Week 6, I built a Dynamic Image Gallery using React, focusing on component reusability, state management, and responsive UI design. 🔗 Live Demo 👉 https://lnkd.in/gvm9aJKP ✨ What I built 🖼️ Dynamic image gallery using array of objects 🔁 List rendering with .map() 🧩 Reusable ImageCard component 🌗 Dark / Light theme toggle using useState 📱 Fully responsive grid layout ⚡ Lazy loading images for better performance ✨ Smooth hover effects & transitions 🧼 Clean and scalable React structure 🛠️ Tech Stack • React JS • JavaScript (ES6+) • CSS3 • Unsplash Images 📚 Key Concepts Practiced • Component Composition • Props (Parent → Child data flow) • React Hooks (useState) • Conditional Styling • Event Handling • Responsive Design Principles This project strengthened my understanding of real-world React architecture, reusable components, and UI performance optimization. More features coming soon: search functionality, image modal, filtering & infinite scroll 🚀 #ErrorMakesClever #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript

As part of my frontend development learning TAP Academy, I explored the CSS Box Model, which defines the layout and spacing of elements on a webpage. 🔹 Every HTML element is treated as a rectangular box consisting of: • Content – The actual text or image inside the element • Padding – Space between the content and the border • Border – Surrounds the padding and content • Margin – Space outside the border that separates elements 🔹 Example: div { width: 200px; padding: 20px; border: 2px solid black; margin: 15px; } Understanding the box model helps in controlling spacing, alignment, and overall page layout effectively, which is essential for building responsive and clean web designs. TAP Academy #CSS #WebDevelopment #Frontend #FullStackDeveloper #LearningJourney

Interactive Valentine-themed webpages are popular these days , so I built one myself. The page asks a simple question. If the user clicks “No,” the “Yes” button grows larger and new prompts appear… because in frontend development (and life), persistence and good design can change outcomes. What this project helped me practice: • JavaScript event handling • DOM manipulation • Dynamic UI behavior • Designing engaging user interactions A fun experiment in frontend development, user psychology, and strategic button sizing 😄. Live website :- https://lnkd.in/d7MHRxsm github :- https://lnkd.in/dgRCppnR #WebDevelopment #Frontend #JavaScript #LearningByBuilding