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

UI Before vs After — Small Changes, Big Impact 🚀 Recently, I improved the UI of a React Native screen to make it cleaner and more user-friendly. Here’s what changed: 🔹 Before • Cluttered layout • Inconsistent spacing • Poor visual hierarchy 🔹 After • Clean and minimal design • Proper spacing and alignment • Better readability and user flow What I focused on: • Consistency in design • Better use of spacing • Simpler and clearer UI What I learned: Good UI isn’t about adding more — it’s about removing what’s unnecessary. Small improvements can create a big impact on user experience. Still learning. Still improving 🚀 Which version do you prefer — Before or After? #UIUX #ReactNative #FrontendDeveloper #SoftwareEngineer #MobileDevelopment #DesignImprovement

#Frontend is not just about making things look good. It is about making things feel right. A great UI can attract users, but a great experience makes them stay. Fast loading, smooth interactions, clean structure, and responsive design — that is real frontend power. Frontend developers do not just build screens. They build trust, usability, and product experience. Design gets attention. Performance gets respect. That’s why frontend is no longer “just UI” — it is one of the strongest parts of any digital product. #Frontend #WebDevelopment #FrontendDeveloper #UI #UX #ReactJS #NextJS #JavaScript #Performance #Coding #SoftwareDevelopment

🚀 Optimistic UI: Speed isn’t backend… it’s perception. Stop waiting for the server to respond. Update the UI first, sync later. 💡 What it means: → Assume success → Instantly reflect changes in UI → Rollback only if it fails ⚡ Why it matters: • Zero waiting feel • Snappier UX • Higher user trust & engagement 🧠 Where it shines: ✔ Likes / reactions ✔ Form submissions ✔ Chat messages ✔ Toggles & quick actions ⚠️ But don’t overuse: • Critical transactions? Be careful • Always handle failures gracefully 👉 Real UX isn’t just fast systems… …it’s fast feedback. #Frontend #ReactJS #UXDesign #WebDevelopment #Performance #JavaScript

Today, I focused on improving the user management interface and strengthening the role-based access control architecture in our application. The goal was to align the frontend experience with our strict backend hierarchy rules while polishing the overall UI. Here is a breakdown of the technical changes implemented:  • 𝗦𝘁𝗿𝗲𝗮𝗺𝗹𝗶𝗻𝗲𝗱 𝗗𝗮𝘁𝗮 𝗧𝗮𝗯𝗹𝗲 𝗔𝗰𝘁𝗶𝗼𝗻𝘀: Redesigned the user management table by moving secondary actions, such as "𝗧𝗿𝗮𝗻𝘀𝗳𝗲𝗿 𝗢𝘄𝗻𝗲𝗿𝘀𝗵𝗶𝗽" 𝗮𝗻𝗱 "𝗥𝗲𝗺𝗼𝘃𝗲 𝗨𝘀𝗲𝗿", into a dedicated ellipsis dropdown menu. This cleans up the interface and preserves valuable horizontal screen space.  • 𝗔𝗰𝗰𝘂𝗿𝗮𝘁𝗲 𝗥𝗼𝗹𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴: Updated the backend services to eager-𝗹𝗼𝗮𝗱 𝗻𝗲𝘀𝘁𝗲𝗱 𝗺𝗲𝗺𝗯𝗲𝗿𝘀𝗵𝗶𝗽 𝗮𝗻𝗱 𝗼𝗿𝗴𝗮𝗻𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗿𝗲𝗹𝗮𝘁𝗶𝗼𝗻𝘀. This ensures the frontend accurately reads and displays each user's current role inside the selector.  • 𝗣𝗿𝗼𝘁𝗲𝗰𝘁𝗲𝗱 𝗢𝘄𝗻𝗲𝗿 𝗦𝘁𝗮𝘁𝘂𝘀: Addressed an edge case where the "Owner" role was not rendering correctly. The role is now properly mapped in the UI and hard-disabled in the selection 𝗱𝗿𝗼𝗽𝗱𝗼𝘄𝗻 𝘁𝗼 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝘂𝗻𝗮𝘂𝘁𝗵𝗼𝗿𝗶𝘇𝗲𝗱 𝗼𝗿 𝗮𝗰𝗰𝗶𝗱𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀.   • 𝗦𝗲𝗮𝗺𝗹𝗲𝘀𝘀 𝗖𝘂𝘀𝘁𝗼𝗺 𝗠𝗼𝗱𝗮𝗹𝘀: Replaced all native browser alert and confirm popups with custom modal dialogs. These new components match our application's light theme, complete with improved typography, spacing, and interactive button states.  • 𝗦𝘁𝗿𝗶𝗰𝘁 𝗛𝗶𝗲𝗿𝗮𝗿𝗰𝗵𝘆 𝗘𝗻𝗳𝗼𝗿𝗰𝗲𝗺𝗲𝗻𝘁: Integrated the backend role ranking system (𝗢𝘄𝗻𝗲𝗿, 𝗠𝗮𝗻𝗮𝗴𝗲𝗿, 𝗔𝗱𝗺𝗶𝗻, 𝗛𝗥, 𝗠𝗲𝗺𝗯𝗲𝗿) directly into the frontend logic. The UI now dynamically evaluates the logged-in user's rank against the target user's rank. It automatically disables the ability to remove, modify, or promote anyone of an equal or higher rank.  • 𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗔𝗱𝗱 𝗨𝘀𝗲𝗿 𝗙𝗹𝗼𝘄: Built a complete workflow to add existing 𝘂𝘀𝗲𝗿𝘀 𝘁𝗼 𝗮𝗻 𝗼𝗿𝗴𝗮𝗻𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘃𝗶𝗮 𝗲𝗺𝗮𝗶𝗹. Developed a new secure backend endpoint and connected it to a frontend modal. This feature is strictly conditionally rendered so that only Admins, Managers, and Owners can access it, and the assignable roles are dynamically restricted based on the active user's rank. These updates result in a much more robust, secure, and visually cohesive administrative dashboard. #SoftwareEngineering #FrontendDevelopment #BackendDevelopment #ReactJS #NestJS #RoleBasedAccessControl #WebDevelopment #UIUX #BuildInPublic

If you've ever tried to build a drag-and-drop grid in React Native, you know the struggle. Getting those smooth, fluid animations while items reshuffle their positions without dropping frames is a massive performance hurdle. Most solutions end up feeling "janky" because they can't handle the heavy layout calculations fast enough on the main thread. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗿𝗲𝘀𝗵𝘂𝗳𝗳𝗹𝗲𝗱 is a specialised grid layout library designed to solve exactly that. 𝗪𝗵𝗮𝘁’𝘀 𝗶𝗻𝘀𝗶𝗱𝗲? ➡️ 𝗡𝗶𝘁𝗿𝗼-𝗽𝗼𝘄𝗲𝗿𝗲𝗱 𝗘𝗻𝗴𝗶𝗻𝗲: The library now utilises 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗶𝘁𝗿𝗼-𝗺𝗼𝗱𝘂𝗹𝗲𝘀. This allows for near-instant communication between the native side and JavaScript, ensuring that complex grid reshuffling remains butter-smooth even with dozens of items. ➡️ 𝗼𝗻𝗗𝗿𝗮𝗴𝗘𝗻𝗱 𝗪𝗼𝗿𝗸𝗹𝗲𝘁 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀: You can now execute custom logic directly on the 𝗨𝗜 𝘁𝗵𝗿𝗲𝗮𝗱 when a drag interaction finishes. By using 𝘄𝗼𝗿𝗸𝗹𝗲𝘁𝘀, you bypass the asynchronous nature of the standard bridge, allowing for immediate response and state synchronisation. ➡️ 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗲𝗱 𝗚𝗿𝗶𝗱 𝗟𝗼𝗴𝗶𝗰: The underlying reshuffling algorithm has been refined to handle dynamic item movements more predictably, eliminating the "flicker" often seen in less optimised grid libraries. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? The biggest challenge in mobile UI development isn't just making it look good—it's making it feel responsive. By leveraging 𝗡𝗶𝘁𝗿𝗼 and 𝘄𝗼𝗿𝗸𝗹𝗲𝘁𝘀, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗿𝗲𝘀𝗵𝘂𝗳𝗳𝗹𝗲𝗱 minimises the execution time for expensive layout changes. It transforms the drag-and-drop experience from a heavy JavaScript task into a high-performance native interaction. If you're building a dashboard, a photo gallery, or a customisable home screen, this update makes 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗿𝗲𝘀𝗵𝘂𝗳𝗳𝗹𝗲𝗱 one of the most performant ways to handle interactive grids in the ecosystem right now. #ReactNative #NitroModules #MobileDev #OpenSource #JavaScript #TypeScript #UIUX #GridToolkit #SoftwareEngineering #Reanimated #DeveloperTools #MobileApps

🚀 From Pixels to Performance: My Journey as a Front-End Developer Over the past few years, I’ve realized that front-end development is no longer just about making things “look good.” It’s about crafting experiences that are fast, accessible, and meaningful. As someone working at the intersection of Front-End Development, UX Design, and Web Performance, here are a few lessons I’ve learned: ✨ Design is not decoration Good UI isn’t about trends—it’s about clarity, usability, and guiding users effortlessly. ⚡ Performance = User Experience A 1-second delay can cost engagement. Optimizing load times, lazy loading, and efficient rendering aren’t “nice-to-haves” anymore—they’re essential. 🧠 Think like a user, build like an engineer Balancing empathy with technical precision is what separates good developers from great ones. 🔧 Tools evolve, fundamentals stay Frameworks change (React, Next.js, etc.), but strong JavaScript, clean architecture, and problem-solving skills remain timeless. 📈 Continuous learning is the real skill From improving accessibility standards to exploring modern UI patterns, staying curious is the biggest advantage in tech. Right now, I’m focused on building scalable, user-centric web experiences and continuously sharpening my skills in front-end architecture and UX thinking. 💬 I’d love to hear from others in the space: What’s one front-end or UX principle you swear by? #FrontendDevelopment #WebDevelopment #UXDesign #JavaScript #React

First impressions matter—and so does user feedback. I built a high-end feedback component for the Bundance platform that turns a simple interaction into a seamless UX experience. No page reloads. No friction. Just smooth transitions powered by React state management and motion design. ✨ Smart category selection (Bug, Idea, Improve, General) ✨ Dynamic UI expansion with contextual inputs ✨ Progressive disclosure for better usability ✨ Micro-interactions that guide users naturally This isn’t just UI—it’s conversion-focused frontend engineering. 💻 Code: https://lnkd.in/esAKgg3s Follow me on LinkedIn, Like 👍🏻, Comment 💬 & Repost ♻️ Need a Frontend Developer partner? 👉🏻 Link in the comments #buildinpublic #css #web #saas #html #reactjs #nextjs #webdev #frontend #coding #programming #websites #website #landingpage #landingpages #dashboard #dashboards #producthunt #ui #uicomponents #webcomponents #ux #indiehackers #animations #microinteractions #webdevelopment #frontend #frontenddevelopment

🚆 Day 8 of #100DaysOfCode — React Notification System Today I built a React-based Train Booking UI with a dynamic notification system that responds to user actions in real time. 🌐 Live Demo: https://lnkd.in/guFw3yhK 🔗 GitHub Repo: https://lnkd.in/gxqHGn8d 🔔 When users click “Book Now”, they instantly get feedback based on train availability — making the experience more interactive and user-friendly. ✨ Key Features: ✅ Reusable components (Navbar, Button, TrainCard) ✅ Dynamic notification system (Success, Warning, Error, Info) ✅ Conditional rendering using React ✅ Clean UI with Tailwind CSS ✅ State management using useState 💡 What I learned: How to pass functions as props Handling user events efficiently Managing UI state for real-time feedback Building reusable and scalable components 🚀 This project helped me understand how real-world apps give instant feedback to users — a small feature that makes a big impact on UX. #React #JavaScript #FrontendDevelopment #WebDevelopment #100DaysOfCode #ReactJS #CodingChallenge #TailwindCSS #UIUX #GitHubProjects #ReactNotifications #Props #PropsNotification #Entri #EntriElevate Grateful for the guidance and support from my mentor Lakshmi Narasimhan

🚀 Building RankU1_Exam_Preparation_Hub – A full-stack MERN project designed for scalable exam preparation. Sharing the technical architecture & component flow. I'm excited to share the system design & component flow for RankU1, an exam preparation platform built to handle complex test series and dynamic content. 🛠️ Technical Stack: Frontend: React.js (v19) with React Router DOM for client-side routing. Backend: Node.js with Express.js (REST APIs). Database: MongoDB for flexible, document-based data storage. Key Libraries: Axios for API integration, Lucide-react for icons. 📁 Core Module Architecture (TestSeries): The project follows a modular, component-driven structure to ensure reusability and clean separation of concerns: /pages/TestSeries : Main container views (Home, Detail, ExamStructure). /Components/ScreenLayouts : Feature-specific UI blocks (Hero sections, Search, Test Catalogs). /Components/Common : Reusable UI primitives (BackButton, Badges). /Data : Local JSON data structures for mock test series and categories. 🔀 Key Workflows & Logic: Dynamic Test Catalog: Conditional rendering of test cards based on: Auth Status (FreeTest vs. LoginRequired) Availability (Scheduled vs. AvailableSoon) Client-Side Routing: Nested routes for /test-series to handle detail views without full page reloads. Responsive Layout: Custom CSS modules for scoped, maintainable styling across devices. 🔧 Git Workflow in Action: Feature branch (pooja) development for isolated changes. Used git revert to safely undo a push to main without affecting collaborators. Pushed full module to remote branch preserving history. 📊 Flowcharts & Visuals: Check out the detailed UI flow and component hierarchy in the Behance link below. I'm open to feedback, collaboration, or technical discussions! ♻️ #MERN #ReactJS #NodeJS #MongoDB #FullStackDevelopment #ExamPrepApp #SystemDesign #GitWorkflow