React Data Routing: Smoother User Experiences

Day 2 of learning NestJS — and today, Controllers finally made sense. Here's what I used to do in Express.js: app.get('/users', (req, res) => { res.json(users) }) app.post('/users', (req, res) => { ... }) app.delete('/users/:id', (req, res) => { ... }) All scattered across files. No structure. Just vibes. Here's what NestJS does differently: Everything lives in one class. @Controller('users') sets the base route. @Get(), @Post(), @Delete() handle each method. @Param() and @Body() extract data without boilerplate. The result? Code that reads like documentation. What clicked for me today: The decorator IS the route. You're not configuring a router — you're describing intent directly on the method. That's a fundamentally different way of thinking about HTTP routing. Coming from Express, it felt weird at first. By the end of Day 2, it felt obvious. If you're learning NestJS too — stick with it past the decorator confusion. It pays off fast. Day 3 tomorrow: Providers and Dependency Injection. What was your biggest "aha" moment with NestJS Controllers? #NestJS #LearningInPublic #NodeJS #TypeScript #BackendDevelopment #100DaysOfCode #SoftwareEngineering #WebDevelopment

Day 2 of learning React Today I explored one of the most important concepts in React State. State is simply data that is tied to your UI. When the state changes, React automatically updates the HTML (UI) to reflect the new data. This is what makes React powerful and dynamic. To manage state, we use useState(). Example: const [count, setCount] = useState(0); count - the current state (data) setCount - the function used to update that state A Bug I Encountered (and what I learned) While learning, I ran into an issue where I updated the state twice in the same function, but the second update overwrote the first. Example of the problem: setCount(count + 1); setCount(count + 1); You might expect the value to increase by 2, but it only increases by 1. Why? State updates in React are asynchronous they don’t happen immediately. React waits until all the code finishes running before applying updates. Solution (Using a variable or functional update) const newCount = count + 1; setCount(newCount); setCount(newCount + 1); New Concepts I Learned Lifting State Up (Definition): This is the process of moving state from a child component to a parent component so that multiple components can share and use the same data. Controlled Input (Definition): A controlled input is an input field whose value is controlled by React state. This means the input value is always in sync with the state. Example: const [value, setValue] = useState(''); <input value={value} onChange={(e) => setValue(e.target.value)} /> React is starting to make more sense now, especially how data flows and updates the UI. It’s not always easy, but each challenge is helping me understand things deeper. Looking forward to Day 3 💪 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney #100DaysOfCode #BuildInPublic

🚀 Day 2 of Backend Learning – Understanding GET & POST Requests Today I explored two of the most fundamental concepts in backend development: GET and POST requests. 🔹 GET Request Used to fetch data from the server. ✔ Data is sent via URL ✔ Can be cached ✔ Ideal for retrieving information 🔹 POST Request Used to send data to the server. ✔ Data is sent in the request body ✔ More secure than GET ✔ Used for creating or submitting data 💡 Understanding how clients and servers communicate is the backbone of building scalable web applications. Here’s a quick example using Node.js & Express: JavaScript app.get('/user', (req, res) => { res.send('Fetching user data'); }); app.post('/user', (req, res) => { res.send('User data submitted'); }); 🔥 Step by step, diving deeper into backend development! #BackendDevelopment #NodeJS #ExpressJS #WebDevelopment #100DaysOfCode #LearningJourney

React learning journey just hit a new level of "Deep Understanding." Building a simple digital clock sounds easy, but the logic behind useEffect and useState has some tricky layers. I ran into three specific problems that taught me how React handles the DOM: 1. The "Ticking Bomb": At first, every time the state updated, a new setInterval was registered. The app was re-rendering and creating infinite intervals! I fixed this by wrapping the logic in useEffect. 2. The "Invisible Leak": Even after hiding the clock, the interval kept running in the background. I solved this by returning a cleanup functionclearInterval(a) to wipe the reference when the component unmounts or hides. 3. The "UI Lag": When I toggled the clock back on, it would show the old time for 1 second before the interval kicked in. I fixed this "stale UI" by adding an immediate setTime call right before starting the interval so the update is instant. It’s not just about making things work; it’s about making them efficient! Check it out here: Live Demo: https://lnkd.in/gsG7Jeaz Source Code: https://lnkd.in/gVBvdwWq #ReactJS #WebDev #JavaScript #CodingLogic #FrontendDevelopment

🚀 Day 14 of My React Learning Journey Today was one of those classes where everything started to connect together 🔥 🌐 What I learned today: • Data Routing • Nested Routing • Dynamic Routing 🧠 What clicked for me: Routing is not just about switching pages… 👉 It’s about structuring your entire application. ⚡ Key Understandings: 🔹 Data Routing → Load data before rendering the page 🔹 Nested Routing → Build layouts inside layouts (real app structure) 🔹 Dynamic Routing → Create scalable pages using data 💡 Big Realization: These are not separate concepts… 👉 They work together to build real-world applications 📈 Mindset Shift: Before: → “How do I navigate between pages?” Now: → “How do I structure and scale my app?” 🚀 What’s next: I’m excited to: • Apply all of this in upcoming projects • Build more structured & scalable apps • Improve my understanding through real use cases 💭 Final Thought: Today wasn’t just a class… It was a step closer to becoming a better frontend developer If you’re also learning or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

🚀 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

Day 5 of my Django journey — and this is where things got real. Until yesterday, I was building features you can see. Today, I focused on something you usually don’t see… but every app depends on: 👉 APIs. 💡 What I built: Time Capsule Backend + Web App A system where users can: ⏳ Lock messages until a future date 🔐 Access only their own data (authentication) 📬 Get email when the capsule unlocks 🔗 Share capsules using unique links But the interesting part? I didn’t just build pages — I tested everything like a backend developer using Postman. ✔ Created API endpoints ✔ Sent POST/GET requests manually ✔ Handled authentication tokens ✔ Debugged real API errors (401, auth issues 😅) That moment when your API works in Postman >>> 😌🔥 This project made me realize: Backend development is not just about writing code — it’s about designing systems that other apps can talk to. From CRUD apps → API-driven thinking That shift is 🔥 Still a lot to learn, but this felt like a big step forward. GITHUB LINK =>https://lnkd.in/gCpjMEed #Django #Python #BackendDevelopment #APIs #Postman #LearningInPublic #WebDevelopment

🔥 Day-45 of My MERN Stack Journey 🚀 🌐 Project: Random Image Generator using API+ Text Size Changer UI Today, I upgraded my previous project by integrating an API to fetch random images dynamically 📸✨ Now the app feels more real-world and powerful! ✨ Key Highlights: • Fetch random images using API (picsum.photos) 🌐 • Dynamic image loading without page refresh ⚡ • Clean and modern responsive UI 📱💻 • One-click image generator button 🔄 • Used fetch() for API integration • Smooth user experience with minimal design ⚡ Challenges I faced: • Understanding how API requests work • Handling dynamic image loading • Avoiding repeated images & caching issues ✅ How I solved it: • Used fetch() to call random image API • Added unique query parameter to prevent caching • Managed DOM updates for smooth rendering 💡 What I learned: This project helped me understand how APIs connect frontend with real data. Using fetch() made my app more dynamic and closer to real-world applications 🚀 💻 Code Of School — Ritendra Gour || Avinash Gour #Day45 #MERNStack #WebDevelopment #FrontendDevelopment #JavaScript #API #FetchAPI #UIDesign #CodingJourney 🚀

#WebDevlopmentBootcamp #Day_110 From Data Fetching to Data Visualization: My First Next.js Project 🚀 I’m excited to share my first full-featured Next.js application! After recently achieving a 58/60 on my latest technical assignment, I wanted to push myself by building a project that handles complex data states and dynamic rendering. Here’s what I implemented: Local API Integration: Managed data flow by fetching from a local backend. Dynamic Routing: Implemented [id] routes to create a seamless, scalable user experience. State Management: Successfully passed and managed state to display specific data across different pages. Data Visualization: Integrated Recharts to turn raw data into interactive, easy-to-digest insights. User Experience: Built custom loading states to ensure the UI feels snappy and professional during data fetching. Next.js has completely changed how I think about the MERN stack—the built-in optimizations make a massive difference in performance. Check out the demo below! 👇 Live link : https://lnkd.in/gfw3YzxX Programming Hero #WebDevelopment #CodingBootcamp #HTML #CSS #javaScript #NextJs #tailwindCss #React #Git #GitHub #LearningInPublic #BuildInPublic #SoftwareEngineering #TechJourney #JuniorDeveloper

React Learning Progress – Phase 4 Today I completed Phase 4 (Pages 1–6) of my React learning journey, focusing on building a strong foundation of core concepts. Here’s what I covered: • Props and Component Reusability – Learned how to build reusable components and pass dynamic data • State and useState – Understood how dynamic data works and how React re-renders the UI • Conditional Rendering – Implemented UI logic using if, ternary, and && • Lists and Keys – Rendered dynamic data using .map() and understood the importance of keys • Forms and Controlled Inputs – Built forms where React fully controls the input data Hands-on Practice: • Built a Toggle Message component • Created an AlertMessage component • Implemented a Todo List using map and keys • Developed a Contact Form with state management and styling Key Takeaway: In React, instead of manually updating the DOM, we update the state, and the UI automatically reflects those changes. This phase helped me better understand how React handles data and UI in real-world applications. JASIQ Labs #React #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #MERNStack