📸 When "Add Profile Picture" Becomes a 4-Bug Hunt Week 6: "JWT authentication complete!" ✅ Week 7: "Let's add profile picture upload!" Reality: 6 days, 21 commits, 4 debugging sessions 😅 The Challenge: ✅ Backend works (API returns 200 OK) ✅ Database saves correctly ✅ File uploads to disk ❌ Picture still won't show The Hunt: Bug #1: Path mismatch → Backend: "/uploads/profiles/user.jpg" → Frontend: "profiles/user.jpg" Bug #2: No fetch on load → Added getCurrentProfilePicture() API Bug #3: Type mismatch → profilePictureUrl vs pictureUrl Bug #4: React state not syncing → useState doesn't update with prop changes → Fixed with useEffect What Shipped: 🎯 Drag-and-drop upload 🎯 JWT-protected endpoints 🎯 Auto-delete old files 🎯 Avatar fallback (user initials) 🎯 Client + server validation The Lesson? Backend working ≠ Feature working Full-stack = debugging ALL layers 🔍 Tech: Spring Boot + React + PostgreSQL 21 commits, 1 feature, 4 bugs squashed ✅ From Hello World to real features 🚀 Repository: https://lnkd.in/gDE8vmWA #FullStackDevelopment #SpringBoot #ReactJS #Debugging #LearningInPublic
More Relevant Posts
-
⚡ Codex Build Challenge | Day 10 — Connecting the Dots Between Frontend, Backend & Logic Every day feels like watching the bigger picture of development come together — today was one of those “everything clicks” days. 💡 React ⚛️ Dived deep into Redux, the core of state management in large-scale React apps: • Understood what State, Store, Actions, Reducers, and Slices are • Learned how the Redux lifecycle works — from clicking a button in UI ➡ dispatching an action ➡ updating the store ➡ re-rendering the component • Explored createSelector for optimized state reading LeetCode 💻 • Revisited LeetCode 84 (Largest Rectangle in Histogram) and Maximal Rectangle — mastering stack-based area calculation Database & SQL 💾 • Learned full CRUD — Create, Read, Update, Delete • Explored RDBMS, MySQL basics, and commands like CREATE, USE, and INSERT • Understood signed vs unsigned datatypes and differences between DDL, DML, and TCL commands OOPs in Java ☕ • Started Object-Oriented Programming — understood why we need it • Learned the four pillars of OOP and the difference between abstraction and encapsulation Each topic today felt like a building block — one connecting to another, forming the real foundation of a software engineer. 🧱 #CodexBuildChallenge #React #Redux #MySQL #OOPs #LeetCode #FullStack #DeveloperJourney #Java Tagging: Akshay Saini 🚀, Hitesh Choudhary
To view or add a comment, sign in
-
The code worked flawlessly for 7 years… until one innocent await brought everything down. 😅 We recently hit a strange production issue. A module that had been stable for years suddenly started producing inconsistent results — but only in production, under high load. Local? Fine. Staging? Perfect. Production? Absolute chaos. Logs started showing errors! I Panicked. The only change I had made: adding an await to call a new asynchronous function. After a rollback and some deep digging, I found the culprit... A variable named queryParams wasn’t declared inside any function — meaning it lived in global scope. So when one request paused on await, another concurrent request came in and modified the same object. When the first one resumed, it unknowingly worked with the mutilated data, to run a sql query, which started throwing errors. A true race condition, hiding in plain sight for 7 years — only revealed by a single async call. We replicated the behavior by bombarding the staging environment with concurrent requests, confirmed the theory, and fixed it by simply scoping the variable locally. Lesson learned: Even in single-threaded Node.js, async code can create concurrency issues if shared state isn’t handled carefully. Sometimes, one misplaced variable is all it takes to cause production chaos. The bug wasn’t new — it was just waiting 7 years for the right await to wake it up. 😅 #nodejs #backend #javascript #developer #expressjs
To view or add a comment, sign in
-
🧩 The Building Blocks of Spring Boot — Essential Annotations ⚙️ In the last post, we saw how @SpringBootApplication magically bootstraps your app. Now, let’s zoom in on the annotations that give your Spring components life. 🚀 💡 The Core Trio: @Component, @Service, @Repository These are the heartbeats of the Spring ecosystem — each marks a class as a bean managed by the Spring container. But they’re not just labels — each has a purpose 👇 🧱 @Component – The Foundation Marks a class as a Spring-managed bean. It’s the most generic stereotype — you can use it anywhere when the class doesn’t fit a more specific role. ⚙️ @Service – The Business Brain Specialized version of @Component for service-layer logic. It’s where your business rules live. 🗃️ @Repository – The Data Whisperer Another @Component specialization for data access. Spring adds exception translation here — turning low-level database errors into clean Spring exceptions. 🧭 @RestController – The API Gateway Combines @Controller + @ResponseBody → automatically returns JSON or XML responses. ➡️ Every endpoint lives here — your bridge between frontend and backend. 🛣️ @PathVariable – The URL Decoder Binds parts of the URL path to your method parameters. 🧾 @RequestParam – The Query Detective Binds query parameters to method parameters. Spring Boot annotations are like superpowers — each one removes boilerplate and lets you focus on what matters: your logic There are lots of annotations where each one have a significant impact on where they are used. Checkout springs documentation to learn more about them. #Spring #Springboot #code #BackEndDevelopment #java #Annotations
To view or add a comment, sign in
-
-
I haven’t been posting here for a while. During this time, I’ve been learning through Cohort 3 by Harkirat Singh, focusing on building a solid understanding of backend development and related tools. Here’s a summary of what I’ve covered recently: • Promises and Async/Await • Basic CMD and WSL commands • Built a TODO app in the terminal (CLI) • Created an HTTP server and tested it with Postman • Implemented a TODO application on that server • Middleware, Headers, Query Params, and Express • Axios, Fetch, and HTTP concepts • Authentication and connecting frontend with backend • Introduction to MongoDB • Built a backend for a demo course-selling application • Clearer understanding of how databases and servers interact • Used Zod, bcrypt, environment variables, and error handling with try-catch Starting React from today. #cohort3 #javascript #react #webdevelopment #learning
To view or add a comment, sign in
-
💡 JSON: The King of Data with No Rules 👑📦 JSON is like that chill friend who solves all problems… but also creates a few new ones on Friday evening 😅 Here are some funny facts every developer will relate to: 📌 JSON Fun Facts • JSON has only 2 real enemies: 1️⃣ Commas 2️⃣ Missing Commas 😭 • JSON doesn’t support comments… Because developers shouldn’t explain anything anyway 🤫 • If JSON is invalid, it’s because of one invisible space from 2017 🫥 • JSON says: “I’m lightweight!” Also JSON after production: 5MB + base64 images 💪 • True Story: JSON.parse() has caused more tears than breakups 💔 • Nested JSON objects look like: { { { { HELP } } } } 🕳️ • It replaced XML everywhere… except in enterprises that still fear change 👴 • Debugging syntax errors in JSON = Finding a missing comma in a dense forest 🌲 ✨ Actual Fun Fact: JSON was invented in 2001… and became popular because JavaScript claimed it like a proud parent 👶 🎯 Moral of the story: JSON keeps the world running… and developers awake at 3 AM. 😵💻 #JSON #WebDevelopment #TechHumor #JavaScript #API #Frontend #Backend #ProgrammingLife #DeveloperHumor #LinkedInHumor #DataFormats
To view or add a comment, sign in
-
🚀 Understanding HTTP Status Codes — The Language of the Web 🌐 Every time you make an API call or open a webpage, your browser and the server talk to each other — and they do it through HTTP Status Codes. These tiny three-digit numbers silently decide whether your app runs smoothly or breaks unexpectedly. This image is your quick developer cheat sheet for remembering what each range means 👇 🔹 1xx — Informational: These indicate the request was received and the process is continuing. Example: 100 Continue, 101 Switching Protocols. 🔹 2xx — Success: Everything worked perfectly — the request succeeded, and the response is valid. Example: 200 OK, 201 Created, 204 No Content. 🔹 4xx — Client Errors: The problem is usually on the user or client side — bad data, missing permissions, or invalid URLs. Example: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 409 Conflict. 🔹 5xx — Server Errors: When your code is fine but the server fails to handle the request. These mean “it’s not your fault… yet.” Example: 500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable. 💡 Key Takeaway: Mastering HTTP status codes helps you debug faster, design better APIs, and build resilient systems. It’s one of the simplest yet most powerful skills for backend and API developers. 📎 Pro Tip: Next time you hit an error, don’t just look at the message — listen to the code. It tells you exactly what’s wrong. 🔗 Rakesh Saive | Java • Spring Boot • API Design • Backend Engineering #Java #SpringBoot #WebDevelopment #APIs #Backend #HTTP #Microservices #Developers #Learning #Programming #Debugging #Code
To view or add a comment, sign in
-
-
💡 @SpringBootApplication — The One Annotation to Rule Them All 👑 Every Spring Boot project begins with that famous line: @SpringBootApplication public class MyApp {} and suddenly… everything just works. But what’s really happening behind this one-liner? Let’s lift the hood. 🔧 🧩 It’s Actually Three Annotations in a Trench Coat @SpringBootApplication = ➡️ @Configuration ➡️ @EnableAutoConfiguration ➡️ @ComponentScan Together, they tell Spring: “Hey, build my beans, wire them up, auto-configure the context, and scan for components — while I grab a coffee.” ☕ 🧱 @Configuration – The Bean Architect Marks the class as a source of bean definitions. Spring reads it, builds all the beans you declare with @Bean, and puts them in the ApplicationContext. Think of it as your app’s blueprint. 🏗️ ⚙️ @EnableAutoConfiguration – The Psychic Engineer 🤞 This is where the Boot in Spring Boot truly shines. 🫡 It scans your classpath and dependencies, then automatically sets up beans that make sense for your app. For example: ⚡ Add spring-boot-starter-web → you instantly get Tomcat, JSON converters, and a DispatcherServlet. 😎 Add spring-boot-starter-data-jpa → voilà, EntityManager, DataSource, and TransactionManager appear. It’s basically Spring’s to-do list for making your app run without you begging it to. 😄 🔍 @ComponentScan – The Bean Detective Scans your package and subpackages for annotated classes (@Component, @Service, @Repository, @Controller) and registers them as beans. No XML. No manual wiring. Just pure Java joy. @SpringBootApplication is Spring Boot’s way of saying: “I’ve got you covered — go focus on the logic, I’ll handle the wiring.” ⚡ In the next post, we’ll explore other powerful Spring Boot annotations — and see how each one brings its own bit of magic. ✨ Stay tuned! 💬 #SpringBoot #JavaDevelopers #SoftwareEngineering #BackendDevelopment #SpringFramework
To view or add a comment, sign in
-
-
🚀 Built my first 𝗡𝗼𝘁𝗲𝘀 𝗔𝗽𝗽 from scratch — and learned way more than I expected. 𝗪𝗵𝗮𝘁 𝗶𝘁 𝗱𝗼𝗲𝘀: • Full CRUD operations with real-time search & sorting • Persistent storage using localStorage • XSS protection through proper input sanitization 𝗪𝗵𝗮𝘁 𝗜 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗹𝗲𝗮𝗿𝗻𝗲𝗱: • Managing event listeners efficiently (avoiding memory leaks was trickier than expected) • localStorage edge cases the hard way — tried storing undefined, broke everything 😅 • Breaking features into smaller, reusable modules 𝗪𝗵𝗮𝘁'𝘀 𝗻𝗲𝘅𝘁: • Refactoring into MVC architecture • Adding a Rich Text Editor with formatting options • Scaling to full-stack (Node.js + MongoDB + authentication) For me, this wasn't just about building a notes app — it was about understanding the fundamentals that make real applications work. 🔗 Code: https://lnkd.in/gyJp9aGm What was your biggest "𝗮𝗵𝗮 𝗺𝗼𝗺𝗲𝗻𝘁" from your first JavaScript project? #JavaScript #WebDevelopment #mernstack #softwaredev
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