Portfolio Update: Modern React Application with Vite and TailwindCSS

🚀 Just Built: FixTheUI – Because good UI isn’t optional anymore. Ever visited a website that works… but just feels off? Bad spacing, poor responsiveness, clunky design? That’s exactly what inspired me to build FixTheUI. 💡 What is FixTheUI? A project focused on refining and upgrading existing UI designs — not from scratch, but by improving what already exists. Because in real-world development, you don’t always build new apps… you fix and improve existing ones. ✨ What I focused on: 🎨 Clean and modern UI redesign 📱 Fully responsive layouts (mobile → desktop) 🧩 Better component structure ⚡ Improved user experience & interactions 🧹 Cleaner, more maintainable code 🛠️ Tech Stack: React + Vite Tailwind CSS ESLint Deployed on Vercel 🌐 Check it out: 🔗 Live Demo: https://lnkd.in/eWmxTha2 📂 GitHub: https://lnkd.in/e6pdhviy 🧠 What I learned: UI is not just design, it’s experience Small changes = big impact Writing clean UI code matters as much as functionality 💬 Feedback? I’d love to hear your thoughts 👇 What would YOU improve in this UI? #React #Frontend #WebDevelopment #UIUX #TailwindCSS #JavaScript #BuildInPublic

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

"The Unified Search Engine for the Modern Developer’s Icon Workflow." https://svgiconsstock.com/ In the fast-paced world of web development, efficiency is the difference between shipping on time and falling behind. SVGIconsStock was born out of a simple frustration: the endless context-switching between different icon libraries, CDNs, and documentation pages. We’ve built a centralized discovery experience that bridges the gap between designers and developers. SVGIconsStock isn't just another asset gallery; it’s a high-performance utility built with Next.js that allows you to search, filter, and preview icons from multiple open-source libraries within a single, consistent interface. Whether you are looking for the perfect SVG for a landing page or managing a custom internal library for a design system, SVGIconsStock provides the tools to evaluate and integrate assets instantly. With our "Copy-to-Code" snippets and modular architecture, we remove the friction from frontend development, letting you focus on building great products rather than hunting for assets. Key Features & Capabilities Unified Discovery: One search bar to rule them all. Access thousands of icons across various popular libraries without leaving the platform. Developer-First Workflow: Get library-specific usage snippets (React, Vue, SVG, or Tailwind) for immediate implementation. Next.js Powered Speed: Experience lightning-fast filtering and instant previews thanks to a modern, modular component architecture. Custom Asset Management: A dedicated admin workflow for uploading, organizing, and tagging custom SVG assets for your specific projects. Designer-Friendly Interface: A clean, responsive UI that makes asset evaluation simple for both technical and creative team members. #SVGIconsStock #WebDev #UIUX #NextJS #Frontend #DesignSystem #SVGIconsStock #SVG #WebDevelopment #DeveloperTools #ReactJS #UIUXDesign #OpenSource #Productivity #NextJS #FrontendWorkflow

🚀 𝗘𝘅𝗰𝗶𝘁𝗲𝗱 𝘁𝗼 𝘀𝗵𝗮𝗿𝗲 𝗺𝘆 𝗹𝗮𝘁𝗲𝘀𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁: 𝗗𝗶𝗴𝗶𝗧𝗼𝗼𝗹𝘀 𝗣𝗹𝗮𝘁𝗳𝗼𝗿𝗺! 🛒💻 I recently built a modern, responsive eCommerce web application designed for exploring and purchasing premium digital tools. This project was an excellent opportunity to deepen my understanding of React state management and dynamic UI rendering! ✨ 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 & 𝗪𝗵𝗮𝘁 𝗜 𝗕𝘂𝗶𝗹𝘁: 🔹 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗖𝗮𝗿𝘁 𝗦𝘆𝘀𝘁𝗲𝗺: Developed a seamless shopping cart where users can add products, remove individual items, automatically calculate totals, and proceed to checkout. 🔹 𝗧𝗮𝗯𝗯𝗲𝗱 𝗕𝗿𝗼𝘄𝘀𝗶𝗻𝗴: Designed an intuitive interface allowing users to toggle smoothly between the main Products gallery and their personal Cart. 🔹 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗡𝗼𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀: Integrated React-Toastify to provide users with instant, elegant feedback for actions like adding/removing items or completing a successful checkout. 🔹 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁: Managed complex component states to prevent duplicate cart additions and dynamically update UIs (like changing a "Buy Now" button to an inactive "Added to Cart" state). 🛠️ 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: React.js | Tailwind CSS | Vite | React-Toastify | JavaScript (ES6+) Building this application reinforced my skills in component-driven architecture, conditional rendering, and creating user-centric frontend experiences. 🔗 𝗟𝗶𝘃𝗲 𝗣𝗿𝗲𝘃𝗶𝗲𝘄: https://lnkd.in/eJVHjRew 💻 𝗚𝗶𝘁𝗛𝘂𝗯 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝘆: https://lnkd.in/eCQiGmsr I'd love to hear your thoughts and feedback! Let me know what you think in the comments. 👇 #WebDevelopment #ReactJS #Frontend #TailwindCSS #Vite #JavaScript #CodingJourney #BuildInPublic

Day 40–41 of My Web Development Journey ⚛️ These two days were all about taking my React Routing skills to the next level 🚀 Now it’s not just navigation… it’s programmatic control + modern routing + better UX 😤🔥 What I worked on: 🔹 useNavigate() (Programmatic Navigation) • Redirect users after login/logout • Navigate using logic instead of clicks • Used navigate("/dashboard") Real-world use case unlocked 🔥 Outlet (Nested Routing) • Used <Outlet /> to render child routes • Understood layout-based routing • Built structure like dashboard → profile/settings createBrowserRouter (Modern Routing ⚡) • Learned new object-based routing system • Cleaner and scalable approach • Used with <RouterProvider /> This is how modern React apps are built NavLink (Active Links 🎯) • Styled active routes automatically • Used isActive for dynamic styling • Perfect for navbars Key Learning 💡 Routing is not just about moving between pages It’s about controlling flow, structure, and user experience Big Realization 🚀 Earlier: Basic navigation using Link Now: Programmatic routing + nested layouts + active states Frontend is getting more real every day 💯 Day 40–41 #ReactJS #JavaScript #FrontendDevelopment #ReactRouter #SheriyansCodingSchool #CodingJourney #BuildInPublic #WebDevelopment

🚀 Excited to share our latest web development project: Jimmy's Café! ☕ As a computer science student passionate about software engineering, I love building practical projects to apply what I learn. Recently, I had the pleasure of collaborating with an amazing team to develop the front-end for a modern coffee shop, focusing on a sleek dark theme and a smooth user experience (UX). Here are the key features we worked on: Authentication UI: Clean and interactive Sign-Up and Log-In forms. Interactive Menu & Ordering: Users can browse signature drinks, view an Order Summary, and seamlessly confirm their orders. Smooth Navigation: Fully integrated routing across the Home, Menu, About, and Contact pages. Modular Architecture: We prioritized writing clean, scalable code by ensuring strict separation of concerns in our CSS, keeping styles for different components completely independent and organized. A huge shoutout to my brilliant teammates who made this possible. It was a great experience working together: 👏 Ahmed Gamal 👏 Hassan Alagoza 👏 Mahmoud Sedky 👏 Youssef Reda This project was a fantastic opportunity for all of us to refine our front-end skills, focus on UI design, and practice structuring a web application properly as a team. #WebDevelopment #Frontend #SoftwareEngineering #TeamWork #UIUX #HTML #CSS #JavaScript #CleanCode

🚀 Just built and deployed my personal portfolio Instead of just listing skills, I wanted to create something that actually reflects how I think and build. 🔧 What’s inside: • Projects I’ve worked on (with real use cases) • Clean and minimal UI focused on user experience • Structured layout for quick navigation • Interactive elements to make it engaging 🧠 What I focused on: • Simplicity over clutter • Smooth user flow • Making it feel like a product, not just a page ⚙️ Tech stack: • React + Vite • JavaScript, CSS 🔗 Live: https://lnkd.in/dz-hPi2m 💻 GitHub: https://lnkd.in/dBWRNwXm Would appreciate feedback 🙌 #Portfolio #WebDevelopment #Frontend #Developer #BuildInPublic #Students #Projects #UIUX #Learning #eduveda #project

• Tailwind CSS + shadcn/ui — Building Modern UI, Faster Creating great UI isn’t just about design — it’s about speed, consistency, and scalability. Tailwind CSS and shadcn/ui together make this process simple and efficient. • Tailwind CSS gives you a utility-first approach, helping you design directly in your markup without writing custom CSS every time. • shadcn/ui provides beautifully designed, accessible components that you can reuse and customize easily. When combined: 👉 You build UI faster with less effort 👉 Maintain consistent design across your app 👉 Customize everything without limitations 👉 Improve accessibility by default • In simple terms: Tailwind handles styling and flexibility shadcn/ui provides structure and reusable components This combination helps developers focus more on building user experiences instead of managing UI complexity. ~ Why it matters Modern applications demand clean design systems and fast development — and this stack delivers both. ~ Build interfaces that are not just beautiful, but scalable and production-ready. #NextJS #TailwindCSS #shadcnui #FrontendDevelopment #WebDevelopment #UIUX #ReactJS #JavaScript #Developers #DesignSystems #SoftwareEngineering #SaaS #SIRISAPPS