Badis HANZOUTI’s Post

Day 16/21: Building Interactive Auth UIs in React! Authentication is the gateway to almost every modern web application. For Day 16 of my challenge, I moved beyond the product display and built a fully responsive Login & Signup UI from scratch. 🛠️ What I Implemented: State-Driven Navigation: Used React useState to toggle between Login and Signup modes seamlessly within a single component. Dynamic Form Rendering: Practiced conditional rendering to change headings, input fields, and buttons based on the user's intent. Consistent Branding: Leveraged Tailwind CSS to maintain a cohesive dark-themed aesthetic that matches my product catalog. UX Focus: Added intuitive "Sign up" and "Sign in" toggles at the bottom to ensure a frictionless user experience. 💡 The Engineering Challenge: As a Computer Science Engineer, I focused on keeping the component logic clean and reusable. Managing form states and ensuring the modal remains centered and responsive across all viewports was a great exercise in CSS Flexbox and React's lifecycle. Rebuilding my React skills through these daily sprints is proving to be incredibly effective. Seeing a static design come to life with logic is what I love most about development! 🔗 GitHub Repo: https://lnkd.in/g4gUwsjX Live URL : https://lnkd.in/gvkYUNAh #ReactJS #TailwindCSS #FrontendDevelopment #AuthUI #UserExperience #21DaysOfLinkedIn #MERNStack #CodingChallenge #CSByHeart

One thing frontend has taught me: small details matter more than we think. Users won’t say, “Wow, great state management.” But they will notice: - When a page feels slow - When a button doesn’t respond instantly - When a form is confusing - When something just feels off - An unexpected scroll jump. These things seem small while building… but they shape the whole experience. We need to be aware of how tiny decisions affect real people using the product. Still improving every day — one small fix at a time. #Frontend #WebDevelopment #UI #JavaScript #Learning

At some point, I realized something: Pretty UI doesn’t make products successful. - Clarity does. - Speed does. - Psychology does. Now, when I design with React & Next.js, I think: - Where will users hesitate? - What will confuse them? - How can AI assist them here? - What action do I want them to take? Frontend isn’t decoration. It’s controlled persuasion. #FrontendDeveloper #UXDesign #ReactJS

🚀 Built a Custom OTP Input Field using React.js Excited to share my latest mini project — an interactive OTP (One-Time Password) input component built using React Hooks. 🔧 Features: ✔️ Auto focus to next input ✔️ Backspace moves to previous field ✔️ Arrow key navigation (Left & Right) ✔️ Only numeric input allowed ✔️ Clean and reusable component structure 🛠 Tech Used: React.js useState useRef useEffect JavaScript (Event Handling) This project helped me strengthen my understanding of: 👉 Controlled components 👉 DOM manipulation using useRef 👉 Keyboard event handling 👉 Better UX design practices Always learning and improving 🚀 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Learning #100DaysOfCode

𝐄𝐯𝐞𝐫 𝐡𝐚𝐝 𝐑𝐞𝐚𝐜𝐭 𝐦𝐞𝐬𝐬 𝐰𝐢𝐭𝐡 𝐲𝐨𝐮𝐫 𝐬𝐜𝐫𝐨𝐥𝐥 𝐩𝐨𝐬𝐢𝐭𝐢𝐨𝐧 𝐨𝐫 𝐟𝐨𝐜𝐮𝐬 𝐚𝐟𝐭𝐞𝐫 𝐚 𝐬𝐭𝐚𝐭𝐞 𝐮𝐩𝐝𝐚𝐭𝐞? 𝐈'𝐯𝐞 𝐛𝐞𝐞𝐧 𝐭𝐡𝐞𝐫𝐞. Building dynamic UIs like chat windows or activity feeds, you often hit a snag: new data loads, and suddenly the user's view jumps, or an input loses focus. `useState` handles the data, but it doesn't inherently manage DOM positions or focus. I recently tackled this by leaning into `useRef` and `useEffect`. Instead of just grabbing a static element, I used `useRef` to maintain a persistent, mutable reference to a specific child element within a dynamically rendered list. After the list updated (tracked with `useEffect`), I'd programmatically call `elementRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })` to bring that specific item back into the user's viewport. It's a powerful pattern for bridging the declarative React world with necessary imperative DOM manipulations, ensuring a smoother UX without triggering unnecessary re-renders. Great for those 'sticky' UI elements or always-visible 'new message' indicators. How do you handle focus and scroll management in your complex React apps? Any patterns you swear by? #React #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment

You’ve spent weeks coding. The UI is pixel-perfect. The API works. You're ready to hit "Deploy." Wait! 🛑 Before you push that code to production, there is a massive difference between a project that "works" and a product that is "production-ready." If you are building with modern frameworks like Next.js, missing these small details can kill your Lighthouse score and ruin your user experience. Here is my 5-step pre-launch checklist to ensure your web app is actually ready for the real world: 🖼️ 1. Swap every <img> for the Next.js <Image /> component Don't let massive image files ruin your load times. The built-in component automatically handles lazy loading, proper sizing, and modern WebP conversion. It’s an instant performance boost. 🔤 2. Lock down your fonts with next/font Have you ever visited a site where the text suddenly jumps around as it loads? That’s called a Layout Shift. Using the built-in font optimization handles this at build time, meaning zero layout jumping for your users. 📦 3. Shrink the bundle with Dynamic Imports Got a heavy interactive chart or a complex modal? Don't force the browser to load it immediately. Use next/dynamic so it only loads when the user actually clicks on it. Keep that initial load lightning-fast. 🔍 4. Double-check your OpenGraph (OG) Metadata How will your app look when a user shares the link in a LinkedIn message or on Twitter? If you haven't set up your dynamic metadata and social images, your link will look like spam. Good previews equal higher click rates. 🚧 5. Design a custom 404 Error Page Users will click broken links or type the wrong URL. Don't leave them staring at a cold, generic server error. Build a friendly, branded "Oops!" page with a clear button to guide them back to the homepage. This 5-minute checklist is the difference between an amateur side-project and a premium digital experience. 📌 Bookmark this for your next launch! #Nextjs #WebDevelopment #Frontend #SoftwareEngineering #TechTips #WebPerformance #Coding

🚀 Built a Drum Kit Web App using HTML, CSS & JavaScript In this project, I focused on building a fun, interactive experience while strengthening my core frontend skills. 💡 Key features & learnings: • DOM Manipulation for dynamic interactions • Keyboard event handling (keydown listeners) • Audio integration for real-time sound playback • Smooth CSS transitions & animations • Responsive layout using Grid & Media Queries For UI enhancement and design improvements, I leveraged AI tools like ChatGPT and Gemini to refine layout, contrast, and visual hierarchy. This project really helped me deepen my JavaScript fundamentals and understand real-time user interaction. I’d love to hear your feedback and suggestions! 🙌 #HTML #CSS #JavaScript #WebDevelopment #Frontend #ResponsiveDesign #LearningInPublic

If your design system isn’t type-safe, it’s not a system—it’s a collection of guesses. 🧩⚠️ Type-safe design systems in React + TypeScript reduce “UI drift” and make product teams faster without breaking consistency. A few practices that have paid off for me: 1) Model components as contracts, not implementations Use explicit props with unions for variants/tones/sizes. Prefer discriminated unions for “either/or” APIs (e.g., iconOnly vs labeled). This prevents invalid combinations at compile time. ✅ 2) Tokens as types Expose spacing, color, and typography tokens as typed values (and avoid raw strings). When tokens change, refactors become searchable and safe. 🎛️ 3) Polymorphic components without losing inference For Button/Link patterns, type the “as” prop carefully so href/target are required only when it’s an anchor. Better DX, fewer runtime checks. 🔗 4) Accessibility baked into types Make aria-label required when there’s no visible label. Turn common a11y mistakes into TypeScript errors. ♿️ This scales beyond UI: typed contracts are the same mindset that keeps Node.js services, Next.js apps, and even AI-enabled workflows reliable under change. 🚀🤖 What’s the most painful design-system bug you’ve seen that types could’ve prevented? #react #typescript #designsystems #frontend #a11y

Essential React Native Components, Hooks & APIs 1️)KeyboardAvoidingView Purpose: Adjusts the layout automatically when the keyboard appears to prevent input fields from being hidden. 2️)VirtualizedList Purpose: Efficiently renders large lists by loading only visible items, improving performance and memory usage. 3️)TouchableWithoutFeedback Purpose: Detects touch interactions without providing any visual feedback. Commonly used to dismiss the keyboard when tapping outside input fields. 4️)StatusBar Purpose: Allows control over the device’s status bar appearance (background color, text color, visibility). 5️)SafeAreaView Purpose: Ensures content is displayed within the safe boundaries of devices (avoids notches, rounded corners, and system UI areas). 6️)Dimensions Purpose: Retrieves screen width and height to create responsive layouts. 7️)Linking Purpose: Handles deep linking and opens external URLs, phone dialer, email apps, or other installed applications. 8️)PanResponder Purpose: Manages complex touch gestures such as dragging, swiping, and custom interactions. 9️)PixelRatio Purpose: Provides access to the device’s pixel density for precise UI scaling and high-resolution rendering. 10)Share Purpose: Opens the native share dialog to allow users to share text, links, or files with other applications. 11)Vibration Purpose: Triggers device vibration for feedback, notifications, or user interaction cues. 1️2)useWindowDimensions (Hook) Purpose: Automatically provides updated screen width and height values when the device orientation changes, useful for responsive UI design. #ReactNative #MobileDevelopment #AppDevelopment #JavaScript #FrontendDevelopment #CrossPlatform #ReactJS #SoftwareDevelopment #Programming #CodingLife #DeveloperLife #TechCommunity #MobileApps #UIUX #OpenSource #js #ts #fullstack #mern