DEV Community: Suzana Melo

How to get started with AWS (for absolute beginners)

Suzana Melo — Mon, 03 Feb 2025 21:31:34 +0000

Who hasn’t felt a stomach full of butterflies before diving into something completely new? 🦋
That was me when I realized I needed to learn about Cloud Computing to excel in my career, without a clue where to start.

If you're in the same boat, an absolute beginner like I was when I first started, I strongly recommend taking a quick detour to this article first: Cloud Computing: What it is and why should tech beginners learn it?. It’ll give you some background on why Cloud Computing is worth your time.

Back already? Or just eager to jump in? Awesome! Grab a seat, fasten your seatbelt, and let’s fly into the Cloud! ⛅️

How to get started? 🤔

With so many paths to the Cloud, it's easy to feel overwhelmed. But trust me, it doesn’t have to be. The first lesson I learned through my learning journey, and that I recommend to you, is not to skip steps. Building a solid foundation will give you the base you need to go higher.

As an absolute beginner, I lacked background and struggled to understand key definitions, products, and services. It was when the Cloud Essentials course on the AWS Skill Builder platform came in handy. 🥰

AWS Skill Builder ⚒️

AWS Skill Builder is part of AWS Training and Certification, offering a range of courses across various cloud specialties. While many labs and trainings are accessible by paying a monthly subscription of $29 USD, thankfully, the Cloud Foundations resources are completely free. 🙌🏻

To sign in and access the AWS Skill Builder resources, it is recommended by AWS that you create an AWS Builder ID, a free AWS personal profile that allows access to specific tools and services. You can read more about this credential here.

Once signed in to the AWS Skill Build, you can explore courses tailored to different learning pathways: Cloud Role, Product Domain, Certification preparation exams, and many more. But for now, let’s focus only on the Cloud Essentials Badge—your starting point.

Cloud Essentials Badge 🥇

Cloud Essentials Badge package includes five free, online, and self-paced courses covering foundational Cloud knowledge:

Job Roles in the Cloud
AWS Cloud Practitioner Essentials
Getting Started with Cloud Acquisition
AWS Billing and Cost Management
AWS Foundations: Getting Started with AWS Cloud Essentials

The AWS Cloud Practitioner Essentials module, for example, provides an easy-to-digest introduction to Cloud infrastructure and services, using a coffee shop analogy to explain key concepts. The analogies between coffee shop operations and AWS services were a life-changing experience for me in understanding the new content.

AWS Billing and Cost Management is another crucial module that includes all the essential concepts needed to understand how AWS pricing works, including budgeting, cost optimization, and payment tools.

The package in the Cloud Essentials Badge also includes an assessment to earn the Cloud Essentials Badge, which you can proudly display on LinkedIn or your CV. 🏅

AWS Cloud Quest 🎮

Now that you have all the theory that you need, why not practice with real case scenarios and problems to solve?

AWS Cloud Quest is a 3D role-playing game to help you build practical AWS Cloud skills in an interactive and fun way. AWS Cloud Quest offers different tracks tailored for a variety of Cloud roles, but for beginners, start with the Cloud Practitioner role. The goal is to solve real-life Cloud challenges and gain hands-on experience while exploring AWS services.

Best part? It’s free and rewards you with another badge once you've completed all role assignments. One more achievement for your CV! 🔥

AWS Cloud Certification 👩🏻‍💻

By this stage, you’ll be on your way to your first AWS Cloud Certification, the AWS Cloud Practitioner. This cert validates your foundational Cloud knowledge and opens doors for deeper learning in specialized AWS domains.

📌 Want to know how I prepared for my first Cloud certification?
I shared my study tips and experience in this article: How I Prepared for the AWS Cloud Practitioner Certificate.

📌 In my GitHub repository, you can find more resources to start your journey in this list: Free AWS training courses.

Summary 📝

After reading this article, I hope there is no longer any reason to feel your stomach full of butterflies about starting your Cloud journey! 🦋

Now you know you can learn AWS for free and online from wherever you are, study at your own pace, and earn valuable badges along the way. Plus, you’ll build a solid foundation for your first AWS certification! ✨

Happy learning and to infinity and beyond! ❤️☁️🚀

Resources:

AWS Skill Builder
Cloud Essentials - Knowledge Badge Readiness Path
AWS Cloud Quest
Free AWS training courses.

Cloud Computing: What it is and why tech beginners should learn it?

How I Prepared for the AWS Cloud Practitioner Certificate

Upskill and Accelerate Your Career by Volunteering

Suzana Melo — Wed, 16 Oct 2024 08:46:47 +0000

When you think of volunteering, what is the first thing that comes to your mind? 🤔

Many people think volunteering is tough, that they lack the knowledge, or that they just don’t have enough time. But here’s the thing: those are all myths. You can volunteer your time to support others in many different ways, and trust me, you have more than enough knowledge to do so. ✨

Let’s talk about something we all wish we had more of: time. ⏳

How often have you found yourself scrolling on social media or watching a TV show, only to realize that time flew by? And I am not saying you shouldn’t do it. Taking time for ourselves is essential. Go for a walk, read a book, watch a good movie, or why not? Do nothing at all. However, if you consider how much time you spend on things that aren’t super meaningful, you may find two or three hours a week to volunteer for something that matters to a lot of people.

Volunteering isn’t new to me. I had loved this since I was a teenager when I helped up a non-profit organization by making soup for homeless people and pitching in wherever needed. After changing careers to the technology field after my 40s - without any tech background -I developed a real appreciation for those who stopped to help me along the way. I needed and still need help—a lot! So, now, I try to return the favor. Ah, here is an interesting detail: I am still a beginner.

When I started helping other beginners, especially women like me with no tech background, I realized that you don’t need to be an expert to start sharing what you know. Each of us learns differently, and there’s always someone who could use your insights and guidance.

📍 If you want to upskill and boost your growth, volunteering can be an incredible way to do it. I will give my 2 cents by listing three reasons to get started:

1 - Build Your Technical Skills 👩🏻‍💻
Volunteering to teach or mentor forces you to brush up on your own knowledge. You often need to review concepts you didn’t remember or learn something new as you prepare content, answers, or explanations. Researching and/or organizing information can deepen your understanding of a topic.
As I mentioned, you don’t need to be a guru. Just by sharing what you know, you’re helping someone else succeed on their journey. It’s not about giving solutions or walking the path for them, but about facilitating their learning process.

2 - Strengthen Your People Skills 🫶🏻
People skills are crucial, and like any skills, they can be learned and developed. I can’t think of a better way to build your skills than volunteering to teach or mentor people.
It will develop your ability to express your ideas and explain technical content in a way that’s easy to grasp. Communication skills are gold, whether you are being interviewed, collaborating in teams, discussing projects, or presenting solutions.

3 - Experience Personal Growth 🤩
Volunteering exposes you to diverse life stories and challenges. You get to hear about others' struggles, failures, and successes, which can be incredibly inspiring. This exposure builds empathy, patience, resilience, and humility—qualities that enrich both your personal and professional life and make a difference wherever you go. We are all humans, after all.

🙋🏻‍♀️ Interested in volunteering? Here’s where you can start:

Mentoring 💻

If you are still a student, chances are there is some mentoring program in your school or university. Check out local Meetup groups in areas that interest you. There, you can make connections to offer mentoring and ask around about other mentoring opportunities for you to join. You can also post on LinkedIn to let others know you’re open to mentoring.
Creating a Calendly account or using another scheduling platform is a valuable tool for managing your available time for mentoring.

Teaching 👩🏻‍🏫

Nonprofits are wonderful places to volunteer and help others develop new skills. Volunteers are usually very welcome. Check your city council’s website or simply Google nonprofit opportunities in your area. Once you’ve decided to volunteer, there’s nothing stopping you from finding the perfect fit.

Tech community and content creation 📝

Tech meetups are excellent for networking, learning, and sharing knowledge. You can organize knowledge-sharing events or create content like talks and articles to volunteer your time and help others while you build confidence and technical knowledge as a bonus prize.

💡 I recommend starting from scratch—research, write, and organize your thoughts. Still, AI has infinite tools to support your content creation, so there is no shame in using it to review and refine your work. 🤖

These are just a few examples of how you can volunteer, but there are many other ways to give your time to help others. By doing so, you’re also fast-tracking your own growth.
If you have other ideas for volunteering, share them in the comments. That way, you’re already starting to volunteer your time by helping others.
For those who have followed me in this article until the end, what are you waiting for to start? ❤️

Cloud Computing: What it is and why tech beginners should learn it?

Suzana Melo — Tue, 24 Oct 2023 07:40:48 +0000

Cloud is everywhere, and we often do not even notice it, but it's part of our lives, whether we are aware of it or not.
Clearly, I'm not talking about an aerosol consisting of a visible mass of tiny liquid droplets, frozen crystals, or other particles suspended in the atmosphere of a planetary body.

So, what is the Cloud?

Imagine you are working on some critical files on your computer when a meteor breaks your window and smashes your laptop!
Okay, maybe a meteor is too much, so let's change that to a golf ball.
I sincerely hope that at this moment, you can think: "At least all my documents, photos, and files are stored in the Cloud". Maybe something like Google Drive, Dropbox, or iCloud. Am I right?
If my wishes come true, it means your stuff is saved in servers in the Cloud instead of your computer.
When you upload your documents to tools like Google Drive or Dropbox, it is like having a hard drive that you can access anytime, even when connected to the Internet, and perform a backup of your files if something happens to your device, such as an unexpected meteor or a golf ball from the sky.
Cloud refers to servers accessed over the Internet and other stuff, such as the software and databases that run on those servers.

Before the Cloud

Having things running in the Cloud sounds very handy, huh? I can't imagine a world without tools like email and Google Drive. But can you imagine how the world was before the Cloud?
Companies must have a physical space to host their servers on-premises, meaning they need to spend money to ensure they are secured and powered up, and have teams to care about the hardware and software.
Well, there are situations nowadays when on-premises is the best solution for some companies. Still, when this is the case, they need to pay for the costs of the whole structure and are stuck with all of that, even when not using them.
Accessing these shared resources in the Cloud without needing a physical structure opened the doors and created new possibilities for many small businesses. Something almost impossible to happen in the past.

Back in time for a bit

The concept of sharing resources started in 1950 when multiple users could access the same data storage layer and CPU power using large-scale mainframes with high-volume processing power.

In 1970, the Virtual Machine (VM) era started with mainframes having multiple virtual systems, or compute environments, on a single physical node/hardware. Using a VM, a user could host guest operating systems, such as Windows or Linux, that behaved like they had their own memory, CPU, and hard drives, even though these were shared resources.

The cherry on top of the VMs was the hypervisor, also known as a virtual machine monitor or VMM. You can think of it as an orchestra conductor, a software that creates and runs virtual machines (VMs) and allows each host computer to support multiple guest VMs by virtually sharing its resources, such as memory and processing.

In 1991, the world started to change significantly with the creation of the World Wide Web, also known as the Web, WWW, or W3. Thanks to the WWW, users can now access public websites or pages on their local computers and other devices through the Internet. It was only a matter of time before VM concepts could also be accessed virtually.

Servers in the Cloud

It didn't take too long for some companies to realize they could make Cloud benefits accessible to users who didn't have an abundance of physical servers.

In 2006, Amazon Web Services launched the Amazon Elastic Compute Cloud (EC2), making accessible to anyone a service that lets you run virtual servers in the Cloud with the bonus of having a secure and resizable compute capacity for virtually any workload.

By using an EC2, you can access your resources virtually at any time. You can choose the operating system (Windows, Linux, IOS) you want and what you want to run on your server (internal business applications, web apps, and databases). You can also define the size and configure them to scale up and down depending on your demand. You control the network and security (public or private access), who can access what, and the type (Memory, Storage, etc.).

Soon after, other companies launched their Cloud services, such as Google Compute Engine, Azure Virtual Machines, Elastic Compute Service (ECS), etc. Since then, users can run and control the configuration of their own servers from anywhere without needing to buy and maintain a physical data center.

Cloud Computing definition

Now that we have a better understanding of how it all started, let's review some key definitions of cloud computing to see how they become more clear.

Wikipedia - Cloud computing is the on-demand availability of computer system resources, especially data storage and computing power, without direct active management by the user. Large Clouds often have functions distributed over multiple locations, each of which is a data center.

AWS - Cloud computing is the on-demand delivery of IT resources over the Internet with pay-as-you-go pricing. Instead of buying, owning, and maintaining physical data centers and servers, you can access technology services, such as computing power, storage, and databases, on an as-needed basis from a Cloud provider like Amazon Web Services (AWS).

NIST - Cloud computing is a model for enabling ubiquitous, convenient, on-demand network access to a shared pool of configurable computing resources (e.g., networks, servers, storage, applications, and services) that can be rapidly provisioned and released with minimal management effort or service provider interaction.

Why Cloud Computing?

Without Cloud Computing, businesses need to pay for servers and hardware in advance and start with more capacity than they need, wasting money. If the demand grows too fast, and they don't cope accordingly, they can suffer performance issues or failures. I even mentioned all the costs associated with managing facilities, hardware, and infrastructure.

Cloud Computing services allow you to choose the deployment model that best suits your business needs. There are different ways to set up your Cloud environment depending on your goals.
Public Clouds are open to anyone and easy to access from anywhere online — great for scalability and cost efficiency.
Private Clouds, on the other hand, give you full control over your resources in a dedicated environment, perfect for businesses with strict security or compliance needs.
Some companies go for a Hybrid Cloud, mixing the best of both worlds — keeping sensitive data on-premises while still enjoying the flexibility of the public Cloud.
And finally, there’s the Community Cloud, where organizations with similar interests or requirements, like universities or government agencies, share resources in a secure space.

One thing all of them must have in common: Be self-service and on-demand. You pay only for what you use and use only what you need.

I know there is a lot of information to cover, but now we can better understand how versatile, accessible, and easy to adopt Cloud Computing is. Cloud technology's agility and flexibility enable new ways of working, operating, and doing business.

Growth📈

For these and many more reasons, Cloud Computing is irreversible and will continue to grow.

According to research published on websites such as CloudZero, Zippia, and Earthweb, 94% of all companies worldwide utilize cloud computing in their operations.
This high level of adoption is not a surprise. With Cloud Computing, resources are available in minutes, meaning companies can perform, scale, and respond to new market developments much more rapidly.
The impact is also financial.
Another survey by Deloitte showed that small and medium businesses that adopted Cloud computing made 21% more profit and grew 26% faster. Accenture revealed that moving workloads to the public Cloud led to Total Cost of Ownership (TCO) savings of 30-40%.
Statistics published by Spacelift show that by 2026, the Cloud Computing market is forecast to be worth $947.3 billion.

Cloud Computing careers

The high level of Cloud Computing adoption also resulted in many Cloud-related jobs necessary to implement and maintain all those services working. Even though your job may not be specifically cloud-related, if you work for a company that has adopted cloud computing services, chances are you will have some contact with that.
A full-stack developer working in a small start-up will likely handle some API Gateways and write some AWS Lambda functions as I needed to do (without previous knowledge about the Cloud).
There are also other Cloud Computing roles I even heard about before starting to learn the Cloud, such as Cloud Consultant, Cloud Engineer, Cloud Support Engineer, Solutions Architect, and so on.

The great news is the Cloud is for everyone!
You don't need to wait to be a tech expert to start learning about the Cloud. Building a solid base and perhaps adding a foundational certification is a great way to begin upskilling and preparing yourself for the market. It can help you gain a general understanding of Cloud Computing before you decide which area to pursue.

Summary 📝

Now, you know a bit more about what Cloud Computing is, how it started, and the advantages of adopting this powerful technology. The flexibility, versatility, security, and cost savings are just a few of the benefits that make Cloud Computing so attractive to a diverse range of businesses, and this is why this technology is irreversible.

📌 Ready to take your first steps into this exciting area?
Check out my article How to get started with AWS (for absolute beginners).

📌 Want to know how I prepared for my first Cloud certification?
I shared my study tips and experience in this article: How I Prepared for the AWS Cloud Practitioner Certificate.

📌 In my GitHub repository, you can find more resources to start your journey in this list: Free AWS training courses.

Feedback and suggestions are always welcome. ❤️

Resources:

AWS - Cloud Computing
National Institute of Standards and Technology - NIST
AWS - EC2
Wikipedia - Cloud Computing
Guru99 - Cloud Computing
Cloudflare - Cloud Computing
Cloudzero - Statistics
Zippia - Statistics
Spacelift - Statistics

The challenge of “start” in Tech

Suzana Melo — Thu, 21 Sep 2023 22:50:19 +0000

Still buzzing about the fantastic discussion “Beyond the Code: Essential Skills for Success in Software Development”, I was invited to participate at the Dev Day Aotearoa 2023 conference a week ago.

Incidentally, the message delivered, mainly to graduates and junior developers, was not so different from my speech at the Migrants in Tech meetup event last month. Both talks focused on a central point that both audiences are handling at that moment of their lives: the challenge of the “start”.

The start phase is always challenging, especially as it is usually followed by uncertainty. It can be a new career, a new job, a new project, a new activity or a new relationship.
I moved to New Zealand in 2014, and since then, I had many significant “starts”. Start learning English. Start cleaning different houses with different products than in my hometown. Start driving a van and deliver food on the streets of a new city. Start operating a checkout in a supermarket. Start learning a programming language with no tech background.

Each time was as hard as any other start, but I also accumulated learnings to help me in the next one.
I learned that I will never be 100% prepared for a new start, but I also learned to be comfortable with that.

Here are some of the leanings that helped me to start a new career as a software developer:

Fundamentals are crucial - Build your foundations, prepare yourself and anticipate steps and knowledge as much as possible. It helps to handle uncertainty and build on top of what you already know.
However, it’s important to remember that no one knows everything, nor do you need to - Be comfortable with that.
Practice, practice, practice - Practice leads to perfection, but be kind to yourself. If you get only 1% better each day, you will be 365% better in one year.
Find your genius zone to shine and stand out of the crowd - Which skill, area or knowledge are you most comfortable with? There are many ways to show your work and value, as no “one size fits all” exists. You can build projects and link them to your profile, contribute to open-source projects, or mentor others (there is always someone who knows less than you and needs your insights). You can write articles about your projects, learnings or research or, if you can, discuss or give talks about them in meetups. Tell it to your network, and post it on LinkedIn and other channels.
Increase network - I already mentioned meetups, but I’m also including any other events you can make: conferences, workshops, webinars and job fairs. Use the opportunity provided by those events to connect with people, in person and online, and share what you are doing to them.
Improve your communication skills - Practise asking questions and clearly explaining your ideas, challenges, and points of view (Don’t forget that people don't read minds). A great way to achieve it is to write down what you want to say and read it to yourself first. Don’t forget to ask for feedback and suggestions on where to improve next time.
Have I said, "Ask questions"? - Curiosity and willingness to learn are crucial for growth. Be open-minded, and don’t hesitate to ask questions when necessary. It is likely that someone else already struggled in the past with the same problem you are struggling with now and already knows the answer that you spent hours looking for.
Don’t undervalue your previous experience - They matter and can help you excel in your next job. All kinds of knowledge are valuable and transferable, especially soft skills. I prefer to call them “Human Skills” as, at the end of the day, we all are humans relating with each other in teams, groups or families.
Compare yourself with you yesterday, not with others today - Take the time to look back and appreciate your growth because it is something to be proud of.

I'm an immigrant woman who moved countries, learned a new language, pursued a career in tech after my 40s and restarted many times. Learning software development is still hard, and I fight against impostor syndrome daily, but as I mentioned, there is always someone who knows less than you and needs your insights, and I'm sharing my learnings.

I can't wait to hear yours! ❤️

This article is also published on LinkedIn

Tracking events effectively in Web Browsers with Mini Digital

Suzana Melo — Fri, 18 Aug 2023 07:31:22 +0000

Knowing your user's behaviour is life-changing for your product. It will give you insights to empower your product team to develop better solutions for your customers bringing benefits such as increasing fidelity and engagement and attracting new users.

Mini Digital comes into the market by offering a lightweight and privacy-focused library for collecting event data for product analytics from your entire stack: websites, web apps, mobile, backend services and decentralised apps, including sub-domains.

All in one solution. Bingo!

However, a tool is useless if you don’t know how to use it correctly.

Knowing how to track your data effectively is crucial for gaining the insights you need to plan and improve your products or marketing strategy.

This article will cover how to effectively integrate Mini Digital into your web browser using the SDK for accurate and insightful product tracking and what places you need to be in mind in your codebase to send your event data properly and achieve the desired outcomes.

Onboarding 📝

For this article, let’s assume that the onboarding process has already happened with Mini Digital. This means you already have an account, and the Mini Digital team have set their configurations to receive the events from your domain and subdomains.

If you are reading this article in the future, Mini Digital App will already be available, and the onboarding will be straightforward. Using the app, you can sign in, create your account and quickly set up your domains and subdomains.

The Library 📚

Mini Digital SDK is an open-source library built using TypeScript and the ESM module format, and it compiles to the ES2022 target. You can use it in Node.js or browser-based TypeScript/JavaScript projects (including frameworks like React or Vue). Backwards CommonJS compatibility is provided by the library.

Installation and use 💻

Based on the Mini Digital Docs, there are two main ways to track an event using Mini Digital and send your event payload to the Mini Digital API endpoint: using the SDK or submitting the raw payload with the required fields from the schema to the Mini Digital endpoint by HTTP request. I will cover this last option in another article, but you can find all information you need in the docs.

First, you must install the SDK using a package manager (either npm or yarn). To do that, run the following:

npm install @wunderbar-network/mini-digital-sdk

yarn add @wunderbar-network/mini-digital-sdk

The next step is to import the SDK to your project, destructuring the AnalyticsEvent type and EventTrackingService module.

If installed via a package manager, you can import it as so (TypeScript/ESM syntax):

import { type AnalyticsEvent, EventTrackingService } from "@wunderbar-network/mini-digital-sdk";

If referencing a file (either from the CDN or locally), you can import it as per the example below:

import { type AnalyticsEvent, EventTrackingService } from "../lib/mini-digital-sdk.v1.3.esm.js";

Now that you have the SDK ready to go, this is the moment to declare your events for tracking.

Declare and send events 📤

Once your initial set-up is done, it is time to think about what you want to track and, most importantly, where you will declare and send events to track the user behaviour you need.

The Analytics Event for the Mini Digital API Server expects a schema containing fields with properties to be supplied by the SDK consumer.

Mini Digital SDK provides pre-defined core schemas designed to keep your data consistent. Some are mandatory to keep the minimum information necessary for accurate tracking. There are also options for you to customise the data you want to send.

You can find more about Mini Digital Core Schema Properties here.

I will cover all the aspects and properties of the schema in the upcoming articles. In this article, let’s focus on the minimum mandatory fields you must fulfil, especially the use cases and best places for each event category in your codebase.

Mandatory properties ✅

const event: AnalyticsEvent = {
  eventName: "home_page_viewed",
  eventCategory: "screen_view_event",
  eventSource: "Website.MiniDigital.Router",
  entityType: "home_page",
  action: "viewed",
  anonymousUser: true,
};

eventName

This is crucial information for you to send when tracking an event. This property is a string that refers to the event name you are tracking, e.g., account_created, crown_minted, screen_viewed.

Note: Mini Digital Docs recommends you define your eventName by using the object+action framework, where the object is the system or service that the user interacts with, e.g., button, screen or a data entity (account, image, payment, etc.), and the action is the verb that describes how the user/system interacted with the object, e.g., clicked, created, viewed, etc.

Mini Digital also includes optional properties that cover objects and actions and help you to define your eventName.

entityType - Type of the entity or object this event relates to (e.g. "account", "crown", "IPFS resource", etc.).

action - refers to the action that this event represents in past-tense verbs (e.g. "visited", "created", "minted", etc.).

eventCategory

This property will drive most of our examples in this article. It can be one of the five categories below, and understanding its user cases is fundamental for accurate event tracking:

screen_view_event - It tracks when users navigate to a page/screen.
user_outcome_event - It tracks when a user has completed a significant action in the product (e.g. when a user completes sign-up or uploads a file).
system_outcome_event - It is used when an event happens within the system and is not immediately initialised by the user (e.g. when a scheduled task gets completed or a backend system has performed an action). Note: I will not cover examples of this user case in this article as I’m focusing on web browser integration, but remember that you can use this property to track events when they catch the server side.
interaction_event - It tracks events when users interact with UI elements (e.g., the user clicks a button ou in a link).
content_event - It tracks content that was interacted with (It is designed for more specific media (images, videos) or visual assets (logos, icons) than generic UI elements such as a button or a link - see interaction_event for those use cases).

eventSource

This property refers to the area in the product or source where this event occurred (e.g. "Website.WunderbarNetwork.Router", “AccountSettings”).

Anonymous user - a quick highlight 💡

The cherry on top of Mini Digital is its anonymous user property by default, which significantly minimises your privacy policy and makes many web3 users feel relieved. This subject is so relevant that it deserves its own article, but there is an important aspect to cover here related to the two following properties of the Core Schema that will inform the SDK about the user acting: primaryIdentifier and anonymousUser.

primaryIdentifier and anonymousUser are marked as optional in the AnalyticsEvent interface. However, at least one needs to be supplied.

There is a third property that also plays a vital role in this relationship, which is trackingId.

To understand the relationship between these three properties, let’s follow the behaviour of a user visiting a store website. In the first moment, when the user hits the store's landing page, and this event is tracked, you usually don’t know who the user is. This is when you include the anonymousUser property in your schema and set the field value as true.

Mini Digital SDK generates a trackingId (a random UUID) and makes the primaryIdentifier the same as the trackingId.

Suppose the user performs logging in and gets identified by the system (for example, by providing their username or customer number or after connecting using a wallet). In that case, you may want to replace the anonymousUser with the primaryIdentifier and fill the field with the identifier data. The same trackingId field will be attached to all events before and after that moment and can be used to link the actions performed before and after logging in, so you know that it is the same user all the time along.

Use cases by `eventCategory` 🖊️

Now that you have all the pieces of the game you need, it is time to start to play.

Let’s again follow the journey of a user visiting a store website to understand a bit more about how and where to track your event while developing your integration to the SDK.

screen_view_event

The first action of a user in your product is usually navigating to a landing/homepage page.

An effective way to track when a user hits a screen/page is when the page renders for the first time, like this example below of a website's homepage being mounted in a Vue.js app. You will also want to set eventCategory to screen_view_event.

onMounted(async () => {
  // Define event data for the homepage screen view
  const event: AnalyticsEvent = {
    eventName: "home_page_viewed",
    eventCategory: "screen_view_event",
    eventSource: "Website.MiniDigital.Router",
    entityType: "home_page",
    action: "viewed",
    anonymousUser: true,
  };

  // Send data to track when a user navigates to the homepage
  await EventTrackingService.postEvent(event);
});

interaction_event

It’s common to expect a user to explore a website before deciding to log in. Tracking how the user interacts with the website UI (User Interface) – clicking buttons and links or expanding sections, can provide your product team with helpful insights on how they can best improve the website. Tracking the Login button clicked, in addition to how the user interacted with the website before login, allows the team to have a complete picture of the user journey.

There are so many things your product team can do once armed with those insights. Suppose they notice that more people see the homepage than log in, and then the team creates a motivating fidelity points system. However, product teams can only plan improvement actions if they get the data. Otherwise, it will be only a guess. A dangerous land to walk on!

You can track this event category by sending your data when the user clicks the button and setting your eventCategory to interaction_event.

In my example below, I have a function called handleConnectWallet() to handle an event when the user clicks the button to connect their wallet. If successful, a list of accounts will be displayed, and the user can choose the one they want to use to connect their wallet.

async function handleConnectWallet(): Promise<void> {
    // Define event data for Connect Wallet button clicked
    const event: AnalyticsEvent = {
      eventName: "connect_wallet_button_clicked",
      eventCategory: "interaction_event",
      eventSource: "Website.MiniDigital.Router",
      entityType: "connect_wallet_button",
      action: "clicked",
      anonymousUser: true,
    };

    // Send data to track when a user connects to a wallet
    await EventTrackingService.postEvent(event);

    // Load account list
    await checkForWeb3Accounts();

    // If no accounts, show error
    if (accountList.value.length === 0) {
      throw new Error("No web3 accounts could be found. Please check your extension(s) and try again.");
    }
}

content_event

When you want to be even more specific about the content that the user interacts with, the content_event property comes in handy to give even more accurate insights to your product team. It is designed to track more specific media (images, videos) or visual assets (logos, icons) than generic UI elements such as a button or a link.

Where to declare it depends much on your codebase and the context where your image, logo, or icon is used - if it is a video played by the user or a banner used as a link and handled by a function like the above. However, you also want to send your event data when the user interacts with the content.

const event: AnalyticsEvent = {
    eventName: "mini_digital_banner_clicked",
    eventCategory: "content_event",
    eventSource: "Website.MiniDigital.Router",
    entityType: "mini_digital_banner",
    action: "clicked",
    anonymousUser: true,
  };

user_outcome_event

Our last example to explore is when the user completes a significant action in the product, and our user just performed a login in our store website by choosing an account and connecting with their wallet. At this moment, all the validations were performed, and the login is successful.

In my example, I have a function that handles the successful login, sends my event data to Mini Digital and takes my user to another page that he can only access once logged in.

This is when you want to send your event data with your eventCategory set to user_outcome_event. Also, this is when the business may decide to use the identifier provided by the user. Logins are a perfect example of actions performed that allows you to update your schema by removing the anonymousUser and setting your primaryIdentifier to the identifier provided by the user.

async function handleWalletAccountConfirmed(walletAccount: WalletAccount): Promise<void> {

    // Save the selected account to our state management tool
    await store.commitWalletAccount(walletAccount);

    // Define event data for account successfully logged
    const event: AnalyticsEvent = {
      eventName: "wallet_account_logged",
      eventCategory: "user_outcome_event",
      eventSource: "Website.MiniDigital.Router",
      entityType: "wallet_account",
      action: "logged",
      primaryIdentifier: store.walletAccount?.address,
    };

    // Send data to track wallets successfully logged
    await EventTrackingService.postEvent(event);

    // Navigate to the dashboard
    await router.push({ path: "/dashboard" });
}

Note now that my user is not anonymous. I have stored my user’s identifier detail and used it to provide a value for primaryIdentifier.

Closing up 💌

In this article, I covered how to install and import Mini Digital SDK to start integrating the SDK into your codebase. I explained how to declare and send the events using the minimum information necessary for accurate tracking. I also provided examples of what mandatory properties you must send, the perfect timing, and where to declare your event schema.

I hope this article helped you better understand how to track your events most effectively to empower your product team with accurate insights.

I look forward to your feedback, and stay tuned for more articles. 👋🏻

Three things I loved most about Next.js 13.4 so far

Suzana Melo — Thu, 08 Jun 2023 06:50:24 +0000

Next.js was first launched in October 2016 by Vercel (formerly Zeit), years before I started programming. However, I only started learning it about a month ago when I needed to develop an application as part of a technical challenge using the famous “React framework”.
Its latest version, Next.js 13.4, brought a lot of upgrades and changes on top of what already exists.
I don’t intend to delve deeply into those changes here - you can easily find plenty of good articles already discussing features, but I wanted to highlight what was my “love at first sight” from a newbie perspective, with no preference order.

Learning curve 📚

As an immigrant woman who changed careers and entered the software development field after my 40s with no technical background, learning technology remains very challenging, especially when it is something I see for the first time. Although my love for programming and learning new things makes the process more pleasant and easier, it does not necessarily make things easier.
However, I was surprised by how much easier it was to understand Next.js' logic and structure, which is built on top of React, providing extra features that I found very handy. The documentation is also easier to follow and understand.

New Project 💻

Next 13.4 offers you TypeScript and TailwindCSS by default, which is fantastic. I’d decided to use TypeScript to build a side project, but you can also use JavaScript or JSX. It is up to you.
I learned software development by doing a bootcamp that utilized JavaScript as its core programming language. Although I used TS for a few months in a startup I previously worked with, it is still very challenging for me, and I love it.
To start to play around with the latest version of Next.js, run the following command to create a new project (you will also need to have Node.js 16.8 or later):

npx create-next-app@latest

You will be asked these prompts before putting your hands on the code.

What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes

Structure

Once the project is ready and you open it on your IDE (I use Visual Studio Code), you will have a structure like that:

To see it in your localhost:3000, start up the dev server by running the following:

npm run dev

Love number 1: Routing ❤️

As per Next.js documentation.

In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more. The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption.

What does it mean?
Creating a route in Next.js 13 is ridiculously simple.
Inside the app directory/folder, you have a page file (in my case, page.tsx), which is your app homepage. Inside that main app directory, create a folder with the name of the route you want, and inside that route/folder, create a file called page.tsx.

Here, I created a route to an About page by creating a directory called about and a page.tsx inside it. In the page.tsx file, I included an arrow function component that returns a title and content.
If you repeat these steps and go to localhost:3000/about, you will see the text content from the AboutPage component, as I did. And that is all you need to do. Easier like that!

Note that folders are used to define routes, and files are used to create the UI for that route. The folder's name is the route, and its file is called page.tsx.

Nested routes

To create nested routes, you need to repeat the same steps, but this time in the route folder. In my example, I implemented a route for /about/team by creating a folder called team inside the about folder. In the team folder, I created a new page.tsx file displaying a title and content. Once saved, the content of TeamPage was rendered on localhost:3000/about/team.

Of course, my project side is minimal and straightforward. Big and complex projects will demand a planned folder distribution and structure, but from my learning curve perspective, creating a route in Next.js was very easy to understand and execute.

Love number 2: Layout ❤️

Another great feature of Next.13 that I loved is the layout.
As per Next.js,

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.

When you create your new Next.js project, the layout file is also included next to the main page.tsx. It is a simple React component where you can add a header, footer, and any other content you want to appear on every page.

As you can see in the image above, this is also where you will include your metadata, such as title, description, keywords, and so on.

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

You can also easily include fonts from Google. The layout provided in your initial project consists of an example of importing Google fonts straightforwardly.
You just need to import the font you want and store it in a variable like that:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

You can also add other attributes you need for your project. Here is another example:

import { Poppins } from 'next/font/google';

const poppins = Poppins({
  weight: ['400', '600'],
  subsets: ['latin'],
});

To apply the font to your project, simply add the className to the tag you want to use it on. The Next.js boilerplate applies the className to the body of the project:

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )

Nested layouts

As per Next.js documents, Layouts can also be nested.
You can customise a layout for a specific page by adding a new layout file in the folder you want.

Here is how Next.js docs illustrate an example:

Let’s go back to the About page I mentioned previously. I can create a different layout for that page by creating an about/layout.tsx file next to my about/page.tsx. In this file, I defined a React component:

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <div>{children}</div>
    </>
  );
}

Your creativity (or the project requirements) is the limit. You can include a new font or metadata in your custom layout, or you may want a different container, a sidebar, or any other layout you need for your project.

My thought on this feature is that I was guided by a fantastic senior to keep my CSS files at the same level as their respective files. Having everything in the main styles folder would quickly become very messy and make it harder to coordinate changes from a maintenance perspective in the future. Next.js, applying the same concept with the nested layout file, made a lot of sense.
You can read more about pages and routing on this page of Next.js docs.

Love number 3: Server Components ❤️

This feature took me the most time and effort to understand, but once I grasped the concept, it looked fascinating and full of opportunities for experimentation and learning.

As per Next.js docs, let’s quickly highlight two crucial definitions of this feature.

The client refers to the browser on a user's device that sends a request to a server for your application code. It then turns the response from the server into an interface that the user can interact with.

The server refers to the computer in a data center that stores your application code, receives requests from a client, does some computation, and sends back an appropriate response.

NextJS 13 includes a Server Components feature by default, and as per its documents:

“allowing you to render components on the server easily and reducing the amount of JavaScript sent to the client.”

What does it mean?
Servers can process JavaScript and create documents faster than a client.
For Server Side Rendering, your service response to the browser is the HTML of your page, ready to be rendered. It will start rendering the HTML from your server without waiting for all the JavaScript to be downloaded and executed, the opposite of what happens on the Client Side Rendering.

I followed Next.js recommendations for fetching data in Server Components.
I tried simple data fetching, and I found it to be easier and straightforward.

✔️ Here is what I did:

I created a Server Component called Repos to render my repositories on GitHub.
Created an async function called getRepos() and used the Next.js fetch() API - you can learn more about it on the Next.js docs - to get the data I wanted from the GitHub API and fetch it straight away in the component.
I called the getRepos() and returned the details I needed to display, such as the name and description of my GitHub repositories.

Last thoughts 📌

I just started diving deep into this exciting framework, and I loved the experience of playing around with Next.js.
It has downsides, and there is a lot to explore and learn from.

Server Components are less interactive than Client Components.
They can’t be a component state, and you can’t use the useState hook.
It also doesn’t support lifecycle methods, and you can’t use the useEffect hook, which is handy for a component where you need to keep re-rendering, e.g., a search component.
If you want to use the useState hook and make it interactive, you need to make it a Client Component by adding ‘use client’ to the top of the component, but I’m going to leave this step for another day.

Still, many developers in the community are already excited about these new features, as they can combine some of the interactive experiences of client-side apps with the improved performance of traditional server-rendered applications.
Server Components improve the initial page loading time, simplify data fetching, and improve access to databases and file systems.

As I mentioned, these thoughts are from my perspective and take into account my ongoing learning process, which is constantly evolving.
If you're already familiar with Next.js, I would love to hear your insights on the new features and what I can experiment with. If you are new to that, like me, I hope I've piqued your curiosity to try and share your thoughts. 🚀

How I prepared myself for the AWS Cloud Practitioner Certificate

Suzana Melo — Tue, 30 May 2023 03:37:43 +0000

Once you choose a technology life, Cloud is inevitable. ☁️

The hottest trend in the information technology field is Cloud Computing, and you will bump into it. It is a matter of time.
This happened to me in my second job as a developer (I changed careers into software development around two years ago, after my 40s, and having no tech background). After almost a year of mainly handling components in React in a frontend environment, with minimal contact with the deployment circle, I started to work as a full-stack developer in a startup, and the stack included AWS.

If you're in the same boat, an absolute beginner like I was when I first started, I recommend taking a quick detour to this article first: Cloud Computing: What it is and why should tech beginners learn it?.

AWS

AWS is made up of many different Cloud Computing products and services, and I often find myself lost in the midst of tools I had never heard of before, such as AWS Lambdas, API Gateway, Amazon S3, and others. At that moment, I realized that it was crucial knowledge for growing in my career, and I decided to explore more about this new, exciting world called Cloud Computing.
If you are new to AWS, the AWS Cloud Practitioner certification exam serves as your entry point. I didn’t need a certification to perform my work. However, certificates give you visibility and help you to show off your achievements and learning. With the advancement of technology and the growth of the number of professionals in tech, certifications have become a way of presenting a competitive advantage.

The exam 💻

The AWS Cloud Practitioner exam tests your foundational understanding of AWS Cloud concepts, services, and terminologies. You have 90 minutes to complete the exam, with 65 questions, either multiple-choice or multiple responses. The test costs USD 100, and the score goes from 100 to 1,000. The minimum passing score is 700.
You can take the exam at the Pearson VUE testing center or online. I decided to do it in person to avoid concerns such as power outages, internet dropout risks, or the requirements related to the online exam.
If you don’t have a testing center close by or prefer to do it online, be aware of the requirements to guarantee the integrity of the test, such as asking you to show the room and check you via the webcam the whole time to ensure you look at your screen only. Avoid noise and keep your desk and surroundings clear of multiple objects. Ensure you are alone or ask your family not to disturb you during your exam. And don’t forget to have your identification document nearby.
I have heard of cases where people had their exams canceled due to issues like these, so pay attention to what they ask you to do before the exam.
This exam can be completed in the following languages: English, French (France), German, Indonesian, Italian, Japanese, Korean, Portuguese (Brazil), Simplified Chinese, Spanish (Latin America), Spanish (Spain), and Traditional Chinese.
The exam will include questions on four main domains: Cloud Concepts (26%), Security and Compliance (25%), Technology (33%), and Billing and Pricing (16%).
The exam is not divided by domain sections. The questions can include more than one area, depending on the service. You don’t need to achieve a passing score in each section. You only need to pass the overall exam.

Preparation for the exam 📚

Fortunately, I got all the support from the AWS CloudUp for Hāpori Wāhine Program, the CloudUp for Her Cloud Practitioner in New Zealand. It is an online bootcamp that provides you with resources and support to prepare yourself for the exam. It’s planned for women to support women in getting to know the Cloud.
Being surrounded by a supportive and incredible team of women makes an immensely positive impact on your journey. However, you can definitely prepare yourself well and for free to take the exam and get the certification beautifully. Essentially, the content of the bootcamp lies in what is already provided by AWS on their pages.
I completed the AWS Cloud Practitioner Essentials course and other free courses offered at the AWS training and certification page. I also checked out some of the resources listed at the end of this article.
You can find more details of the AWS Cloud Practitioner Essentials course in this article How to get started with AWS (for absolute beginners).
The AWS Certified Cloud Practitioner page and documentation already include valuable resources.
Once you delve into the content, understanding what problem each service solves and its corresponding use cases is vital. My exam included many questions simulating a customer's necessity, and I needed to choose the best service to sort that demand.
The quantity of services is vast, and it is impossible to know everything, but there are some critical points for you to look at closely.

Cloud Concepts:

Benefits of the cloud - e.g., elasticity, agility, scalability, pay-as-you-go, economy of scale.
The aspects of AWS Cloud economics - e.g., understanding labor costs associated with on-premises operations, right-sized infrastructure, and managed services (e.g., RDS, ECS, EKS, DynamoDB).
The different cloud architecture design principles, e.g., design for failure and decoupled components versus monolithic architecture.

Security and Compliance:

Shared responsibility model.
Cloud security and compliance concepts - e.g., identify different encryption options on AWS (e.g., In transit, At rest), describe who enables encryption on AWS for a given service, understand the concept of least privileged access, Amazon CloudWatch, AWS Config, AWS CloudTrail, etc.
AWS access management capabilities - e.g., MFA, IAM.
Resources for security support - e.g., security groups, Network ACLs, Transit Gateway, Load Balancer, AWS Shield, AWS WAF, AWS Trusted Advisor, and AWS Inspector.

Technology

Understanding the methods of operating in the AWS Cloud - e.g., programmatic access, APIs, SDKs, AWS Management Console, CLI, Infrastructure as Code, different cloud deployment models (cloud native, hybrid, and on-premises), and connectivity options.
Learn about AWS global infrastructure - e.g., Regions, Availability Zones, Edge Locations, disaster recovery/business continuity, Amazon CloudFront, and AWS Global Accelerator.
Identify the core AWS services - e.g., compute services (AWS Lambda, Amazon ECS, EC2, etc.), storage services (Amazon S3, EBS, EFS, the Snowball family, AWS Storage Gateway, etc.), networking services (Amazon Route 53, VPC, VPN, AWS Direct Connect, etc.), database services (Amazon RDS, DynamoDB, Redshift, etc.).

Billing and Pricing

Learn to compare and contrast the various pricing models for AWS (e.g., On-Demand Instances, Reserved Instances, and Spot Instance pricing) to find the best fit.
Understand the account structures of AWS billing and pricing - e.g., AWS Organizations.
Understand resources available for billing support - e.g., Cost Explorer, AWS Cost and Usage Report, and QuickSight.
Review AWS support plans, their benefits, and to whom each plan applies, and try to understand how to improve the cost of services.

Final considerations 📌

The coolest thing about the journey of preparing for certification is the knowledge we get while studying for the exam. I could understand what I was doing at work, as well as many other related things I didn’t know about before the certification.
I have no regrets about the time I spent preparing for my AWS Cloud Practitioner Certificate exam, and I enjoyed all the steps of my rewarding learning journey. I have been collecting countless benefits from it since I first started, such as being invited by friends to create and run a new AWS meetup group focused on Tools and Programming, where I could start to help beginners like me take their first steps into this fantastic world. After becoming an AWS User Group leader in 2023, I also became an AWS Community Builder in the same year, and it has been wonderful so far!

AWS often promotes fantastic certification campaigns and sometimes even 100% discount vouchers. To keep an eye on these campaigns, follow AWS and AWS Technical Trainers on social media and LinkedIn.
Once you receive your certificate, practice what you have learned and begin building cloud projects. There are many cool beginner projects on the Internet for you to start putting your hands on.
You can find additional resources to keep upskilling in the list of free AWS training courses available in my GitHub repository: Free AWS training courses.

I hope I have helped you succeed in your exam! 🚀

Note: I share my experience in this article regarding taking the AWS Certified Cloud Practitioner (CLF-C01) exam. AWS now offers the CLF-C02 exam, which includes new services and area improvements. The study resources shared in this article have already been updated by their owners to match the latest version. The structure, including the number of questions, passing score, and other details, remains the same.

Resources:

To study

Free AWS training courses

Cloud Essentials - Knowledge Badge Readiness Path

AWS Cloud Quest: Cloud Practitioner

Training events for free

Power Hour Cloud Practitioner

AWS Cloud Essentials

FreeCodeCamp - AWS Certified Cloud Practitioner Study Course
and its YouTube video

Building a Loan Calculator using React Hooks

Suzana Melo — Thu, 03 Sep 2020 12:56:00 +0000

Are you just starting with React? Are you wondering what you can build that’s simple and achievable? Well, so was I, and so I wrote this article to share my experience and learning with you.

What are we building? 💻

Like I promised, we're going to keep it simple and build a basic loan calculator that will take user input for the loan amount, interest rate and loan term, and display a monthly payment, and totals for the repayment amount and interest.

We're going to build a form to receive the input values and display the results. Along the way, we’ll manage form state, handle validation, and define event handlers to tie everything together.

To follow along you’ll need basic understanding of JavaScript, particularly ES6 features such as destructuring, the spread operator and arrow functions. You also need to have Node.js installed, and a text editor of your choice. I personally use Visual Studio Code.

Why? 🤔

I did this project in vanilla JavaScript while doing a course from Brad Traversy on Udemy and I loved the experience of building the whole application from scratch. I decided to rebuild this project using React Hooks to see the benefits React brings when you need to manage and manipulate the UI such as grabbing inputs from the UI and also creating new elements to display the results to the user.

I also wanted to demonstrate the React hooks API, which allows function components to have state and utilise lifecycle methods under the hood. In past versions of React, class components were the only way to manage state. This makes for a much better development experience 🤩.

You can also find the code for this project here:
https://github.com/suzanamelomoraes/loan-calculator-react-hooks

Shall we start? 👍

Section 1 - Create-React-App
Section 2 - Add some CSS
Section 3 - Create the component
Section 4 - Add state
Section 5 - Create a form / controlled component
Section 6 - Form Submission
Section 7 - Calculate the results
Section 8 - Display the results
Section 9 - Validate the results / Manage errors
Section 10 - Recalculate

Section 1

Create-React-app

We don't need anything complicated to make this project so we'll use the boilerplate Create-React-App gives us. To create the project, navigate to a directory of your choice and type:

npm i -g create-react-app
create-react-app loan-calculator

Or optionally:

npx create-react-app loan-calculator

Once the create-react-app finishes running, you can navigate into the project:

cd loan-calculator

To open the project in Visual Code (or your preferred editor):

code .

Finally, to run the project:

npm start

You can clear up your boilerplate as you wish. I usually delete the icons and related stuff, but it’s totally up to you. If you accidentally delete some essential file, just repeat the steps and create a new boilerplate.

Section 2

CSS

Styling won't be the focus of this tutorial, so feel free to copy this CSS into your App.css if you want — or add any styling you prefer. You can also find how I applied my classes in my repository on GitHub.

src/App.css

body {
 background-color: black;
}

input {
 display: block;
 width: 95%;
 margin: 3px 0;
 border-radius: 4px;
 border-color: lightgray;
}

p {
 color: red;
 font-size: 10px;
 text-align: left;
}

h4 {
 color: #555;
}

.calculator {
 display: flex;
 justify-content: center;
}

.form {
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: white;
 width: 50%;
 border-radius: 4px;
 margin-top: 30px;
}

.form-items {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 3px;
}

.button {
 background-color: black;
 color: white;
 border: none;
 margin: 10px 0;
 padding: 5px 10px;
 cursor: pointer;
}

.button:hover {
 opacity: 0.8;
}

#label {
 font-size: 12px;
 text-align: left;
}

Section 3

Create the component

Inside the src folder, we will create another folder called components and then, inside it, create a file called Calculator.jsx.

Calculator.jsx is a functional component which sets a header and imports React. Your initial Calculator component will look like this:

src/components/Calculator.jsx

import React from 'react'

const Calculator = () => {
   return (
       <div>
          <h1>Loan Calculator</h1>
       </div>
   )
}

export default Calculator;

Now you can include your Calculator.jsx in App.js like this:

import React from 'react';
import Calculator from './components/Calculator';
import './App.css';

function App() {
 return (
   <div>
       <Calculator />
   </div>
 );
}

export default App;

Section 4

Adding state

Remember from earlier that we need three pieces of information from the user to perform the loan calculation: the loan amount, interest rate, and the loan term. We’ll use state to hold these values for us.

Ready to make our component stateful? First up, we’re going to add the useState hook, which allows React to manage your components’ state. Back in your Calculator.jsx, amend the first line to include React’s state handler, useState.

src/components/Calculator.jsx

import React, {useState} from 'react';

Then we need to “use” the hook. The React documentation gives us this pattern:

const [state, setState] = useState()

And we’ll implement it, above our return, like this:

 const [userValues, setUserValues] = useState({
   amount: '',
   interest: '',
   years: '',
 });

The first item we’re destructuring, userValues is the name of our state and where we will store the input values given by the user. You can give it any name you want, however, it is good practice to choose meaningful names related to your application.

The second item, setUserValues is a method returned by the useState hook, that allows us to set the state.

Finally, the argument we provide to useState is the value we want to be the default value of the state. In this case, we have an object with these three properties, each assigned an empty string.

Section 5

Create a form / controlled component

To perform our calculation we need to collect information from the user, so let’s include the form with the inputs we need to receive this data. Initially, our form will look like this:

<form>
  <div>
    <div>
      <label>Amount:</label>
      <input
        type='text'
        name='amount'
        placeholder='Loan amount'
      />
    </div>
    <div>
      <label>Interest:</label>
      <input
        type='text'
        name='interest'
        placeholder='Interest'
      />
    </div>
More code...

Controlled components

Usually, React forms are implemented using controlled components - where the data is handled by a React component.

Let's go ahead and implement our components as controlled components:

Assign the value of the input from the state like this:

<input
  type='text'
  name='amount'
  placeholder='Loan amount'
  value={userValues.amount}
/>

Then, write an event handler on the onChange prop to update the state when the user enters a loan amount.

Include an onChange prop to each input and set it to a function to handle the change:

<input
  type='text'
  name='amount'
  placeholder='Loan amount'
  value={userValues.amount}
  onChange={handleInputChange}
/>

Next, add a function to handle the state change. You can use the spread operator inside the new function to update the userValues state:

const handleInputChange = (event) =>
   setUserValues({ ...userValues, [event.target.name]: event.target.value });

We need to do the same with all three inputs we want in our application (amount, interest and years) to make sure we are adding the right values given by the user to our userValues state.

As you can notice, we are using bracket notation here instead of writing a function to address each input. You can read more about it here and here.

Section 6

Form Submission

At this point, we have captured the values and stored them in state. Now it is time to do something with the given data on submission.

Let’s include a submit button in our form.

<input type='submit'/>

We also need to handle the values given by the user once they submit the form. To do this, we need to call the onSubmit method and pass our function that handles this submission as an argument like this:

<form onSubmit={handleSubmitValues}>

Now, after the handleInputChange handler, we can write our handleSubmitValues function that will receive the event as an argument.

There's one thing we need to do first though. On form submission, the default behaviour is to reload/redirect the page. To avoid this, we need to call the preventDefault() method on the event.

At this point, we can log the input values in the console, and our function will look like this:

 const handleSubmitValues = (e) => {
   e.preventDefault();
   console.log(userValues);
 };

Section 7

Calculate the results

At this point, you should be able to receive the data from the user and see it in your console, If it’s not happening, don’t panic. Welcome to the world of software development!
Breathe, review the steps and check my repository on GitHub if you wish.

Once we have the data, it’s time to calculate! But first, the calculation will generate new values, and we need to store them somewhere. So, to make the code more readable and easy to maintain let’s create another state to store these results, so they can be displayed in the UI.

 const [results, setResults] = useState({
   monthlyPayment: '',
   totalPayment: '',
   totalInterest: '',
   isResult: false,
 });

Note I also included a fourth variable isResult that will help the component know whether it needs to display the results to the user. Don't worry about it now; it will make more sense soon.

You can now delete the console.log and call the calculateResults function when handling the values submitted and send the data into it as an argument like this:

 const handleSubmitValues = (e) => {
   e.preventDefault();
   calculateResults(userValues);
 };

Once we have a place where we can store the values given by the user and another one to store the results, we can perform the calculation itself.

I’m not gonna go in details of how this calculation works, as this is a method you can find easily on the internet, and it is not the focus of this article, but some points of this function are important to highlight.

By default, inputs capture user input as strings, not numbers (to avoid this, we could use number inputs, but browsers render these inputs with stepper arrows, which I wanted to avoid here). To turn our strings into numbers, we need to wrap our values inside Number().
You can call your variables whatever you wish, but keep in mind the names must make sense to whoever looks at code again in the future.

Here is our function:

 const calculateResults = ({ amount, interest, years }) => {
   const userAmount = Number(amount);
   const calculatedInterest = Number(interest) / 100 / 12;
   const calculatedPayments = Number(years) * 12;
   const x = Math.pow(1 + calculatedInterest, calculatedPayments);
   const monthly = (userAmount * x * calculatedInterest) / (x - 1);

   if (isFinite(monthly)) {
     const monthlyPaymentCalculated = monthly.toFixed(2);
     const totalPaymentCalculated = (monthly * calculatedPayments).toFixed(2);
     const totalInterestCalculated = (monthly * calculatedPayments - userAmount).toFixed(2);

     // Set up results to the state to be displayed to the user
     setResults({
       monthlyPayment: monthlyPaymentCalculated,
       totalPayment: totalPaymentCalculated,
       totalInterest: totalInterestCalculated,
       isResult: true,
     });
   }
   return;
 };

We are destructuring userValues data to perform the calculation and putting the results into the results state.

Note that, to do this, we are setting all the values at the same time and replacing the whole object at once.

Section 8

Display the results

Yeah! We have results! If you console.log(newResults) you will now see the results you are getting from your calculation. Now let’s show these values to the user. After all, they are waiting for it!

Let’s create a form to display the results. I wanted to keep the same layout and style of the first form. The difference now is, as you are creating a form only to display data, don’t forget to disable the inputs.

We want a field with a corresponding label for each result. Also, it is good to remind the user of the values they gave to us, so let’s include this information again to make sure our user has all the information they need.

Our form will look like this:

<div>
  <h4>
    Loan amount: ${userValues.amount} <br /> 
    Interest:{userValues.interest}% <br /> 
    Years to repay: {userValues.years}
  </h4>
  <div>
    <label>Monthly Payment:</label>
    <input type='text' value={results.monthlyPayment} disabled />
  </div>
  <div>
    <label>Total Payment: </label>
    <input type='text' value={results.totalPayment} disabled 
    />
  </div>
  <div>
    <label>Total Interest:</label>
    <input type='text' value={results.totalInterest} disabled 
    />
  </div>
</div>

Finally, we can include a ternary operator to render the form differently, depending on whether we have results to display. Do you remember the isResult variable from earlier? I told you it will help us to display the results later!

The default value of isResult is false, but when the calculation is done and we add the results to the state, we also set this condition to true.

What does it mean? We can apply it to define what we are going to display. When isResult is false we show the part of the form that collects the data from the user; then once we calculate the loan, we also change isResult to true, and this way we display only the part with the results.

<form onSubmit={handleSubmitValues}>
  {!results.isResult ? (
    //   Form to collect data from the user
  ) : (
    //   Form to display the results to the user
  )}
</form>

Section 9

Validate the results / Manage errors

We are almost done, and everything is working. Beautiful! 😍
But hold on; we cannot forget an important step: we need to validate the values given to us to avoid issues with our calculation. Also, we need to tell the user if something goes wrong.

First, let’s create another state to help us to manage the error:

const [error, setError] = useState('');

Now, we can write a function whose only goal in life is to check for input errors and set the message related to this error. This function should return true if all of the inputs were valid, or false if there were any problems with the input.

We will check if the user forgot to provide any values, also if the values are all numbers, and finally if the numbers are positive. For purposes of this application, we consider 0 not to be a positive number.

Our function will look like this:

 const isValid = () => {
   const { amount, interest, years } = userValues;
   let actualError = '';
   // Validate if there are values
   if (!amount || !interest || !years) {
     actualError = 'All the values are required';
   }
   // Validade if the values are numbers
   if (isNaN(amount) || isNaN(interest) || isNaN(years)) {
     actualError = 'All the values must be a valid number';
   }
   // Validade if the values are positive numbers
   if (
     Number(amount) <= 0 ||
     Number(interest) <= 0 ||
     Number(years) <= 0
   ) {
     actualError = 'All the values must be a positive number';
   }
   if (actualError) {
     setError(actualError);
     return false;
   }
   return true;
 };

Now we also can update our function that handles the submit:

 const handleSubmitValues = (e) => {
   e.preventDefault();
       if (isValid()) {
     setError('');
     calculateResults(userValues);
   }
 };

Now the data is validated on submit, valid data will reset the error message to null, and then we calculate and display the results to the user. To display the error message, you can include it from your state just above your form.
Don’t worry, it will be displayed only when error has a non-empty value.

<h1>Loan Calculator</h1>
<p>{error}</p>
<form onSubmit={handleSubmitValues}>

Section 10

Recalculate

Great job! You finished your loan calculator! 🤝
Now it’s time to get the application ready to be used again.

We need to include a button in the form that displays the results and call a function to clear the fields like this:

<input
  value='Calculate again'
  type='button'
  onClick={clearFields}
/>

Clearing the fields is really simple. We just need to set all the user-provided values in state to empty strings again and change isResult to false like this:

 const clearFields = () => {
   setUserValues({
     amount: '',
     interest: '',
     years: '',
   });

   setResults({
     monthlyPayment: '',
     totalPayment: '',
     totalInterest: '',
     isResult: false,
   });
 };

Congratulations! Very well done! 👏

Now you know a little more how to create forms, handle validation, manipulate data, and work with event handlers.

There are lots to do from here. You can play around with more kinds of calculations and validations, or maybe you want to include a UI library. There is much more to discover...

Believe me, this is just the beginning and this is the way!

Happy coding! 🖖

DEV Community: Suzana Melo

How to get started with AWS (for absolute beginners)

How to get started? 🤔

AWS Skill Builder ⚒️

Cloud Essentials Badge 🥇

AWS Cloud Quest 🎮

AWS Cloud Certification 👩🏻‍💻

Summary 📝

Resources:

Related articles:

Upskill and Accelerate Your Career by Volunteering

Cloud Computing: What it is and why tech beginners should learn it?

Before the Cloud

Back in time for a bit

Servers in the Cloud

Cloud Computing definition

Why Cloud Computing?

Cloud Computing careers

Summary 📝

Resources:

The challenge of “start” in Tech

Tracking events effectively in Web Browsers with Mini Digital

Onboarding 📝

The Library 📚

Installation and use 💻

Declare and send events 📤

Mandatory properties ✅

Anonymous user - a quick highlight 💡

Use cases by eventCategory 🖊️

Closing up 💌

Three things I loved most about Next.js 13.4 so far

Learning curve 📚

New Project 💻

Structure

Love number 1: Routing ❤️

Nested routes

Love number 2: Layout ❤️

Nested layouts

Love number 3: Server Components ❤️

Last thoughts 📌

How I prepared myself for the AWS Cloud Practitioner Certificate

AWS

The exam 💻

Preparation for the exam 📚

Cloud Concepts:

Security and Compliance:

Technology

Billing and Pricing

Final considerations 📌

Resources:

To study

The exam

To practice (FREE and paid options)

Fundamentals

Building a Loan Calculator using React Hooks

What are we building? 💻

Why? 🤔

Shall we start? 👍

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Use cases by `eventCategory` 🖊️