Student Management CRUD Application with JavaScript

🏴☠️ Built a Luffy-Themed Full Stack CRUD Application! 🚀 Excited to share my latest project — a Student Manager Web Application inspired by the Luffy / One Piece theme ⚓🔥 This project helped me understand how real-world applications work by connecting frontend and backend seamlessly. ✨ Features: • Add and delete students dynamically • Real-time updates without page refresh • Luffy-inspired aesthetic UI 🏴☠️ • Clean and interactive user experience 🛠️ Tech Stack: HTML | CSS | JavaScript | Node.js | Express 💡 Key Learnings: • Understanding CRUD operations • Client-server communication using APIs • Backend development using Express • Designing creative and themed UI 🎯 This project reflects both my technical skills and creativity in design. Here’s a quick demo 👇 TechnoHacks EduTech Would love your feedback! 😊 #WebDevelopment #FullStackDeveloper #NodeJS #JavaScript #FrontendDevelopment #BackendDevelopment #CRUD #100DaysOfCode #LearningJourney #StudentDeveloper #TechProjects #CodingLife #DevelopersOfLinkedIn #BuildInPublic #OnePiece #Luffy

I noticed I was writing the same useEffect fetch logic in five different places. It made my components messy and hard to read. Today, I’m documenting how to build my own tools: Custom React Hooks. Instead of cramming 50 lines of logic into a visual component, I’m learning to extract that logic into its own function. Here is how I’m thinking about it: 1) Logic vs. UI: A component’s main job is rendering the interface. By moving the heavy lifting (like API fetching or form handling) into a custom hook, the UI code stays clean and readable. 2) The "use" Rule: These are just JavaScript functions, but they must start with the word "use" (like useFetch or useAuth). This tells React to follow the official rules of hooks. 3) Building a Toolbox: I practiced with a useWindowSize hook. It tracks the screen width and height using useState and useEffect, then returns those values so I can use them anywhere with just one line of code. Why professionals love this: It makes code reusable across different projects and much easier to test. I am still learning the ropes, but modular thinking is making my projects feel way more advanced. Tomorrow, I’m looking at the "bank of logic": Mastering useReducer! Question for you: What is the one piece of logic you find yourself copy-pasting the most? Is it a fetch call, a form handler, or something else? #CodeWithWajid #ReactJS #WebDevelopment #30DaysOfCode #LearningToCode #BuildingInPublic #CustomHooks #CleanCode

🚀 Project Showcase: Online Examination System (Frontend) I recently built a fully functional Online Examination System using only HTML, CSS, and JavaScript. 🔹 Features: • User Signup & Login (with validation) • Dashboard for exam access • MCQ-based exam interface • Instant result with score & percentage • Local Storage for data management • Admin panel to add questions 🎯 Key Learnings: • DOM Manipulation • JavaScript Logic Building • Local Storage Handling • Dynamic UI Design This project helped me understand how real-world applications manage user flow, exams, and results — all without a backend. 💻 Tech Stack: HTML | CSS | JavaScript 📌 Next Step: Planning to upgrade this with a backend and database for better scalability. #WebDevelopment #InternPe #FrontendDevelopment #Projects #LearningByDoing #BTechLife #CodingJourney #StudentDeveloper

🚀⚛️ Memoization in React = Real Performance Optimization (Simple Explanation) ⚛️🚀 When learning performance optimization in React, one concept stands out 👉 Memoization 🧠 🧠 💡 What is the idea? 👉 “Don’t recompute if nothing changed” React re-renders components often 🔁 Without optimization: ❌ Functions run again ❌ Calculations repeat ❌ UI becomes slower ⚙️ 🔥 How Memoization Helps 👉 It stores the result of a calculation 👉 Reuses it until dependencies change 🛠️ Tools in React: ✔️ React.memo() → Stops unnecessary re-renders 🧱 ✔️ useMemo() → Stores expensive calculations 🧮 ✔️ useCallback() → Keeps function references stable 🔁 📦 Example: JavaScript const value = useMemo(() => heavyCalc(data), [data]); 👉 If data doesn’t change → no recalculation 🚫 🚀 Why It Matters ✅ Faster UI ✅ Less CPU work ✅ Better user experience ⚠️ Rule: 👉 Don’t overuse it 👉 Use only when performance is actually affected 🎯 💡 Optimization is not about doing more… it’s about doing less. #ReactJS #FrontendDevelopment #PerformanceOptimization #JavaScript #ReactHooks #Memoization 🚀

React Learning Series | Contd... #Day20: React 19 Activity Component (Canary/Experimental) Tired of losing component state when using conditional rendering? Or killing performance by hiding elements with CSS? 🚀 React 19 introduces Activity Component It Offers: ✅ State Preservation: <Activity mode="hidden"> keeps your component in the background. If a user typed in an input or moved a slider, that data stays exactly where they left it. ✅ Low-Priority Background Updates: While a component is hidden, React still allows it to re-render in response to prop changes, but it does so at a lower priority. ✅ Instant Restorations:  Because the DOM and state are preserved, switching back to visible feels nearly instant—no "loading" states or re-fetching data from scratch. ✅ Automatic Effect Cleanup:  When hidden, React automatically calls cleanup functions for useEffect and useLayoutEffect. This stops active subscriptions, timers, or video/audio playback while the user isn't looking, but "resumes" them instantly when made visible again. Best Use Cases: 👉 Tabbed Interfaces: Switch between "Home" and "Settings" without losing the user’s progress or form data. 👉 Modals & Sidebars: Hide transient UI without resetting scroll positions or open dropdowns. 👉 Pre-rendering: Silently render a page the user is likely to visit next in a hidden state so it's ready the moment they click. 👉 Media Previews: Pause background video/audio when hidden while keeping the playback position exactly where the user left off. #ReactJS #WebDevelopment #Frontend #React19 #Javascript #ProgrammingTips #WebDev

 I built a real User Management System from scratch Most developers start with tutorials… I decided to turn knowledge into a real working project. I just built a fully functional User Management Dashboard using vanilla JavaScript. 🔹 What it does: ✔ Fetches real user data from an API ✔ Lets you add new users dynamically ✔ Search users in real time ✔ Delete users instantly ✔ Stores data using Local Storage 🔹 Tech Stack: HTML • CSS • JavaScript • API Integration What I learned from this project is not just coding… but how real systems handle data, interaction, and user experience. 💡 Still improving, still building… one project at a time. 🔗 GitHub: https://lnkd.in/dJZjgYsp I’d appreciate any feedback or suggestions 🙌 #WebDevelopment #Frontend #JavaScript #CodingJourney #BuildInPublic

🚀 Day 31 of My 45-Day Web Development Journey Today I focused on mastering one of the core concepts in programming — JavaScript Functions. 📚 What I Learned Today • Understanding functions and their purpose • Writing reusable blocks of code • Using parameters and arguments • Returning values using the return keyword 💻 Hands-On Practice I created programs that: ✔ Use functions to organize logic ✔ Accept inputs using parameters ✔ Return results dynamically ✔ Integrate functions with DOM events 🌱 Key Learning Functions are essential for writing clean, efficient, and reusable code. They are the building blocks of scalable applications. 💡 Reflection Today helped me think more like a developer by structuring code properly instead of writing everything in one place. 🎯 Next Step Excited to explore arrays and loops to handle multiple data efficiently! Let’s connect and grow together 🚀 #WebDevelopment #JavaScript #Functions #Programming #LearningJourney #StudentDeveloper #BuildInPublic #TechSkills

🚀 Excited to share my latest project: Student Task Management System As part of my learning journey in web development, I built a full-stack web application to help students manage their daily tasks efficiently and stay productive. 💻 Tech Stack: HTML, CSS, JavaScript, Flask (Python), SQLite ✨ Key Features: • User authentication (Login/Signup) • Create, update, and delete tasks • Deadline tracking & task prioritization • Productivity dashboard • Clean UI with Dark Mode 💡 This project helped me strengthen my understanding of full-stack development, including backend logic, database handling, and responsive UI design. 🔗 GitHub Repository: https://lnkd.in/gvEFNBAG 🌐 Live Demo: https://lnkd.in/gg44vmUE I’m continuously learning and building — feedback and suggestions are always welcome! #WebDevelopment #FullStack #Python #Flask #JavaScript #StudentProjects #LearningJourney #BuildInPublic

🚀 Built a File/Folder Explorer using React (with recursion & tree traversal) Recently, I worked on building a File Explorer UI (like VS Code / Finder) using React — and it turned out to be a great exercise in mastering core concepts. ✨ Features implemented: • Expand / Collapse folders • Add new folders dynamically • Delete files/folders • Recursive rendering of nested structure • Clean and interactive UI 💡 What makes this interesting? This is a commonly asked interview question in top product companies like Microsoft, Atlassian, Google, and more. 🔍 Key concepts used: • Recursion (for rendering nested tree) • Tree Data Structure • State management for dynamic UI updates • Immutable updates in nested data 🧠 How DSA helped: Understanding tree traversal (DFS) made it much easier to: • Update deeply nested nodes • Add/delete items efficiently • Think recursively instead of writing complex loops Without DSA, handling nested structures like this can get messy very quickly. 🔗 GitHub Repo: https://lnkd.in/gWqXjaYv Would love feedback or suggestions to improve this further 🙌 #ReactJS #FrontendDevelopment #DSA #WebDevelopment #JavaScript #CodingInterview #SoftwareEngineering

Day 17/100: Reflections on Building the Foundation of the Web The journey to becoming a Full-Stack Software Engineer is often described as a marathon, not a sprint. Over the past several weeks, I have been immersed in a rigorous 100-Day Full-Stack Challenge, and as I cross the threshold of Day 17, the importance of a "foundation-first" mindset has never been clearer. My focus has been split between two critical pillars: HTML5 and CSS3. While these are often viewed as "entry-level," mastering them at a Senior level requires a deep dive into semantic architecture, accessibility (A11Y), and performance optimization. Phase 1: HTML & Semantic Architecture I spent the first ten days deconstructing how we structure data for the browser. Beyond simple tags, I focused on SEO-friendly semantic elements and complex form handling. The highlight was Day 9’s mini-project, where I built a production-ready landing page that prioritized load speed and screen-reader compatibility. Phase 2: Modern CSS & Responsive Layouts Days 11 through 17 shifted the focus to the visual layer. Transitioning from the "Box Model" fundamentals to advanced CSS Grid and Flexbox implementations allowed me to create layouts that are fluid and resilient. I’ve spent significant time lately mastering CSS Specificity and Advanced Selectors—tools that are essential for maintaining large-scale, clean stylesheets in professional environments. The Road Ahead While I have hit a period of reflection after Day 17, the roadmap remains ambitious. The next immediate goal is to finalize the CSS phase with advanced animations and preprocessors before diving headfirst into JavaScript (ES6+). This upcoming 10-day block will be the true test of logic, as I move from static layouts to dynamic, functional web applications. Consistency is the greatest challenge in any #100DaysOfCode journey. Resuming this challenge means more than just writing code; it’s about documenting the "why" behind every technical decision. I’m looking forward to integrating these front-end skills with Node.js and MongoDB in the weeks to come. #FullStackDevelopment #WebDevelopment #BuildInPublic #HTML5 #CSS3 #CodingJourney #SoftwareEngineering #CareerGrowth #LearningChallenge