--- title: Best freeCodeCamp posts — June 2025 | daily.dev description: The most upvoted freeCodeCamp posts from June 2025, curated by the daily.dev community. canonical: https://daily.dev/sources/freecodecamp/best-of/2025/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/freecodecamp/best-of/2025/06 og:type: website og:site_name: daily.dev og:title: Best freeCodeCamp posts — June 2025 | daily.dev og:description: The most upvoted freeCodeCamp posts from June 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of freeCodeCamp — June 2025 1. 1 [](https://daily.dev/posts/the-micro-frontend-architecture-handbook-ny57eyzsg "The Micro-Frontend Architecture Handbook") Article freeCodeCamp · 1y The Micro-Frontend Architecture Handbook A comprehensive guide covering four main approaches to micro frontend architecture: iframes with cross-window messaging, Web Components with Shadow DOM, single-spa for orchestrating multiple SPAs, and Module Federation for runtime code sharing. Each method is explained with practical code examples, pros/cons analysis, and real-world use cases. The guide also covers additional tools like Piral, Luigi, and Import Maps, helping developers choose the right approach based on team structure, technical requirements, and deployment needs. 434 9 2. 2 [](https://daily.dev/posts/the-front-end-monitoring-handbook-track-performance-errors-and-user-behavior-qtnw3yqwd "The Front-End Monitoring Handbook: Track Performance, Errors, and User Behavior") Article freeCodeCamp · 1y The Front-End Monitoring Handbook: Track Performance, Errors, and User Behavior A comprehensive guide to building a frontend monitoring SDK from scratch, covering three main areas: performance monitoring (Core Web Vitals like FCP, LCP, CLS, plus API timing and resource loading), error tracking (JavaScript errors, Promise rejections, resource failures), and user behavior analytics (page views, scroll depth, click tracking). The tutorial provides practical code examples for implementing data collection using browser APIs like PerformanceObserver, MutationObserver, and various event listeners, along with reporting mechanisms and optimization techniques for production environments. 282 4 3. 3 [](https://daily.dev/posts/how-attackers-steal-data-from-websites-and-how-to-stop-them--yinwftc3l "How Attackers Steal Data from Websites (And How to Stop Them)") Article freeCodeCamp · 1y How Attackers Steal Data from Websites (And How to Stop Them) Web attackers use various methods to steal data including phishing emails, SQL injection, cross-site scripting (XSS), brute force password attacks, malware, man-in-the-middle attacks, outdated software exploitation, and insecure API integrations. Defense strategies include user education, multi-factor authentication, input validation, HTTPS implementation, regular software updates, secure coding practices, and proper API security. The stolen data often ends up on the dark web where it's sold for identity theft and further attacks. 188 1 4. 4 [](https://daily.dev/posts/the-nestjs-handbook-learn-to-use-nest-with-code-examples-mgqma0lbu "The NestJS Handbook – Learn to Use Nest with Code Examples") Article freeCodeCamp · 1y The NestJS Handbook – Learn to Use Nest with Code Examples NestJS is a progressive Node.js framework that combines object-oriented, functional, and reactive programming paradigms to build scalable server-side applications. Built on top of Express or Fastify, it provides a structured architecture using modules, controllers, and providers with built-in dependency injection. The framework offers TypeScript-first development, decorators for routing and validation, middleware support, guards for authorization, exception filters for error handling, and interceptors for response transformation. It includes comprehensive database integration options with TypeORM, Mongoose, and Prisma, along with built-in testing capabilities and CLI tools for code generation. 173 1 5. 5 [](https://daily.dev/posts/the-open-source-llm-agent-handbook-how-to-automate-complex-tasks-with-langgraph-and-crewai-uklqn1dmy "The Open Source LLM Agent Handbook: How to Automate Complex Tasks with LangGraph and CrewAI") Article freeCodeCamp · 1y The Open Source LLM Agent Handbook: How to Automate Complex Tasks with LangGraph and CrewAI LLM agents are proactive AI systems that can break down complex tasks, make decisions, and use tools autonomously, unlike traditional reactive chatbots. The guide demonstrates building agents using open-source frameworks LangGraph and CrewAI to automate daily tasks like email summarization and schedule generation. LangGraph provides graph-based workflows for single agents, while CrewAI enables multi-agent collaboration with specialized roles. The tutorial includes practical code examples for creating an email processing agent that extracts meetings and deadlines, then formats them into organized daily schedules. Both frameworks integrate with OpenAI's models and offer structured approaches to agent development without requiring extensive custom code. 151 6. 6 [](https://daily.dev/posts/how-to-work-with-queues-in-typescript-376bvdbn2 "How to Work with Queues in TypeScript") Article freeCodeCamp · 1y How to Work with Queues in TypeScript A comprehensive guide to implementing different types of queues in TypeScript using circular doubly linked lists. Covers simple queues, circular queues, double-ended queues (deque), and priority queues with complete code implementations. Explains FIFO principles, queue operations like enqueue/dequeue, and provides practical examples with test cases. Also discusses when to use queues versus other data structures and potential pitfalls in production systems. 150 2 7. 7 [](https://daily.dev/posts/how-to-build-a-conversational-ai-chatbot-with-stream-chat-and-react-j8rqvdtiv "How to Build a Conversational AI Chatbot with Stream Chat and React") Article freeCodeCamp · 1y How to Build a Conversational AI Chatbot with Stream Chat and React A comprehensive guide to building a conversational AI chatbot that combines Stream Chat for real-time messaging with Web Speech API for voice input. The tutorial covers backend setup with Node.js and Express, frontend implementation with React and TypeScript, and integration of speech-to-text functionality. Key features include AI agent management, real-time transcription, microphone permission handling, and seamless voice-to-text message submission. 81 1 8. 8 [](https://daily.dev/posts/from-commit-to-production-hands-on-gitops-promotion-with-github-actions-argo-cd-helm-and-kargo-ypebxpujg "From Commit to Production: Hands-On GitOps Promotion with GitHub Actions, Argo CD, Helm, and Kargo") Article freeCodeCamp · 1y From Commit to Production: Hands-On GitOps Promotion with GitHub Actions, Argo CD, Helm, and Kargo A comprehensive guide to building a production-ready CI/CD pipeline using GitOps principles with GitHub Actions, ArgoCD, Helm, and Kargo. The tutorial demonstrates how to structure repositories for microservices, implement automated environment promotions, and manage multi-stage deployments using the Craftista e-commerce application as a real-world example. It covers semantic versioning, polyrepo architecture, and automated promotion workflows from development through production environments. 66 9. 9 [](https://daily.dev/posts/how-to-debug-ci-cd-pipelines-a-handbook-on-troubleshooting-with-observability-tools-aylxr3tq2 "How to Debug CI/CD Pipelines: A Handbook on Troubleshooting with Observability Tools") Article freeCodeCamp · 1y How to Debug CI/CD Pipelines: A Handbook on Troubleshooting with Observability Tools A comprehensive guide to implementing observability in CI/CD pipelines using free and open-source tools. Covers setting up Grafana Loki and lightweight ELK stacks for log aggregation, creating unified logging strategies with correlation IDs, writing advanced LogQL and KQL queries for troubleshooting, integrating Prometheus metrics with logs, and building Grafana dashboards. Includes practical examples for debugging common pipeline failures like build errors, dependency issues, and flaky tests across GitHub Actions, Jenkins, and GitLab. 61 10. 10 [](https://daily.dev/posts/kubernetes-networking-tutorial-a-guide-for-developers-xdzqhojse "Kubernetes Networking Tutorial: A Guide for Developers") Article freeCodeCamp · 1y Kubernetes Networking Tutorial: A Guide for Developers Kubernetes networking enables containerized workloads to communicate through a flat network model where each pod gets a unique IP address without NAT. The tutorial covers core concepts including CNI plugins (Flannel, Calico, Cilium), kube-proxy for service load balancing, CoreDNS for service discovery, and network policies for security. It explains pod-to-pod, pod-to-service, and external-to-service communication patterns, along with practical troubleshooting techniques for common networking issues like unreachable pods and services. 44 11. 11 [](https://daily.dev/posts/freecodecamp-full-stack-curriculum-mid-2025-update-ijgmmudhb "freeCodeCamp Full Stack Curriculum Mid-2025 Update") Article freeCodeCamp · 1y freeCodeCamp Full Stack Curriculum Mid-2025 Update freeCodeCamp has released new sections of their full stack curriculum including React Hooks and State, Performance, and Testing modules. The update includes 50 lecture videos, workshops, labs, and projects like a Tic Tac Toe game and color picker. Upcoming content will focus on CSS Libraries, TypeScript, and Python modules with projects including an RPG character builder and trading card game. Exams are still in development with a custom testing environment being built. 39 4 [See all freeCodeCamp archives](/sources/freecodecamp/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/freecodecamp/best-of/2025/06#page","url":"https://daily.dev/sources/freecodecamp/best-of/2025/06","name":"Best freeCodeCamp Posts — June 2025","description":"The most upvoted freeCodeCamp posts from June 2025, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/freecodecamp/best-of/2025/06#items","numberOfItems":11,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-micro-frontend-architecture-handbook-ny57eyzsg","name":"The Micro-Frontend Architecture Handbook"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/the-front-end-monitoring-handbook-track-performance-errors-and-user-behavior-qtnw3yqwd","name":"The Front-End Monitoring Handbook: Track Performance, Errors, and User Behavior"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-attackers-steal-data-from-websites-and-how-to-stop-them--yinwftc3l","name":"How Attackers Steal Data from Websites (And How to Stop Them)"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-nestjs-handbook-learn-to-use-nest-with-code-examples-mgqma0lbu","name":"The NestJS Handbook – Learn to Use Nest with Code Examples"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/the-open-source-llm-agent-handbook-how-to-automate-complex-tasks-with-langgraph-and-crewai-uklqn1dmy","name":"The Open Source LLM Agent Handbook: How to Automate Complex Tasks with LangGraph and CrewAI"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-to-work-with-queues-in-typescript-376bvdbn2","name":"How to Work with Queues in TypeScript"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-build-a-conversational-ai-chatbot-with-stream-chat-and-react-j8rqvdtiv","name":"How to Build a Conversational AI Chatbot with Stream Chat and React"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/from-commit-to-production-hands-on-gitops-promotion-with-github-actions-argo-cd-helm-and-kargo-ypebxpujg","name":"From Commit to Production: Hands-On GitOps Promotion with GitHub Actions, Argo CD, Helm, and Kargo"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-debug-ci-cd-pipelines-a-handbook-on-troubleshooting-with-observability-tools-aylxr3tq2","name":"How to Debug CI/CD Pipelines: A Handbook on Troubleshooting with Observability Tools"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/kubernetes-networking-tutorial-a-guide-for-developers-xdzqhojse","name":"Kubernetes Networking Tutorial: A Guide for Developers"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/freecodecamp-full-stack-curriculum-mid-2025-update-ijgmmudhb","name":"freeCodeCamp Full Stack Curriculum Mid-2025 Update"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/freecodecamp/best-of"},{"@type":"ListItem","position":5,"name":"June 2025"}]}]} ```