João A.’s Post

🚀 Built my portfolio — but this time, I focused on doing it right. Over the past few days, I built a full-stack portfolio website that doesn’t just showcase projects, but reflects real-world development practices. 🔹 What it includes: • Dynamic LeetCode stats (via backend API) • GitHub stats integration using REST API • Fully responsive UI • Clean, component-based architecture 🔹 Key features: • Responsive navbar with quick actions • Phone number & email copy on click • LinkedIn profile redirection • Resume download on click • Project showcase with Live Demo + GitHub links 🔹 What makes this different: Instead of relying on third-party services, I built my own backend to fetch and manage data. • Solved real-world CORS issues • Built a Node.js + Express backend • Used GraphQL API for LeetCode stats • Integrated GitHub REST API • Deployed backend on Render • Deployed frontend on Vercel 🔹 What I learned: Handling API restrictions, deployment challenges, and structuring a full-stack project — things you don’t usually get from basic tutorials. 🔗 Live: https://lnkd.in/g55U-mkj 💻 GitHub: https://lnkd.in/gBMaDMA2 Would love your feedback 🙌 #webdevelopment #reactjs #nodejs #fullstack #portfolio #javascript #developers

Hitesh Choudhary I used to think frontend and backend just “connect automatically.” Like magic. Click a button → data appears. But after this lecture, I finally understood what actually happens behind the scenes… and it’s not magic at all. It’s configuration, rules, and a lot of small things working together. 💻 What I learned: • How frontend and backend communicate through APIs • Why CORS exists (and why it blocks your requests 😅) • How proxy helps in development to avoid CORS issues • Real request flow: Frontend ➝ Backend ➝ Response • Why things break even when your code looks “correct” 💡 Biggest realization: The hardest part is not writing code… It’s making different systems talk to each other properly. Once that clicked, full-stack development started making more sense. ⚡ What I’m focusing on next: • Building full-stack projects (not just isolated backend) • Handling real-world errors and debugging • Making apps actually work end-to-end 📌 Learning step by step — now things are starting to connect (literally 😄) 🔗 Video: [https://lnkd.in/gmvstDy5] #BackendDevelopment #FullStackDevelopment #NodeJS #CORS #WebDevelopment #LearningInPublic

Built a Full Stack Food Delivery Web System I recently developed a Food Delivery System with a well-structured frontend and backend, focusing on scalability and clean code practices. 🔧 Tech Stack: • Frontend: React.js (Vite + TypeScript) • Backend: Python (REST API) • Database: SQLite 🎯 Frontend Highlights: • Organized folder structure (api, components, pages, context) • Reusable UI components • State management using Context API • API integration for dynamic data • Built with Vite for fast performance ⚙️ Backend Highlights: • Structured models and routes • Database integration (SQLite) • RESTful API design ✨ Features: • Browse food items • Add to cart • Order handling system • Clean and responsive UI 📚 What I Learned: • Structuring scalable React applications • Connecting frontend with backend APIs • Working with TypeScript in real projects • Full-stack project development workflow Next Steps: Adding authentication, payments, and live order tracking. #ReactJS #TypeScript #Python #FullStackDevelopment #WebDevelopment #StudentDeveloper #Projects

𝗧𝗵𝗶𝘀 𝗜𝘀 𝗔 𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗔𝗽𝗽 𝗕𝘂𝗶𝗹𝗱 You might expect a modern backend for a full-stack app with React, Tanstack Router, and TailwindCSS. But I chose Django for the backend. Here's why: - I had to use Django to match my team's existing projects. - I used Keycloak for authentication. - I had to Dockerize the entire stack for self-hosted deployment. I got to decide on everything else. I chose Tanstack Router, Query, and other tools for the frontend. I used TailwindCSS for the UI. Some notable tools in my frontend stack: - Paraglide JS for internationalization - Knip for code analysis I built a sync layer between Keycloak and Django for authentication. It's not perfect, but it works. I care about type safety. I used Django with strict types and comments. I generated OpenAPI specs and used Orval to generate TS types. This gave me end-to-end type safety. My top priority after users is developers. I set up a strong CI pipeline with backend linting, formatting, and testing. I also built a Makefile for easy commands. I learned that good architecture is not just about scale, but also maintainability and handoff-ability. Even with a small app, it's worth caring about software architecture. Source: https://lnkd.in/gSNTKvq6

Most developers copy async/await code from Stack Overflow and hope it works. But when it breaks — and it will — they have no idea why. I've been there. Staring at a function that "should" work, watching promises pile up, and having no mental model for what JavaScript is actually doing behind the scenes. That's exactly why I wrote this next piece in the Zero to Full Stack Developer series: "Async/Await in JavaScript: From Confused to Confident" What you'll learn: ✅ Why async/await was introduced and what problem it actually solves ✅ How async functions work under the hood (including the event loop) ✅ When to use sequential vs. parallel execution — and why it matters for performance ✅ How to handle errors cleanly without .catch() spaghetti ✅ How async/await compares to promises, so you can choose the right tool ✅ Common mistakes that trip up even experienced developers — and how to avoid them This article is part of the "Zero to Full Stack Developer: From Basics to Production" series — a free, structured learning path that takes you from absolute zero to shipping production-grade applications. No prior experience needed. Read here: https://lnkd.in/gSBBmcSP Follow the complete series: https://lnkd.in/g2urfH2h What JavaScript concept took you the longest to truly understand — and what finally made it click? #WebDevelopment #FullStackDeveloper #Programming #JavaScript #ES6 #SoftwareEngineering #WebDev #TechBlog #LearnToCode

Most developers write callbacks before they actually understand them. They copy the pattern, it works, they move on. But the moment something breaks — a timer fires too late, an event doesn't respond, data comes back undefined — they have no idea why. I've been there. And that confusion is exactly why I wrote this. My latest article in the Zero to Full Stack Developer series breaks down JavaScript callbacks the way they should have been taught from the start. What you'll learn: ✅ Why JavaScript needs callbacks in the first place (the real reason) ✅ How functions-as-values make callbacks possible ✅ When callbacks run, and why timing matters ✅ How callbacks are used in timers, events, and array methods ✅ Why nested callbacks become a problem — and what comes next This isn't just theory. Understanding callbacks at this level is what separates developers who struggle with async JavaScript from those who actually control it. This article is part of the "Zero to Full Stack Developer: From Basics to Production" series — a free, structured path from absolute zero to building real, production-grade apps. Read here: https://lnkd.in/gxqjRkQS Follow the complete series: https://lnkd.in/g2urfH2h What JavaScript concept took you the longest to truly understand — was it callbacks, or something that came after? #WebDevelopment #FullStackDeveloper #Programming #JavaScript #ES6 #SoftwareEngineering #WebDev #TechBlog #LearnToCode

🔥 Redux vs Redux Toolkit — Stop Writing Boilerplate! If you're still writing traditional Redux code with multiple files for actions, reducers, and types… you're doing extra work 😅 👉 Enter Redux Toolkit (RTK) — the modern, official way to use Redux. --- 💡 What changed? ❌ Before (Redux): - Separate action types - Separate action creators - Separate reducers - Manual immutability ✅ Now (Redux Toolkit): - "createSlice()" → actions + reducer in one place - "configureStore()" → simple setup - Built-in Immer → write "mutable" code safely --- 💻 Example: Counter using Redux Toolkit import { createSlice, configureStore } from "@reduxjs/toolkit"; const counterSlice = createSlice({ name: "counter", initialState: { count: 0 }, reducers: { increment: (state) => { state.count += 1; // No spread operator needed! }, decrement: (state) => { state.count -= 1; }, }, }); const store = configureStore({ reducer: { counter: counterSlice.reducer, }, }); export const { increment, decrement } = counterSlice.actions; export default store; --- 🎯 Why it matters (Interview + Real Projects) ✔ Less code, more clarity ✔ Easy to scale large apps ✔ Cleaner architecture ✔ Faster development --- 🚀 Pro Tip: Start using RTK Query for API calls — it can replace "useEffect + Axios" completely! --- 💬 My Take: Redux isn’t outdated — but Redux Toolkit is now the standard way to write Redux. --- #ReactJS #Redux #ReduxToolkit #JavaScript #Frontend #WebDevelopment #InterviewPrep

Most developers reach for objects and arrays by default. But what if there's a smarter tool sitting right in JavaScript — one that handles key-value pairs better, enforces uniqueness automatically, and performs faster in the right situations? I've seen even experienced developers overlook 'Map' and 'Set' entirely. That's exactly why I wrote this next article in the Zero to Full Stack Developer series. "Map and Set: Beyond Objects & Arrays" breaks down two of JavaScript's most underused built-ins — with real code, real comparisons, and real use cases. What you'll learn: ✅ What 'Map' is and why it's a smarter key-value store than plain objects ✅ What 'Set' is and how it enforces uniqueness without any extra code ✅ How 'Map' differs from 'Object' — with side-by-side comparisons and real code ✅ How 'Set' differs from 'Array' — and when the performance difference actually matters ✅ When to use each with concrete, real-world scenarios ✅ Common mistakes that trip up even experienced developers — and how to avoid them This is part of the "Zero to Full Stack Developer: From Basics to Production series" — a free, structured path from absolute zero to building real production apps. No fluff, just practical knowledge you can use immediately. Read here: https://lnkd.in/duTPYYJ2 Follow the complete series: https://lnkd.in/g2urfH2h What's your go-to JavaScript data structure — and have you ever reached for Map or Set over objects and arrays in a real project? #WebDevelopment #FullStackDeveloper #Programming #JavaScript #ES6 #SoftwareEngineering #WebDev #TechBlog #LearnToCode

Most beginners write the same buggy code over and over — and they never realize arrays are the reason why. I've been there. Manually writing out variable after variable, losing track of data, wondering why my loops were always off by one. Nobody explained arrays the right way from the start. That's exactly why I wrote this next article in the Zero to Full Stack Developer series: "JavaScript Arrays for Beginners" What you'll learn: ✅ What arrays are and why they exist in the first place ✅ How to create an array from scratch ✅ How to access and update values using indexes ✅ Why indexing starts at 0 — and how to stop getting tripped up by it ✅ How to use the length property to write smarter, safer code ✅ How to loop through arrays to work with every element automatically This is part of the Zero to Full Stack Developer: From Basics to Production series — a free, structured path that takes you from absolute zero to building real production-grade applications. No fluff, no paywalls. Just clear, practical explanations with code you can actually use. Read here: https://lnkd.in/gCgCXMYC Follow the complete series: https://lnkd.in/g2urfH2h What JavaScript concept tripped you up the most when you were just starting out — was it arrays, or something else entirely? #WebDevelopment #FullStackDeveloper #Programming #JavaScript #ES6 #WebDev #LearnToCode #SoftwareEngineering #TechBlog

 I built a real User Management System from scratch Most developers start with tutorials… I decided to turn knowledge into a real working project. I just built a fully functional User Management Dashboard using vanilla JavaScript. 🔹 What it does: ✔ Fetches real user data from an API ✔ Lets you add new users dynamically ✔ Search users in real time ✔ Delete users instantly ✔ Stores data using Local Storage 🔹 Tech Stack: HTML • CSS • JavaScript • API Integration What I learned from this project is not just coding… but how real systems handle data, interaction, and user experience. 💡 Still improving, still building… one project at a time. 🔗 GitHub: https://lnkd.in/dJZjgYsp I’d appreciate any feedback or suggestions 🙌 #WebDevelopment #Frontend #JavaScript #CodingJourney #BuildInPublic