<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: MARIA    BAPTISTA</title>
    <description>The latest articles on DEV Community by MARIA    BAPTISTA (@mariajtik).</description>
    <link>https://dev.to/mariajtik</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3347538%2Fa6e7eb72-b727-42ed-95e5-20ff737878d3.png</url>
      <title>DEV Community: MARIA    BAPTISTA</title>
      <link>https://dev.to/mariajtik</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mariajtik"/>
    <language>en</language>
    <item>
      <title>Salesforce? What We Should Know</title>
      <dc:creator>MARIA    BAPTISTA</dc:creator>
      <pubDate>Sun, 30 Aug 2026 19:29:04 +0000</pubDate>
      <link>https://dev.to/mariajtik/why-salesforce-where-technology-meets-business-3bb7</link>
      <guid>https://dev.to/mariajtik/why-salesforce-where-technology-meets-business-3bb7</guid>
      <description>&lt;p&gt;Honestly, I have always preferred traditional programming, but I recently started learning about Salesforce, although it was not for the best reasons... What brought you to it?&lt;/p&gt;

&lt;p&gt;I started taking a course after becoming interested in a job opportunity and, well, I am enjoying it.&lt;/p&gt;

&lt;p&gt;Building an application is one thing. As developers, we understand why a company needs a particular solution, but we may not be sure how people will use it. That is why it is important to constantly think about how technology can improve an existing process.&lt;/p&gt;

&lt;p&gt;Salesforce is exactly that.&lt;/p&gt;

&lt;p&gt;As I explore the platform, I see connections with things I have worked with before: web development, APIs, automation, customer support, lead generation, and AI-assisted workflows.&lt;/p&gt;

&lt;p&gt;Is Salesforce Just a CRM?&lt;/p&gt;

&lt;p&gt;When I started researching Salesforce, I mainly saw it as a CRM.&lt;/p&gt;

&lt;p&gt;Of course, CRM is an important part of it. But there is much more than that.&lt;/p&gt;

&lt;p&gt;Customer data, sales processes, support, automation, permissions, analytics, and applications, all within the same ecosystem.&lt;/p&gt;

&lt;p&gt;Leads, Accounts, Contacts, Opportunities, and Cases were some of the first concepts I explored. Of course, you have to start with the basics.&lt;/p&gt;

&lt;p&gt;What I find interesting is not just knowing what each object means. It is understanding how they represent a real business process.&lt;/p&gt;

&lt;p&gt;If you are new to this, just like me, then let’s dive into the explanations:&lt;/p&gt;

&lt;p&gt;A Lead can become an Opportunity. A customer may need support. Different people within a company may need different levels of access to the same information.&lt;/p&gt;

&lt;p&gt;When we start seeing things this way, Salesforce stops being just about memorizing platform terminology and becomes a way to understand how a business works.&lt;/p&gt;

&lt;p&gt;Sales Cloud and My Previous Experience&lt;/p&gt;

&lt;p&gt;I will talk a little about my previous experience with lead generation and digital processes.&lt;/p&gt;

&lt;p&gt;I have worked with lead generation, digital marketing, and communication through WhatsApp, including processes in which potential customers had to be routed to sales teams.&lt;/p&gt;

&lt;p&gt;That made me think about what happens after a lead is generated.&lt;/p&gt;

&lt;p&gt;Which steps can be automated?&lt;/p&gt;

&lt;p&gt;Before, I mainly analyzed these questions from a digital and operational perspective. Salesforce gives me the opportunity to understand the same processes from a CRM and technology perspective.&lt;/p&gt;

&lt;p&gt;Service Cloud&lt;/p&gt;

&lt;p&gt;Another connection comes from customer support.&lt;/p&gt;

&lt;p&gt;During my time at CLYRA, I also worked directly with customer support, helping users with questions and issues related to the platform.&lt;/p&gt;

&lt;p&gt;That experience taught me something simple but important:&lt;/p&gt;

&lt;p&gt;The customer experience does not end when a sale is completed. It is not just about paying and walking away.&lt;/p&gt;

&lt;p&gt;There are questions, problems, requests, and follow-ups that need to be handled properly.&lt;/p&gt;

&lt;p&gt;That is why the idea behind Service Cloud makes sense to me. A support request should not become just another message lost in a conversation. It can be part of a structured process that can be tracked, prioritized, and improved.&lt;/p&gt;

&lt;p&gt;Learning Automation with Salesforce Flow&lt;/p&gt;

&lt;p&gt;Automation is probably one of the areas where I said I would shine.&lt;/p&gt;

&lt;p&gt;I have worked with n8n, so the idea of analyzing a process and asking, “What can be automated?” is exactly what I mentioned earlier. I love automating processes. Why not make things simpler? Of course, always with human oversight.&lt;/p&gt;

&lt;p&gt;Salesforce Flow is a different technology, but at its core, the logic is the same. It is simply a matter of understanding the basics:&lt;/p&gt;

&lt;p&gt;Understand the process → find repetitive steps → define conditions → automate → test the result.&lt;/p&gt;

&lt;p&gt;For example, instead of asking someone to manually perform the same action whenever a certain condition is met, a flow can handle that process automatically. Simple.&lt;/p&gt;

&lt;p&gt;Configuration or Development?&lt;/p&gt;

&lt;p&gt;Coming from a software development background, it is easy to think that every problem requires code.&lt;/p&gt;

&lt;p&gt;Sometimes, the platform already provides the functionality needed to solve a requirement. In other situations, custom development makes more sense.&lt;/p&gt;

&lt;p&gt;For me, learning Salesforce also means learning how to make that distinction.&lt;/p&gt;

&lt;p&gt;The goal is not to write as much code as possible.&lt;/p&gt;

&lt;p&gt;It is to understand the requirement and choose an appropriate solution.&lt;/p&gt;

&lt;p&gt;Where My Development Experience Fits In&lt;/p&gt;

&lt;p&gt;My experience is in software development, digital marketing, and sales, so I naturally started looking for connections between Salesforce and the technologies and processes I already know.&lt;/p&gt;

&lt;p&gt;I have worked with JavaScript, React.js, Node.js, APIs, and UI/UX, as well as automation and AI tools.&lt;/p&gt;

&lt;p&gt;Lightning, components, data models, APIs, and business logic are not completely unfamiliar concepts to me.&lt;/p&gt;

&lt;p&gt;There is still a lot to learn and explore. And I love that.&lt;/p&gt;

&lt;p&gt;Apex&lt;/p&gt;

&lt;p&gt;You need to have a developer mindset.&lt;/p&gt;

&lt;p&gt;Apex is not simply “JavaScript with a different syntax.”&lt;/p&gt;

&lt;p&gt;Salesforce has its own architecture, limits, and way of working, so learning Apex also means understanding how development fits into the platform itself.&lt;/p&gt;

&lt;p&gt;Data, Dashboards, and Permissions&lt;/p&gt;

&lt;p&gt;Well...&lt;/p&gt;

&lt;p&gt;Data needs to be useful.&lt;/p&gt;

&lt;p&gt;A company may want to know how many leads are being generated, how opportunities are progressing, how quickly customer Cases are being resolved, and where a process is getting stuck. I know this because I have worked with this kind of information before.&lt;/p&gt;

&lt;p&gt;Reports and dashboards transform this data into something people can actually use for decision-making, in a more organized way.&lt;/p&gt;

&lt;p&gt;And then we have security.&lt;/p&gt;

&lt;p&gt;A CRM can contain a great deal of sensitive business and customer information, so deciding who can access, modify, or manage certain information is an important part of building a responsible solution. Trust me.&lt;/p&gt;

&lt;p&gt;Salesforce and AI&lt;/p&gt;

&lt;p&gt;AI...&lt;/p&gt;

&lt;p&gt;I have been using AI tools in my development workflow, and I am particularly interested because AI is becoming increasingly autonomous instead of being treated as a separate feature.&lt;/p&gt;

&lt;p&gt;“Is there a real problem that AI can help solve?”&lt;/p&gt;

&lt;p&gt;Whether it is helping users work with information, assisting with repetitive tasks, or making customer data more useful, the business problem should come first.&lt;/p&gt;

&lt;p&gt;Technology comes afterward.&lt;/p&gt;

&lt;p&gt;So, Why Salesforce?&lt;/p&gt;

&lt;p&gt;I think we already know.&lt;/p&gt;

&lt;p&gt;Salesforce brings together several areas I have already had contact with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Software development&lt;/li&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;Automation&lt;/li&gt;
&lt;li&gt;Customer support&lt;/li&gt;
&lt;li&gt;Lead generation&lt;/li&gt;
&lt;li&gt;Digital processes&lt;/li&gt;
&lt;li&gt;Business requirements&lt;/li&gt;
&lt;li&gt;AI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And you may find these connections too.&lt;/p&gt;

&lt;p&gt;What I am looking for now is the opportunity to connect these experiences and develop deeper expertise in CRM and enterprise technology.&lt;/p&gt;

&lt;p&gt;I am particularly interested in the consulting side because it requires more than technical knowledge.&lt;/p&gt;

&lt;p&gt;You need to understand what the client really needs, turn that into a solution, communicate the reasoning behind it, and continue learning along the way.&lt;/p&gt;

&lt;p&gt;I do not want Salesforce to be just another technology listed on my résumé.&lt;/p&gt;

&lt;p&gt;I want to understand how to use it correctly. And use it masterfully.&lt;/p&gt;

&lt;p&gt;Learning Through Practice&lt;/p&gt;

&lt;p&gt;I am currently taking a 52-hour Salesforce course to strengthen my foundations.&lt;/p&gt;

&lt;p&gt;I have just reached the 10% mark, and I am setting myself a small challenge: finish the course in five days.&lt;/p&gt;

&lt;p&gt;I will share my progress here as I move forward, if you comment and share your thoughts with me.&lt;/p&gt;

&lt;p&gt;Let’s see how far I can get. 🐞&lt;/p&gt;

</description>
      <category>salesforce</category>
      <category>tecnology</category>
    </item>
    <item>
      <title>AI-Assisted Development Without Losing Engineering Judgment</title>
      <dc:creator>MARIA    BAPTISTA</dc:creator>
      <pubDate>Sat, 29 Aug 2026 12:49:32 +0000</pubDate>
      <link>https://dev.to/mariajtik/ai-assisted-development-without-losing-engineering-judgment-4md1</link>
      <guid>https://dev.to/mariajtik/ai-assisted-development-without-losing-engineering-judgment-4md1</guid>
      <description>&lt;p&gt;Modern software development gives us access to increasingly powerful &lt;strong&gt;&lt;em&gt;AI tools&lt;/em&gt;&lt;/strong&gt;. But using AI effectively is not the same as letting &lt;del&gt;AI make every technical decision.&lt;/del&gt;&lt;/p&gt;

&lt;p&gt;For me, AI is most valuable when it accelerates the development process while the developer remains responsible for architecture, requirements, user experience, integrations and the final result.&lt;/p&gt;

&lt;p&gt;This approach became particularly relevant in my work at &lt;strong&gt;CLYRA&lt;/strong&gt;, where I worked across frontend development, backend development, UI/UX, automation and external integrations.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI as Part of the Development Workflow
&lt;/h2&gt;

&lt;p&gt;At CLYRA, Lovable was an important part of my development workflow.&lt;/p&gt;

&lt;p&gt;Rather than treating it as a replacement for development, I used &lt;em&gt;AI-assisted tooling&lt;/em&gt; to &lt;strong&gt;accelerate&lt;/strong&gt; activities such as &lt;strong&gt;prototyping&lt;/strong&gt;, &lt;strong&gt;exploring&lt;/strong&gt; interfaces and moving &lt;strong&gt;ideas&lt;/strong&gt; towards &lt;strong&gt;implementation&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The important part was not simply generating code.&lt;/p&gt;

&lt;p&gt;The important part was deciding:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What should be built?&lt;/li&gt;
&lt;li&gt;What should the user experience look like?&lt;/li&gt;
&lt;li&gt;How should different services communicate?&lt;/li&gt;
&lt;li&gt;What belongs in the frontend?&lt;/li&gt;
&lt;li&gt;What belongs in the backend?&lt;/li&gt;
&lt;li&gt;How should an external API be integrated?&lt;/li&gt;
&lt;li&gt;How should the resulting functionality behave in a real product?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AI could accelerate the path from an idea to an implementation, but &lt;u&gt;engineering judgment remained essential.&lt;/u&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  React, Node.js and Tailwind CSS
&lt;/h2&gt;

&lt;p&gt;My work also involved technologies that sit at the core of &lt;em&gt;modern web development&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;I worked with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React.js&lt;/li&gt;
&lt;li&gt;Node.js&lt;/li&gt;
&lt;li&gt;Tailwind CSS&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;REST APIs&lt;/li&gt;
&lt;li&gt;UI/UX&lt;/li&gt;
&lt;li&gt;n8n&lt;/li&gt;
&lt;li&gt;External service integrations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This allowed me to work across different parts of a product rather than focusing exclusively on one layer.&lt;/p&gt;

&lt;p&gt;On the &lt;strong&gt;&lt;em&gt;frontend&lt;/em&gt;&lt;/strong&gt;, React and Tailwind CSS supported the development of modern interfaces.&lt;/p&gt;

&lt;p&gt;On the &lt;strong&gt;&lt;em&gt;backend&lt;/em&gt;&lt;/strong&gt;, Node.js enabled application logic and integrations.&lt;/p&gt;

&lt;p&gt;And between systems, APIs connected the different services required by the product.&lt;/p&gt;

&lt;h2&gt;
  
  
  Automation with n8n
&lt;/h2&gt;

&lt;p&gt;Another important part of the workflow was automation.&lt;/p&gt;

&lt;p&gt;I worked with n8n to create and manage workflows, connecting different services and reducing repetitive manual processes.&lt;/p&gt;

&lt;p&gt;This is one of the areas where I find the combination of &lt;strong&gt;&lt;em&gt;AI&lt;/em&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;em&gt;automation&lt;/em&gt;&lt;/strong&gt; particularly interesting.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;AI can help accelerate the creation and exploration of solutions.&lt;/p&gt;

&lt;p&gt;Automation can make those solutions repeatable.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But someone still needs to understand the &lt;u&gt;&lt;strong&gt;business process being automated&lt;/strong&gt;&lt;/u&gt;.&lt;/p&gt;

&lt;p&gt;That distinction matters.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;A technically impressive automation that solves the wrong problem is still the wrong solution.&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Integrating Real-World Services
&lt;/h2&gt;

&lt;p&gt;The work at CLYRA also involved integrations with external services, including:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;WhatsApp API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Used as part of communication and platform workflows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;QR Codes&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Used as part of the product's digital interaction flows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stripe&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Used for payment functionality and plan management.&lt;/p&gt;

&lt;p&gt;These integrations reinforced something that is easy to overlook when learning software development:&lt;/p&gt;

&lt;p&gt;«&lt;strong&gt;&lt;em&gt;A product is rarely just the interface.&lt;/em&gt;&lt;/strong&gt;»&lt;/p&gt;

&lt;p&gt;A real application needs its &lt;strong&gt;&lt;em&gt;frontend, backend, APIs, authentication, automation, payments and user experience&lt;/em&gt;&lt;/strong&gt; to work &lt;strong&gt;together&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Customer Support Changed How I Think About Software
&lt;/h2&gt;

&lt;p&gt;For two months at CLYRA, I also worked in customer support.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(I am highlighting my corporate experience at Clyra because my prior experience involved more autonomous roles with fewer administrative constraints)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Customers&lt;/em&gt;&lt;/strong&gt; contacted the team with questions and &lt;em&gt;&lt;strong&gt;problems&lt;/strong&gt;&lt;/em&gt; related to the &lt;strong&gt;&lt;em&gt;platform&lt;/em&gt;&lt;/strong&gt;, and we helped them &lt;strong&gt;understand&lt;/strong&gt; and &lt;strong&gt;&lt;em&gt;resolve&lt;/em&gt;&lt;/strong&gt; those &lt;strong&gt;issues&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That experience was valuable because it put me on the other side of the product.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;feature&lt;/strong&gt; can work &lt;strong&gt;technically&lt;/strong&gt; and still be &lt;u&gt;&lt;strong&gt;confusing to the person using it.&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;&lt;em&gt;workflow&lt;/em&gt;&lt;/strong&gt; can be &lt;strong&gt;&lt;em&gt;logically&lt;/em&gt;&lt;/strong&gt; &lt;strong&gt;&lt;em&gt;correct&lt;/em&gt;&lt;/strong&gt; and still &lt;u&gt;&lt;em&gt;fail to solve the customer's actual problem.&lt;/em&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;This is one reason I consider customer understanding an important part of software development.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building Without AI
&lt;/h2&gt;

&lt;p&gt;AI-assisted development is powerful, but &lt;strong&gt;&lt;em&gt;I don't consider it a requirement for building software.&lt;/em&gt;&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;I am also _comfortable developing projects _using &lt;strong&gt;conventional&lt;/strong&gt; engineering &lt;strong&gt;practices&lt;/strong&gt; and &lt;strong&gt;technologies&lt;/strong&gt; without relying on AI to generate the solution.&lt;/p&gt;

&lt;p&gt;One example is &lt;strong&gt;Kwendi&lt;/strong&gt;, a project focused on technology, education and the learning of Umbundu.&lt;/p&gt;

&lt;p&gt;The project involves product thinking, application architecture, UI/UX and the design of a learning experience.&lt;/p&gt;

&lt;p&gt;The important lesson for me is simple:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;AI is a tool. It is not the developer.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A strong developer should be able to work with AI when it creates value, but should also be able to reason about a problem, design a solution and build software independently.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Take From This
&lt;/h2&gt;

&lt;p&gt;My approach to modern software development can be summarized in four ideas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Understand the problem → Design the solution → Use the right tools → Validate the result.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sometimes the right tool is &lt;strong&gt;AI&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Sometimes it is &lt;strong&gt;automation&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Sometimes it is simply writing the &lt;strong&gt;code yourself&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The technology should serve the problem — not the other way around.&lt;/p&gt;

&lt;p&gt;And that is where I believe AI-assisted development becomes genuinely powerful: when it increases the developer's ability to experiment, learn and deliver without removing responsibility for the final solution.&lt;/p&gt;




</description>
      <category>automation</category>
      <category>ai</category>
      <category>productivity</category>
      <category>coding</category>
    </item>
    <item>
      <title>Building a Full Stack App with .NET and Angular the TDD Way</title>
      <dc:creator>MARIA    BAPTISTA</dc:creator>
      <pubDate>Fri, 19 Sep 2025 16:19:19 +0000</pubDate>
      <link>https://dev.to/mariajtik/building-a-full-stack-app-with-net-and-angular-the-tdd-way-37ih</link>
      <guid>https://dev.to/mariajtik/building-a-full-stack-app-with-net-and-angular-the-tdd-way-37ih</guid>
      <description>&lt;p&gt;In this hands-on guide, we'll build a full-stack application from scratch using .NET for the backend and Angular for the frontend, but with one golden rule: no production code is written unless a test fails first. &lt;strong&gt;Welcome to the world of TDD!&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Challenge: Confidence in Your Code
&lt;/h2&gt;

&lt;p&gt;How many times have you fixed a bug, only to accidentally break another part of the system? Or implemented a new feature, fearing that something might go wrong in production? A lack of confidence in our own code is one of the biggest enemies of a developer's productivity and peace of mind.&lt;/p&gt;

&lt;p&gt;The solution? A safety net. A suite of automated tests that ensures your application behaves exactly as expected. And the best way to build this net is to weave it as you build the application itself.&lt;/p&gt;

&lt;p&gt;In this article, we'll build a simple to-do list application using a modern stack:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Backend:&lt;/strong&gt; .NET 7 Web API&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Frontend:&lt;/strong&gt; Angular 14+&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Methodology:&lt;/strong&gt; Test-Driven Development (TDD) from end to end.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Our golden rule will be the classic TDD cycle: &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Red -&amp;gt; Green -&amp;gt; Refactor&lt;/strong&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Red:&lt;/strong&gt; Write a test that fails because the feature doesn't exist yet.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Green:&lt;/strong&gt; Write the simplest possible code to make the test pass.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Refactor:&lt;/strong&gt; Improve the code without changing its behavior (and without breaking the test).&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let's start with the backend.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 1: The Test-Driven .NET Backend
&lt;/h2&gt;

&lt;p&gt;Our goal is to create a &lt;code&gt;GET /api/tasks&lt;/code&gt; endpoint that returns a list of tasks.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Red - Writing the First Test
&lt;/h3&gt;

&lt;p&gt;First, we create a test project (using xUnit, NUnit, etc.) and write a test for our future &lt;code&gt;TasksController&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="c1"&gt;// In the Test project (e.g., Tasks.API.Tests/TasksControllerTests.cs)&lt;/span&gt;

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;TasksControllerTests&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;Fact&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="n"&gt;Task&lt;/span&gt; &lt;span class="nf"&gt;GetTasks_WhenCalled_ShouldReturnOkWithListOfTasks&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Arrange&lt;/span&gt;
        &lt;span class="c1"&gt;// The controller doesn't even exist yet, but we're already defining how it should behave.&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;controller&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nf"&gt;TasksController&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// &amp;lt;-- This will cause a compile error!&lt;/span&gt;

        &lt;span class="c1"&gt;// Act&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;controller&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;GetTasks&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

        &lt;span class="c1"&gt;// Assert&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;okResult&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Assert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;IsType&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;OkObjectResult&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;(&lt;/span&gt;&lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;tasks&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Assert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;IsAssignableFrom&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;IEnumerable&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;TaskItem&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;gt;(&lt;/span&gt;&lt;span class="n"&gt;okResult&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="n"&gt;Assert&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;NotEmpty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;tasks&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At this point, the code doesn't compile. &lt;code&gt;TasksController&lt;/code&gt; doesn't exist, the &lt;code&gt;GetTasks&lt;/code&gt; method doesn't exist. Perfect. We are in the &lt;strong&gt;Red&lt;/strong&gt; phase.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Green - Making the Test Pass
&lt;/h3&gt;

&lt;p&gt;Now, let's go to our API project and write the simplest possible code to make the test compile and pass.&lt;/p&gt;

&lt;p&gt;First, the &lt;code&gt;TaskItem&lt;/code&gt; model:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="c1"&gt;// In the API project (e.g., Tasks.API/Models/TaskItem.cs)&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;TaskItem&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;Id&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;get&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;set&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="n"&gt;Title&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;get&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;set&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;IsCompleted&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;get&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;set&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the &lt;code&gt;TasksController&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="c1"&gt;// In the API project (e.g., Tasks.API/Controllers/TasksController.cs)&lt;/span&gt;
&lt;span class="k"&gt;using&lt;/span&gt; &lt;span class="nn"&gt;Microsoft.AspNetCore.Mvc&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;ApiController&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;Route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"api/[controller]"&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;TasksController&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;ControllerBase&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;HttpGet&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="n"&gt;Task&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;IActionResult&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;GetTasks&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Warning: We are hardcoding the data.&lt;/span&gt;
        &lt;span class="c1"&gt;// This is the shortest path to "Green". Refactoring comes later.&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;tasks&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;TaskItem&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;TaskItem&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;Id&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Title&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Learn TDD"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;IsCompleted&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;

        &lt;span class="c1"&gt;// We use Task.FromResult to simulate an async operation&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;Task&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;FromResult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;Ok&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;tasks&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we run our test now, it should pass. We are in the &lt;strong&gt;Green&lt;/strong&gt; phase.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Refactor - Improving the Code
&lt;/h3&gt;

&lt;p&gt;The code works, but it's using a hardcoded list. Let's refactor it to use a service, preparing for a future database connection, without breaking our test.&lt;/p&gt;

&lt;p&gt;First, the service interface:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;interface&lt;/span&gt; &lt;span class="nc"&gt;ITaskService&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;Task&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;IEnumerable&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;TaskItem&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;GetAllAsync&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the refactored &lt;code&gt;TasksController&lt;/code&gt; using dependency injection:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;TasksController&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;ControllerBase&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="n"&gt;ITaskService&lt;/span&gt; &lt;span class="n"&gt;_taskService&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nf"&gt;TasksController&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ITaskService&lt;/span&gt; &lt;span class="n"&gt;taskService&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Dependency Injection&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;_taskService&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;taskService&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;HttpGet&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="n"&gt;Task&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;IActionResult&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;GetTasks&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;tasks&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;_taskService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;GetAllAsync&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;Ok&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;tasks&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Of course, our test now breaks because the &lt;code&gt;TasksController&lt;/code&gt; constructor has changed. This is good! The test is protecting our architecture. Let's adjust it using a mock (with libraries like Moq or NSubstitute).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Adjusted Test&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;Fact&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="n"&gt;Task&lt;/span&gt; &lt;span class="nf"&gt;GetTasks_WhenCalled_ShouldReturnOkWithListOfTasks&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Arrange&lt;/span&gt;
    &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;mockService&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;Mock&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;ITaskService&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;();&lt;/span&gt;
    &lt;span class="n"&gt;mockService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;Setup&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;service&lt;/span&gt; &lt;span class="p"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;service&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;GetAllAsync&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
        &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;ReturnsAsync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;TaskItem&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;TaskItem&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;Id&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Title&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Test"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;controller&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nf"&gt;TasksController&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;mockService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Act&lt;/span&gt;
    &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;controller&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;GetTasks&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="c1"&gt;// Assert&lt;/span&gt;
    &lt;span class="c1"&gt;// ... same assertions as before&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We run the tests again. Everything is &lt;strong&gt;Green&lt;/strong&gt;. We now have cleaner, decoupled, and equally functional code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 2: The Test-Driven Angular Frontend
&lt;/h2&gt;

&lt;p&gt;Let's apply the same logic in Angular to create a component that displays the tasks.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Red - Testing the Component
&lt;/h3&gt;

&lt;p&gt;The Angular CLI already creates a test file (&lt;code&gt;.spec.ts&lt;/code&gt;) for us. Let's modify it to test if our &lt;code&gt;TaskListComponent&lt;/code&gt; calls the service and renders the data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// task-list.component.spec.ts&lt;/span&gt;

&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;TaskListComponent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="na"&gt;component&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TaskListComponent&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="na"&gt;fixture&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ComponentFixture&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;TaskListComponent&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="na"&gt;mockTaskService&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;jasmine&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;SpyObj&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;TaskService&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;beforeEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// We create a spy for our service&lt;/span&gt;
    &lt;span class="nx"&gt;mockTaskService&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;jasmine&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createSpyObj&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;TaskService&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;getTasks&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;

    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;TestBed&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;configureTestingModule&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;declarations&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;TaskListComponent&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
      &lt;span class="na"&gt;providers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;provide&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TaskService&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;useValue&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;mockTaskService&lt;/span&gt; &lt;span class="p"&gt;}]&lt;/span&gt;
    &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="nf"&gt;compileComponents&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="nx"&gt;fixture&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;TestBed&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createComponent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;TaskListComponent&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;component&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fixture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;componentInstance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;should call getTasks on init and render the tasks&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Arrange&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="na"&gt;tasks&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TaskItem&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Test the component&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;isCompleted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="nx"&gt;mockTaskService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getTasks&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;and&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;returnValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tasks&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Simulate the Observable's return&lt;/span&gt;

    &lt;span class="c1"&gt;// Act&lt;/span&gt;
    &lt;span class="nx"&gt;fixture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;detectChanges&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Triggers ngOnInit and the component's lifecycle&lt;/span&gt;

    &lt;span class="c1"&gt;// Assert&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;mockTaskService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getTasks&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toHaveBeenCalled&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Was the service called?&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="na"&gt;element&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;HTMLElement&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fixture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;nativeElement&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;taskTitle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;li&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;taskTitle&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toContain&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Test the component&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Was the title rendered?&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This test will fail. Our component is empty. We are in the &lt;strong&gt;Red&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Green - Implementing the Component
&lt;/h3&gt;

&lt;p&gt;Now, let's write the minimal code in the component and template to make the test pass.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// task-list.component.ts&lt;/span&gt;
&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-task-list&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;templateUrl&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./task-list.component.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;TaskListComponent&lt;/span&gt; &lt;span class="k"&gt;implements&lt;/span&gt; &lt;span class="nx"&gt;OnInit&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;tasks$&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;TaskItem&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;taskService&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;TaskService&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

  &lt;span class="nf"&gt;ngOnInit&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;tasks$&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;taskService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getTasks&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- task-list.component.html --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;li&lt;/span&gt; &lt;span class="na"&gt;*ngFor=&lt;/span&gt;&lt;span class="s"&gt;"let task of tasks$ | async"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    {{ task.title }}
  &lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And the &lt;code&gt;TaskService&lt;/code&gt; will make the HTTP call to our .NET API.&lt;/p&gt;

&lt;p&gt;If we run the test now, it will pass. &lt;strong&gt;Green&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Refactor
&lt;/h3&gt;

&lt;p&gt;Our code is already quite clean thanks to the use of the &lt;code&gt;async&lt;/code&gt; pipe and &lt;code&gt;Observables&lt;/code&gt;. A possible refactoring would be to add error handling (and a test for it!), such as displaying a friendly message if the API fails. But for now, our cycle is complete.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion: More Than Just Tests
&lt;/h2&gt;

&lt;p&gt;As we've seen, TDD isn't just about writing tests. It's a &lt;strong&gt;software design&lt;/strong&gt; methodology. It forces us to think about the interface and behavior of our components and services &lt;em&gt;before&lt;/em&gt; we implement them.&lt;/p&gt;

&lt;p&gt;The result is code that is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;More Reliable:&lt;/strong&gt; The test suite is your safety net.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;More Decoupled:&lt;/strong&gt; The need to mock dependencies encourages dependency injection and a cleaner design.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Better Documented:&lt;/strong&gt; The tests themselves serve as living documentation of how the system should behave.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhxhswidf6fd2ds6ai7cp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhxhswidf6fd2ds6ai7cp.gif" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Starting with TDD might feel slower at first, but the speed and confidence you gain in the long run are immeasurable. The next time you start a project, try writing a failing test first. It might just be the beginning of a new way of coding.&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>programming</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>csharp</category>
    </item>
    <item>
      <title>🚫 No Internet, No Cloud, No Problem: Building Monitoring Systems That Survive Offline</title>
      <dc:creator>MARIA    BAPTISTA</dc:creator>
      <pubDate>Sat, 12 Jul 2025 05:51:19 +0000</pubDate>
      <link>https://dev.to/mariajtik/no-internet-no-cloud-no-problem-building-monitoring-systems-that-survive-offline-from-angola-4nca</link>
      <guid>https://dev.to/mariajtik/no-internet-no-cloud-no-problem-building-monitoring-systems-that-survive-offline-from-angola-4nca</guid>
      <description>&lt;p&gt;When you think about monitoring infrastructure, what comes to mind?&lt;/p&gt;

&lt;p&gt;Maybe dashboards in Grafana, real-time alerts from Prometheus, centralized logs, and seamless cloud connectivity across AWS or GCP...&lt;/p&gt;

&lt;p&gt;Well, none of that works here.&lt;/p&gt;

&lt;p&gt;🌍 &lt;strong&gt;Where I Come From&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I’m Maria, a self-taught engineer who has already had many problems of unstable infrastructure.&lt;/p&gt;

&lt;p&gt;Somewhere, it’s normal to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Lose internet multiple times a day&lt;/li&gt;
&lt;li&gt;Have speeds under 1 Mbps&lt;/li&gt;
&lt;li&gt;See power cuts without warning&lt;/li&gt;
&lt;li&gt;Rely on SMS instead of Slack&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But guess what? We still have systems to monitor. Critical alerts still matter. And that’s exactly why I started building my own solution.&lt;/p&gt;

&lt;p&gt;⚡ &lt;strong&gt;The Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Traditional observability tools are powerful — but they &lt;em&gt;assume&lt;/em&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;High uptime&lt;/li&gt;
&lt;li&gt;Fast internet&lt;/li&gt;
&lt;li&gt;Access to the cloud&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;None of those assumptions hold true in large parts of Africa, South America, and Asia. And most engineers in Silicon Valley don’t even realize it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I needed something different. Something &lt;strong&gt;local-first&lt;/strong&gt;, &lt;strong&gt;resilient&lt;/strong&gt;, and &lt;strong&gt;cloud-optional&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🔧 &lt;strong&gt;Meet Kuze Alert&lt;/strong&gt; Monitoring for the Real World&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Kuze Alert&lt;/strong&gt; is my open-source project designed to monitor systems in the harshest, most unreliable environments.&lt;/p&gt;

&lt;p&gt;It’s not just another tool. It’s a survival kit for devs like me who work under conditions where &lt;em&gt;“just push to the cloud”&lt;/em&gt; doesn’t work.&lt;/p&gt;

&lt;p&gt;🧠 &lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Offline-first alert generation&lt;/li&gt;
&lt;li&gt;✅ Works on cheap hardware&lt;/li&gt;
&lt;li&gt;✅ Sends alerts via SMS or local radio&lt;/li&gt;
&lt;li&gt;✅ Compresses and syncs data when internet returns&lt;/li&gt;
&lt;li&gt;✅ Integrates with Prometheus locally&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;I’m currently building it in &lt;strong&gt;Go&lt;/strong&gt;, using &lt;strong&gt;Prometheus&lt;/strong&gt; and &lt;strong&gt;edge storage&lt;/strong&gt; (SQLite/in-memory).&lt;br&gt;&lt;br&gt;
Soon, it will support push/pull sync and even visual dashboards — without internet.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;📡 &lt;strong&gt;Real-World Scenario&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Imagine a small ISP in Luanda that monitors routers in 3 provinces. The internet drops at night — every night.&lt;/p&gt;

&lt;p&gt;With Kuze Alert:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Metrics are collected &lt;strong&gt;locally&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Alerts are fired even &lt;strong&gt;offline&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Critical events are cached and sent &lt;strong&gt;when possible&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s observability that &lt;em&gt;respects your reality&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fplcruamfv0odxqochxle.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fplcruamfv0odxqochxle.jpg" alt=" " width="736" height="518"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💡 &lt;strong&gt;Why This Matters (and Not Just to Me)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Over &lt;strong&gt;3.5 billion people&lt;/strong&gt; live with unstable internet&lt;/li&gt;
&lt;li&gt;Cloud-first tools leave these people behind&lt;/li&gt;
&lt;li&gt;Most “global” tools break outside high-income regions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’m building something different. Something grounded. Something I wish someone had built for me.&lt;/p&gt;

&lt;p&gt;👩🏽‍💻 &lt;strong&gt;Who I Am (and Why I’m Writing This)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I’m young. Woman. I’m self-taught. I’ve been building little systems since I was more younger.&lt;/p&gt;

&lt;p&gt;I created this article because I recently discovered the &lt;strong&gt;Dev.to&lt;/strong&gt; community — and I’m absolutely LOVING the energy here.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The people, the projects, the passion — it’s inspiring.&lt;br&gt;&lt;br&gt;
I’m learning more every day, and I finally feel like I’ve found my tech family.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🔗 &lt;strong&gt;Follow My Journey&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I'm sharing everything I learn while building Kuze Alert, contributing to open source, and growing from Angola to the world.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🌐 &lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/mariajtik" rel="noopener noreferrer"&gt;github.com/mariajtik&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;💼 &lt;strong&gt;LinkedIn:&lt;/strong&gt; &lt;a href="https://ao.linkedin.com/in/maria-baptista-95b582280" rel="noopener noreferrer"&gt;linkedin.com/in/maria-baptista-95b582280&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re working with observability, edge computing, or cloud-native systems, let’s connect (some other IT area, would be a pleasure too).&lt;br&gt;&lt;br&gt;
If you’ve ever built tech in low-resource environments, I want to hear your story.&lt;/p&gt;

&lt;p&gt;And if this article resonated with you — &lt;strong&gt;react, share, or comment&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
It helps me grow, and helps this message reach the people who need it most.&lt;/p&gt;

&lt;p&gt;✊🏽 &lt;strong&gt;Let’s Build a Truly Global Stack&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One that works offline.
&lt;/li&gt;
&lt;li&gt;One that’s resilient.
&lt;/li&gt;
&lt;li&gt;One that doesn’t leave half the world behind.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Join me. ⭐ Star my GitHub. 💬 Leave your thoughts. 📣 Share this post.&lt;/p&gt;

&lt;h1&gt;
  
  
  Observability #Monitoring #AfricaTech #OpenSource #DevOps #Prometheus #Grafana #KuzeAlert #EdgeComputing #SelfTaught
&lt;/h1&gt;

</description>
      <category>networking</category>
      <category>architecture</category>
      <category>devops</category>
      <category>monitoring</category>
    </item>
  </channel>
</rss>
