I didn’t want another “scroll + cards” portfolio. So I built mine like a tool I actually use every day — an IDE inspired by VS Code File explorer 📂 • Tabs 🗂️ • Command palette ⌘ • Themes 🎨 • Copilot-style panel 🤖 Not for aesthetics — but to rethink how developers *navigate and read* content. It forced me to focus on: ⚡ Layout performance ⌨️ Keyboard-first interactions 🧭 Real navigation state (not just sections on a page) Built with React + Vite, structured like a small product — not a landing page. 🔗 https://mohitkuril.xyz/ If the UI feels familiar, that’s intentional 😉 If you notice anything in the UI/UX or functionality that could be improved, I’d genuinely appreciate your feedback — feel free to reach out and discuss. What would you add to a command palette in your own portfolio? #FrontendDevelopment #ReactJS #WebDevelopment #UIDesign

#FrontendFridays - Smart Form Validation This week, I built a Smart Form Validation component focused on improving user input experience in forms. The form validates user input in real time and on blur, providing clear inline feedback for each field, along with visual states for both errors and successful input. Key highlights: • Inline validation for Name, Email, and Password • On blur validation with instant feedback • Error and success states with visual cues • Clean and reusable form structure Form validation is a small detail, but it plays a critical role in usability and overall user experience in real-world applications. Live Demo: https://lnkd.in/dJgv-mvc Continuing to build practical UI components that reflect real product scenarios. #FrontendFridays #FrontendDevelopment #WebDevelopment #UIUX #JavaScript #CSS #HTML

#FrontendFridays - Loading to Success Button This week, I built a simple yet practical UI interaction that transitions a button from a loading state to a success state. This pattern is commonly used in real-world scenarios like form submissions and API calls to provide clear user feedback. Key highlights: • Loading spinner with disabled state • Smooth transition to success feedback • Auto reset after completion • Lightweight and reusable component Live Demo: https://lnkd.in/gZ2jgKYy Continuing to explore small UI interactions that improve user experience with minimal code. #FrontendFridays #FrontendDevelopment #WebDevelopment #UIUX #JavaScript #CSS #HTML

🔐 Built a Clean & Interactive OTP Input Component using React Recently, I worked on building a fully functional OTP (One-Time Password) input UI with a focus on both user experience and real-world usability. ✨ Key Features: • Auto-focus on next input while typing • Backspace navigation (moves to previous input) • Input validation (only digits allowed) • Clean and responsive UI with modern styling • Ref handling using useRef for DOM control 💡 This is a commonly asked frontend interview question in companies like Microsoft, Google, Atlassian, etc., and a great example of how DSA + DOM manipulation + UX thinking come together in real-world applications. 🧠 What I learned: Managing focus dynamically, handling edge cases (like backspace & paste), and building a smooth user experience using React hooks. 🚀 Live demo & code: 👉 GitHub: https://lnkd.in/ga92Jib9 Would love to hear your feedback and suggestions! #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #UIUX #Coding #InterviewPreparation #100DaysOfCode

Quick frontend experiment 👨💻 While focusing mainly on backend development, I tried building a small 3D interactive UI component where the object reacts to cursor movement. Not my primary domain, but I wanted to explore how user interactions can enhance overall experience. It was interesting to see how small visual details can make an interface feel more dynamic and engaging. For me, this was more about learning and stepping slightly outside my comfort zone. #Learning #WebDevelopment #StudentDeveloper #Exploration

Just discovered an amazing resource for developers! If you're into frontend or full-stack development, you should definitely check out Uiverse 👉 https://uiverse.io/ It’s a collection of beautifully crafted UI components built using HTML, CSS, and JavaScript — perfect for: ✨ Getting design inspiration ✨ Speeding up your development workflow ✨ Exploring creative UI patterns Whether you're building from scratch or just need a quick idea to elevate your project, this platform is a goldmine. Highly recommended for developers who love clean, modern UI 👨💻🔥 #WebDevelopment #FullStack #Frontend #UIUX #JavaScript #Developers #Coding #Inspiration

🧮 𝑆𝑖𝑚𝑝𝑙𝑒 𝐶𝑎𝑙𝑐𝑢𝑙𝑎𝑡𝑜𝑟 | 𝐹𝑟𝑜𝑛𝑡-𝐸𝑛𝑑 𝑃𝑟𝑜𝑗𝑒𝑐𝑡 Excited to share a project I recently built using 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒, and 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — a modern, responsive calculator designed with a strong focus on clean UI, usability, and smooth user experience. 🔹 Implements core arithmetic operations with real-time calculations 🔹 Built using DOM manipulation to handle interactive button inputs 🔹 Fully responsive design that works across different screen sizes 🔹 Lightweight and fast performance with clean code structure Through this project, I strengthened my understanding of JavaScript logic, event handling, and dynamic UI updates, while also improving my front-end development skills. I also explored how small UI decisions can significantly improve user experience and interaction flow. 🌐 Live Demo: https://lnkd.in/gcsCzzTa 💻 GitHub: https://lnkd.in/gDZetHBU Looking forward to enhancing this project further with features like: 🕘 History tracking 🌙 Dark mode ➗ Advanced operations 🎨 UI animations Always learning, always building 🚀 #FrontendDevelopment #JavaScript #WebDevelopment #HTML #CSS #StudentDeveloper #Projects #BuildInPublic

🚀 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

I built a production-grade web app almost entirely through vibecoding. And no, I'm not walking it back. 𝗧𝗵𝗲 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝘄𝗲 𝘀𝗼𝗹𝘃𝗲𝗱 Warehouse associates managing liquidation and donation inventory need a fast, reliable way to decide where shipments go — liquidation vendors, charities, or school districts. I built a dashboard that lets warehouse users save multiple shipping addresses per inventory location and decide where each shipment ships. Real users. Real operational decisions. Not a toy app. 𝗧𝗵𝗲 𝘀𝘁𝗮𝗰𝗸 Next.js 16 · React 19 · TypeScript · Tailwind v4 · Figma SDS + Figma MCP · Cursor + Claude + Vercel 𝗛𝗼𝘄 𝗶𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝗲𝗱 1️⃣ 𝗙𝗶𝗴𝗺𝗮 𝗠𝗖𝗣 𝗮𝘀 𝗮 𝗽𝗿𝗲𝗰𝗶𝘀𝗶𝗼𝗻 𝗶𝗻𝘀𝘁𝗿𝘂𝗺𝗲𝗻𝘁 Not "look at this screenshot and guess." The MCP server extracted exact node IDs, pulled semantic token names from annotations, and flagged every deviation from the design system spec. Design-to-code with receipts. 2️⃣ 𝗧𝗼𝗸𝗲𝗻 𝗺𝗮𝗽𝗽𝗶𝗻𝗴 𝗮𝘀 𝗮 𝗳𝗶𝗿𝘀𝘁-𝗰𝗹𝗮𝘀𝘀 𝘁𝗮𝘀𝗸 430 lines. 186 tokens. 8 UI sections. Every color, radius, spacing and typography value traced back to a DS variable. tokens.css = single source of truth. 3️⃣ 𝗔𝘂𝗱𝗶𝘁𝗶𝗻𝗴 𝗵𝗮𝗿𝗱𝗰𝗼𝗱𝗲𝗱 𝘃𝗮𝗹𝘂𝗲𝘀 13 of 20 originally hardcoded values resolved to DS tokens. The remaining 7 are each documented with an explicit reason why no token equivalent exists. Principal engineers don't just fix — they log reasoning. 4️⃣ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗮𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲, 𝗻𝗼𝘁 𝘀𝗼𝘂𝗽 NavigationSidebar · PageHeader · MetricsRow · MapContainer · SearchResultCard · AddAddressModal — each with single responsibility, typed props, and token-driven styles. 𝗧𝗵𝗲 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 The developers winning with AI aren't ignoring architecture. They understand design systems deeply enough to direct the AI precisely — and catch it when it drifts. Vibecoding is a force multiplier. But only if you bring the rigor it multiplies. 👉 Live app: https://lnkd.in/gmS-k4Pf 👉 GitHub: https://lnkd.in/g_Htfn_m 👉 Figma: https://lnkd.in/gZ-6yTMn What's your experience building production apps with AI? 👇 #vibecoding #AIEngineering #NextJS #Figma #DesignSystems #FrontendDevelopment #ReactJS #DesignTokens #SoftwareEngineering #Cursor Figma Cursor Vercel Anthropic

Just built a Random GIF Generator using React! 🎉 It's a small project, but it packs some solid React concepts: 🔹 Custom Hook (useGif) — abstracted all the API logic away from the UI, keeping components clean and reusable 🔹 Conditional Rendering — swaps in a spinner while the GIF loads, so the UX feels smooth 🔹 Axios + Giphy API — fetching random GIFs, with optional tag-based filtering 🔹 Two components, one hook — Random fetches any GIF, Tag lets you search by keyword The thing I'm most proud of? The useGif custom hook. One hook, two completely different components, zero duplicated fetch logic. That's the magic of React hooks. ✨ Every small project teaches something new. This one reinforced how powerful custom hooks are for separating concerns. Inspired by @Love Babbar's teachings! What's a small project that taught you a big lesson? Drop it in the comments 👇 #React #JavaScript #WebDevelopment #FrontendDevelopment #ReactHooks #BuildInPublic