Learning backend development with Cohort 3 by Harkirat Singh

📸 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

Let’s talk about two unsung heroes of Express.js — Middlewares and Error Handlers ⚙️🔥 Middlewares act like traffic controllers for your requests 🚦 They help with things like logging, authentication, validation, parsing data, and then smoothly pass the request to the next step. Clean, reusable, and structured flow — that’s middleware magic ✨ Now, Error Handlers are your app’s safety net 😎 When something breaks, they catch it, respond with clear messages, and stop your app from crashing in chaos. Why they matter? ✅ Reusable logic ✅ Cleaner architecture ✅ Easy debugging ✅ Better user experience In short: 👉 Middleware = Processes the request 👉 Error Handler = Saves the app when things go wrong If you're learning Express.js, mastering these will level you up from beginner to pro 🚀 #ExpressJS #NodeJS #BackendDevelopment #JavaScript #WebDev #CodingJourney #LearnBuildGrow 💻✨

Task 1/10: Today I built real pagination using: - React + TypeScript - TanStack Query v5 : makes API data easy and smart as it caches, refetches, synchronizes, and manages loading states automatically - Express + MongoDB - Axios for API calls What I learned: ✔ How pagination works (page → skip → limit) ✔ Why backend must validate & cap limit ✔ .lean() improves query speed ✔ Query keys like ["posts", page] make caching easy ✔ invalidateQueries(["posts"]) refreshes paginated pages Github repo : https://lnkd.in/dewmUn7c #Reactjs #Typescript #TanStackQuery #pagination

Learning by building: TicTacToe with authentication 🎮 I felt moved to share a simple project I've been working on to practice full-stack development with Next.js and TypeScript. Essentially a quick demo showing what I produced while learning authentication flows. This project helped me understand how authentication really works under the hood - from email verification to session cookies to protected routes. What I learned: • Implementing secure OTP email verification with Supabase • Server vs client-side authentication patterns • Database management and restoration • Middleware for protected routes • Troubleshooting production-level issues Tech stack: Next.js 15, TypeScript, Supabase, Tailwind CSS Not perfect, not deployed, but real hands-on experience with modern web development. Building in public, learning every day 🚀 To more 0s and 1s! 🥂 🔗 Code on GitHub: https://lnkd.in/djEPcGj9 #WebDevelopment #NextJS #LearningToCode #SoftwareDevelopment #BuildInPublic #SoftwareDeveloper

🚀 Today I Learned: Creating Our First Express Server Today’s learning was all about getting hands-on with Express.js, setting up a Node.js server, and understanding how npm and its ecosystem work behind the scenes. ⚙️💡 🧩 1️⃣ Initializing the Project I started by creating a new folder and running: npm init It asked a few setup questions and generated a package.json file — which acts as the configuration file for every Node.js project. It stores project metadata and dependencies. 📦 2️⃣ Installing Express Next, I installed Express using: npm i express This created: node_modules → contains all dependencies of Express (and their sub-dependencies) package-lock.json → stores the exact versions of all installed packages to ensure consistency ⚙️ 3️⃣ Understanding Dependencies I learned that: Dependencies are external libraries your project needs. Symbols in package.json mean: ^ (caret) → updates to the latest minor version ~ (tilde) → updates to the latest patch version 🖥️ 4️⃣ Creating a Server using Express Then I wrote my first server using Express to handle basic routes and send responses — the beginning of understanding how backend servers work. 🔁 5️⃣ Using Nodemon for Auto-Reload Manually restarting the server after each change was hectic 😅, so I installed Nodemon globally using: npm i nodemon -g The -g flag installs it globally, and Nodemon automatically refreshes the server whenever code changes — super useful for development! 🚀 💡 Key Takeaway: Understanding the basics of npm, Express, and Nodemon gives a strong foundation for backend development. From project initialization to auto-refreshing servers — this is where the real journey of Node.js begins! 💪 #NodeJS #ExpressJS #BackendDevelopment #JavaScript #LearningInPublic #WebDevelopment #Nodemon #ServerSetup #DeveloperJourney

🚀 Just completed building a Full-Stack Contact Management System! 🎉 Excited to share my latest project where I built a complete REST API using Go (Golang) and SQLite, integrated with a sleek Next.js frontend. This 2.5-hour journey was full of learning moments! 💡 Key Learnings: ✅ Building REST APIs with Go from scratch ✅ CRUD operations with SQLite ✅ Configuring CORS (this one was a challenge, but we got there!) ✅ Working with Go packages and routing ✅ Setting up Go servers ✅ Connecting Next.js frontend to Go backend 🔧 Tech Stack: - Backend: Go + SQLite - Frontend: Next.js - Database: SQL The CORS configuration initially gave us a hard time, but troubleshooting it was an incredible learning experience. These real-world challenges are what make us better developers! 🎥 Watch the full tutorial: https://lnkd.in/d-85szuV Whether you're new to Go or looking to build full-stack applications, this project covers everything you need to know about creating production-ready REST APIs. What's your go-to tech stack for building APIs? Let me know in the comments! 👇 #GoLang #RestAPI #WebDevelopment #FullStackDevelopment #NextJS #SQLite #Programming #SoftwareDevelopment #CodingJourney #TechTutorial #BackendDevelopment #LearnToCode #DeveloperLife #API #TechEducation

🚀 Master the HTTP Status Codes Every Developer Should Know! Whether you’re a web developer, backend engineer, or API enthusiast — understanding HTTP Status Codes is a must. These tiny 3-digit numbers tell you exactly what’s happening between your client and server 👨💻 ✅ 200 – OK → Everything’s working perfectly! 🔁 301 / 302 – Redirects → Your page has moved. ❌ 400 / 401 / 403 / 404 – Client Errors → Fix your request! 💥 500 / 502 / 503 – Server Errors → Something went wrong on the server. Keep this handy visual as your quick reference cheat sheet ⚡ #WebDevelopment #HTTP #Backend #APIs #Coding #JavaScript #SoftwareEngineering #Learning #TechTips #FullStack #Programming #DeveloperCommunity

𝗨𝗻𝗽𝗼𝗽𝘂𝗹𝗮𝗿 𝗼𝗽𝗶𝗻𝗶𝗼𝗻: 𝗬𝗼𝘂 𝗱𝗼𝗻'𝘁 𝗻𝗲𝗲𝗱 𝘁𝗵𝗮𝘁 𝗹𝗶𝗯𝗿𝗮𝗿𝘆. Few weeks ago, a dev asked: "Should I use 𝗔𝘅𝗶𝗼𝘀 or 𝗙𝗲𝘁𝗰𝗵?" My answer: "Neither. You probably do not need that much data." Here is the thing: We love adding libraries because it feels productive. But every dependency is: 📦 More KB in your bundle 🐛 Another potential breaking change 🔐 Another security vulnerability 📚 More docs your team must learn 𝗠𝘆 𝗿𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯: Before 𝗻𝗽𝗺 𝗶𝗻𝘀𝘁𝗮𝗹𝗹, ask:   1. Can I do this in 20 lines of vanilla JS?   2. Will this still be maintained in 2 years?   3. Does it solve a real problem, or just feel fancy? 𝗥𝗲𝗮𝗹 𝗲𝘅𝗮𝗺𝗽𝗹𝗲 𝗳𝗿𝗼𝗺 𝗹𝗮𝘀𝘁 𝗺𝗼𝗻𝘁𝗵: ❌ Almost installed react-intersection-observer (12KB) ✅ Used native Intersection Observer API (0KB, already in browsers) 𝗥𝗲𝘀𝘂𝗹𝘁: Same functionality, zero dependencies. 𝗧𝗵𝗲 𝗯𝗲𝘀𝘁 𝗰𝗼𝗱𝗲 𝗶𝘀 𝗻𝗼 𝗰𝗼𝗱𝗲. 𝗧𝗵𝗲 𝘀𝗲𝗰𝗼𝗻𝗱 𝗯𝗲𝘀𝘁 𝗰𝗼𝗱𝗲 𝗶𝘀 𝗰𝗼𝗱𝗲 𝘆𝗼𝘂 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗲𝗹𝘆. I'm not saying "never use libraries." I'm saying: 𝗽𝗮𝘂𝘀𝗲 𝗯𝗲𝗳𝗼𝗿𝗲 𝘆𝗼𝘂 𝗱𝗼. 𝗪𝗵𝗮𝘁'𝘀 𝗮 𝗹𝗶𝗯𝗿𝗮𝗿𝘆 𝘆𝗼𝘂 𝗿𝗲𝗮𝗹𝗶𝘇𝗲𝗱 𝘆𝗼𝘂 𝗱𝗶𝗱𝗻'𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗻𝗲𝗲𝗱? 👇 #EngineeringLeadership #React #TechLeadership #WebDev

I'm excited to officially announce that my full-stack project, "𝐓𝐫𝐚𝐜𝐤 𝐘𝐨𝐮𝐫 𝐓𝐢𝐦𝐞", is 𝘯𝘰𝘸 𝘭𝘪𝘷𝘦 𝘢𝘯𝘥 𝘰𝘱𝘦𝘯 for everyone!💻 This application is a complete time-tracking system built from the ground up, allowing users to register, log in, and manage their daily tasks and activities through a secure and responsive web interface. 𝐘𝐨𝐮 𝐜𝐚𝐧 𝐭𝐫𝐲 𝐭𝐡𝐞 𝐥𝐢𝐯𝐞 𝐚𝐩𝐩 𝐡𝐞𝐫𝐞 (Version 1.0): https://lnkd.in/gcYK_iHg [track-your-time .onrender .com] ## 𝐏𝐫𝐨𝐣𝐞𝐜𝐭 & 𝐓𝐞𝐜𝐡𝐧𝐢𝐜𝐚𝐥 𝐃𝐞𝐭𝐚𝐢𝐥𝐬 For me, this was a deep dive into the entire software development lifecycle, not just coding. The goal was to build a robust, production-ready application. Here's what's under the hood: ✅ 𝐁𝐚𝐜𝐤𝐞𝐧𝐝: A secure Java application built with Servlets, JSP, and JDBC, using the MVC pattern. ✅ 𝐃𝐚𝐭𝐚𝐛𝐚𝐬𝐞: A cloud-hosted MySQL database (on Aiven) managed with an efficient HikariCP connection pool (using a Singleton pattern) to prevent Too many connections errors. ✅ 𝐂𝐈/𝐂𝐃 𝐏𝐢𝐩𝐞𝐥𝐢𝐧𝐞: The project is fully automated using GitHub Actions. Every push to main automatically builds, tests, and deploys the new version. ✅ 𝐂𝐨𝐧𝐭𝐚𝐢𝐧𝐞𝐫𝐢𝐳𝐚𝐭𝐢𝐨𝐧: The app is packaged with Tomcat into a Docker container (using a multi-stage Dockerfile) for a consistent and portable environment. ✅ 𝐃𝐞𝐩𝐥𝐨𝐲𝐦𝐞𝐧𝐭: The Docker container is deployed and hosted on Render, with all credentials securely managed via environment variables. This journey covered everything from writing Java code to debugging live server issues. I'm proud to have it at 𝐯1.0 and available for everyone. You can explore the full codebase, including the CI/CD workflows and Dockerfile, on my GitHub: https://lnkd.in/ggf7t-Vx #Java #JavaDeveloper #FullStackDeveloper #CI #CD #GitHubActions #Docker #Render #Servlets #JSP #MySQL #PortfolioProject #SoftwareEngineering #CVR