A Reactive October - Day 29: Mastering the Update! #30DaysOfCodingReact Today, I moved on to the "U" in CRUD: successfully implementing the update request for the database via the FastAPI backend! The Win: Connecting the useMutation hook for data modification is one thing, but getting the backend routing to correctly handle the PUT or PATCH request, especially with path parameters (like the ID of the item to update), was a crucial, sticky point. The Insight: Debugging and rectifying those backend routing issues provided hands-on experience that reading can't replicate. It transforms the role of a frontend developer into a truly full-stack experience, providing an understanding of the entire data flow from click to commit. Building stronger hands, indeed! Now the application can read, create, and update data dynamically. What's your most common pitfall when defining API routes? #ReactJS #FastAPI #useMutation #FullStack #Routing #30daysofcodingreact #CodeChallenge #DeveloperSkills
Mastering the Update in CRUD with FastAPI and React
More Relevant Posts
-
🧠 New Blog: **React Hooks for Library Authors** Most developers know `useState` and `useEffect`, but React also provides hooks specifically for library creators: - `useImperativeHandle` → expose controlled APIs - `useDebugValue` → improve DevTools readability - `useSyncExternalStore` → safely integrate with external state If you’re building reusable React libraries, these are your secret weapons. Full guide ➜ https://lnkd.in/d5naXswb #React #SoftwareEngineering #FrontendDevelopment #OpenSource
To view or add a comment, sign in
-
🚀 Introducing CodeSync (Beta) – A Real-Time Collaborative Code Editor I’m thrilled to share CodeSync (Beta) — a real-time collaborative code editor built for seamless teamwork, instant coding sessions, and live communication. No sign-up needed — just create a room and start coding together! 💻✨ 💡 Key Highlights: ⚡ Real-time collaboration for instant code sharing 🧠 Multi-language support – JavaScript, Python, Java, C++, Go, Rust, and more 🗨️ Built-in live chat with instant updates (Supabase Realtime) 🧩 Code execution powered by Supabase Edge Functions + Piston API 🚪 No authentication required – jump straight into coding 🛠️ Tech Stack: Frontend: React (TypeScript), Monaco Editor, Tailwind CSS, shadcn/ui, React Router Backend: Supabase (Realtime, Edge Functions, Chat synchronization) ⚙️ Core Implementation: ✏️ Editor.tsx → Monaco Editor for syntax highlighting & language support 💬 ChatPanel.tsx → Real-time chat powered by Supabase Channels 🧾 OutputPanel.tsx → Displays compiled output & runtime logs ⚙️ Edge Functions → Secure code execution layer via Piston API 🔧 Currently in Beta: I’m actively improving performance, adding more language support, and refining the user experience. Shoutout to Priyanshu Dubey for the awesome backend work! Couldn't have made this happen without you. 💪🔥 Would love to get your feedback and suggestions as CodeSync evolves! 💬 #React #TypeScript #Supabase #WebDevelopment #OpenSource #Collaboration #Coding #BetaLaunch
To view or add a comment, sign in
-
HNG Tech The Video Version of my post 📯 🚀 Just Built My First HNG task RESTful API with External API Integration! I recently completed a backend challenge that pushed me to level up my Node.js skills. Here's what I built: ✨ The Project: A clean REST API endpoint that serves my profile information combined with real-time cat facts from an external API. Simple concept, but packed with learning! 🛠️ What I Built: - GET /me endpoint returning JSON data - Live integration with Cat Facts API - Dynamic timestamps (ISO 8601 format) - Graceful error handling with fallback strategies - Full CORS support and request logging 💡 Key Challenges & Solutions: 1️⃣ External API Reliability Problem: What if the cat facts API goes down? Solution: Implemented timeout handling (5s) and fallback messages. The app never breaks - it just returns a default fact. 2️⃣ Data Freshness Challenge: Ensure both timestamp and cat fact update on EVERY request Solution: No caching anywhere. Each request triggers a fresh API call and timestamp generation. 3️⃣ Code Organization Why it matters: Messy code = maintenance nightmare My approach: MVC architecture with separate layers for routes, controllers, and services. Each file has one job. 🏗️ Tech Stack: - Node.js & Express.js - Axios for HTTP requests - Deployed on [Your Platform - Railway/Azure/etc.] - GitHub for version control 📊 What This Taught Me: ✅ External API integration isn't just about making requests - it's about handling failures gracefully ✅ Error handling is as important as the happy path ✅ Modular code = easier testing & scaling ✅ Environment variables are your friend in production ✅ Deployment is a skill in itself (learned about Azure/Railway/etc.) 🔗 Try it yourself: [https://lnkd.in/dVtjREi4 💻 Source code: [https://lnkd.in/dqU9xaEg] This project forced me to think like a backend engineer - not just "does it work?" but "what happens when things go wrong?" What's your biggest lesson from a recent project? Drop it in the comments! 👇 #BackendDevelopment #NodeJS #API #JavaScript #WebDevelopment #SoftwareEngineering #TechLearning #CodingJourney
To view or add a comment, sign in
-
𝐓𝐚𝐦𝐢𝐧𝐠 𝐀𝐬𝐲𝐧𝐜 𝐓𝐚𝐬𝐤𝐬: 𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬 𝐚𝐧𝐝 𝐭𝐡𝐞 𝐃𝐫𝐞𝐚𝐦 𝐓𝐞𝐚𝐦 𝐂𝐨𝐦𝐛𝐢𝐧𝐚𝐭𝐨𝐫𝐬 Ever felt like you're 𝐰𝐫𝐞𝐬𝐭𝐥𝐢𝐧𝐠 with 𝐚𝐬𝐲𝐧𝐜𝐡𝐫𝐨𝐧𝐨𝐮𝐬 𝐜𝐨𝐝𝐞? You know, when you need to 𝐟𝐞𝐭𝐜𝐡 𝐝𝐚𝐭𝐚 from 𝐭𝐡𝐫𝐞𝐞 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐀𝐏𝐈𝐬, but they all need to finish 𝐛𝐞𝐟𝐨𝐫𝐞 you can 𝐫𝐞𝐧𝐝𝐞𝐫 the 𝐩𝐚𝐠𝐞? Enter 𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬 and their incredible 𝐜𝐨𝐦𝐛𝐢𝐧𝐚𝐭𝐨𝐫 𝐦𝐞𝐭𝐡𝐨𝐝𝐬—the superheroes of modern JavaScript! 𝐏𝐫𝐨𝐦𝐢𝐬𝐞𝐬 handle the "𝐰𝐡𝐞𝐧 𝐭𝐡𝐢𝐬 𝐞𝐯𝐞𝐧𝐭𝐮𝐚𝐥𝐥𝐲 𝐡𝐚𝐩𝐩𝐞𝐧𝐬, 𝐝𝐨 𝐭𝐡𝐚𝐭" logic, keeping your code clean. But the real magic lies in their combinators, which let you orchestrate multiple async operations like a pro conductor: 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐚𝐥𝐥(): This is your "𝐀𝐥𝐥 𝐨𝐫 𝐍𝐨𝐭𝐡𝐢𝐧𝐠" strategy. Perfect for fetching data that must all succeed (e.g., getting a user's profile, settings, and friend list simultaneously). If one fails, they all fail fast. 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐫𝐚𝐜𝐞(): Need the 𝐟𝐚𝐬𝐭𝐞𝐬𝐭 𝐫𝐞𝐬𝐩𝐨𝐧𝐬𝐞? This method "races" multiple promises and returns the result of the first one to resolve or reject. Great for redundant server calls or a timeout mechanism. 𝐏𝐫𝐨𝐦𝐢𝐬𝐞.𝐚𝐥𝐥𝐒𝐞𝐭𝐭𝐥𝐞𝐝(): Want to 𝐤𝐧𝐨𝐰 𝐭𝐡𝐞 𝐨𝐮𝐭𝐜𝐨𝐦𝐞 𝐨𝐟 𝐞𝐯𝐞𝐫𝐲 𝐩𝐫𝐨𝐦𝐢𝐬𝐞, regardless of success or failure? Use this! Ideal for non-critical background tasks like logging or status updates where you need a full report. These methods literally turn callback code into elegant, readable async flows. They've saved me countless hours of debugging! 𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝𝐢𝐧𝐠 when to use 𝐚𝐥𝐥(), 𝐫𝐚𝐜𝐞(), 𝐨𝐫 𝐚𝐥𝐥𝐒𝐞𝐭𝐭𝐥𝐞𝐝() is a true mark of an experienced developer. ➡️ 𝐅𝐨𝐥𝐥𝐨𝐰 𝐦𝐞 for more content on clean code, JavaScript, and developer insights! 👍 𝐒𝐡𝐚𝐫𝐞 this post if you found this breakdown helpful! 🔄 𝐑𝐞𝐩𝐨𝐬𝐭 to help a fellow developer tame their async tasks! #JavaScript #Promises #AsyncAwait #WebDevelopment #ProgrammingTips #CleanCode #TechSkills
To view or add a comment, sign in
-
𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭 𝐠𝐢𝐯𝐞𝐬 𝐲𝐨𝐮 𝐭𝐲𝐩𝐞 𝐬𝐚𝐟𝐞𝐭𝐲... 𝐮𝐧𝐭𝐢𝐥 𝐫𝐮𝐧𝐭𝐢𝐦𝐞. You define perfect TypeScript interfaces for your API responses. Your IDE shows no errors. Your build passes. Everything looks perfect. Then production happens: the API returns null instead of an object. A number comes back as a string. An optional field is suddenly required. Your app crashes. TypeScript only checks types at compile time. It can't protect you from external data. 𝐓𝐡𝐚𝐭'𝐬 𝐰𝐡𝐞𝐫𝐞 𝐙𝐨𝐝 𝐜𝐨𝐦𝐞𝐬 𝐢𝐧. Zod lets you define schemas that validate data at runtime: → API responses actually match your types → Form inputs are validated before processing → Environment variables are checked on startup → Database queries return expected shapes You write one schema, and Zod automatically: ✓ Validates the data structure ✓ Infers TypeScript types ✓ Generates helpful error messages ✓ Transforms data if needed No more runtime surprises. No more try-catch blocks everywhere. No more "undefined is not an object" errors in production. Your TypeScript types finally work with real-world data, not just in your IDE. 𝐁𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭 𝐚𝐩𝐩𝐬 𝐭𝐡𝐚𝐭 𝐭𝐚𝐥𝐤 𝐭𝐨 𝐀𝐏𝐈𝐬? Zod ensures your runtime data actually matches your types. 💬 How do you handle API validation? Share your approach! #TypeScript #Zod #JavaScript #WebDevelopment #APIDevelopment #Frontend #Backend #Programming #DataValidation #DeveloperTools #NexalabsAgency
To view or add a comment, sign in
-
-
🚀 Mastering res.on() Events in Node.js – The Hidden Power Behind Streams! Ever wondered how you can listen to the lifecycle of an HTTP response in Node.js? That’s where res.on() comes in — it lets you react to key response events such as when data is being sent, finished, or when something goes wrong. Let’s break it down 👇 🧠 What is res.on()? In Node.js, every HTTP response object (res) is an EventEmitter, which means we can subscribe to events like: 'data' → when data chunks are being written 'end' → when all data is sent 'error' → when something goes wrong during transmission 'close' → when the connection closes (even abruptly) This gives developers fine-grained control over network responses — a must for performance monitoring, debugging, and logging. 💡 Why Use res.on()? ✅ Monitor outgoing responses — useful for logging and analytics. ✅ Handle premature disconnects — detect if clients drop off. ✅ Improve debugging — get detailed insights into request/response flow. ✅ Enhance performance tracking — measure when responses actually complete. 🎯 Key Takeaway res.on() turns your Node.js responses into observable events — empowering you to build robust, reliable, and production-grade servers with deeper control over network behavior. #NodeJS #BackendDevelopment #WebPerformance #FullStackDevelopment #JavaScript #LearningInPublic
To view or add a comment, sign in
-
-
⚡ 𝗡𝗼𝗱𝗲.𝗷𝘀 𝗦𝘁𝗿𝗲𝗮𝗺𝘀 𝗤𝘂𝗶𝗰𝗸 𝗖𝗵𝗲𝗮𝘁 𝗦𝗵𝗲𝗲𝘁 𝗳𝗼𝗿 𝗗𝗲𝘃𝘀 ⚡ If you’ve ever worked with large files or data pipelines in Node.js, you’ve probably heard about Streams but maybe not fully used their power. 🧠 𝙒𝙝𝙖𝙩 𝙖𝙧𝙚 𝙎𝙩𝙧𝙚𝙖𝙢𝙨? Streams let you read/write data in chunks instead of loading it all at once. This makes your app faster and memory efficient, especially for big files or APIs. 🔹 𝟰 𝙏𝙮𝙥𝙚𝙨 𝙤𝙛 𝙎𝙩𝙧𝙚𝙖𝙢𝙨 • Readable → for reading data (e.g., fs.createReadStream) • Writable → for writing data (e.g., fs.createWriteStream) • Duplex → both read and write (e.g., sockets) • Transform → modify data while streaming (e.g., compression, encryption) 𝘤𝘰𝘯𝘴𝘵 𝘧𝘴 = 𝘳𝘦𝘲𝘶𝘪𝘳𝘦("𝘧𝘴"); 𝘤𝘰𝘯𝘴𝘵 𝘳𝘦𝘢𝘥𝘢𝘣𝘭𝘦 = 𝘧𝘴.𝘤𝘳𝘦𝘢𝘵𝘦𝘙𝘦𝘢𝘥𝘚𝘵𝘳𝘦𝘢𝘮("𝘪𝘯𝘱𝘶𝘵.𝘵𝘹𝘵"); 𝘤𝘰𝘯𝘴𝘵 𝘸𝘳𝘪𝘵𝘢𝘣𝘭𝘦 = 𝘧𝘴.𝘤𝘳𝘦𝘢𝘵𝘦𝘞𝘳𝘪𝘵𝘦𝘚𝘵𝘳𝘦𝘢𝘮("𝘰𝘶𝘵𝘱𝘶𝘵.𝘵𝘹𝘵"); 𝘳𝘦𝘢𝘥𝘢𝘣𝘭𝘦.𝘱𝘪𝘱𝘦(𝘸𝘳𝘪𝘵𝘢𝘣𝘭𝘦); ✅ Reads input.txt in chunks ✅ Writes to output.txt ✅ No memory overload 🚀 𝙋𝙧𝙤 𝙏𝙞𝙥𝙨 Always handle error events → .on('error', console.error) Use pipeline() from stream module for cleaner error handling Perfect for large JSON, CSV, or log processing 💬 𝐒𝐭𝐫𝐞𝐚𝐦𝐬 𝐚𝐫𝐞 𝐥𝐢𝐤𝐞 𝐰𝐚𝐭𝐞𝐫 keep data flowing smoothly, not flooding memory. If this helped, drop a 💧 below and follow for more quick Node.js guides! #NodeJS #JavaScript #BackendDevelopment #WebDevelopment #FullStackDeveloper #CodingTips #100DaysOfCode #innovation #managemen #technology #creativity #entrepreneurship #careers #startups #marketing #socialmedia
To view or add a comment, sign in
-
-
After 10 years bouncing between Rails, Express, Phoenix, and just about every web framework out there, I'm building something different. Tracks: a Rails-inspired Go framework designed for rapid development with AI assistance. What makes it different: • Terminal UI for development - real-time logs, code generation, and database inspection in one place • AI integration via Model Context Protocol - your assistant can generate features, analyze code, and debug alongside you • Zero runtime dependencies - you own all the generated code, no framework lock-in • Built with HTMX, templ, SQLC, and modern Go tooling The code generation is inspired by music production (I'm a bassist who codes). You compose your app from separate "tracks" that work in harmony - migrations, services, handlers, templates. We're in Phase 0, building in public. If you've been frustrated by endless boilerplate and want to see how AI can enhance developer workflows, I'd love your feedback. Read more: https://lnkd.in/gvCJdf2S #golang #webdev #opensource #htmx
To view or add a comment, sign in
-
𝐖𝐡𝐚𝐭 𝐭𝐡𝐞 𝐈𝐓 𝐈𝐧𝐝𝐮𝐬𝐭𝐫𝐲 𝐇𝐚𝐬 𝐓𝐚𝐮𝐠𝐡𝐭 𝐌𝐞 💻 This journey has been more than coding — it’s been about learning how to 𝐭𝐡𝐢𝐧𝐤 𝐥𝐢𝐤𝐞 𝐚 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫. From late-night debugging to designing full systems from scratch, I’ve learned how every layer of technology connects to create something meaningful. 💡 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝: With 𝐍𝐞𝐱𝐭.𝐣𝐬, 𝐑𝐞𝐚𝐜𝐭, 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭, 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒, I’ve understood the art of building clean, responsive, and optimized user interfaces that balance performance with design. ⚙️ 𝐁𝐚𝐜𝐤𝐞𝐧𝐝: Using 𝐍𝐨𝐝𝐞.𝐣𝐬 𝐚𝐧𝐝 𝐍𝐞𝐬𝐭𝐉𝐒, I’ve mastered modular architecture, authentication (JWT, guards, interceptors), API optimization, and structured backend logic that scales. 🗄️ 𝐃𝐚𝐭𝐚𝐛𝐚𝐬𝐞𝐬: Working with 𝐌𝐨𝐧𝐠𝐨𝐃𝐁 𝐚𝐧𝐝 𝐒𝐐𝐋 𝐒𝐞𝐫𝐯𝐞𝐫 taught me the importance of schema design, indexing, normalization, and how database structure directly impacts performance. 🧠 𝐂𝐨𝐫𝐞 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠𝐬: 1. Clean, readable code > complex shortcuts 2. Documentation and version control are non-negotiable 3. Real growth happens when you go beyond “it works” Every bug, every sprint, every review has shaped how I approach problems — with patience, precision, and purpose. Technology evolves fast, but the mindset to 𝐥𝐞𝐚𝐫𝐧, 𝐚𝐝𝐚𝐩𝐭, 𝐚𝐧𝐝 𝐛𝐮𝐢𝐥𝐝 𝐛𝐞𝐭𝐭𝐞𝐫 𝐞𝐯𝐞𝐫𝐲 𝐝𝐚𝐲 is what truly defines a developer. ⚡ 💬 𝐂𝐨𝐦𝐦𝐞𝐧𝐭 𝐲𝐨𝐮𝐫 𝐭𝐡𝐨𝐮𝐠𝐡𝐭𝐬 𝐛𝐞𝐥𝐨𝐰 — 𝐰𝐡𝐚𝐭’𝐬 𝐨𝐧𝐞 𝐭𝐡𝐢𝐧𝐠 𝐭𝐡𝐞 𝐈𝐓 𝐢𝐧𝐝𝐮𝐬𝐭𝐫𝐲 𝐡𝐚𝐬 𝐭𝐚𝐮𝐠𝐡𝐭 𝐲𝐨𝐮? #NextJS #NestJS #NodeJS #React #MongoDB #SQL #FullStackDevelopment #SoftwareEngineering #LearningJourney #TechGrowth
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development