Debugging Auth System Issues in HireNova

📑 Knowledge Base Platform - XXV Reusable user Profile Page In this stage I implemented the personal profile page for authenticated employees. The goal was to give each user access to their own account information in a secure and structured way. On the backend, I created a dedicated service, controller and /me route. The profile fetching using the authenticated user ID from the token instead of accepting an ID from URL parameters, preventing access to their other users profiles. Sensitive fields such as passwords are excluded from the response. On the frontend, I created a Profile model, typed API methods, and a profile store with a fetchProfile action. To improve the user experience, I integrated day js to display employment duration in a readable format (for exsmaple: «1 moth ago») instead of raw dates. I also added the profile route, created ProfileDetails component, and integrated it into the profile page. Result Secure employee profile area with personalized account data: ➜ Users can access only their own profile; ➜ Sensitive data is protected; ➜ Clean profile UI with key employee information; ➜ Human-Friendly employment duration display. 📎 Repo: https://lnkd.in/dnuCveCa Here are the previous parts:  Admin User Create Flow https://lnkd.in/dK4SKcvG Admin User Edit Flow https://lnkd.in/daxaS7Pu #frontend #backend #vue #nodejs #javascript #webdevelopment #dashboard #employeeportal #developer #opentowork 

🚀 React Context API + Login Form Project I recently built a Login Form system using React with a strong focus on clean state management and reusable architecture. 🔧 Tech Stack: React.js ⚛️ React Hooks (useState, useContext) Context API for global state management REST API integration 🔐 Project Highlights: Secure and responsive Login Form UI Managed authentication state using Context API API integration for user login flow Clean component-based structure Reusable hooks for better scalability This project helped me strengthen my understanding of: ✔ State management in React ✔ Real-world authentication flow ✔ API handling with hooks ✔ Scalable frontend architecture 💡 I’m continuously improving my skills in React ecosystem and building more production-level projects. #ReactJS #FullstackDevelopment #JavaScript #AIDevelopment #ContextAPI #Hooks #OpenToWork #SoftwareEngineering #CodingJourney

📑 Knowledge Base Platform - XXIII Admin User Create Flow In this stage I implemented the user creation flow for the admin panel. The goal was to allow administrators to add new employees to the internal knowledge base system. On the backend, I created a DTO, service, controller, and route to secure user creation. On the frontend, I added form types create payloads types, API methods and store actions. To keep code reusable, I built a shared AdminUserForm component that is used for both create and edit flows. I also implemented a mapper to transform form data into the required API payload. Finally, I created AdminUserCreatePage and connected form submission with store actions. Result Structured admin flow for creating new users. ➜ reusable architecture; ➜ clean data mapping requests; ➜ centralized user onboarding inside admin panel. 📎 Repo: https://lnkd.in/dnuCveCa Here are the previous parts:  Admin Articles Pagination https://lnkd.in/difkwz-d Admin Users Management (Table)  https://lnkd.in/dqkacAXs #frontend #backend #vue #nodejs #javascript #adminpanel #crud #developer #opentowork 

🚀 Day 23 of #30DaysOfAngular Back with another topic in the series 🙌 Today’s Topic: Dynamic Forms Dynamic forms generate form fields based on configuration (like JSON) or API data — instead of hardcoding in HTML. 🔹 How it Works ✔ Define form structure in JSON ✔ Loop through config to create fields ✔ Bind using Reactive Forms 👉 Example: fields = [ { name: 'email', type: 'text' }, { name: 'password', type: 'password' } ]; ✔ Render using *ngFor 🔹 Key Benefits ✔ Add/remove fields dynamically ✔ Reusable and scalable ✔ Useful for large forms (survey, admin panels) 🔹 Modern Angular (16+) 🔥 ✔ Standalone Components → simpler form setup ✔ Signals → manage form state reactively ✔ Reactive Forms → still preferred for dynamic forms ✔ Better performance with OnPush 💡 Why it matters? Dynamic forms make applications flexible and reduce repetitive code 💡 Pro Tip: Use JSON-driven forms + reactive forms for scalable enterprise apps 📌 Save this & follow for more 🙌 #Angular #DynamicForms #Angular16 #Frontend #OpenToWork

🌐 Excited to share my latest project: NewsHub – A Real-Time Global News Portal! I’ve always been fascinated by how data travels across the globe in seconds. To explore this, I built NewsHub, a dynamic web application that delivers breaking news from around the world straight to your screen. This project uses React.js, API integrations, and MySQL (Oracle) for handling data. It’s not just about design with Bootstrap 5, but also about building a secure and high-performance application. Key Technical Highlights: ✅ Real-time API Integration Fetching live data using Async/Await and Fetch API ✅ Secure Architecture Used environment variables (.env) to protect API keys ✅ State Management Handled loading states and errors using React Hooks (useState, useEffect) ✅ Mobile-First Design Fully responsive layout for all devices This project helped me improve my front-end skills and understand clean, scalable, and secure coding practices. 🚀 🔗 Explore the Project: Live Demo: https://lnkd.in/dTh4Nge3⁠� GitHub Repository: https://lnkd.in/dfD4nAr8⁠� #ReactJS #WebDevelopment #Frontend #Bootstrap #API #CodingJourney #Portfolio #JavaScript #SoftwareEngineering #NewsHubOracle MySQL

𝐓𝐡𝐞 "𝐒𝐢𝐦𝐩𝐥𝐞 𝐖𝐞𝐛𝐬𝐢𝐭𝐞" 𝐈𝐥𝐥𝐮𝐬𝐢𝐨𝐧: 𝐄𝐱𝐩𝐞𝐜𝐭𝐚𝐭𝐢𝐨𝐧𝐬 𝐯𝐬. 𝐑𝐞𝐚𝐥𝐢𝐭𝐲.   𝐄𝐯𝐞𝐫𝐲 developer has experienced this. A client reaches out asking for a "simple website"—just a few static pages, nothing crazy. But when the actual requirements document finally drops, it reads like the technical architecture for a Fortune 500 enterprise platform.   𝐄𝐬𝐩𝐞𝐜𝐢𝐚𝐥𝐥𝐲 for those of us working with the MERN stack, the scope creep is incredibly real. What is initially pitched as a basic React landing page quickly morphs into a highly distributed system requiring complex state management and a heavy Node.js backend. 𝐓𝐡𝐞 "𝐒𝐢𝐦𝐩𝐥𝐞" 𝐑𝐞𝐪𝐮𝐢𝐫𝐞𝐦𝐞𝐧𝐭𝐬 𝐓𝐫𝐚𝐧𝐬𝐥𝐚𝐭𝐞𝐝:- • "𝐉𝐮𝐬𝐭 𝐚 𝐥𝐨𝐠𝐢𝐧 𝐩𝐚𝐠𝐞": Which actually means full OAuth2 integration, JWT refresh tokens, multi-factor authentication, and magic email links. • "𝐀 𝐛𝐚𝐬𝐢𝐜 𝐝𝐚𝐬𝐡𝐛𝐨𝐚𝐫𝐝": Meaning real-time WebSocket data streaming, export-to-CSV functionality, and custom interactive data visualizations. • "𝐅𝐚𝐬𝐭 𝐥𝐨𝐚𝐝 𝐭𝐢𝐦𝐞𝐬": While simultaneously demanding a 4K auto-playing background video and a heavy 3D model rendering in the hero section. Conclusion:-   𝐌𝐚𝐧𝐚𝐠𝐢𝐧𝐠 client expectations is just as critical as managing your codebase. A truly "simple" web app rarely exists in the wild. As engineers, our real job is to translate these wild requirements into scalable, maintainable architecture without losing our sanity. Drop a 😭 in the comments if you know exactly what I am talking about. Special thanks to my mentor Mian Ahmad Basit for the continued guidance. #MuhammadAbdullahWaseem #Nexskill #WebDevelopment #MERNStack #ReactJS #SoftwareEngineering #Pakistan

Just spent the last few days exploring 𝗦𝗲𝗿𝘃𝗲𝗿-𝗦𝗲𝗻𝘁 𝗘𝘃𝗲𝗻𝘁𝘀 (𝗦𝗦𝗘) and I’m genuinely amazed! I tested and built a real-time notification dashboard where the server pushes live updates to specific users — no WebSockets, no heavy polling, just clean, simple, and efficient unidirectional real-time communication. What surprised me the most: - How lightweight and easy SSE is to implement - Native browser support with EventSource - Perfect for notifications, order tracking, live dashboards & alerts Built the entire thing with Node.js + vanilla JS (Tailwind via CDN) and it works beautifully. Every day I’m realizing how many powerful web technologies are still underused.  Keeping the curiosity alive and growing daily as an engineer 💡 If you're into backend, real-time systems, or full-stack development — definitely give SSE a try! #𝗦𝗲𝗿𝘃𝗲𝗿𝗦𝗲𝗻𝘁𝗘𝘃𝗲𝗻𝘁𝘀 #𝗦𝗦𝗘 #𝗡𝗼𝗱𝗲𝗝𝗦 #𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 #𝗥𝗲𝗮𝗹𝗧𝗶𝗺𝗲 #𝗪𝗲𝗯𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 #𝗕𝗮𝗰𝗸𝗲𝗻𝗱𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 #𝗙𝘂𝗹𝗹𝗦𝘁𝗮𝗰𝗸 #𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴 #𝗟𝗲𝗮𝗿𝗻𝗜𝗻𝗣𝘂𝗯𝗹𝗶𝗰 #𝗧𝗲𝗰𝗵𝗚𝗿𝗼𝘄𝘁𝗵

One of the most important full-stack skills is understanding how frontend and backend work together in a real-world feature. A great example is authentication. On the frontend, users only see a simple flow: Sign up, log in, access dashboard, log out. But on the backend, a lot is happening: user validation, password hashing, token handling, session logic, protected routes, and role-based access control. This is why authentication is one of the best topics for full-stack developers. It is not just about building forms. It is about creating a secure, smooth, and reliable experience from UI to database. A strong full-stack developer does not only ask: “Does the page look good?” They also ask: “Is the data secure?” “Are routes protected?” “Can the system scale?” “Is the user experience smooth?” Frontend and backend are not separate worlds. The best products happen when both sides work together perfectly. That is where real full-stack development begins. #FullStackDevelopment #FrontendDevelopment #BackendDevelopment #ReactJS #NodeJS #WebDevelopment #SoftwareEngineering #Authentication

Every junior developer builds a basic JWT auth system and saves it in localStorage. I decided to break that habit and build something truly Production-Ready. 🔐👇 Over the last few days, I challenged myself to move beyond basic MERN stack tutorials and build an Advanced Full-Stack Authentication System with enterprise-level security practices. Saying goodbye to standard security risks, I completely revamped the architecture! Here is what I integrated into my latest project: ✅ Advanced Security: Moved from LocalStorage to secure HTTP-Only Cookies to prevent XSS attacks. ✅ Seamless State Management: Replaced complex Context APIs with Zustand for blazing-fast global state handling. ✅ Identity Verification: Built a complete OTP-based Email Verification system using Nodemailer & Mailtrap. ✅ Robust Error Handling: Synchronized frontend and backend states smoothly to handle edge cases without UI crashes. ✅ Modern UI/UX: Designed a clean, dark-mode minimalist dashboard with Tailwind CSS. This project pushed me to understand the "Why" behind web security, not just the "How". The gap between a beginner app and a production app is all about how you handle edge cases and user data! Check out the complete code and Readme on my GitHub! 🔗 GitHub: [https://lnkd.in/d6HrfUXt] #WebDevelopment #MERNStack #ReactJS #NodeJS #CyberSecurity #JavaScript #FrontendDeveloper #BackendDeveloper #Zustand #CodingJourney #SoftwareEngineering #TechCommunity #DevelopersOfLinkedIn #FullStackDeveloper #Programming