React Portfolio Website Live: Learnings and Tech Stack

Excited to share my latest Frontend Development project! 🤍 I recently designed and built a fully responsive, modern landing page for a Coffee Shop from scratch. This project was a great opportunity to push my frontend skills further, focusing heavily on clean UI/UX, smooth interactions, and a mobile-first approach. ✨ Key Features & Technical Highlights: 1. Pixel-Perfect Responsiveness: Engineered a fluid layout using Custom CSS (Flexbox & Media Queries) ensuring the website looks flawless on all devices, from desktops to mobile screens. 2. Custom Mobile Navigation: Developed a sleek, interactive hamburger menu with smooth slide-in transitions using Vanilla JavaScript. 3. Dynamic Interactive Sliders: Successfully integrated Swiper.js to create a touch-friendly, draggable Testimonial section with custom pagination and navigation controls. 4. Modern UI Interactions: Implemented engaging hover effects, smooth scrolling, and an organized grid layout for the Menu and Gallery sections to enhance the user experience. -- Tech Stack: HTML5 | CSS3 | Vanilla JavaScript | Swiper.js You can check out the live project and the source code below: 🔗 Live Preview: https://lnkd.in/dggQH2mv 💻 GitHub Repository: https://lnkd.in/deixnFfK Building this was a fantastic learning experience, and I'm actively looking forward to applying these skills in a professional environment. I would love to hear your thoughts and feedback on the design! #WebDevelopment #FrontendDeveloper #HTML #CSS #JavaScript #WebDesign #UIUX #MERNStack #Coding #DeveloperJourney

🚀 Day 10 of my #100DaysOfCode Challenge! ⚽ I’m continuing to build out my web development foundations! 🚀 I just wrapped up a new project: a fully responsive React Feedback Form. Handling user input is such a crucial part of building interactive UIs, so I used this project to really solidify my understanding of React Hooks and state management. Here is a quick look at what I implemented: ✅ Controlled Components: Utilized the useState hook to smoothly manage dynamic inputs for Name, Email, and Feedback text. ✅ Submission Validation: Added a native window.confirm step, allowing users to review their details before the form officially submits. ✅ Responsive Design: Wrote custom CSS to ensure the UI looks clean and functions perfectly across both desktop and mobile screens. Every project feels like a solid stepping stone toward mastering frontend architecture and eventually tackling full-stack applications. Getting these core mechanics down is key! You can check out the source code and how I structured the logic over on my GitHub: 🔗 https://lnkd.in/gJ5jg3NC #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #CodingJourney #BuildInPublic

Consistency broke for a few days… but the mission didn’t. Day 19 of rebuilding my Frontend skills with #LearningToMakeLivingOnline from Talha Tariq, GreatFrontEnd. After a short break, today I focused on something every developer eventually needs: 👉 Responsive design I started making my layouts adapt to different screen sizes using: • Media queries • Flexible layouts with Flexbox • Using relative units like % and rem Why this matters: A design that looks good only on desktop is not enough anymore. Modern UIs must work smoothly across mobile, tablet, and desktop. Big realization: Building a UI is one thing. Making it work everywhere is where real frontend skills begin. What was harder for you — learning CSS or making it responsive? #webdevelopment #frontend #css #responsive #buildinpublic #developer

🚀 Excited to share my latest project: TextUtils – A React-based Text Utility App I’ve successfully built and deployed a web application that helps users efficiently analyze and manipulate text in real time. This project strengthened my understanding of React fundamentals and improved my frontend development skills. 🌐 Live Demo: https://lnkd.in/gvrHspCz 🔗 GitHub Repository: https://lnkd.in/gafAp8uf 🔧 Key Features: Convert text to Uppercase / Lowercase Remove extra spaces Copy text instantly Word & character count Reading time estimation Clean and responsive UI Dark Mode support 🌙 💻 Tech Stack: React.js JavaScript HTML & CSS 📚 What I Learned: React Hooks (useState, useEffect) State management Component-based architecture Handling user input dynamically Improving UI/UX experience This project helped me strengthen my frontend skills and understand how to build user-friendly web applications. I would really appreciate your feedback! 😊 #ReactJS #WebDevelopment #FrontendDeveloper #JavaScript #Projects #OpenToWork #Learning #Vercel

✨ Rendering Patterns in Frontend (Handwritten Notes) Frontend development has evolved a lot — from simple static pages to highly dynamic and optimized rendering strategies. In today’s post, I’ve shared my handwritten notes covering rendering patterns in depth, starting from static websites and moving towards modern approaches like CSR, SSR, ISR, and RSC. I’ve also broken down concepts like hydration and de-hydration in a simple way, so you can understand what actually happens behind the scenes when your UI loads and becomes interactive. This is not just theory — it’s a complete mental model to help you choose the right rendering strategy based on performance, SEO, and user experience. If you’re working with React or modern frameworks like Next.js, understanding these patterns will give you a huge edge in building scalable and optimized applications. 👇 Which rendering pattern do you find most confusing right now? Let’s discuss in the comments! Follow Muhammad Nouman for more useful content #learningoftheday #1000daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #Next #CodingCommunity #WebPerformance

One skill that made the biggest difference in my frontend journey: Understanding how websites actually work — not just how they look. Many beginners focus only on design. But real development starts when you understand: • Structure (HTML) • Styling (CSS) • Logic (JavaScript) • Performance & responsiveness • User experience (UI/UX) When these come together, you don’t just build websites — you build better experiences. Still learning and improving each layer step by step. Which part of frontend development do you find most challenging? #FrontendDeveloper #WebDevelopment #UIUX #LearningJourney #ReactJS

Most dropdown menus are functional. This one is memorable. I designed a Fluid Multi-Media Dropdown using React + Next.js that transforms a simple interaction into a premium UX experience. ✨ Key highlights: • Smooth spring-based expansion • Visual-first navigation with thumbnails • Smart micro-interactions (hover, chevron rotation) • Context-aware metadata & active states • Modern glassmorphism UI 💡 Why it matters: Better UI = higher engagement, lower friction, stronger brand perception. ————————— Follow me on LinkedIn, Like 👍🏻, Comment 💬 & Repost. Need a Frontend Developer partner? 👉🏻 Link in the comments. #buildinpublic #css #web #saas #producthunt #html #reactjs #nextjs #webdev #frontend #coding #programming #websites #website #landingpage #landingpages #dashboard #dashboards #producthunt #ui #uicomponents #webcomponents #ux #indiehackers #reactjs #animations #microinteractions #nextjs #html #css #webdevelopment #frontend #frontenddevelopment

Sharing My React Practice Project As part of my journey in learning React and improving my front-end development skills, I created a simple UI page for practicing component-based design and layout styling. This project focuses on building responsive cards and clean user interface elements using modern web development techniques. Technologies Used: • React.js • JavaScript • HTML5 • CSS3 What I Practiced: • Component-based UI design • Responsive layout structure • Card-based interface • Clean styling and alignment This is a small practice project, but it helped me strengthen my understanding of React fundamentals and front-end development. 🔗 GitHub Repository: https://lnkd.in/dVj5mWhH #React #FrontendDeveloper #WebDevelopment #JavaScript #LearningJourney #SoftwareDevelopment

Multi-page navigation sounds simple until you try to make it feel truly seamless — here's what I learned building it. 16-web-editorial-layouts is a TypeScript/React app demonstrating editorial layout patterns with clean multi-page navigation — a reference implementation for content-heavy web apps. Tech highlights: • TypeScript + React for type-safe component composition across pages • React Router for declarative client-side routing • Editorial grid layouts tuned for readability and content flow • GitHub Actions CI/CD with security scanning on every push Building editorial layouts taught me that typography, whitespace, and reading flow are engineering decisions, not just design preferences. Good layout code is surprisingly opinionated once you commit to it. What's hardest about multi-page routing in React for you — state persistence, scroll behavior, or transitions? #React #TypeScript #Frontend #WebDesign #EditorialDesign

React System Design Day - 11 Frontend Performance Matters – Core Web Vitals As frontend developers, we don’t just build UI — we design experiences. Google’s Core Web Vitals are key metrics every engineer should know: 1]LCP (Largest Contentful Paint): Measures loading speed. Target ≤ 2.5s. 2]CLS (Cumulative Layout Shift): Tracks visual stability. Target ≤ 0.1. 3]INP (Interaction to Next Paint): Evaluates responsiveness. Target ≤ 200ms. Why it matters: Faster load times = better user engagement Stable layouts = fewer frustrated clicks Smooth interactions = higher conversions Optimization Tips: Compress and lazy‑load images for LCP Reserve space with width/height attributes to avoid CLS Minimize heavy JS and use memoization for INP Tools like Google Lighthouse and PageSpeed Insights help measure and improve these metrics. #FrontendDevelopment #ReactJS #WebPerformance #CoreWebVitals #WebDevelopment #JavaScript #InterviewPreparation #DeveloperCommunity #TechJourney