I wasted hours debugging CORS. Turns out… There was nothing wrong with my backend. A few years ago, back in my college days, I built a registration app for our college fest. Simple CRUD application, a small admin panel for managing teams and tracking winners. Node.js + MongoDB backend. React frontend. Deployed separately because that’s what I thought “real” apps were supposed to look like. A bit of Heroku credit for the server, GitHub Pages for the UI. And honestly, that's the exact setup every other tutorial contains. And then the fun started: CORS errors. APIs are getting cancelled. At one point, I was convinced that it was impossible to solve, and I had made a huge mistake taking up this project. Fast forward two years into working as a Software Engineer, and I was revisiting this project when something hit me. The split architecture wasn't even necessary to begin with. Frameworks like Express, FastAPI, and Spring Boot can all serve your frontend build directly from the backend. One deployment, one domain, one item to manage. And the CORS issue specifically? It wouldn't have existed at all. Serve the frontend from the same server as the API, and the browser sees a single origin: no preflight, no headers to configure, nothing. I spent hours on a problem that the architecture itself would have prevented. Now, I'm not saying that this is the right call for every project. Larger systems do benefit from separating concerns and leaning on CDNs to serve static assets. But for MVPs, internal tools, or hackathon builds, one deployable unit is almost always the cleaner, faster, and cheaper path. What’s something you over-engineered early on because you thought you were supposed to? Curious to know what your setup looked like. #FastAPI #Python #FullStack #BackendDevelopment #SoftwareEngineering #React #DevTips #PythonDeveloper #JavaDeveloper #SpringBoot
Over-engineering CORS with Node.js and React
More Relevant Posts
-
Every junior developer goes through a phase where they want to rewrite everything in the hot new framework. I've been there. "This would be so much cleaner in Rust." "We should migrate to Next.js." "Why aren't we using X yet?" Here's what nobody tells you about stack migrations: the code is the easy part. The hard part is all the institutional knowledge baked into the old system that nobody wrote down. The edge cases the current team doesn't even remember handling. The three lines of config that prevent a production incident every quarter. I ship projects in Rust, TypeScript, and Python — sometimes all three in the same service. Not because I can't pick a lane, but because each one solves a specific problem well. The trick isn't finding the perfect stack. It's knowing when a tool has genuinely run out of road vs. when you're just bored. Before you rewrite, ask yourself: am I solving a real technical constraint, or am I chasing novelty? Both are valid reasons, but only one actually ships. #webdev #developer
To view or add a comment, sign in
-
Excited to share my latest full-stack project: A Product Inventory Management System! 📦 I recently took a deep dive into modern backend development by building a high-performance API from scratch to connect with a Node.js frontend. It was an incredible learning experience in bridging the gap between client and server! Here is what I built: ✅ A complete RESTful API handling full CRUD operations (Create, Read, Update, Delete). ✅ Seamless database integration using SQLAlchemy ORM for reliable session management. ✅ Secure Cross-Origin Resource Sharing (CORS) implementation so my local frontend and backend can communicate safely. The Tech Stack: 🐍 Backend: Python, FastAPI, Uvicorn, SQLAlchemy 🌐 Frontend: Node.js, Web UI Building this helped me solidify my understanding of dependency injection in FastAPI, managing relational databases, and debugging those tricky CORS errors! I’d love to hear your thoughts or feedback! You can check out the full source code and documentation on my GitHub below. 👇 🔗 GitHub Repository: https://lnkd.in/gvxP8wpj #FastAPI #Python #NodeJS #WebDevelopment #BackendDevelopment #FullStack #CodingJourney #SoftwareEngineering #LearningToCode All thanks to TELUSKO for the incredible tutorials and guidance.
To view or add a comment, sign in
-
-
You don’t need three monitors to be productive. Here’s my minimalist MERN stack setup. I see developers with massive rigs and RGB everything. Meanwhile, I’m shipping production apps from a laptop and one extra screen. Tools: - VS Code - Docker - Postman That’s it. I use VS Code for coding, Docker for consistent environments, and Postman for API testing. No clutter, no distraction. How I organize environment variables and API routes: - One .env.example file in the repo (never commit real keys). - A single api/ folder with route versioning (/v1, /v2). - Environment-specific configurations loaded via dotenv and Docker Compose overrides. One extension that saved me 10 hours: Thunder Client (inside VS Code) – it replaces Postman for 80% of my local testing. No context switching, no “where did I save that collection?” It’s a game changer. What’s one tool you can’t live without? Share below 👇 I’m always looking for my next time‑saver. #DevSetup #MERNStack #CodingLife
To view or add a comment, sign in
-
-
I ran `tsgo` on my 7-package TypeScript monorepo. The speed gain was 3.2x, not 10x. That 10x number everyone's quoting? It's from VS Code's codebase. Millions of lines. Most of us won't see it. But speed isn't what worries me about the TypeScript Go rewrite. GitHub issue #516 has been open since March 2025. The plugin API that Angular, Vue, ts-morph, and hundreds of tools depend on is gone. No replacement timeline. Jake Bailey from the TS team said it directly: "Go is a statically compiled language without good plugin support." The compiler is getting faster. The community is getting further from the machinery. I wrote about what this actually looks like from inside a production TypeScript stack (Engram, Ouija, 6 MCP servers, Next.js portfolio) and where my migration broke. https://lnkd.in/dMPEBtq9 #TypeScript #DeveloperTooling #ProjectCorsa
To view or add a comment, sign in
-
Most production bugs I’ve seen around environment variables aren’t caused by missing values. They’re caused by misunderstanding what environment variables actually are. A few things that have burned teams I know: - Environment variables are an OS primitive. Every process gets a flat key-value copy of its parent’s environment. A copy, not a reference. What your child process changes, your parent never sees. - Your .env file does nothing on its own. Something has to read it. And most tools, including dotenv, will NOT overwrite a variable that already exists. So if your shell profile already exports DATABASE_URL, your .env is silently ignored. This is probably the most common “works on my machine” culprit. - Docker starts with a clean slate. It does not inherit your shell environment. If you’re not explicitly passing variables with -e or –env-file, the container doesn’t know they exist. - React’s process.env is not real runtime config. The bundler replaces every reference with a literal string at build time. That value is now hardcoded in the JavaScript your users download. If you put a secret in REACT_APP_anything or NEXT_PUBLIC_anything, it is not a secret anymore. - Build time and runtime are fundamentally different. A frontend bundle bakes values in at build time. An Express server reads the actual process environment when it starts. You can change a backend variable and restart. You cannot do that with a bundled frontend without rebuilding. Deleted a committed secret in the next commit? The key is still in git history. git show will find it. The only fix is to rotate the credential. The mental model that fixes most of this: secrets always runtime, never build time, never committed to source code. #SoftwareEngineering #DevOps #WebDevelopment #BackendDevelopment #JavaScript #Docker #NodeJS #EngineeringLeadership
To view or add a comment, sign in
-
-
Most React devs make debugging harder than it needs to be. Not because React is complex. Because their components are nameless. Here’s what actually happens when you don’t name components. Your stack trace becomes useless. <Anonymous> everywhere. Zero context. Zero speed. Now compare that to this: <UserProfile> <SidebarNavigation> <BillingSettings> Suddenly, the error tells you exactly where to look. Named components do three things extremely well: • They make stack traces readable • They make refactors safer • They make large codebases survivable This matters more than people admit. When an error hits production, you’re not “reading code”. You’re scanning under pressure. Names reduce cognitive load. Anonymous components increase it. Yes, React will sometimes infer names. No, you should not rely on that. Be explicit. Future you will thank you. If your component does something, it deserves a name. Anonymous components aren’t “clean”. They’re lazy. —— 👋 Join 30,000+ SWEs learning JS, React, Node.js, and Software Architecture: https://thetshaped.dev/ ——— 💾 Save this for later. ♻ Repost to help others find it. ➕ Follow Petar Ivanov + turn on notifications. #react
To view or add a comment, sign in
-
-
A production bug taught me this lesson One small issue. One missing edge case. And suddenly the whole workflow started breaking. At first, I looked at the code. But the real problem wasn’t the code itself. It was: assumptions we made missing logs unclear ownership no retry strategy weak failure handling That day reminded me: The hardest part of engineering is not building the happy path. It’s designing for what happens when things go wrong. Now every feature I build starts with: What can fail? How will I trace it? Who owns it? How does it recover? Real growth as a developer begins when you stop asking “Will this work?” and start asking “How will this fail?” What’s a bug that changed the way you build systems? #SoftwareEngineering #BackendDevelopment #SystemDesign #DeveloperGrowth #ProblemSolving #EngineeringMindset #NodeJS #NestJS #FullStackDevelopment #BuildInPublic
To view or add a comment, sign in
-
React Day 22 to 26 - Architecture, Performance, and Persistence: Clearing the React Backlog Sheryians Coding School Exams and practicals might have slowed down my posting frequency, but they didn’t stop the grind. This Sunday was about one thing: Aggressive Backlog Clearance. I’ve spent the last few days diving deep into advanced React patterns, moving beyond basic hooks into professional-grade application architecture. Here’s a breakdown of what was mastered: 🏗️ Routing & Architecture (The Skeleton) I shifted from basic routing to a robust Centralized Configuration approach. • Nested Routing & Outlets: Implementing layouts that persist while sub-components swap dynamically. • Data Routing & Loaders: Moving API calls out of useEffect and into Route Loaders. This ensures data is fetched as the component loads, eliminating "flash of empty state" issues and improving UX. • Protected Routes: Implementing authentication guards to secure sensitive application states. 🔌 API & Folder Structure (The Nervous System) Clean code isn't an accident; it’s designed. • Axios/Fetch Configuration: Set up a centralized API layer with a base URL and interceptors. • Error Handling: Standardized response/error management in a single config file to keep components "lean" and focused only on the UI. ⚡ Performance Optimization (The Brain) Today’s focus was Memoization. Understanding when to optimize and when to let React handle it: • React.memo: Preventing unnecessary re-renders of functional components. • useCallback: Memoizing functions to maintain referential equality across renders. • useMemo: Optimizing expensive calculations to save CPU cycles. The takeaway: Exams are temporary, but the discipline to show up on a Sunday and bridge the gap between "knowing" and "building" is what creates a Senior Engineer. Back on track. Ready for the next sprint. 💻 #ReactJS #FrontendEngineering #WebDevelopment #CodingDiscipline #JavaScript #Programming #MERNStack #TechLearning
To view or add a comment, sign in
-
-
🚨 Already 30+ developers have joined the learning marathon DipsCode is officially launching FastAPI Backend Development. Not just "hello world" tutorials. Not just CRUD apps. We're talking — ✅ REST APIs from scratch ✅ Dependency Injection ✅ Auth, JWT, OAuth2 ✅ Database integration ✅ File upload ✅ Middleware ✅ Background Tasks ✅ Caching ✅ WebSocket ✅ Real-world project structure ✅ Docker integration ✅ And the end goal? Microservices Architecture This is for you if: → You're a frontend dev who wants to go full-stack → You know Python but never built a real backend → You want to crack backend interviews with confidence → You're tired of watching and want to actually build 🔥 DipsCode FastAPI Series — Starting Soon. Drop a "IN" in the comments if you want to join. Share this with someone who keeps saying "I need to learn backend." That person needs this more than they know. 🙌 #FastAPI #Python #BackendDevelopment #WebDevelopment #DipsCode #Microservices #LearnToCode #PythonDeveloper #SoftwareEngineering #100DaysOfCode
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
During my college days , I too had issue with CORS in my first project as I never deployed front end and backend in same machine and it bugged me so much that now I have a habit of setting up CORS policies as the first step of project development