Ijeoma Igboagu - freeCodeCamp.org

Learn Cloud Security Fundamentals in AWS – A Guide for Beginners

Ijeoma Igboagu — Tue, 09 Dec 2025 00:58:17 +0000

Security is a vital part of every system and infrastructure. The word "security" comes from the Latin securitas, which is composed of se- (meaning “without”) and cura (meaning “care” or “worry”). Originally, it meant "without worry." Over time, it has come to signify being safe or protected.

Today, when we discuss security, we usually refer to protection from harm, danger, or threats, whether in our homes, online, while using online banking, or even across an entire country. Security is important in everything we do.

Cloud providers, such as AWS, are no exception. Their infrastructure must be safeguarded to ensure users’ peace of mind. But on platforms like AWS, security is a shared responsibility. This means that both the provider and the user play a role in maintaining security.

Amazon Web Services (AWS) is one of the most popular cloud service providers worldwide. With great power and flexibility comes the responsibility to secure your infrastructure, data, and applications in the cloud.

In this tutorial, we’ll explore the fundamental aspects of cloud security in AWS – especially those that are your responsibility – making it easy to understand if you’re new to cloud computing.

What is Cloud Security?
Why is Cloud Security Important?
Key Cloud Security Concepts
Understanding the AWS Shared Responsibility Model
Conclusion
- Further Reading

What is Cloud Security?

Cloud security is the set of rules, tools, and practices used to protect your data, apps, and services stored online (in the "cloud"). It helps prevent data loss, hacking, and misuse of information.

Think of cloud security like locking the doors of your house. You wouldn’t leave your doors open for anyone to enter. And in the same way, your cloud account must be secured so that your data remains safe.

If your cloud services aren't secure, hackers could steal your data or cause major damage. Whether you're a business or just someone using cloud apps, keeping your information safe is essential.

Why is Cloud Security Important?

Cloud security matters because it ensures that only the right people have access to your information. It protects your data from being lost, stolen, or misused. With good security in place, your applications can run safely without being exposed to attacks.

It also helps you keep your personal or business data private. When your cloud environment is well-protected, the risk of data breaches and financial loss is greatly reduced.

Now that you understand why cloud security is important, let’s look at how AWS helps you stay secure and what your own role is in keeping things safe.

Key Cloud Security Concepts

In AWS, cloud security is the responsibility of both AWS and the customer. This model is called the Shared Responsibility Model.

But before learning how AWS divides security duties, you need to understand that while AWS protects its infrastructure, you must protect your own account.

Let’s discuss some key security concepts that are your responsibility, so you know how to do your part in the shared responsibility model.

What is a Root User?

When you create an AWS account, the first identity that’s created is the Root user Account. This account has full, unrestricted control. It can delete resources, change ownership, and even close your entire AWS account. Because of this, it’s risky to use it for everyday tasks.

AWS recommends using root only for a few important account-level actions.

Certain tasks require a root user account, so you will need to use it occasionally. Such tasks include:

Updating billing and payment information
Closing your AWS account
Changing the root account email
Recovering or resetting MFA for the root user

Apart from these few tasks, avoid using the root user Account completely. Your everyday work should be done through IAM users, not the root account.

How to Create an IAM User for Daily Tasks

Before you start creating any infrastructure in your AWS account, you need an IAM user with the right permissions.

Here’s how to create an IAM user, step by step:

Open the AWS console.
Search for IAM, then select it. This takes you to the IAM page.
On the left-hand side, you will see Users.
Click on it. This takes you to the Create user page.
Click the Create user button. It takes you to the “specify user details page” where you will create an IAM user.
Enter a username (for example, adminuser).
Click on “Provide user access to the AWS Management Console”.

Scroll down and click on “Set a password,” or let AWS generate one for you.
Click Next to go to the permissions page.
Select Attach existing policies directly.
Choose AdministratorAccess. This permission gives the IAM user full access to perform all administrative tasks in your account.
Click Create user.

Once you’ve created this user, sign in with it and use it for your day-to-day tasks. The root user should stay locked down and only be used for rare account-level changes.

Video Walkthrough of How to Create an IAM User:

Key Differences Between the Root User and an IAM User

Just to be clear, let’s summarise the differences between these two accounts:

Root Account

This is the very first account created when you set up AWS. It has unlimited power – literally, everything in the account can be changed, deleted, or closed.

It’s meant for rare, high-level tasks like billing changes, MFA resets, or closing the account. Because it’s so powerful, you shouldn’t use it for daily work.

IAM User Account

This is a user you create inside your AWS account for everyday tasks. You can assign specific permissions, like admin or limited access, to this user. It’s much safer because you can control what it can and cannot do.

If something goes wrong or the credentials are compromised, the blast radius is much smaller than for the root user.

In short, the Root is the master key too powerful for daily use. IAM users are customizable and safer for your regular work.

Here’s a helpful visual to show the differences between the two as well:

Now that you have both your root user and IAM user set up properly, let’s go back to the concept of multi-factor authentication, or MFA.

What is MFA?

MFA adds another layer of security when you sign in. It combines something you know, like your password, with something you have, such as a phone or security device. Even if someone gets your password, they can’t log in without your MFA code.

You can enable MFA in several ways:

Using a virtual MFA app like Google Authenticator or Authy
Using a physical security key such as a YubiKey
Using a hardware device from Gemalto
For AWS GovCloud users, using an MFA device from SurePassID

Enabling MFA makes sure that even if someone gets your password, they still can’t access your account without the second authentication step.

For this tutorial, we’ll use the Google Authenticator app, which you can download for free from the Play Store.

How do I turn this on for my account?

Go to your AWS account.
At the top right corner, you’ll see a menu with your account username or ID. Click on it to open the drop-down.
You’ll see Security Credentials. Click on it. This will take you to the IAM-Security Credentials page.

At the top of the page, you’ll see a button labelled Assign MFA device. Click on it.
You’ll be redirected to a new page where you can choose the type of MFA device you want to use. Scroll down and select Virtual MFA device (this is what the Google Authenticator app uses).

Then just follow the on-screen instructions:

Open the Google Authenticator app on your phone.
Tap the + button and scan the QR code displayed on the AWS screen.
Enter the two codes generated by the app to verify your device.

Once verified, AWS will link the MFA device to your account and take you back to the Security credentials page. If you scroll down, you’ll see your MFA device listed as assigned.

The next time you log in to AWS, you’ll be prompted to enter your MFA code from the Google Authenticator app before you can access your console.

Always enable MFA for both your root user account and your IAM user account, as it’s one of the simplest and most effective ways to protect your AWS account.

Now that you understand these security fundamentals, we can get back to the shared responsibility model.

Understanding the AWS Shared Responsibility Model

The AWS Shared Responsibility Model divides responsibilities between AWS and the customer.

1. AWS’s Responsibility (Security of the Cloud)

AWS is responsible for protecting the infrastructure that runs the services offered in the AWS Cloud. This includes physical security, hardware, software, networking, and facilities.

2. Customer’s Responsibility (Security in the Cloud)

The customer is responsible for securing the data, user accounts, applications, and configurations they store in the cloud.

Image source: AWS shared responsibility model

For example, AWS is responsible for securing its data centres and servers. But customers also have a role to play by properly configuring their accounts and resources.

Let’s take two popular AWS services, RDS (Relational Database Service) and S3 (Simple Storage Service), as examples.

RDS (Relational Database Service)

AWS responsibilities:

Automates database patching
Audits and maintains the underlying instance and storage disks
Applies operating system patches automatically

Customer responsibilities (you):

Manage in-database users, roles, and permissions
Choose whether your database is public or private
Review and control inbound rules, ports, and IP addresses in the database’s security group
Configure database encryption settings

S3 (Simple Storage Service)

AWS responsibilities:

Ensures encryption options are available for your data
Guarantees virtually unlimited storage capacity
Prevents AWS employees and the public from accessing your data
Keeps each customer’s data separated from others

Customer responsibilities (you):

Define your S3 bucket policies according to your security standards
Review bucket configuration settings
Create and manage IAM users and roles with the right permissions

Now you understand who’s responsible for what.

How to Give a User Permission

Security in the cloud isn’t just about strong passwords or enabling MFA – it’s also about controlling who can access what. One of the most important principles in AWS security is to grant users only the access they actually need, nothing more. That’s how you keep your environment safe and your resources protected.

So here’s a key question: how do we know to whom to allow or deny access in the cloud?

Demonstration

Let’s walk through a simple, real-life example together.

Imagine you have a developer on your team who needs access to an S3 bucket named demo-test-app-ij. The goal is to let them upload and view files in the bucket, but not delete anything.

We already created a user earlier in this guide, so we’ll use that same one here.

To get started, go to IAM from your AWS Management Console. Then click on Users from the left-hand menu.

Select the user we created earlier. If you don’t have one yet, go back and follow the steps I showed you before to create a new IAM user.

Once you click on the user’s name, you’ll be taken to the Permissions page. On the permissions page, click on Add permissions.

From the dropdown options, select Create inline policy. This will open the Specify permissions page, where you’ll define the user’s access.

Scroll down through the list of services and select S3. In our example, we’re using S3 because we want to control access to a specific bucket.

Once you select the service you want to define permissions for, the Actions and Resources sections will appear automatically.

In the Actions section, you’ll see a list of what the user can do with the service. Here, you can toggle the effect button to either “Allow” or “Deny.”

Under Actions, scroll through the list and find DeleteObject. Set this action to Deny: DeleteObject. This ensures the user won’t be able to delete any files from the bucket.

Next, move on to the Resources section. Here, you’ll specify which bucket these permissions apply to.

Add the following bucket ARN: arn:aws:s3:::demo-test-app-ij/*. This means the rule applies to everything inside the demo-test-app-ij bucket.

Once you’ve added the ARN and confirmed the settings, click Save policy.

Now, let’s put all these instructions together in a practical example:

Testing the Policy

Now it’s time to confirm that our permissions work the way we expect.

Head over to the S3 service and open the bucket named demo-test-app-ij. Try uploading a file; it should upload successfully. Next, try deleting that same file. You’ll see an error message saying Failed to delete objects.

That’s exactly what we want! The user can upload and view files, but can’t delete them, because we never permitted them to do so.

Conclusion

Security has always been about peace of mind. Whether it’s your home, your phone, or your cloud account, you’ll want to know your data is safe.

AWS gives you a strong foundation by securing the cloud itself. But your part matters too: things like enabling MFA, using strong passwords, and managing who can access what. These simple habits go a long way in keeping your data protected.

Cloud security isn’t a one-time setup. It’s an ongoing practice. When both AWS and its users stay alert, the cloud becomes a place you can trust to store, build, and grow with confidence.

Now that you have a basic understanding of how security works in AWS, you’re ready to go deeper and start exploring the services that keep it all running smoothly.

How to Deploy a Kubernetes App on AWS EKS

Ijeoma Igboagu — Fri, 22 Aug 2025 11:55:41 +0000

AWS makes it much easier to deploy containerized applications, and running Kubernetes in the cloud is a powerful way to scale and manage these applications.

Among the many managed Kubernetes services AWS offers, Amazon EKS (Elastic Kubernetes Service) stands out for its seamless integration with the AWS ecosystem, strong reliability, and excellent support.

If you’re ready to move beyond local setups and want to deploy a real-world Kubernetes app on AWS EKS, this guide will walk you through the entire process. Whether you’re working on a microservice, a full-stack app, or just experimenting with Kubernetes in an environment that mimics production, you’ll find this walkthrough useful.

In this article, I’ll guide you through the process of creating your EKS cluster, deploying your application, and making it accessible over the internet, step by step.

What We’ll Cover:

Prerequisites
What is a Kubernetes Cluster?
What is Amazon Elastic Kubernetes Service?
Why Use Amazon EKS for Kubernetes?
How to Create a Kubernetes Cluster Using AWS
Conclusion
Resources

Prerequisites

To get started, make sure you have the following installed on your local machine:

Have a basic understanding of cloud services.
Have a basic understanding of the Linux command line.
Have an AWS account.
Install eksctl, a simple CLI tool to create and manage EKS clusters.
Install kubectl, the standard Kubernetes command-line tool.
Install Docker to build and package your app into a container.

Before setting up a Kubernetes cluster for our application, it’s essential to understand a few basic concepts.

What is a Kubernetes Cluster?

A Kubernetes (also called K8S) cluster consists of machines (called nodes) that run containerized applications. It works alongside container engines like CRI-O or containerd to help you deploy and manage your apps more efficiently.

Kubernetes nodes come in two main types:

Master nodes (control plane): These handle the brainwork, such as scheduling, scaling, and managing the cluster’s overall state.
Worker nodes (data plane): They run the actual applications inside the containers.

If you're new to Kubernetes or want to brush up, check out the free course Introduction to Kubernetes (LFS158) from the Linux Foundation.

What is Amazon Elastic Kubernetes Service?

Amazon Elastic Kubernetes Service (EKS) is a managed service that enables easy Kubernetes deployment on AWS, eliminating the need to set up and maintain your own Kubernetes control plane node.

AWS EKS takes care of the heavy lifting by managing the control plane, handling upgrades, and installing core components, such as the container runtime and essential Kubernetes processes. It also offers built-in tools for scaling, high availability, and backup.

With EKS, you or your team can focus on building and running applications, while AWS handles the underlying infrastructure.

Why Use Amazon EKS for Kubernetes?

Here are some key benefits of using AWS EKS:

EKS handles upgrades, patching, and high availability for you, giving you a fully managed control plane with minimal manual effort.
You can easily scale your applications, and the infrastructure grows as your needs evolve.
It has built-in support for IAM roles, private networking, and encryption.
AWS EKS runs on highly available infrastructure across multiple AWS Availability Zones, making your application available globally.
With Amazon EKS, you get the power of Kubernetes without managing the underlying setup. So you can stay focused on building and running your apps.

How to Create a Kubernetes Cluster Using AWS

Now let’s walk through the process of getting a Kubernetes cluster up and running.

Step 1: How to Install the Tools Needed to Create a Cluster

The easiest and most developer-friendly way to spin up an Elastic Kubernetes Service that you can use at the production level is by using eksctl. It takes care of the manual setup and automatically provisions the necessary AWS resources.

Before we begin, we need to install two essential tools:

eksctl – This is used to create and manage your EKS cluster.
kubectl – This allows you to interact with your cluster, deploy apps, and manage Kubernetes resources.

These tools will make it easy to set up your Kubernetes cluster and work with it directly from your terminal.

How to Install eksctl

Open your browser and go to the official eksctl documentation. Scroll down to the Installation section.

Scroll to the Unix instructions if you're using Ubuntu or a similar system. Then copy the installation command and paste it into your terminal.

Once it’s done, run eksctl version to confirm that the installation was successful.

How to Install kubectl

The next step is to install kubectl. You can find the installation instructions in the official Kubernetes documentation, which provides steps based on your operating system.

Step 2: How to Create the Elastic Kubernetes Service (EKS) Cluster

Now that you've installed the tools needed to create and interact with a Kubernetes cluster on AWS, it's time to launch the cluster.

To get started, open your terminal and run the following command:

# Create an EKS cluster named "k8s-example" in eu-west-2 (London)
eksctl create cluster --name k8s-example --region eu-west-2

One great thing about using AWS EKS is that once your Kubernetes cluster is created, it automatically updates your ~/.kube/config file. This means you can start interacting with your cluster right away, using kubectl – no extra setup needed.

After running the command (as shown in the GIF above), your Kubernetes cluster is successfully created.

Head over to the AWS console, and you’ll see your new cluster listed with a status of Active.

With your cluster up and running, it’s time to test the connection. You can do this by running a few kubectl commands in your terminal to list the nodes, pods and namespaces in your cluster.

To test the connection:

kubectl get nodes

This command lists all the nodes in your cluster.

kubectl get pods

This command lists all the pods currently running.

kubectl get namespaces

This command lists all the namespaces currently running.

If each command returns a list of resources, congratulations! Your connection to the Kubernetes cluster is successful.

Step 3: How to Create Kubernetes Manifests

Let’s define the application using a YAML file. In this file, you’ll create two key resources: a Deployment and a Service.

The Deployment ensures your application runs reliably by specifying how many replicas to run, which container image to use, and how to manage updates.
The Service makes your application accessible — both within the Kubernetes cluster and, if needed, from the internet, even if the underlying pods change or restart.

Together, these resources orchestrate your application so it can run consistently in different environments and be accessed by others.

#deployment-example.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: amazon-deployment
  namespace: default
  labels:
    app: amazon-app
spec:
  replicas: 5
  selector:
    matchLabels:
      app: amazon-app
      tier: frontend
      version: 1.0.0
  template:
    metadata:
      labels:
        app: amazon-app
        tier: frontend
        version: 1.0.0
    spec:
      containers:
        - name: amazon-container
          image: ooghenekaro/amazon:2
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: amazon-service
  labels:
    app: amazon-app
spec:
  type: LoadBalancer
  ports:
    - port: 80
      targetPort: 3000
  selector:
    app: amazon-app

The service uses a LoadBalancer type, which tells AWS to provision an Elastic Load Balancer (ELB) and route traffic to the pods.

Step 4: How to Deploy the App to EKS

Now that your YAML file is defined and the Kubernetes cluster on AWS EKS is ready, it’s time to deploy your application.

To do this, run the following command in your terminal to apply the configuration defined in your manifest file:

kubectl apply -f deployment-example.yaml

This command tells Kubernetes to create the necessary pods and services based on what’s specified in the manifest file.

Next, you can check the status of your pods and services:

kubectl get pods
kubectl get svc or service
kubectl get all

Step 5: How to Access Your Application

To view your application in the browser, run the following command to list your services:

kubectl get svc

Look for the EXTERNAL-IP of your service.

Copy the IP address and paste it into your browser. Your app should now be live!

Conclusion

Deploying a Kubernetes app on AWS EKS may seem complex at first, but with tools like eksctl and kubectl, the process is surprisingly approachable.

Whether you're a developer experimenting with Kubernetes or a team looking to scale production workloads, EKS provides a strong, scalable foundation that supports your applications as they grow.

Resources

Thanks for reading!

The Best AWS Services to Deploy Front-End Applications in 2025

Ijeoma Igboagu — Tue, 27 May 2025 22:32:08 +0000

As front-end development evolves, finding the right deployment service is more important than ever. Amazon Web Services (AWS), a cloud-based service, offers a number of helpful tools and platforms for hosting modern front-end applications. Although it may present challenges for beginners, AWS can help give companies an edge with its global reach.

In this article, I’ll break down the best AWS services for frontend deployment in 2025, covering their use cases and their pros and cons. Whether you’re launching a static website, a React/Vue application, or a complex web application, this article will help you find the most effective AWS solution for your needs.

Why Choose AWS for Frontend Hosting?
AWS Services for Frontend Hosting
Conclusion
Related Articles

Why Choose AWS for Frontend Hosting?

Before we explore the specific AWS services for frontend hosting, let’s first look at why developers and companies often choose AWS over more familiar platforms like Netlify or Vercel.

AWS has data centers worldwide, reducing latency and ensuring high availability. This means that apps deployed using their services can be easily and quickly accessed anywhere in the world (as long as that region has a nearby data center).
Any provisioned AWS service has security features like encryption, IAM, and DDoS protection.
AWS automatically scales to handle high traffic spikes without downtime.
AWS is flexible – it supports frameworks like React, Vue, Angular, and Next.js.
AWS easily integrates with other AWS services like databases (DynamoDB, RDS), APIs (API Gateway), and authentication (Cognito).

AWS Services for Frontend Hosting

Amazon S3 (Simple Storage Service)

Amazon S3 is a storage service from AWS mainly used to store files like HTML, CSS, JavaScript, Images, and Videos. These files make up static websites – that is, websites that don’t change based on user actions.

Many developers use S3 to host their static websites because it’s reliable, it works well, and it doesn’t cost much. You just upload your files to an S3 bucket, make them public, and your website is live. You can also connect a custom domain and add extra features like faster loading through a CDN (like CloudFront).

Use Case:
AWS S3 is perfect for hosting static websites and storing media files, such as portfolio sites, blogs, documentation pages, or any site that doesn't require a server to run backend code.

Pros:

Easy to use and affordable for most projects.
Keeps your files available almost all the time.
Your data is stored safely and can be backed up automatically.

Cons:

It doesn’t support backend features like running code, handling forms, or connecting to databases.

To help you get started using S3 for hosting, here’s an article that explains how to host a static website using AWS S3 and Cloudfront.

AWS Elastic Beanstalk

AWS Elastic Beanstalk is a service that helps you quickly deploy and manage web applications without needing to handle the underlying infrastructure. While it’s often used for backend services, it also works well for frontend apps that need server-side features.

Use Case:
AWS Elastic Beanstalk is ideal for hosting full-stack applications, especially those built with server-side frameworks like Next.js or Nuxt.js. It handles both the frontend and backend in one environment.

Pros:

Automatically scales your app based on traffic
Includes load balancing to manage high traffic smoothly
Works well with other AWS tools like RDS for databases and CloudWatch for monitoring

Cons:

More complex to set up compared to simpler services like Amplify or S3
Not the best choice for static websites that don’t require server-side logic

To better understand how it works, I used AWS Elastic Beanstalk to set up a CI/CD pipeline. You can read this article: How to Create a CI/CD Using AWS Elastic BeanStalk.

Amazon EC2 (Elastic Compute Cloud)

Amazon EC2 lets you run your virtual server in the cloud. You can install any software, upload a website, open or close ports, and have full control over how your application runs. It's similar to having your physical computer, but it's hosted online and it’s more flexible.

Use Case:
AWS EC2 is great for developers or teams who need full control over their hosting setup. It's useful for projects where the frontend and backend are closely connected, or where you need to run custom services, tools, or configurations that simpler platforms can’t handle.

Pros:

Full control over the server environment.
Supports custom setups, tools, and applications.
It is a flexible way to run any application on it.

Cons:

Takes time to learn and manage.
You’re responsible for handling updates, scaling, and security.

To help you understand how it works and how to connect it to your code editor (IDE), here's an article that walks you through the process: How to Connect Your AWS EC2 Instance to VS Code.

AWS Amplify

AWS Amplify is a platform that makes it easy to build and host frontend and mobile applications. It’s designed for developers working with frameworks like React, Vue, Angular, or Next.js.

Amplify handles things like hosting, authentication, APIs, and data storage. It supports Git-based CI/CD, which means your app can automatically update every time you push code. It comes with built-in support for popular tools like Cognito (for login systems), AppSync (for APIs), and DynamoDB (for databases). You can even create different environments based on your Git branches.

Use Case:
AWS Amplify is ideal for teams or solo developers building full-stack apps with modern frontend tools, especially when you want built-in features like user authentication, cloud APIs, and easy deployment.

Pros:

Simple full-stack hosting – frontend and backend in one place.
Fast setup with automatic scaling.
Comes with HTTPS, custom domain setup, and performance monitoring.

Cons:

More expensive than simpler solutions like S3 for basic static sites.
Less flexibility for developers who want full control over infrastructure.

Here is a simple guide for building with AWS Amplify. I hope it helps you understand it better: How Can AWS Amplify Improve Your Development Process?

And here’s an in-depth guide that walks you through building a full-stack app with AWS Amplify and React.

AWS LightSail

AWS LightSail is a beginner-friendly cloud hosting service that offers a quick and easy way to launch small applications. It works like a simpler version of EC2 and comes with pre-configured environments for Node.js, LAMP (Linux, Apache, Mysql, PHP), and WordPress. This means that you don’t have to spend time setting everything up from scratch.

Use Case:
It is perfect for freelancers, small businesses, or anyone who wants to host a simple website or app, such as a blog, a small web app, or an online portfolio.

Pros:

More affordable than EC2.
Easy to set up and manage.
Comes with ready-to-use application stacks.

Cons:

Not ideal for large or fast-growing projects.
Has fewer customisation and scaling options compared to EC2 or Amplify.

For a fun, project-based tutorial, check out this guide that teaches you how to use AWS LightSail to deploy Docker containers to the cloud.

AWS App Runner

AWS App Runner is a service that helps you run web applications without setting up or managing any servers. You just connect your source code or a container image, and App Runner handles everything. It's a quick way to get your frontend or backend app online, especially if your app needs server-side processing.

Use Case:
App Runner is a good choice for frontend applications built with server-side rendering (like Next.js), full-stack apps, or APIs. It’s also helpful if your app is containerised and you want it to scale automatically based on traffic.

Pros:

No server setup or management.
Automatically scales your app as needed.
Easy to connect with GitHub or Amazon ECR.
HTTPS and custom domain support included.

Cons:

It’s not the best choice for very simple websites that only show static content like HTML, CSS, and JavaScript files. Other services like S3 are easier and cheaper for that kind of site.
It doesn’t give you as much control as EC2 or ECS. For example, you can’t fully customise the server environment or how things run behind the scenes. So, it’s great for simple or standard setups, but not ideal if you need to fine-tune advanced settings.

If you want to learn more about deploying apps with AppRunner, here’s a tutorial about deploying a Kotlin microservice to AppRunner that you can check out.

Conclusion

AWS offers a variety of powerful tools for hosting frontend applications, from simple static site hosting on S3 to full-stack managed deployments with Amplify. Whether you’re a solo developer launching your portfolio or a team deploying a production web app, AWS has the flexibility and scalability to support your frontend needs.

By understanding each service’s purpose and use case, you can confidently pick the best fit for your project and scale as needed. Start small, experiment, and grow with AWS.

If you found this article helpful, please share it with others who may find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

Thank you for reading.

How to Connect Your AWS EC2 Instance to VS Code

Ijeoma Igboagu — Tue, 25 Mar 2025 17:48:02 +0000

As a DevOps engineer, it is crucial to master at least one cloud provider. Cloud services simplify storage, data migration, and CI/CD workflows and help make these tasks easier and more efficient.

If you need a basic introduction to cloud computing, here’s a beginner-friendly tutorial for you: What is Cloud Computing? A Guide for Beginners.

In this guide, I’ll show you how to create an AWS EC2 instance. This is one of AWS’s top services for building applications. By the end of this guide, you'll know how to launch an AWS EC2 instance and connect it to VS Code.

Prerequisites
What is an AWS EC2 Instance?
Why Connect Your AWS EC2 Instance to VS Code?
How to Launch and Connect Your AWS EC2 Instance to VS Code
Conclusion

Prerequisites

Before you start, make sure you have:

An AWS account. If you do not have one, sign up here.
A GitHub repository with your source code. If you don’t have a GitHub account, sign up here.
Basic knowledge of web development and version control.
A code editor. For this tutorial, I’m using VS Code.

Let’s jump right in!

What is an AWS EC2 Instance?

AWS EC2 (Elastic Compute Cloud) allows you to run virtual machines in the cloud. These computers allow you to run your applications without needing physical hardware.

There are a number of things you can you do with AWS EC2, such as hosting websites or apps, running big data or machine-learning tasks, creating testing environments, and handling tasks that need flexible, scalable computing power.

Why Connect Your AWS EC2 Instance to VS Code?

Connecting your AWS EC2 instance to VS Code is helpful for several reasons. Before we start the setup process, it’s important to learn why it’s beneficial.

Using VS Code provides a familiar and efficient development space. It feels like coding on your own machine.
You don’t have to log into your AWS EC2 instance each time. You can edit files, run commands, and debug code from a distance.
You can streamline your workflow with built-in terminal access and extensions. This way, you won't have to switch between SSH clients all the time.
You can push changes to GitHub. This makes working together and deploying much smoother.
VS Code works well with Java, Node.js, and Python. It supports many languages and frameworks, so it's great for cloud development.

Now that you understand the benefits, let’s move on to setting up the connection.

How to Launch and Connect Your AWS EC2 Instance to VS Code

To launch an EC2 instance on AWS, just follow these steps:

Step 1: Create an AWS EC2 Instance

First, log into your AWS account. Then, use the search bar to find EC2 and select it.

Click EC2 and follow the on-screen instructions to create a new instance.

Choose an AMI (Amazon Machine Image): This is a pre-configured template that includes an operating system and may come with additional software.
Select an instance type: Pick the right size for your needs. For example, t2.micro is a good option for beginners and small workloads.
Configure Your EC2 Instance: Set up networking, storage, security groups, and other options based on your requirements.
Launch Your Instance: Start your virtual server and access it remotely to begin using it.

Launched instance running:

So what’s happening in Step 1?

By launching an AWS EC2 instance, you are setting up a remote server in the cloud. AWS offers different AMIs that serve as pre-configured environments.

Step 2: Connect the AWS EC2 Instance to Your Code Editor

To connect your EC2 instance created in AWS to your VS Code, you need SSH.

What is SSH?

SSH (Secure Shell) is a secure way to connect and communicate with other devices. It keeps your connection safe. This is important when you access servers or repositories. In Git, you can use SSH instead of HTTPS to clone repositories with a secure connection.

Why is SSH important here?

With SSH, you can link your local code editor (like VS Code) to your AWS EC2 instance. This allows you to work on files stored on the EC2 instance directly from your editor as if on your local computer.

To connect your AWS EC2 instance to your local editor using SSH, follow these steps:

Open your terminal.
Go to the folder where your .pem key file is. The key file (.pem) downloads automatically when you create your EC2 instance (usually in the Downloads folder).
Update the file permissions to keep your key secure and ensure proper authentication.

For Linux users, use this command to update the file permissions:

chmod 400 codebuild-keypair.pem

For Windows users, first you’ll need to find the username of your laptop, as you’ll need it to update the file permissions.

To do this, open your terminal and type:

whoami

This will display your current username.

Once you have your username, use the following command to update the file permissions:

icacls "codebuild-keypair.pem" /reset
icacls "codbuild-keypair.pem" /grant:r "%USERNAME%:R"
icacls "codebuld-keypair.pem" /inheritance:r

Here's what I mean: My username is ijeon, so you should replace it with your laptop's username and own key, which ends with .pem extension.

Running this command above updates the file permissions. So with this, you can work with your remote server.

Now that you have set the correct file permissions, you can use the SSH command along with the IPv4 address to connect to our EC2 instance. Type the following command:

ssh -i [PATH TO YOUR .PEM FILE] ec2-user@[YOUR PUBLIC IPV4 DNS]

Example:

ssh -i "C:\Users\ijeon\OneDrive\Desktop\devops-series-nextwork\codebuild-keypair.pem" ec2-user@ec2-35-178-142-201.eu-west-2.compute.amazonaws.

Breaking it down:

ssh: This starts a secure remote connection.
-i "C:\Users\ijeon\...\codebuild-keypair.pem": This tells SSH to use the .pem key file for secure access.
ec2-user@ec2-35-178-142-201.eu-west-2.compute.amazonaws.com:
- ec2-user is the default username for EC2 instances.
- @ec2-35-178-142-201... is the public address of your EC2 instance.

This command logs you into your EC2 instance remotely from your computer. It then uses the key (.pem file) instead of a password for security. It also lets you control the EC2 instance from your terminal as if you were using it directly.

If everything is set up correctly, a “success message” will appear. This confirms that you've logged in and can access the remote server.

Step 3: Install the Programming Language

Now that you’ve linked your instance to the editor, you can install the packages needed to build your web app. You can use any programming language you're comfortable with, but we’ll use Java for this tutorial. This will be a simple web application – we don’t need to go into advanced details.

1. Install Java

In your terminal, run the following commands to install Java:

sudo dnf install -y java-1.8.0-amazon-corretto-devel

export JAVA_HOME=/usr/lib/jvm/java-1.8.0-amazon-corretto.x86_64

export PATH=/usr/lib/jvm/java-1.8.0-amazon-corretto.x86_64/jre/bin/:$PATH

This installs Java on your system. You also need Maven. It helps manage Java projects and create templates for web applications.

2. Install Maven

Maven helps you organize Java projects. It also lets you create templates for web applications. Run these commands to install Maven:

wget https://archive.apache.org/dist/maven/maven-3/3.5.2/binaries/apache-maven-3.5.2-bin.tar.gz

sudo tar -xzf apache-maven-3.5.2-bin.tar.gz -C /opt

echo "export PATH=/opt/apache-maven-3.5.2/bin:$PATH" >> ~/.bashrc

source ~/.bashrc

To confirm Maven's correct installation, run this command:

mvn -v

Also, run the following command to check whether you have Java installed:

java -version

Now that you have installed Maven, you can use it to create a Java web app with the following command:

mvn archetype:generate \
  -DgroupId=com.nextwork.app \
  -DartifactId=nextwork-web-project \
  -Dpackage=com.nextwork.app \
  -DarchetypeArtifactId=maven-archetype-webapp \
  -DarchetypeVersion=1.4 \
  -DinteractiveMode=false

Running the command above generates a template for your application. In the terminal, it should show a "Build Success" message. This means the setup worked.

Step 4: Open a Remote Window

Now that you’ve installed the necessary packages and set up your app template, you need to open your IDE or code editor. This will let you access the folders on your remote server.

In your terminal, click the double arrow icon at the bottom left.

When you click on it, it opens a modal window for you.

A window will appear. Click "Connect to Host," which will open another window.

Then choose "Add New SSH Host" to open the SSH connection terminal.

Input your SSH command to configure the host.

After pressing "Enter," a configuration file will open. In this file, ensure that the .pem file and the IP4v DNS addresses from your EC2 instance are correct.

Here’s a GIF view of the image above:

Here’s the configuration file:

Go back to your editor and click on that double arrow again. This will automatically open a new window.

If your editor displays the IPv4 DNS address, your VS Code is successfully connected to the EC2 instance.

Now that you’re connected and a new window has opened, let’s access the folder stored in the cloud.

Step 5: Access Your Project Folder

In step 3, remember when you installed Maven? It created a template for your web app. Now, you’ll access the folder where you created this.

Go to the Explorer panel in the window.
Click the “Open Folder” button.

Clicking on this button opens a modal box for you to select your folder, which was created by the Maven template:

To access the template file, click the “src” folder. This takes you to the index.jsp file.

With this template created, you can decide to tweak it and send it to your Git repository for storage.

Conclusion

Great job! You’ve set up an AWS EC2 instance, linked it to your code editor, and installed the tools needed for your web app. In this tutorial, we used Java, but you can also choose other languages like Node.js or Python.

If you found this article helpful, please share it with others who may find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

Thank you for reading.

What is Backend as a Service (BaaS)? A Beginner's Guide

Ijeoma Igboagu — Mon, 17 Feb 2025 10:21:26 +0000

Building an authentication system can be complex, often requiring a server to store user data. Sometimes, you need a faster, easier solution.

For those new to development or without technical expertise, managing servers, databases, and user logins can be overwhelming. This is where Backend as a Service (BaaS) helps.

BaaS platforms provide ready-made backend solutions, making app development simpler. Whether you're a developer or someone with no coding experience, BaaS allows you to focus on your app’s features instead of handling backend complexities.

This article will explore BaaS, its features, pricing, and popular BaaS tools.

What is Backend as a Service (BaaS)?
Key Features of Baas
Why use Backend as a Service (BaaS)?
When to Use Backend as a Service (BaaS)
What are the Popular Backend as a Service (BaaS) Tools?
How to Get Started with BaaS (Quick Example)
Conclusion

What is Backend as a Service (BaaS)?

BaaS is a cloud platform that provides pre-built backend infrastructure and services. It eliminates the need for developers to manage servers, databases, and other backend tasks.

Source: https://www.cloudflare.com

Key Features of BaaS

Here are some features of BaaS:

BaaS makes it easy to create and manage user accounts and logins without much coding.
It lets you store and manage data, eliminating the need to set up a database from scratch.
BaaS comes with tools (APIs and SDKs) that help connect your application to the backend easily.
Many BaaS platforms let you see updates in real time, so your application can show live data to users.
BaaS offers space in the cloud to store files and images, making it easy to handle user uploads.
You don’t need to worry about managing servers—BaaS takes care of that for you, so you can focus on building your application.
Some BaaS platforms allow you to send notifications to users about updates or messages.
BaaS often provides tools to track user interactions, helping you understand what works and what doesn’t.
It also makes it easy to integrate with other services like payment systems and social media with minimal effort.
As your app grows, BaaS scales with it, handling more users and data seamlessly.

Why use Backend as a Service (BaaS)?

There are several key reasons why BaaS is an excellent choice for developers:

Pre-built features reduce development time, allowing you to focus on design and functionality instead of backend issues.
With BaaS, you don’t have to worry about servers, scaling, or security updates—the provider takes care of it all.
Most BaaS platforms offer essential features like user authentication, data storage, and real-time updates, helping you build your app without starting from scratch.
As your application gets more users, BaaS can handle it! These services adjust to support more users and data, so you can focus on growing your app.
BaaS handles the infrastructure so you don’t need to spend time or money on the backend. This allows you to focus on design and creating user experiences that add value to your users.

When to Use Backend as a Service (BaaS)

BaaS is perfect for building an app in a short amount of time without managing the backend. Here are the scenarios when BaaS makes sense:

BaaS handles your app’s backend, letting you focus on its features. For example, when building a to-do list app, BaaS makes it easy to manage user logins and task data without setting up servers from scratch.
For small teams or solo devs, BaaS handles the backend. You do not need extra resources.
If you're launching a startup, Baas lets you release a Minimum Viable Product (MVP) without delay. It helps you speed up development and cut costs.
If your app needs features like user authentication, data storage, or push notifications, BaaS provides them out of the box. For example, when building a social media app, BaaS simplifies user logins and file uploads, saving you from starting from scratch.
BaaS automatically scales to support more users, allowing you to focus on improving your app. For example, a small multiplayer game can start with a few players, and as it grows, BaaS will seamlessly handle thousands without extra backend effort.

What are the Popular Backend as a Service (BaaS) Tools?

If you're looking to explore BaaS, here are popular platforms you can use:

Clerk

Clerk software focuses on user management. It offers tools for authentication, user profiles, and permissions management. It’s great for developers who need simple user management in their apps.

Features of clerk

Clerk provides:

Multi-factor authentication (MFA)
Passwordless login (magic links, OTPs)
Social & OAuth login (Google, GitHub, and so on)
Enterprise SSO (SAML, OAuth)
Biometric login (Face ID, Touch ID)

It also handles:

User profiles & custom attributes
Roles & permissions
Teams & organizations
Session management

For security, it offers:

Token-based authentication (JWT)
Rate limiting
Audit logs
GDPR & SOC 2 compliance

For developers, it comes with:

Prebuilt UI components
SDKs for React, Next.js, Vue, and so on
Custom email & SMS templates

To learn more, click here: Clerk

Pricing

Clerk offers a Free Plan that includes up to 10,000 Monthly Active Users (MAUs) at no cost. For more advanced features, the Pro Plan is available at $25 per month, which also includes the first 10,000 MAUs.

For detailed and up-to-date information on Clerk's pricing plans, please visit their official pricing page:

Firebase

Firebase is a Google-backed BaaS platform. It is known for its real-time databases, authentication, and cloud storage. It also has easy-to-use tools for web and mobile apps.

Features of Firebase

Firebase provides:

Backend Services

Firestore & Realtime Database
Cloud Storage
Serverless Functions
Web Hosting

Authentication

Email & password login
Social logins (Google, Facebook, and so on)
Phone authentication
Anonymous sign-in

Analytics & Monitoring

Google Analytics
Crash tracking (Crashlytics)
Performance monitoring
A/B testing

Engagement Tools

Push notifications
Remote app updates
In-app messaging

Machine Learning

Text recognition
Image labelling

To learn more, click here: Firebase

Pricing plan

Firebase offers a Spark Plan (free tier) and a Blaze Plan (pay-as-you-go). The Spark Plan provides limited free usage, while the Blaze Plan charges based on your actual usage. For detailed and up-to-date information on Firebase's pricing plans, please visit their official pricing page.

Convex

Convex is a serverless BaaS platform. It provides real-time data sync and scalable backend services. The design simplifies serverless computing for developers.

Convex Features

Database – Real-time data storage
Serverless Functions – Run backend logic without managing servers
Authentication – Built-in user auth & access control
Caching – Faster data retrieval
Webhooks & Crons – Automate tasks & trigger events

To learn more, click here: Convex

Pricing

Free Plan – Limited resources for small projects
Pro Plan – Pay-as-you-go based on usage

Check out full details for convex pricing

8base

A low-code platform that allows developers to build serverless apps with minimal setup. It provides database management, authentication, and API development tools.

8base Features

Backend Builder – Manage your database easily.
Serverless Functions – Run custom backend logic.
GraphQL API – Auto-generated API for your data.
Authentication – Built-in user login & access control.
File Management – Store and manage files.

To learn more, click here: 8base

Pricing

Free Plan – $0/month (1 developer, basic features).
Developer Plan – $25/month per developer.
Professional Plan – $150/month (5 developers).
Custom Plan – Contact 8base for enterprise solutions.

Check out full pricing details here: 8base Pricing

Backendless

Backendless is a no-code platform that makes app development easy. It provides APIs, data storage, user management, and real-time updates in one place.

Features

UI Builder: Design your app's front end visually without coding.
Real-Time Database: Store and sync data in real-time across clients.
User Authentication: Manage user sign-ups, logins, and roles.
Cloud Code: Implement custom server-side logic without managing servers.
Push Notifications: Send real-time alerts to users on various devices.

To learn more, click here: Backendless

Pricing

Backendless offers several plans to suit different needs:

Free Plan: Ideal for small projects or learning purposes.
Scale Fixed Plan: Provides predictable monthly billing with set resource limits.
Scale Variable Plan: Offers flexibility with usage-based billing, scaling as your app grows.
Backendless Pro: A self-hosted solution for enterprises requiring unlimited scalability and control.

For more details on Backendless's pricing plans, please visit their official pricing plan page.

Appwrite

Appwrite is an open-source BaaS that provides databases, authentication, file storage, real-time updates, serverless functions, and API management. It supports multiple platforms and offers built-in security and scalability for modern apps.

Features

Authentication: Secure user login with over 30 methods, including email/password, OAuth, and magic URLs.
Database: Scalable storage with advanced permissions, custom data validation, and support for relationships.
Functions: Deploy serverless functions in over 13 languages, with automatic GitHub deployment and custom domain support.
Storage: Manage and serve files with built-in security and privacy features.
Real-Time: Subscribe to database events for instant updates.

To learn more, click here: Appwrite

Pricing

Free – $0/month (5GB bandwidth, 2GB storage, 750K function runs).
Pro – Starts at $15/month (more storage, bandwidth, & features).
Scale – Starts at $599/month (for large-scale projects).

For more details on the pricing plan check their official pricing page.

Nhost

Nhost is a full backend platform with a GraphQL API, database, authentication, and storage. It’s easy to set up and great for modern app development.

Nhost Features

Authentication – Secure login with email, OAuth, and so on.
Database – Scalable storage with permissions.
Serverless Functions – Run backend code without servers.
Storage – Secure file hosting.
Real-Time – Instant updates on data changes.

To learn more, click here: Nhost.

Pricing

Free – $0/month (basic features for small projects).
Pro – $25/month (more resources & support).
Dedicated Compute – $50/month per vCPU/2GB RAM (for scaling apps).

Check out full details here: Nhost Pricing

Back4apps

Back4App is an open-source BaaS that simplifies backend development. It provides a complete infrastructure for building, hosting, and managing scalable apps. With built-in server-side features, developers can focus on coding without managing servers or databases.

Back4App Features

Database – Manage data with APIs & a visual editor
Authentication – Secure user login & roles
Real-Time – Instant data updates
Push Notifications – Send alerts to users.
Cloud Functions – Run custom backend code.

To learn more, click here: Back4apps.

Pricing

Free – 25K requests, 250MB storage, 1GB transfer/month.
MVP Plan – For launching small apps.
Dedicated Plan – For production apps with more resources.

The MVP Plan in Back4App refers to a Minimum Viable Product (MVP) Plan. It is designed for startups and developers who are launching a small app with essential backend services. This plan provides enough resources to test and validate an idea before scaling up.

While Dedicated Plan in Back4App provides a private server with dedicated resources for apps that need better performance, security, and scalability. It is ideal for production apps with high traffic or specific infrastructure requirements.

Check out full details here: Back4App Pricing.

AWS Amplify

AWS Amplify is a development platform from Amazon Web Services (AWS). It simplifies building and deploying web and mobile apps. It offers tools and services for developers. They can integrate scalable backends, manage frontends, and add features like authentication, storage, and APIs.

AWS Amplify Features

Authentication – Secure login with email, social sign-in, and multi-factor authentication
Database & API – Build real-time APIs with AWS databases
Storage – Manage files and media with Amazon S3
Hosting – Deploy full-stack apps with continuous deployment

To learn more, click here: Aws Amplify

Pricing

Free Tier (First 12 months)
- 1,000 build minutes/month
- 5GB storage
- 15GB bandwidth
- 500K API requests
Pay-As-You-Go (After Free Tier)
- Build & Deploy – $0.01 per build minute
- Storage – $0.023 per GB/month
- Bandwidth – $0.15 per GB served
- API Requests – $0.30 per 1M requests

Full details here: AWS Amplify Pricing

Supabase

Supabase is an open-source alternative to Firebase. It uses PostgreSQL for its database. It has built-in features like authentication, APIs, and real-time subscriptions.

Supabase Features

Database – PostgreSQL with full SQL support.
Authentication – Secure login with email, password, and social logins.
Storage – Store and serve files easily.
Real-Time – Get instant updates when data changes.
Edge Functions – Run serverless backend logic.

To learn more, click here: Supabase.

Pricing

Free – Great for small projects i.e. projects for learning, and experimentation.
Pro – Starts at $25/month (includes $10 compute credits).
Team – Starts at $599/month (for advanced features & support).

Full details here: Supabase Pricing

How to Get Started with BaaS (Quick Example)

Let’s go through a quick example to get started. In this tutorial, I’ll use Firebase as an example.

Go to the Firebase website and sign up using your Google account.
After signing in, create a new Firebase project by following the on-screen instructions.
Go to "Authentication" and enable a sign-in method, like email/password or Google login
In "Firestore Database," create a new database for your app's data.
Install Firebase SDK in your project and integrate authentication, databases, and other Firebase services into your app.

For more detailed instructions on setting up Firebase, check out this article: How to Authenticate Your React App Using Firebase where I explain each step in depth.

Conclusion

Backend as a Service (BaaS) is ideal for developers. It provides an efficient and cost-effective way to handle backend development tasks. BaaS can speed up your development. It lets you avoid server management. You can then focus on building better apps.

If you're new to backend development, check out the BaaS tools in this article. They can simplify your workflow. Try out BaaS today and take your development to the next level!

Have you tried using BaaS for your applications? Share your experiences!

If you found this article helpful, share it with others who may find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

Thank you for reading.

How to Build an Application with AWS Lambda

Ijeoma Igboagu — Tue, 28 Jan 2025 15:19:50 +0000

AWS Lambda is a service from Amazon Web Services (AWS) that lets you run your code in response to events without managing servers. It’s a simple and scalable way to build applications.

In this tutorial, I’ll show you how to use AWS Lambda with three other services:

Amazon S3 for storing files, images, and videos
Amazon Simple Notification Service (SNS) for sending notifications
Amazon EventBridge for scheduling messages

We’ll go through everything step by step.

By the end, with the integration of the other services, you will have built a Goal Manifestation Quote App that sends random inspirational messages to keep you motivated and focused on your goals.

Prerequisites

An AWS account: If you don’t have one, sign up here.
A GitHub repository: This is for storing your source code. If you don’t have a GitHub account, you can create one here.
An Integrated Development Environment (IDE) such as Visual Studio Code or Sublime Text.
A basic knowledge of web development and any programming language of your choice. I used Python for this tutorial.
Zenquote Random API

What You'll Learn

How to create an Amazon S3 bucket
How to use Amazon Simple Notification Service (SNS)
How to use Amazon Lambda
How to use Amazon EventBridge

Step 1: Set Up Your Development Environment
Step 2: Create an Amazon Simple Storage Service (S3)
Step 3: Create an Amazon Simple Notification Service (SNS)
Step 4: Create an IAM Policy
Step 5: Create an Amazon Lambda function
Step 6: Create an EventBridge
Step 7. Upload Your Code
Conclusion

Step 1: Set Up Your Development Environment

In this step, you'll get everything set up. Start by signing in to your AWS account, then install Python if you don't have it on your IDE.

Step 2: Create an Amazon Simple Storage Service (S3)

Before we begin creating an S3 bucket, let's first understand what Amazon S3 is:

Amazon S3 (Simple Storage Service) is a service from Amazon that allows you to store and access any amount or type of data, such as photos, videos, documents, and backups, whenever you need it.

Now that you know the basics of what Amazon S3 is, let's return to the tutorial.

Create an S3 Bucket

There are several ways to create an S3 bucket, but for this tutorial, we'll use the Ubuntu command line (CMD), your terminal, or Amazon CloudShell, depending on what you're most comfortable with.

Type boto3 s3 in the web search bar to view a list of related documentation.
Click on the first result.

Once the documentation is open, copy the first command you see.

Paste it on your CMD OR terminal of your choice – but before then remember to "cd" into the right directory.

In the documentation, scroll down and click on "create_bucket.

Once it's open, scroll down to "Request Syntax." Copy the bucket name and the bucket configuration.
Other variables listed in the request syntax are optional.

Once this is done, make sure you save.

Go back and call the script:

#python3 your file name

Running the script automatically creates an S3 bucket in your Amazon S3.

Now you can go to the console to check if it has been created:

Upload Files

With the bucket created, we can now upload files through the console. I believe there's also a programmatic way to upload files and test, but I haven't explored all the methods in the documentation yet.

Click on the bucket name to be redirected to the object page. This is where you will upload your files for storage.

Click on the Upload button to upload a file. Remember, we're creating a Goal Manifestation Quote Application.

Now that we've set up a storage bucket:

Open a tool like Google Drive, MS Word, WPS, or any other document editor.
Write down the goals you want to achieve.
Save the file in either PDF or DOCX format.
Take the document and upload it to your Amazon S3.o

To verify if it's the correct file:

Navigate to the Permissions tab.
Scroll down to Block public access.
Click on Edit and uncheck the box.

As shown above, it is currently set to "on." Uncheck it to turn it "off."

On the same bucket settings page, modify the policy.
Scroll down, and you'll see that a bucket policy has been auto-generated.
Go ahead and copy the policy.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Go back to the bucket policy editor and paste the policy.

Once you've completed these steps, your object will have public access.

Return to the Objects tab and click on the Object URL provided below:

With this URL, your upload is now visible.

Step 3: Create an Amazon Simple Notification Service (SNS)

SNS is a fully managed messaging service provided by AWS. It enables communication between applications or directly with users by sending notifications.

To create an SNS, follow these steps:

1. Log in to the AWS management console

Then go to Amazon SNS. Navigate to the SNS Dashboard and select Topics from the left-hand menu.

To create a topic:

Click Create topic.
Choose a Topic type: Standard (default) or FIFO (for ordered messages).
Enter a Name for your topic. (for example, MyFirstSNSTopic).
Configure optional settings like encryption, delivery retry policies, or tags.
Click Create topic.

2. Add Subscriptions:

Once the topic is created, click on it to open the details page. Select the Subscriptions tab.

Click Create Subscription and choose:

Protocol can be Email, SMS, HTTP/S, Lambda, or SQS.
Endpoints such as email address, phone number, or URL.

Click Create Subscription.

3. Confirm the Subscription:

If you selected email or SMS, a confirmation link or code will be sent to the provided endpoint. Follow the instructions to confirm the subscription.

Now that we’ve done this, let's create an Amazon Lambda function that will trigger the SNS so that the message will be sent to your mail.

Step 4: Create an IAM Policy

This policy is created to authorize Amazon Lambda to trigger the event and to ensure that CloudWatch is automatically triggered to monitor the application's events.

To create a policy, follow these steps:

1. Log in to the AWS Management console.

In the left-hand menu, select Policies. Then:

Click Create policy.
Choose the Visual tab, then select the SNS service.
Next, click the Choose tab to create a custom policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "sns:Publish",
            "Resource": "arn:aws:sns:REGION:ACCOUNT_ID:goal_topic"
        }
    ]
}

Then, replace the following placeholders with your info:

region: Your AWS region (for example, us-east-1).
account-id: Your AWS account ID.
topic-name: Your SNS topic name.

2. View and create the policy:

You can do this by following these steps:

Click on the Review button.
Give your policy a Name (for example, LambdaSNSPolicy), and optionally, a Description.
Click Create policy.

3. Attach policy to the Lambda Execution Role

Now, you need to attach the policy to your Lambda Execution Role. To do that, follow these steps:

Go to the Roles section in the IAM Console.
Search for and select the execution role.

Next, search for the policy you just created and select it.
Click Attach policy.

Both policies will be automatically attached.

Step 5: Create an Amazon Lambda function

Amazon Lambda is a service from AWS that lets you run code without managing servers. You upload your code, and Lambda automatically runs and scales it when needed.

Follow these steps to create an Amazon Lambda function:

1. Log in to AWS Management Console:

Navigate to AWS Lambda.

2. Create a Function:

Click on the Create function and choose the option Author from scratch.

Fill in the details:

Function name: Enter a unique name (for example, SNSLambdaFunction).
Runtime: Select the runtime (for example, Python, Node.js, Java, and so on).

Role: Choose or create a role. If you already have a role, select Use an existing role. Otherwise, select Create a new role with basic Lambda permissions.

Click the Create function button.

3. Paste in the code:

On the Lambda function’s page, go to the Configuration tab:

Remember, we are trying to fetch a quote. I'll add the ARN of the topic we created here and include my API keys. But for this tutorial, I will use the API directly to fetch the data.

4. Write the Lambda Code:

Go to the Code tab in your Lambda function. Then write or paste the code from your IDE to process the incoming SNS messages.

Example:

Here’s the code:

import os
import json
import urllib.request
import boto3

def fetch_random_quote():
    """
    Fetches a random quote from the ZenQuotes API.
    """
    api_url = "https://zenquotes.io/api/random"
    try:
        with urllib.request.urlopen(api_url) as response:
            data = json.loads(response.read().decode())
            if data and isinstance(data, list):
                # Format the quote and author
                quote = data[0].get("q", "No quote available")
                author = data[0].get("a", "Unknown author")
                return f'"{quote}" - {author}'
            else:
                return "No quote available."
    except Exception as e:
        print(f"Error fetching random quote: {e}")
        return "Failed to fetch quote."

def lambda_handler(event, context):
    """
    AWS Lambda handler function to fetch a random quote and publish it to an SNS topic.
    """
    # Get the SNS topic ARN from environment variables
    sns_topic_arn = os.getenv("SNS_TOPIC_ARN")
    sns_client = boto3.client("sns")

    # Fetch a random quote
    quote = fetch_random_quote()
    print(f"Fetched Quote: {quote}")

    # Publish the quote to SNS
    try:
        sns_client.publish(
            TopicArn=sns_topic_arn,
            Message=quote,
            Subject="Daily Random Quote to help you stay motivated and inspired to achieve your goals",
        )
        print("Quote published to SNS successfully.")
    except Exception as e:
        print(f"Error publishing to SNS: {e}")
        return {"statusCode": 500, "body": "Error publishing to SNS"}

    return {"statusCode": 200, "body": "Quote sent to SNS"}

5. Save:

Click on the deploy button to save.

6. Test Your Lambda Function:

Go to the Test tab and create a new test event.

Then save and run the test. If it’s successful, a message will be sent:

This means the message has been created for you

Finally, check your email or SMS, depending on the endpoint you used for this tutorial. In my case, I used email.

Step 6: Create an EventBridge

Amazon EventBridge is a service that helps you connect applications and AWS services such as the Amazon SNS and Amazon Lambda.

To create an Amazon EventBridge rule, follow these steps:

1. Navigate to EventBridge:

In the search bar, type EventBridge and select it from the services list.

2. Create a Rule:

In the EventBridge console, click Rules on the left panel. Then click the Create rule button.

3. Set Up the Rule Details:

Name: Enter a unique name for your rule.
Description (optional): Add a description to explain what this rule does.

4. Choose the Event Bus:

Select Default event bus (or another event bus if you've created one).

5. Define the Event Pattern or Schedule:

For Event Pattern:

Choose an AWS Service as the event source.
Select the specific event type (for example, an S3 file upload or an EC2 instance state change).

For Schedule:

Choose the Schedule option to run the rule on a fixed interval (for example, every 5 minutes).

Click on continue. This takes you to the specific details page where:

Scroll down and click on the cron scheduler. The cron scheduler specifies what time the message will be sent.
Select "Off" for the flexible time window option.
Review the rule details to confirm everything is correct.
Click the "Next" button to proceed to the Target page.

The picture above shows when the time the messages will be sent.
- On the Target page, select AWS Lambda to invoke your function.

Scroll down to invoke and choose the function you created.

Click the "Next" button to proceed. This will take you to the settings page. Under the permissions section, select "Use existing rule."

Lastly, go to the review and create a schedule:

The next page shows you all the details:

Using the EventBrige creates a scheduler for the users.

Step 7: Upload Your Code

Finally, upload your code to GitHub and include proper documentation to help explain how the code works.

Check this documentation out if you don’t know how: Uploading a project to GitHub.

Conclusion

If you’ve followed all these steps, you will have created a Goal Manifestation Quote App using AWS Lambda, Amazon S3, Amazon SNS, and Amazon EventBridge. This app fetches motivational quotes and sends them to subscribers on a schedule.

You can find the repository link here.

Feel free to share your progress or ask questions if you have any issues.

If you found this article helpful, share it with others.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub

Thank you for reading 💖.

Disclaimer:
The resources shown in this article, including the S3 bucket and its ARN, have been deleted and no longer exist. The details visible in the screenshots are used solely for demonstration purposes.

What is Cloud Computing? A Guide for Beginners

Ijeoma Igboagu — Tue, 12 Nov 2024 01:35:23 +0000

When I was a kid, I loved looking at clouds and imagining funny shapes. Sometimes, I even wondered if someone was up there! Now that I’m an adult, I still ask, “What’s in the cloud?”

When we talk about "the cloud" in technology, we’re not referring to those fluffy clouds in the sky. Instead, the cloud represents a network of remote servers connected by wires and cables.

In the past, businesses used large servers in their offices to store data, which took up a lot of space. While that still works, imagine having powerful software, lots of storage, and computing resources, without needing a room full of machines. That sounds great! Having an organized space can make you feel calm and focused, and that’s what cloud computing offers.

Today, we can store our pictures, videos, emails, and data in the cloud instead of using boxes and drives like we used to. Major cloud providers like AWS, Microsoft Azure, and Google Cloud allow us to store and access our data from anywhere.

In this article, I’ll explain cloud computing, how it works, and why it’s important for businesses and everyday people.

What is Cloud Computing and How Does It Work?
Who Are the Leading Cloud Providers?
Types and Models of Cloud Services
Real-World Uses of Cloud Services
How Do Developers Use the Cloud?
Why is Cloud Computing Important?
What Do You Need to Know to Use the Cloud?
Conclusion

What is Cloud Computing and How Does It Work?

Cloud computing is a process where technology services like storage, databases, computing power, and software are delivered over the Internet. In simple terms, it means using the internet to access storage, apps, or tools on powerful computers that aren’t in your organization. Instead of needing large storage or high-powered equipment yourself, you can connect online to store files, watch movies, or work on projects.

In cloud computing, the three basic functions are:

Storage: This lets you save and keep your data online, like using Google Drive or Dropbox for your files.
Computing: This provides the power to process tasks, similar to how a computer's CPU works. It helps run applications smoothly.
Database: This stores organized data. For example, services like Amazon RDS or Google Cloud SQL manage information for apps.

Who Are the Leading Cloud Providers?

Cloud providers offer the infrastructure and services needed to deploy and scale applications.

Big companies like Amazon Web Service (AWS), Google (Google Cloud), and Microsoft (Azure) are leading providers in the cloud industry.

Below is a summary of each provider:

Amazon Web Services (AWS): AWS is a leading cloud provider, offering a wide range of services including cloud storage (S3), databases (RDS), and machine learning tools. It’s known for its scalability, flexibility, and reliability, making it a popular choice for developers and businesses.
Microsoft (Azure): Microsoft has been around for 45 years, and over time, they've adapted their software like Microsoft Office and Windows, seamlessly integrating these services with the cloud. They provide services like Azure Blob Storage and Azure SQL Database. As a result, Microsoft is considered one of the top cloud providers.
Google (Google Cloud): Google Cloud offers powerful services like Google BigQuery for data analytics and Google Anthos for managing hybrid applications. Google Cloud is known for its speed and reliability, and provides tools for storage, computing, and database management, making it a solid choice for businesses.

All these cloud providers rent out powerful computers to individuals and businesses, allowing you to store files, use apps, or run a business without needing your own servers and equipment.

Types and Models of Cloud Services

Due to the powerful features of cloud services, some companies prefer to control certain parts themselves. This brings us to three types of service control in cloud computing:

Infrastructure as a Service (IaaS):
Think of IaaS as renting a computer online. You can practice coding or run a website without buying any hardware. For example, you can rent a powerful server from AWS. With IaaS, you have full control over everything. You can choose the operating system and install the software you need.
Platform as a Service (PaaS):
PaaS is like having a complete workshop online. It gives you the tools to build and launch projects, like a mobile app. You can create your applications, but the provider handles the servers and storage. This way, you can focus on building your app without worrying about the technical details.
Software as a Service (SaaS):
SaaS lets you use software directly on the internet. For example, you can write documents using Google Docs, or practice coding with Replit. With SaaS, you have limited control. You can change some settings, but the provider handles everything else, like maintenance and updates.

These options help businesses decide how much control they want over cloud services.

Real-World Uses of Cloud Services

Here are some examples of using cloud services in real life:

When you watch Netflix, you’re using the cloud. Netflix keeps movies on its cloud servers and streams them to you online, so there’s no need to download anything.
Services like Google Drive and Dropbox let you store files in the cloud instead of on your computer. This way, you can access your files from any device with internet access.
With Google Docs, you can create and edit documents in the cloud. You don’t need to install anything on your computer. You can even collaborate with others in real-time.

How Do Developers Use the Cloud?

Cloud services play a key role in development:

Cloud services like Amazon Web Service (AWS) and Google Cloud provide development tools, virtual environments, and analytics services which developers can use to test their application.
Getting applications online is made easy with services like AWS Amplify, which allow developers to host their apps without writing the backend code.
Cloud storage allows developers to easily add extra storage as needed while keeping data safe and accessible from any location.
Services like Google TensorFlow and AWS SageMaker offer resources for quickly developing AI and machine learning projects.

Why is Cloud Computing Important?

Cloud computing offers several key benefits:

For businesses that want to save money, cloud computing helps cut out expensive hardware and maintenance. You only pay for what you use, like creating virtual servers or storing files.
Storing data or files in the cloud can help you easily increase or decrease your resources based on your needs. This flexibility lets businesses adapt quickly to changes—for example, an increase in Black Friday sales or Boxing Day.
In the event of a disaster, such as a fire, storing files in the cloud serves as a reliable backup, ensuring that important information is not lost. This is especially beneficial for hospitals and government agencies.
Using cloud service enhances collaboration among workers and ease of getting a file since it is remote.
Most cloud providers offer fast services, which leads to quicker load times.
Cloud services are secure.

What Do You Need to Know to Use the Cloud?

To start using the cloud, you should learn basics like virtual machines, storing data, networking, and security.
Understand how to back up your data and recover it in case of any issues.
Learn how pricing works in the cloud so you can monitor and manage your costs effectively.
Most cloud platforms offer tutorials, tools, and ready-made services to make them easier to understand and speed up development.

It can be overwhelming at first, but just start with the basic services, and everything else will fall into place.

Conclusion

In conclusion, cloud computing is changing the way businesses work and how we store and manage data. It offers flexibility, minimizes cost, and leads to easy collaboration, while improving backup and recovery.

As cloud technology continues to grow, it will become even more important for both individuals and businesses. Whether you're storing personal files or managing a big company, the cloud makes it simpler, safer, and more affordable.

If you found this article helpful, share it with others who may find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

Thank you for reading.

How to Authenticate Your React App Using Firebase

Ijeoma Igboagu — Wed, 02 Oct 2024 01:34:26 +0000

Authentication is a fundamental aspect of modern web and mobile applications. It ensures that users can securely access an app while protecting their data.

Firebase, a platform developed by Google, offers a simple and efficient way to add authentication to your app.

In this article, I’ll walk you through the steps to authenticate your app using Firebase. Whether you're working on a web or mobile application, Firebase provides a straightforward way to integrate various authentication methods.

By the end of this article, you'll have a fully functional authentication system that allows users to sign up, sign in, and manage their accounts securely.

Table of Contents
Prerequisites
Why Use Firebase for Authentication?
Step 1: How to Set Up a Firebase Project
Step 2: How to Install Firebase in Your Project
Step 3: How to Initialize Firebase in Your App
Step 4: How to Set Up Authentication Methods
Authentication Method Using Google
Step 5: How to Upload to GitHub
Conclusion

Prerequisites

Before we begin, you need to have the following:

A Google Account: Firebase is a Google product, and you need a Google account to access the Firebase Console and use Firebase services. If you don’t have a Google account, you can create one here.

Why Use Firebase for Authentication?

Firebase Authentication provides backend services and easy-to-use SDKs to authenticate users to your app. It supports various authentication methods, including:

Email and password authentication
Google, Facebook, Twitter, and GitHub Authentication
Phone Number Authentication
Anonymous Authentication

These features make Firebase an excellent choice for developers who want to implement secure and reliable authentication without dealing with the complexities of building a custom authentication system.

Let’s get started with the setup!

Step 1: How to Set Up a Firebase Project

Before using Firebase Authentication, you need to set up a Firebase project.

i. Create a Firebase Project

Go to the Firebase Console.

Click "Add Project" and follow the on-screen instructions to create a new project.

Once your project is created, you’ll be directed to the Firebase project dashboard.

ii. Add Your App to the Project

In the Firebase console, click on the "Web" icon () to add a web app to your Firebase project.
Register your app with a nickname, and click "Register app."
You will be provided with a Firebase SDK snippet (Software Development Kit), which you'll need to add to your app.

Step 2: How to Install Firebase in Your Project

To start with Firebase Authentication, you'll first need to install Firebase in your project. Here's how you can do it:

In your code editor, open the terminal for your project.
Run the following command to install Firebase:

npm install firebase

This command will add Firebase to your project, allowing you to use its authentication and other features.

Step 3: How to Initialize Firebase in Your App

After installing Firebase, the next step is to initialize it in your project using the configuration snippet provided in the Firebase console, commonly referred to as the Firebase SDK snippet.

To set this up:

Create a folder named config in your project directory.
Inside the folder, create a file called firebase.js.
Paste the SDK snippet you obtained from the Firebase console into the firebase.js file.

Here’s what your project setup should look like:

This code initializes Firebase in your app, enabling you to utilize Firebase authentication and other services, such as Firebase storage, for managing your data.

Note: Ensure you generate your unique application key for your application to function correctly.

Step 4: How to Set Up Authentication Methods

Firebase supports multiple authentication methods, like using Google, Facebook, GitHub, and so on.

But let’s set up email and password authentication as an example:

Go to "Authentication" in the left-hand menu in the Firebase console.
Click on the "Sign-in method" tab.
Enable "Email/Password" under the "Sign-in providers" section.

Now that you've enabled email/password authentication, you can create a sign-up and a sign-in function in your app.

Let’s create a working example of a sign-up function:
- In your project, create a file named sign-up.jsx.
- Import the function needed to create a user from Firebase. The function you'll use to create a user is createUserWithEmailAndPassword.
- Before creating a user, make sure to import the auth instance that is initialized in firebase.js into the sign-up.jsx file.

    import { auth } from '../../../config/firebase';
    import { createUserWithEmailAndPassword } from 'firebase/auth';

    const SignUp = () => {
      // To create the user with email and password
      const handleUser = async (e) => {
        e.preventDefault();
        try {
          await createUserWithEmailAndPassword(auth, email, password);
          alert('User created successfully');
        } catch (err) {
          console.error(err);
        }
      };

      // ... (rest of your SignUp component)
    };

In the return statement, I will use a form, so we need to import the useState() Hook to manage and track changes in the form's input fields.

    
      <h2>Register your Accounth2>
      <form onSubmit={handleCreateUser}>
        <div>
          <label>Namelabel>
          <input
            type="text"
            id="name"
            name="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        div>

        <div>
          <label htmlFor="email">Emaillabel>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        div>

        <div>
          <label htmlFor="password">Passwordlabel>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        div>

        <div>
          <label htmlFor="confirm_password" className={styles.label}>
            Confirm Password
          label>
          <input
            type="password"
            id="confirm_password"
            name="confirm_password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        div>

        <div>
          <div>
            <input type="checkbox" id="terms" name="terms" className="mr-2" />
            <label htmlFor="terms">
              I agree to the <a href="#">Terms and Conditionsa>
            label>
          div>
        div>

        <button type="submit">Registerbutton>
      form>

Putting all code together (Sign-up.jsx):


    import { useState } from 'react';
    import { auth } from '../../config/firebase';
    import { createUserWithEmailAndPassword } from 'firebase/auth';

    const SignUp = () => {
      const [name, setName] = useState('');
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');

      const handleCreateUser = async (e) => {
        e.preventDefault();
        try {
          await createUserWithEmailAndPassword(auth, email, password);
          alert('User created successfully');
        } catch (error) {
          console.log(error);
        }
      };

      return (
        <div>
          <h2>Register your Accounth2>
          <form onSubmit={handleCreateUser}>
            <div>
              <label>Namelabel>
              <input
                type='text'
                id='name'
                name='name'
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            div>

            <div>
              <label htmlFor='email'>Emaillabel>
              <input
                type='email'
                id='email'
                name='email'
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            div>

            <div>
              <label htmlFor='password'>Passwordlabel>
              <input
                type='password'
                id='password'
                name='password'
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            div>

            <div>
              <label htmlFor='confirm_password'>
                Confirm Password
              label>
              <input
                type='password'
                id='confirm_password'
                name='confirm_password'
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
            div>

            <div>
              <div>
                <input
                  type='checkbox'
                  id='terms'
                  name='terms'
                  className='mr-2'
                />
                <label htmlFor='terms'>
                  I agree to the{' '}
                  <a href='#'>
                    Terms and Conditions
                  a>
                label>
              div>
            div>

            <button type='submit'>Registerbutton>
          form>
        div>
      );
    };

    export default SignUp;

Now that you've created the sign-up function, it's time to add a sign-in function so users can log into your app.

Here's how to create a simple sign-in function:

In your project, create a new file named sign-in.jsx.
Import the initialized auth instance from firebase.js into sign-in.jsx.
Use the signInWithEmailAndPassword function from Firebase to allow users to sign in.

Here’s the structure for the sign-in function:

import { useState } from 'react';
import { auth } from '../../config/firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

const SignIn = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignIn = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert('Signed in successfully');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h2>Sign Inh2>
      <form onSubmit={handleSignIn}>
        <div>
          <label htmlFor="email">Emaillabel>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        div>

        <div>
          <label htmlFor="password">Passwordlabel>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        div>

        <button type="submit">Sign Inbutton>
      form>
    div>
  );
};

export default SignIn;

The visual display of the result from the code above both sign-up and sign-in

Authentication Method Using Google

As mentioned earlier, you can collect users' emails directly through a form before they use your app and other ways to authenticate the users.

To use Google authentication:

In the Firebase console, navigate to "Authentication" in the left-hand menu.
Click on the "Sign-in method" tab.
Enable "Google" under the "Sign-in providers" section (for this tutorial, we'll stick with Google, though you can choose other providers).

Now that you've enabled Google authentication, you can create a Google sign-up and sign-in function for your app.

Let's go through how to set up a Google sign-up function:

First, create a file named Google.jsx in your project.
Import auth and GoogleAuthProvider from the firebase.js file

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';


const firebaseConfig = {
  apiKey: ....,
  authDomain: ....,
  projectId:.... ,
  storageBucket: .... ,
  messagingSenderId: .... ,
  appId: ....,
  measurementId: ....,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth= getAuth(app);
export const googleProvider = new GoogleAuthProvider(app);

Initialize the Google provider and export it for use in other parts of your application.

import { auth, googleProvider } from './firebase';  // Adjust the path to your Firebase config file
import { signInWithPopup } from 'firebase/auth';

Import the necessary Firebase function to authenticate a user. Use the signInWithPopup method to authenticate users with Google.

While there are other authentication methods available, signInWithPopup is preferable as it keeps users within the app, avoiding the need to open a new browser tab.

const signInWithGoogle = async () => {
  try {
    await signInWithPopup(auth, googleProvider);
    alert('Signed in successfully with Google');
  } catch (error) {
    console.error('Error signing in with Google', error);
  }
};

In your return statement, create a button to trigger the Google sign-in.

return (
  <div>
    <button onClick={signInWithGoogle}>Sign in with Googlebutton>
  div>
);

The visual display of the result from the code above:

Firebase allows you to sign users out of your application easily. Here's how you can implement a sign-out function:

First, import the signOut function from Firebase.
Once imported, you can call signOut to log the user out of the app.

Here’s a simple example:

import { auth } from './config/firebase'; // Adjust the path based on your file structure
import { signOut } from 'firebase/auth';

const handleSignOut = async () => {
  try {
    await signOut(auth);
    alert('User signed out successfully');
  } catch (error) {
    console.error('Error signing out:', error);
  }
};

With this function, users can easily log out of the app.

In the return statement, you'll typically have a button that triggers the handleSignOut function when clicked.

return (
  <div>
    <h2>Welcome to the app!h2>
    <button onClick={handleSignOut}>Sign Outbutton>
  div>

The visual display of the result from the code above

Make sure your Firebase project is configured to handle authentication correctly, including Google sign-in, to ensure a smooth sign-in and sign-out experience.

Step 5: How to Upload to GitHub

Before pushing your project to GitHub, make sure to store your Firebase API key in an environment variable to keep it secure. This will prevent sensitive information from being exposed in your shared code.

Creating a .env file

At the root of your application, create a .env file.

Add your Firebase API key to the firebase.js file.
Use import or process.env to access your Firebase API key. Since the app was created with Vite, I used import.

Finally, update your .gitignore file to include the .env file. This step also protects other sensitive files and directories, like node_modules.

# Logs
logs
node_modules
.env

Conclusion

In conclusion, this guide explains how to integrate Firebase Authentication into your app. Firebase simplifies adding authentication features such as email/password and Google login.

By setting up a Firebase project, installing, and initializing it in your app, you can efficiently build secure user sign-up and sign-in functionalities without the need to start from scratch or set up a server.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

The code I used for this tutorial article can be found on my GitHub.

Thank you for reading.

How to Get Your MongoDB URL to Connect to Your Node.js Application – A Step-by-Step Guide

Ijeoma Igboagu — Mon, 12 Aug 2024 21:21:39 +0000

In my previous article about building a Node.js application, I didn’t fully explain how to obtain the MongoDB URL, as I wanted to keep the article concise. However, I realized that this information is essential for saving data to MongoDB.

In this article, I will guide you through the process of getting your MongoDB URL so you can connect your application effectively. By the end of this tutorial, you’ll have a clear understanding of how to retrieve your MongoDB URL.

Let's get started! 🚀

Step 1: Search for MongoDB or Visit their Website

To begin, head to the MongoDB website.

This will redirect you to the MongoDB login page. If you don’t have an account yet, you can create one by selecting the Sign Up option instead. Since I already have an account, I will log in to access my MongoDB dashboard.

Step 3: Access the Dashboard

Once you log in, you'll have access to the dashboard. But first, you need to create a project folder.

Why Do You Need a Project Folder?

This is for organizational purposes, helping you keep track of which projects you are working on.

To create a project folder

Click on the Projects section at the top, indicated by a folder icon. This will reveal a dropdown menu.
From the dropdown, click on New Project. This will redirect you to a page where you can create your new project.

Click the Next button to proceed to the project creation page.

After creating your project, you will be redirected back to your dashboard, where you will see your newly created project folder. You can now start working on this specific project.

Step 4: Creating a Cluster

To obtain the MongoDB connection URL, it is essential to create a Cluster.

What is a cluster?

A cluster in MongoDB is a group of servers that work together to store and manage your data, providing high availability and scalability.

To create a cluster:

On your dashboard, click on the Clusters button as shown in the picture of Step 3 above.
Next, this will direct you to a page called "Deploy your cluster" where you get to create your cluster.

Step 5: Create a Username for Your Connection URL

After creating a cluster, you will be taken to a page where you need to create a username and password for the connection URL. The password can be autogenerated, or you can create your own.

Why Do I Have to Create a Username?

Creating a username is essential for managing access to your MongoDB cluster. A username, along with a password, ensures that only authorized users can access your database. This adds a layer of security, protecting your data from unauthorized access.

Benefits of creating a username:

Security: Ensures that your database is only accessible to those with the correct credentials.
Management: You can track who is accessing your database and manage permissions.
Accountability: Helps in auditing and monitoring activities within your database.

Step 6: Auto Generation of The MongoDB Connection URL

Once you click the Create User button, you will be redirected to a page where your connection URL is automatically generated. Copy this URL and paste it into your .env file to establish a connection to your database. Alternatively, you can paste it directly into your app.js or server.js file, as I explained in my previous article.

Feel free to let me know if you need assistance!

Conclusion

By following the steps outlined in this article, you should now understand how to obtain your MongoDB connection URL. Remember, creating a username and password for your database access is crucial for ensuring the security and management of your data.

If you encounter any challenges along the way, don't hesitate to refer back to this guide, ask questions or better still consult the official MongoDB documentation for further assistance.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

Thank you for reading💖.

How to Build an Application With Node.js

Ijeoma Igboagu — Mon, 05 Aug 2024 17:56:13 +0000

Node.js it’s a runtime environment that allows you to run JavaScript code on the server side for building server-side applications. It works well for creating fast and scalable applications.

In this article, I will use a simple event management app as an example to show you how to build an application using Node.js, Express.js, and MongoDB.

By the end, you’ll know how to set up a Node.js project, create a server with Express.js, show dynamic pages with embedded JavaScript, and connect to a MongoDB database to handle your data.

What You'll Learn

Setting up a Node.js project
Creating a server with Express.js
Rendering dynamic pages with ejs
Connecting to a MongoDB database
Creating models and schemas for your data
Handling HTTP requests and responses

Set Up Your Development Environment
Set Up the Server
Install and Set Up Express.js
Create a Dynamic Template
Save Your Data to MongoDB
Connect to the Database
Create the Model for the Document Structure
Create HTML Pages
Create Partials
Create an Environment Variable File
Further Steps
Conclusion

Let's get started 🚀

Prerequisites

Node.js installed on your system.
A good understanding of MongoDB.
A code editor that you prefer, such as Visual Studio Code or Sublime Text.

Step 1: Set Up Your Development Environment

Install Node.js and npm

First, you'll need to download and install Node.js from nodejs.org. Then you can verify the installation by running: node -v and npm -v.

Initialize a New Project

Create a new directory for your project. Then initialize the project with npm: npm init -y in your terminal.

mkdir event-app
cd event-app
npm init -y

Initializing the project

Running npm init -y creates the package.json file, as shown above. This file is crucial. It stores and tracks all third-party libraries (dependencies) needed for your application.

Step 2: Set Up the Server

To set up your server, create a file called server.js or app.js. These are common names. They are used for their descriptive nature. But, you can name the file whatever you prefer.

The server.js file will be used to create a server which will be used to manage, control, and route to the necessary page in our application.

Step 3: Install and Set Up Express.js

Express.js is a popular web application framework for Node.js and a third-party library that we use in our application.

Express simplifies the handling and definition of various routes for HTTP requests. It enables you to manage the application's routing and connect it to the server.

To use Express:

Install Express.js by running the following command in your terminal:

npm install express

Require Express in your server.js file.

const express = require('express')

Initialize Express so you can use it in your application.

const app = express()

Create a routing path to get the HTTP request.

//routing path
app.get('/', (req, res) => {
  res.send('Hello World!');
});

Lastly, we need to ensure that the connection to the server is set up correctly. When we start the server in the terminal, it will open in the browser.

To do this, use the listen() method.

// Start the server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

This method will listen() to requests from the server.

Here's the complete code process:

const express = require('express');


// Next initialize the application
const app = express();

// routing path
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// Start the server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Note: The routing path above was only for testing purposes to confirm that the server is working and connected. We will provide a different file for the event app we are creating.

With Express.js installed in your application, you can now create a server that will handle all your routing and connections.

To start the server, go to your terminal.

Use the keyword node, then type --watch, a flag to start and automatically restart the server whenever you make changes:

node --watch server.js

Or you can install [nodemon](https://www.npmjs.com/package/nodemon) for the same purpose. Nodemon detects changes in the directory and restarts your application.

npm install -g nodemon

Then run your server with:

nodemon server.js

Step 4: Create a Dynamic Template

We need a templating engine to render HTML code in the browser using Node.js. We'll use ejs (Embedded JavaScript) for this tutorial but there are others such as Pug (formerly known as Jade) and Express Handlebar, which also render HTML on the server.

ejs allows you to embed JavaScript in HTML to create dynamic web pages.

To install ejs, run:

npm install ejs

To set up ejs in server.js, require and set ejs as the templating engine:

Requiring ejs template in your application

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

With this setup, you can now enable dynamic rendering of HTML code in your Node.js application.

Step 5: Save Your Data to MongoDB

To save the data you create for your application, you will use MongoDB.

MongoDB is a "Not Only SQL" (NoSQL) database that's designed for storing document collections. Traditional SQL databases organize data into tables, but MongoDB is optimised for handling large volumes of data.

To read more about this, check out this article.

Step 6: Connect to the Database

Now we need to connect to the database which will be MongoDB for this tutorial.

Using MongoDB provides you with a Uniform Resource Locator (URL) to connect to your application. This URL connect you and acts as a communicator between the database and your application.

How to get the URL

To get the URL, follow these simple steps:

Sign Up/Log In: Go to the MongoDB website and sign up for an account or log in if you already have one.
Create a Cluster: Once logged in, create a new cluster. This will set up your database.
Connect to Your Cluster: After your cluster is created, click the "Connect" button.
Choose a Connection Method: Select "Connect your application".
Copy the Connection String: MongoDB will provide a connection string (URL) like this:

mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority

Replace the Placeholders: Replace , , and with your actual username, password, and database name.

Now that you have the URL, you can easily connect to your database.

To make this connection easier, we will use a tool called Mongoose.

What is Mongoose?

Mongoose is a JavaScript library that makes it easier to work with MongoDB in a Node.js environment. It provides a simple way to model your data. You can define schemas, do data validation, and build queries as well.

How to make a connection

MongoDB has already provided you with a URL for connection. Now you'll use Mongoose to send your documents to the database.

To use Mongoose in your project, follow these steps:

Install Mongoose using npm.

npm i mongoose

In your server.js file, you need to require Mongoose to use it as a connector to the database.

const mongoose = require('mongoose');

After you require Mongoose, you need to define the connection URl provided in your server.js file.

server.js:

const mongoose = require('mongoose');

// Replace , , and  with your actual credentials
const dbURL = 'mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority';

mongoose
  .connect(process.env.dbURL)
  .then((result) => {
    console.log('Connected to MongoDB');
    app.listen(3000, () => {
      console.log('Server started on port 3000');
    });
  })
  .catch((err) => {
    console.error('Could not connect to MongoDB:', err);
  });

This setup ensures that Mongoose acts as the connector. It connects your application to the MongoDB database.

Step 7: Create the Model for the Document Structure

Next, we need to create a model document called a Schema so that when you post data to your database it will be saved accordingly.

To create this model:

Create a folder named models to keep your application organized.
Inside the model's folder, create a file called event.js.

In theevent.js file, you will use Mongoose to define the schema for the event documents. You'll specify the structure and data types for the documents you will send to your database.

Here's the event.js file created inside the model folder:

const mongoose = require('mongoose');

// Schema
const EventSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
    },
    date: {
      type: Date,
      required: true,
    },
    organizer: {
      type: String,
      required: true,
    },
    price: {
      type: String,
      required: true,
    },
    time: {
      type: String,
      required: true,
    },
    location: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
);

const Event = mongoose.model('event', EventSchema);

module.exports = Event;

When this is done, export so you can use it in your server.js file by simply using the require keyword.

With the schema created, it can now be exported to the server.js file.

Your server.js will look like this:

const express = require('express');
const ejs = require('ejs');
const mongoose = require('mongoose');
const Event = require('../models/Events');// the event.js file

Step 8: Create HTML Pages

As we talked about earlier, we're using ejs in step 4 to render HTML code, allowing us to view the code in the browser.

Form Page

First, let's create a form page. With the form page created, you'll be able to make POST requests which will enable you to send data to your MongoDB database.

To create a basic form, ensure it includes:

An action attribute which specifies the route to send the data.
A method attribute which specifies the HTTP request method – in this case, the POST request.

A basic form:

"/submit-event" method="POST">
    <h2>Event Creation Formh2>
  <label for="title">Titlelabel>
  

  Date
  

  Organizer
  

  Price
  

  Time
  

  Location
  

  Description

NB: Make sure to add the name attribute to each input, or it won't post.

The form created above will let you post data to the specified route. You will then process and store it in your database.

Here's the result:

The form page

After creating the form page, we need to go back to the server.js file and create a POST request to handle the form submission.

server.js file:

// posting a data

app.post('/submit-event', (req, res) => {
  const event = new Event(req.body);
  event.save()
    .then((result) => {
      res.redirect('/');
    })
    .catch((err) => {
      console.error(err);
    });
});

The Homepage

Now that the form can post data to the database, we can create the homepage to display the created events in the browser.

First, in your server.js file, you need to create a function. It will fetch all the events posted from the form and stored in the database.

Here’s how to set it up:

This is a function created at server.js to fetch all data from the database:

// To get all the event

router.get('/', (req, res) => {
  Event.find()
    .then((result) => {
      res.render('index', { title: 'All event', events: result })
    })
    .catch((err) => {
      console.error(err); 
  })
})

Next, we will dynamically loop through each part using a forEach loop in the homepage file. Since we are using ejs, the HTML file extension will be .ejs.


  <h2>All eventsh2>
  <div>
    <% if (events.length > 0) { %>
      <% events.forEach(event => { %>
        <div>
          <h3><%= event.title %>h3>
          <p><%= event.description %>p>
          <a href="/event/<%= event.id %>">
            Read More
          a>
        div>
      <% }) %>
    <% } else { %>
      <p>No events available at the moment.p>
    <% } %>
  div>

Here is an explanation of what each part of the code does:

Heading (
All events
): Displays "All events" as a heading.
Event List (
): Container for displaying a list of events.
Conditional Check ( <% if (events.length > 0) { %> ... <% } else { %> ... <% } %>): Checks if there are any events (events.length > 0). If events exist, it loops through each event (events.forEach) to display its details.
For each event, it creates a
containing the event's title (event.title) in a
tag, the event's description (event.description) in a
tag, and a link () to view more details about the event (Read More). The link directs to /event/event.id, where event.id is the unique identifier of the event.

No Events Message (<% } else { %> ... <% } %>): If no events are present (events.length <= 0), it displays a message saying "No events available at the moment."

Step 9: Create Partials

Remember that you installed ejs into your application to facilitate more dynamic components. It allows you to break your code down further to be more dynamic.

To further organize your code, you'll use something called Partials.

Partials let you break down your code into scalable, modular, and manageable parts, keeping your HTML organized.

First, let's create a partial for the navbar.

How to Create a Partial:

Inside your views folder, create a new folder named partials
Inside the partials folder, create a new file called nav.ejs.
Cut out the navbar code from your homepage file and paste it into nav.ejs.

Example:

First, create the Partials folder and file:

nav partial

Use the <%- include() %> syntax from ejs to include the nav.ejs partial across pages in your application where you want the navbar to appear.

Include () syntax

Here's the code:


<html lang="en">
    <%- include('./partial/head.ejs') %>

<body>
    <%- include('./partial/nav.ejs') %>
    <main>
      hello
    main>
      <%- include('./partial/footer.ejs') %>
body>
html>

With this setup, your HTML code will be organized. It will be easy to manage and update components like the navbar across different pages. You can use this approach on other parts of your application. For example, the head tag, footer tag, and other reusable components.

Step 10: Create an Environment Variable File (.Env)

In this tutorial, we'll upload the project to GitHub. You'll protect your port number and MongoDB URL with secure storage. You'll also use an environment variable file, a configuration file known as .env. This file keeps sensitive information safe. It includes passwords and API URLs and prevents exposure.

Here's how to set it up using Node.js:

First, install the [dotenv](https://www.npmjs.com/package/dotenv) package.

npm i dotenv

Then create a .env file. Inside it, add your PORT number and MongoDB URL. It should look something like this:

PORT=3000
dbURl='mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority';

Then update your .gitignore file:


/node_modules
.env

Adding .env to your .gitignore ensures that it is not included in your GitHub repository. This tells Git to ignore the .env file when uploading your code.

Then in your server.js file, require the dotenv package. Load the variables with this line at the top of the file:

To require it, simply type:

require('dotenv').config();

This way, you don't need to hardcode the PORT number and MongoDB URL in your server.js file. Instead, you can access them using process.env.PORT and process.env.dbURl.

So your server.js file will be cleaner and not messy 😵‍💫

require('dotenv').config();
const express = require('express');
const ejs = require('ejs');
const mongoose = require('mongoose');

mongoose
  .connect(process.env.dbURL)
  .then((result) => {
    console.log('Connected to MongoDB');
    app.listen(3000, () => {
      console.log('Server started on port 3000');
    });
  })
  .catch((err) => {
    console.error('Could not connect to MongoDB:', err);
  });

Further Steps

To expand on this basic application, consider adding features such as:

User authentication
Event search and filter functionality
Event editing and deletion
Notifications for upcoming events

How to Style the Application

If you want to add some styling to your application, follow these steps:

First, create a public folder. Inside this folder, create a style.css file where you will write your custom CSS.

Then in your HTML file, link the style.css file in the tag as you normally would:

"stylesheet" href="/style.css">

To ensure your CSS file is served correctly, add the following line to your server.js file:

app.use(express.static('public'));

This application uses Tailwind CSS for styling. But using Tailwind is optional. You can use any CSS framework or write custom CSS to achieve your desired layout.

How to Include Images

All images should be stored in the public folder and referenced in your HTML files. You should also ensure that the public folder is correctly set up in your server.js file to serve static files.

Here's an example of how to serve static files in server.js:

const express = require('express');
const app = express();


// Serve static files from the 'public' folder
app.use(express.static('public'));

Conclusion

Congratulations! You've built a simple application using Node.js, Express.js, ejs, and MongoDB. With these fundamentals, you can expand and enhance your application to meet more specific needs and features.

Feel free to share your progress or ask questions if you encounter any issues.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub

Thank you for reading 💖.

Happy coding!

Zustand vs useState – How to Manage State in React Apps

Ijeoma Igboagu — Wed, 15 May 2024 09:28:40 +0000

State management in React applications has evolved a lot in recent years, especially with the advancement of functional state and the introduction of hooks.

Developers have more flexibility and state management has generally become simpler. But as applications grow, they become more complex to manage – and you may find yourself needing a more robust state management solution.

React hooks provide built-in solutions to managing the state of your applications – for example, with the useState() hook. But there are other libraries like MobX, Zustand, and Recoil that ca help make state management easier.

In this article, I’ll focus on Zustand and compare it with the useState() hook. You can check out a comparison of useState() and Redux here if you want to learn more about Redux and how it compares to useState().

To get started, I want to make sure you understand how both useState() and Zustand work. Then we'll compare them to see which is a better solution for your project.

Prerequisites

Before you begin coding, please ensure you have the following:

Node.js installed on your system.
A basic understanding of React.js.
A code editor that you prefer, such as Visual Studio Code, or Sublime Text.

How to Use `useState()` for State Management

Overview of useState hook

useState() is a built-in React Hook that allows functional components to manage state without using class components. It provides a simple way to declare state variables and update them within functional components.

For more information on the useState() hook, you can check out this tutorial. It will provide you with detailed insights and examples related to useState() in React.

Basic usage and syntax

The syntax for useState() is straightforward. It takes an initial state as an argument and returns an array with the current state value and a function to update that value.

const [text, setText] = useState();

Let's look at an example of how to use useState().

Initial state of the application:



const Usestate = () => {


  return (
    <div className='container'>
      <h1>
       State management using useState()
      h1>
      <br />
      <div className='input'>
        <input
          type='text'
          className='input'
        />
        <button>
          Change Color
        button>
      div>
    div>
  );
}

export default Usestate;

In the above code, we have a React component named Usestate. It renders a simple interface with a heading "State management using useState()", a text input field, and a button labeled "Change color".

Here's the result of that code:

Initial state of the application

Now, let's add useState() and making it functional. Here's the code:

import { useState } from "react";

const Usestate = () => {
  const [text, setText] = useState('black');
  const [color, setColor] = useState('black'); // Another state to store the chosen color by the user

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  // A function has been declared
  const handleButtonClick = () => {
    setColor(text); // it updates the chosen color when the button is clicked
  };

  return (
    <div className='container'>
      <h1 style={{color:color}}>
        State management using useState()
      h1>
      <br />
      <div className='input'>
        <input
          type='text'
          className='input'
          value={text}
          onChange={handleInputChange}
        />
        <button className='btn' onClick={handleButtonClick}>
          Change Color
        button>
      div>
    div>
  );
}

export default Usestate;

In the above code, the state variable text is set to the initial state (color) using useState(). The setText function is set to update the value of color when the button is clicked.

The second state defined stores the color update from the user. So the text color remains unchanged until the button is clicked. Once the button is clicked, the color state updates with text value, changing text color to what the user types.

Here's the result:

Addition of useState() to the application

Pros and cons of `useState()`

Pros:

Built-in to React, so no need for additional dependencies.
Simple and intuitive API, easy to understand and use.

Cons:

Limited to managing local component state.
Can lead to prop drilling in deeply nested components which can cause confusion if you don't understand prop drilling.
Complex state management scenarios may require additional logic to handle.

To learn more about useState() and other functional hooks check out this article: Simplify your React programming effortlessly with these 8 amazing hooks.

How to Use the Zustand Library for State Management

Overview of Zustand

Zustand is a handy state management tool for managing state in React apps. It's small, works quickly, and grows with your needs.

With Zustand, you can create and update states globally that can be easily shared between different parts of your app. It's like having a central hub for your app's information, making it simple to organize and access data from anywhere in your application.

Zustand basic usage and syntax

To get started with Zustand, follow these steps:

First, start by installing Zustand in your React application using the command:

npm install zustand
// or
yarn add zustand

Next, in your React application, navigate to the src directory and create a new folder called store.

Inside the store folder, create a file named color.js (or any preferred name). This a JavaScript file to define your state.

Architecture of your React application

Then, in that color.js file, import the create function from Zustand to begin setting up your state management:

import { create } from zustand

We're going to use the create function to build a custom hook, which acts as the main access point to our store.

The color.js file is where we'll keep all our state values and the actions. Think of actions as the updated values. It's similar to how you use useState().

import { create } from 'zustand';

// Create a custom hook called useColor
export const useColor = create((set) => ({
  // Initial state: text and color both set to 'black'
  text: 'black',
  color: 'black',

  // Function to update text state
  setText: (text) => set({ text }),

  // Function to update color state
  setColor: (color) => set({ color }),
}));

Let's go over what this code is doing:

This code creates a special tool (a hook) called useColor using Zustand.
The useColor tool helps keep track of two things: the text and the color.
At the start, both the text and the color are set to "black".
There are two other tools inside useColor: setText, which is used to change the text to whatever we want, and setColor, which is used to change the color to any color we choose.

Creating this store involves defining it in a file. This makes it reusable throughout your whole app and makes it global. It removes the need to worry about passing props.

Then you need to pass it to your component to be used:

// First we will import useColor from a folder named 'store'
import { useColor } from '../store/color';


const UseZustand = () => {
  // we will bring in the functions we defined in color.js and destructure it so we can use it in our component
    // pass a state into the custom hook we created; this state will now be used to set and update the values
  const { text, color, setText, setColor } = useColor((state) => ({
    text: state.text,
    color: state.color,
    setText: state.setText,
    setColor: state.setColor,
  }));


  const handleInputChange = (e) => {
    setText(e.target.value);
  };


//Function defined for the button
// When the button is clicked, we use setColor to change the color to what we typed
  const handleButtonClick = () => {
    setColor(text);
  };


  return (
    <div className='container'>
      <h1 style={{ color: color }}>
        State management using Zustand
      h1>
      <br />
      <div className='input'>
        <input
          type='text'
          className='input'
          value={text}
          onChange={handleInputChange}
        />
        <button className='btn' onClick={handleButtonClick}>
          Change Color
        button>
      div>
    div>
  );
};


export default UseZustand;

In summary:

We're using a tool called useColor to keep track of text and color.
Inside our app section UseZustand), we allow users to type something and change its color by clicking a button.

Here what the final output looks like:

Applying zustand to the application

Pros and cons of Zustand

Pros:

Global state management without prop drilling.
Simple and concise for defining and accessing state.
Built-in support for middleware and devtools.

Cons:

Requires additional dependency compared to useState.
May introduce a learning curve for developers new to the library.

How Does Zustand Differ from useState?

Unlike useState(), Zustand allows developers to create and manage global state that can be accessed from any component in the application without prop drilling.

It offers a more centralized approach to state management.

Factors to consider when choosing between Zustand and useState

Here are some simple things to think about when choosing between Zustand and useState:

State Complexity: If your app's state is simple, useState might be fine. But for more complex state needs, Zustand could be better.
Speed: Zustand is known for being fast, which is great if your app needs to be quick.
Team Skills: If your team already knows how to use React Hooks, useState might be easier. But if they're open to learning something new, Zustand could be worth a try.
App Growth: Consider how your app might grow over time. Zustand's centralized approach can make it easier to handle state as your app gets bigger.
Community Support: See what resources and help are available for Zustand and useState. A strong community can be helpful.

Thinking about these things should help you decide. It will show you which state management option is best for your project.

What Are the Differences Between These Two State Management Tools?

The difference in the two tools lies in their feature with this you can make an informed decision.

Feature	useState	Zustand
Complexity Handling	Good for simple state in one component	Better for complex state shared across many components
State Scope	Local to one component	Global state that can be used by any component
Performance	Works well for small tasks	Designed to reduce re-renders
Ease of Use	Very simple to start with, no setup needed	Needs a bit more setup, more features but a bit harder to learn
Scalability	Can get tricky as the app grows, often needs other tools for big apps	Handles growth well, easier to manage state in big apps
Support and Tools	Part of React, lots of help and info available, no extra libraries needed	Separate library, good support, not as much info as useState but still good
Learning Curve	useState is easier to learn	Zustand has a slightly steeper learning curve due to its store creation process.

Use Cases

For simple state management, useState() is often enough.
Zustand offers advantages like centralized state and reducing prop drilling in complex apps.
Regarding performance, Zustand is built to be fast and efficient. It's made to reduce unneeded re-renders of your components. These can make your app run smoother.

Don't know what to build with useState() or zustand? You can check out this very simple application built with React: Birthday Reminder. And here it is on my GitHub.

Conclusion

In conclusion, Zustand and useState() are both useful for managing state in React. They serve different purposes based on your project's requirements and scale. You should understand the strengths and weaknesses of each approach in order to choose the best state management option for your app.

Have you used Zustand or useState() before? Share your experiences, insights, and tips on Twitter! Your input could make a real difference for other developers grappling with state management in React.

You can read the Zustand documentation to learn more.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter and LinkedIn or check out my BioDrop.

If you enjoy what I do and want to show your support or want to show some💖, consider buying me a coffee☕ or checking out my e-Book for kids! Your support means a lot to me!

Keep learning, keep sharing, and happy coding!

Thank you for reading💖.

AI Tools You Can Use in Visual Studio Code Besides GitHub Copilot

Ijeoma Igboagu — Mon, 22 Jan 2024 19:56:13 +0000

AI tools have become quite popular recently. Developers use these tools to help generate ideas, create simple code examples, and so on.

In 2023, ChatGPT and other Large Language Models found their way into many of our toolkits. And we can use them to be more productive and save time on repetitive tasks.

In this article, you'll discover other helpful tools besides GitHub Copilot.

Before we discuss alternatives, let's go over what GitHub Copilot is and what it does.

What is GitHub Copilot?

GitHub Copilot helps developers write code more quickly and efficiently. It's a tool developed by GitHub and OpenAI that employs a strong AI and Codex.

GitHub Copilot works with a variety of code editors, including Visual Studio Code, NeoVim, and JetBrains.

GitHub Copilot uses machine learning. It doesn't autocomplete – it suggests entire code snippets as you work in your text editor. It can also help you debug and refactor old code. The goal is to improve coding efficiency, decrease time spent on repetitive tasks, and increase productivity.

But GitHub Copilot has a downside: after the trial period, it costs $10 per month, which some users may consider too high.

So now let's look at some alternatives which are free to use.

Synk (DeepCode)

Synk, formerly known as DeepCode, is a tool that helps you keep your code safe. It works directly with your project file or repository, making it simple for teams to find and fix any security issues in their code, dependencies, containers, and infrastructure.

Synk(DeepCode) Homepage

Use Cases

Ideal for early-stage security reviews.
Effective bug detection and resolution.

Features of Synk

Scans your code early in development to help it pass security reviews. This helps avoid costly fixes later in the development cycle.
Scans for vulnerabilities and presents results with security issues.
Finds possible bugs in your code, helping you catch and fix issues early.
Suggests how to make your code run better.
Gets smarter by learning from different code examples. It gives better suggestions over time using algorithms.

Limitations of Synk

While Snyk is a powerful too, it has a couple limitations as well. First, it examines whole codebases, which could demand significant computing power, affecting the performance.

To help mitigate this issue, you can break down large codebases into smaller, manageable modules.

Also, there might be a bit of a learning curve for developers to understand how to get the most out of the tool.

But your team can offer training sessions or documentation to help you and other developers better understand how to use Synk effectively. Also, encourage your team to provide support resources, such as forums or documentation, to address common issues and questions.

Price

Using Synk in Visual Studio Code for individual code security testing is entirely free. This allows for checking your code's security before deploying it to production.

To collaborate within a team or for business purposes, upgrading the plan is necessary. You can find more information about the pricing plan here.

How to set up Synk in Visual Studio Code

To set up Snyk, select the "View" option in your text to reveal a dropdown menu.

Select the "view" option in the editor

Then click on the "Extensions" option in that dropdown, and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "Synk Security" and hit enter, then go ahead and install it.

Marketplace

How to authenticate in Snyk

After you've installed Snyk, you'll need to authenticate.

Click on the Synk icon in your editor. This will take you to the authentication page.

Click on the button to authenticate and connect. Once you're authenticated, go back to your editor. That's it!

Authenticate and connect to so it works with your visual studio code

After completing this step, you can now use Snyk to examine, understand, and analyze your code before sending it in for production.

Example use case

To scan for possible vulnerabilities in the project file, just click on the sync icon on the left panel. This will analyze the code and highlight any potential issues that need attention.

Example Synk in action

If you take a closer look, you'll see some letters indicating how vulnerable codes written is.

"H" means it's really high and needs fixing ASAP.
"M" means it's at the maximum vulnerability level.
"L" means it's at a low vulnerability level.

If you click on a vulnerability, you'll get suggestions on how to fix it, which are displayed on the right side of the editor.

Swimm AI

Swimm is a coding assistance tool that helps you understand complex and large code bases.

Swimm, acting as an intelligent guide for developers, simplifies the process of understanding complex code by delivering quick insights. It also excels at automatically correcting and augmenting any documentation gaps that may emerge, resulting in a complete and well-documented development environment.

Homepage of Swimm AI

Use Cases

Document Creation.
Workflow Organization.
Automatic Generation of Code Snippet Explanations.

Features of Swimm AI

Simplifies document creation.
Transforms pull requests into user-friendly documents for easy knowledge sharing.
Enhances workflow organization with rules for document visibility.
Improves communication clarity through guided documentation enhancement, making information more understandable and accessible.
Analyzes your code from multiple perspectives, creating easy-to-understand documents for complex code flows.
Continuously updated knowledge base, that is it auto-syncs automatically to align your documentation and latest code changes.

Limitations of Swimm AI

As always when using AI tools, you should always double-check before finalizing your decisions based off the AI's output.

Price

When Swimm is incorporated into your development environment, it is free to use. But larger businesses might consider upgrading because enhanced plans give unlimited user access.

How to set up Swimm AI in Visual Studio Code

Visit your Integrated Development Environment (IDE)'s marketplace, type "swimm," and hit Enter.

Then, proceed with the installation from the marketplace, or you can go to their website to integrate it into your IDE.

Click the VSCode icon to initiate it. Then you'll need to login or sign-up – click the button that appears.

Clicking of the icon

To sign up, simply follow the instructions provided by the website.

Since you are authenticated, you can now log in and use the application.

Login direction

When the external website opens, synchronize your Integrated Development Environment (IDE).

Authorizing with your IDE

Now let's go ahead and see how it works with a practical example.

Swimm AI example

Cody AI

Cody AI is a smart coding assistant that uses advanced AI to understand and analyze your code. It helps you code more quickly and also improves your understanding of the codebase. It goes beyond basic functions, identifying patterns and suggesting improvements, making your coding experience more efficient and insightful.

Cody Homepage

Use Cases for Cody AI

Facilitating creativity in tasks and brainstorming.
Resolving common issues with digital tools.
Strengthening teamwork through quick information sharing.

Features of CodyAI

Provides immediate responses to inquiries.
Allows you to upload various data types to build a customized knowledge base.
Cody's responses all have adequate source citations.
Can help with email authoring, document translation, and marketing material generation.
Assists teams in using digital technologies to diagnose and resolve problems.
Based on previous encounters and contextual history, it makes suggestions and thoughts.

Limitations of Cody AI

As with any tool, there are limitations. First of all, the search capability of the AI isn't as powerful. It analyzes user queries using available information. As a result, the AI may give answers that lack your desired depth or specificity at times.

Also, Cody AI Bots can't do math or handle tables well. This means the AI might not give accurate answers when dealing with numbers or complex data.

Lastly, Cody AI Bots can't understand pictures, diagrams, or anything visual in documents. It only uses text to come up with responses, so it's not great at dealing with visual elements.

To help mitigate these issues, make sure you're as clear and specific as possible when formulating your queries to help Cody better understand your intentions.

You can also break down complex questions into simpler components to improve the chances of accurate responses.

Price

Installing Cody in your integrated development environment is free for personal use. However, for professionals or businesses looking to leverage Cody's capabilities, an upgrade is required.

How to set up Cody in Visual Studio Code

First, select the "View" option in your text editor to reveal a dropdown menu as shown above.

Click "Extensions", and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "Cody" and hit enter, then go ahead and install it.

Cody Plugin

Now that the installation is complete, you can begin utilizing Cody in your editor.

Cody provides different command prompts to assist you with your code:

It can help you generate documentation for your code
If you're contributing to an open-source project and find the codebase confusing, Cody AI can provide explanations.
It can tell you which programming language a piece of code is written in.
You can ask Cody questions without leaving your coding environment.
Cody can make edits to your code based on given instructions.

Now, I'll illustrate how Cody can help explain parts of your code with an example:

One command prompt of Cody AI

Tabnine

Tabnine is a powerful AI assistant designed for developers, providing AI-driven code completions and suggestions to boost productivity.

It is compatible with a wide range of programming languages and major Integrated Development Environments (IDEs), enabling developers to leverage its smart code recommendations effectively.

Tabnine Homepage

Use cases

Speeding up Software Development: Facilitates faster and more efficient code writing.
Ensuring Code Consistency: Maintains a consistent coding style among different team members.

Features of Tabnine

Learns from the code you type and adjusts its suggestions to match your coding style.
Cares about your privacy. It only learns from open-source and permissive code, so you always own your code.
Awesome for developers because it works with many programming languages. It's like a handy tool for different tech stuff!
Makes coding easier by giving smart suggestions, helping developers save time.
It works well with popular code editors like Visual Studio code. Developers can use it in their coding environments.

Limitations of Tabnine

Tabnine learns from how you code over time, so it might take a little time to match your coding style. It helps if you actively use the tool and provide consistent input to help it learn your coding style faster.

Tabnine also suggests code, but it doesn't create entire sections. While this may seem like a limitation, it's actually best for code quality.

Finally, it might suggest code that is not quite right. Developers should double-check the suggestions for accuracy. To help Tabnine suggest better code, you can regularly review and accept/reject suggestions to fine-tune its understanding of your preferences.

You should also always double-check the suggested code for correctness and adherence to coding standards before finalizing it.

Price

Installation comes at no monthly cost, making it free. However, for larger organizations, it's recommended to consider upgrading. Upgraded plans for larger organizations provide unlimited user access while prioritizing security and privacy.

How to set up Tabnine in Visual Studio Code

To begin, select the "View" option in your text editor to reveal a dropdown menu as shown above.

Click "Extensions" and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "Tabnine" and hit enter, then go ahead and install it.

Extension (marketplace in IDE)

Now that we've got it installed, you can start using Tabnine in your editor. Here's an example:

Example in the editor

And here's the code:

const add = (a, b) => {

 return a + b;

}

console.log(add(5,9))// output 14

Code Whisperer

CodeWhisperer is a smart helper for coding. It uses AI to suggest bits of code or whole functions as you work in your coding environment. Made by AWS, it makes coding easier with features like autocomplete and code restructuring.

Code Whisperer Homepage

Features of Code Whisperer

Code Whisperer suggests code in real-time as you write.
Integrates with your Integrated Development Environment (IDE).
Helps enhance code readability and efficiency by assisting in improving and restructuring.
Supports a diverse range of programming languages.
Offers valuable help in generating and understanding code documentation.

Limitations of Code Whisperer

CodeWhisperer might find it hard to handle new coding tasks that need creativity.

Also, errors in its training data/models may lead to inaccurate code suggestions.

With these in mind, you should primarily use CodeWhisperer as a tool for generating routine or repetitive code, leaving more complex and creative tasks to human expertise.

Also make sure to review and verify any suggestions from CodeWhisperer often and don't just take the information at face value.

How to set up Code Whisperer in Visual Studio Code

First, select the "View" option in your text editor to reveal a dropdown.

Click on "Extensions" and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "AWS Toolkit" and hit enter, then go ahead and install it.

Extension(marketplace in IDE)

Now that the extension is installed, let's put it to use in our Integrated Development Environment (IDE).

Here's the code:

// create a greet function
function greet(name) {
    return "Hello " + name;
}
// export the greet function
module.exports = greet;

CodeGeex AI

CodeGeeX is a helpful tool for coding that creates comments, suggests code, and provides AI-powered chat help. It can also translate your code into different languages and works well with many programming languages and tools.

CodeGeex Homepage

Use Cases

Make coding faster.
Guides new developers through big code with auto comments and explanations.

Features of CodeGeex AI

Great at finishing code. It helps by autocompleting and generating lines based on existing code or comments.
Creates comments for both methods and lines in the code, saving time and making it easy to understand unfamiliar code.
Helps change code from one programming language to another – like turning Python into Java.
Developers can ask CodeGeeX coding questions and get quick answers without searching the web.
CodeGeeX does more than suggesting code. It can interpret selected code, fix bugs, summarize code, and more.

Limitations of CodeGeeX AI

When you're using CodeGeeX, keep in mind that it's a research prototype, so it might not always create perfect code for every situation.

It also might misunderstand some language descriptions or code snippets, leading to possible mistakes.

As always, make sure you carefully verify the generated code for accuracy and adherence to coding standards.

Also, when providing language descriptions or code snippets, be as clear and detailed as possible.

Price

CodeGeex is free to install on Visual Studio Code, and for an upgrade, it starts at $9/month.

How to set up CodeGeeX AI in Visual Studio Code

Select the "View" option in your text editor to unveil a dropdown menu.

Click on "Extensions" in your text editor, and it will take you to the Visual Studio Code Marketplace.

In the marketplace, type "CodeGeex" and hit enter, then proceed to install it.

Install CodeGeex

After installation, click on the icon, and it will take you back to a page where you can log in or sign up.

Login page in CodeGeex

Once you've completed this step, you'll be able to interact with the AI in your IDE.

To trigger it, navigate to your IDE, highlight the desired code, and right-click. A dropdown menu will appear, allowing you to choose the specific command you want the AI to execute for you.

Here's an example:

Example of using CodeGeex

The GIF example showed one thing CodeGeex AI can do.

To learn more about its abilities, visit the docs: CodeGeeX: AI Code AutoComplete, Chat, Auto Comment.

Code:

const colors = ['pink', 'blue', 'purple', 'green'];

colors.forEach(color => {
    console.log(color);
});

Codeium

Codeium is a free and powerful tool that makes coding faster using advanced AI. It's like a superhero for coding, with a tool that helps you complete code in over 70 languages. It's super speedy and gives top-notch suggestions, making coding much more efficient. You can use Codeium as a Google Chrome extension.

Codeium Homepage

Just keep in mind that, because of its power, using Codeium makes it easy to over-rely on AI-generated suggestions. This could lead to errors in your code if you're not vigilant and don't keep up your skills. So make sure you still check/run your code, learn new topics as you need to, and keep your own code-writing abilities sharp.

You can read more about Codeium here.

Price

The AI is initially free to install in your Integrated Development Environment (IDE) but may require an upgrade which starts at $12/month with team usage.

How to set up Codeium in Visual Studio Code

To start, visit Codeium's website and select the sign-in option.

Sign-in user

Clicking on this will redirect you to the login page.

Login page

Authenticate

Once you've completed the login, you'll encounter various integrated development environments (IDEs). Choose the one that aligns with your preferences – for instance, I use Visual Studio Code.

Choosing your IDE

Go ahead and install it in your Visual Studio Code IDE.

After installation, click on the account sign-in option in Visual Studio Code to authenticate with the website.

Authenticate

Once completed, you can now use Codeium within your IDE.

Now, let's see a practical example:

Codeium example

Conclusion

The article discusses various AI tools that you can use to speed up development. Some developers think only about GitHub Copilot. But there are other AI tools with different features that can help you too.

If you've found value in this tutorial, consider sharing it with fellow developers who might also benefit.

To stay updated with my latest projects by following me on Twitter and LinkedIn or check out my BioDrop.

If you'd like to show your support, you can also Buy me a coffee☕

Thank you for taking the time to read💖

How to Fetch API Data in React

Ijeoma Igboagu — Thu, 14 Dec 2023 10:18:47 +0000

When developing applications, you often need to get data from an API. This lets you deliver dynamic and often-updated content within your application.

You'll want to retrieve this data as you may need to interact with external services, communicate with a distant server, or access a database.

In this article, I'll show you different methods of fetching data using React as an example.

Prerequisites

Install Node.js
Ensure you have at least a basic understanding of React.js.
A text editor

What is an API?

API stands for Application Programming Interface. It enables the exchange of information and functionality between different systems, such as between a website and a server or between different software applications.

You can think of an API as being like a restaurant waiter. You don't go inside the kitchen to prepare your meal when you dine at a restaurant. Rather, you inform the waiter of your preferences, and they will take your order to the kitchen team. The kitchen team prepares the food and returns it to the waiter, who then delivers it to your table.

An API functions as a waiter for software applications. It is a set of rules that lets one program ask another for something it needs. It serves as a bridge for software apps to communicate and interact.

Why are APIs important in web development?

There are a few reasons why APIs are important in web development. Let's go over some of them below:

Web applications need APIs to get data from various sources, like databases or websites.
APIs are a scalable option for managing high data or request volumes.
Developers use APIs to leverage existing features and services. This saves them from reinventing the wheel.
They keep things safe by ensuring that only authorized individuals or programs can use them.
An API makes a website or mobile app more enjoyable to use by integrating data.

What is a Hypertext Transfer Protocol (HTTP) request?

When a web browser or a mobile app sends a message to a server, it's known as an HTTP request. A HTTP request involves asking the server for specific data or an action and getting a response. The server responds by interacting with web pages and services.

Using APIs in software development makes things more flexible and efficient. It also enhances security and enables different software systems to work well together.

Types of HTTP Requests

We use various HTTP request methods, such as get, post, put, and delete, to get and store data in our database. But the most common requests made are the get and post requests.

Let's discuss the meaning of these HTTP request methods:

GET: This method retrieves data from a specific endpoint. Think of it as asking for information.
POST: This method sends data to a specific endpoint. For example, you can send a message or submit a form. The information will be added to the database.
PUT: This method is used to update a record or data value at a designated endpoint. You're making changes to existing information.
DELETE: This method erases data from a specific endpoint. It's like discarding unnecessary things.

One widely adopted way of checking APIs is through the browser.

Getting a response from an API

To learn more ways to get data, check out this article: Getting Started with Application Programming Interfaces (APIs).

How to Fetch Data in React

There are various ways to fetch data in React. Before we begin, let’s start by writing some React boilerplate code or by creating a template in our editor.

Here's the command to do that:

npx create-react-app ./ or npx create-vite@latest ./

creating template for our project

After this, type the following command:

npm run dev

This will start the development server.

In the image above, you'll notice that I added a period (.) immediately following the command.

This is a convenient shorthand for creating the template within the current directory.

Different Ways to Fetch Data in React

1. Use the stale-while-revalidate (SWR) method

This method is used to fetch data from a server and is used in React. It manages any issues that may arise when obtaining the data and helps you manage its storage. SWR includes useState() and useEffect(), so there is no need to import them.

The advantages of SWR

SWR speeds up your app's loading time by showing older data while fetching the latest information.
It reduces the server burden by minimizing the number of requests.
Even if there is a bad connection, or no connection at all, SWR can still display previously fetched data.
SWR handles data acquisition and maintenance without the use of sophisticated coding.
It knows what to do if something goes wrong while gathering data.
You can change how SWR operates to better suit your app.
It provides a consistent approach to collecting and saving data across your app.

How to use `SWR` to get data

In your application, create a file.
Then install the package SWR into your application with the following command:

npm i swr

Import useSWR, which is a hook that has both useState() and useEffect(), into your application.
Then define a constant variable on top called fetcher and assign it a function.

This function is capable of receiving any number of arguments, denoted by the ...args syntax.

The function looks like this:
const fetcher = (...args) => fetch(...args).then(res => res.json())

Here is how thenSwr.jsx should look like:

import useSWR from 'swr';

// Import useSWR from swr package

// created function to handle API request
const fetcher = (...args) => fetch(...args).then((res) => res.json());

const Swr = () => {
  const {
    data: countries,
    error,
    isValidating,
  } = useSWR('https://restcountries.com/v2/all', fetcher);

  // Handles error and loading state
  if (error) return <div className='failed'>failed to loaddiv>;
  if (isValidating) return <div className="Loading">Loading...div>;

  return (
    <div>
      {countries &&
        countries.map((country, index) => (
          <img key={index} src={country.flags.png} alt='flag' width={100} />
        ))}
    div>
  );
};

export default Swr;

Let's see what's going on in the above code:

The first thing we did was import the SWR library.
Next, we defined a function to handle the API request.
In return, we used the map() method to iterate through the list of nations.
We put a && line to ensure that if there are no issues and the data has been correctly received (meaning the countries variable is not null or undefined), it will proceed to map over the data and show an image element for each nation.
Finally, we exported the component to the application's root App.jsx or Index.jsx so it could be viewed in the browser.

Here's the result:

The result of using Swr

2. Use the JavaScript `Fetch()` method

The fetch() method is well-known for retrieving data from APIs. It is recognized as the simplest and most used approach.

The advantages of using the `fetch()` method

The fetch() method makes it simple to get information from the internet using JavaScript.
It lets you send extra details to the server, like who you are or what kind of data you want.
It's designed to work well in most of the newer web browsers.
The fetch() method supports different HTTP methods. These methods include get, post, put, and delete. They give you flexibility in interacting with APIs.
The fetch() method is a native JavaScript method. You can use it without any external libraries or dependencies. This makes it lightweight and efficient.

How to use `fetch()` to get data

In your application, create a file.
Then import useState() for state management in React.
Next, import [useEffect](https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/)(), as it will make the data from the API render.

Here is how the Fetch.jsx should look like:


import { useState, useEffect } from 'react';
const Fetch = () => {
  const [photos, setPhotos] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setPhotos(data);
      });
  }, []);
  return (
    <div>

      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} width={100} />
      ))}
    div>
  );
};
export default Fetch;

Inside useEffect(), we fetch our data by sending a request with the API key. The response comes back in JSON (JavaScript Object Notation).

In the return statement, we process the received photos by utilizing a map() function to iterate through each item.

In our specific scenario, we are only interested in the photos. We render them in the browser by displaying them in the main file of the application, or root. The main file could be App.jsx or Index.js.

Here is how the App.jsx file looks:

The root of the application

And here's the result:

using fetch()

3. Use the `React Query` library

React Query, also known as TanStack Query, is useful for managing data in React applications. The difference between the two names is the version.

Using React Query is easy and makes handling data in your app feel almost automatic, like it's taking care of things for you. For instance, fetching, caching, synchronizing, and updating server states in your applications.

Advantages of the `React Query` method

The data retrieved from APIs is cached by React Query. You can retrieve the same data from the cache again. This saves time by avoiding a new network request.
The program can automatically re-fetch data when specific conditions are met. These conditions include regaining focus or a set time passing.
React Query has optimistic updates that can update the UI. It shows the expected outcome of a mutation without server confirmation. A smoother user experience is achieved as a result.
It is made to work with React, making use of its component-based architecture to enable smooth integration.
React Query includes DevTools that offer insights into query, mutation, and caching state. These tools help with debugging and optimizing performance.

How to use `React Query` to get data

To begin, use this command to install the React-Query library (TanStack Query) into your application:

npm i @tanstack/react-query

To make things work, use QueryClientProvider from @tanstack/react-query.

Wrap your application, which is the Main.jsx component, with it and pass queryClient as a prop. It comes automatically from the initialized QueryClient.

Here is how the Main.jsx file should look like:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    QueryClientProvider>
  React.StrictMode>
)

Now that we have done this, we can fetch the data:

In your application, create a file.
Import the hook from @tanstack/react-query at the top of your file:

import { useQuery } from '@tanstack/react-query';

The useQuery hook is defined with two crucial parameters in object form. These parameters are queryFn and queryKey.
queryFn handles fetching data from the endpoint.
queryKey serves as the unique identifier for the data obtained.

As mentioned earlier, React Query simplifies and manages loading states and errors. You don't need a separate useState() hook.

import { useQuery } from '@tanstack/react-query';
const Query = () => {
  const { data: comments, isLoading, error } = useQuery({
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/comments?_limit=10').then(
        (res) => res.json()
      ),
    queryKey: ['comments'],
  });

  // Show a loading message while data is fetching
  if (isLoading) {
    return <h2>Loading...h2>;
  }

  // to handle error
  if (error) {
    return <div className="error">Error: error fetchingdiv>
  }

  return (
    <div>
      <h1 className='title'>Email address of usersh1>
      {comments.map((comment) => (
        <h2 key={comment.id} className="users">
          {comment.id}.  
            {comment.email}
        h2>
      ))}
    div>
  );
};
export default Query;

Here's the result:

The result from the endpoint

As previously mentioned, useQuery() manages the loading and error states as long as it's defined.

When your internet service is bad, the browser may show these conditions because it couldn't get the data.

Here's an example:

Loading and Error state

4. Use the `Axios` Library

Axios is a third library package that we can add to our program to retrieve information from an API. Because Axios is used in both web browsers and server-side JavaScript, it is useful for a wide range of tasks.

Advantages of the `Axios` Library

Axios is simple and easy to understand. It's a clear and straightforward way to get data from an API.
It's designed to work well in most of the newer web browsers.
You don't have to add anything extra to your code to use Axios. It's ready to go as part of JavaScript.

How to use Axios Library to get data

In your application, create a file.
Install the package Axios into your application like this:

npm i axios

Import Axios library into your application.
Import useState(), which enables state management in React.
Then import [useEffect](https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/)() which facilitates the rendering of data from the API.

Here is what the Axios.jsx file should look like:

import { useEffect, useState } from 'react'
import axios from 'axios'
const Axios = () => {
  const [meals, setMeals] = useState([])
  useEffect(() => {
    axios.get('https://www.themealdb.com/api/json/v1/1/random.php')
      .then((res) => {
        setMeals(res.data.meals);
      })
  }, [])

  return (
    <div>
      {meals.map((meal) => (
      <img key={meal.idMeal} src={meal.strMealThumb} alt={meal.strMeal} width={400}/>
      ))}
    div>

Inside useEffect() we fetch our data by sending a request with the API key. The response comes back in JSON (JavaScript Object Notation).

We use a map() function in the return statement. The map() function helps us process the meals. It iterates through each piece of information.

In our specific scenario, we are only interested in the images of each meal.

To display them in the browser, we render them in the root of the application, which could be App.jsx or Index.js.

Here's the result:

using axios library (Result)

5. Use the `useFetch` custom hook from react-fetch-hook

A custom hook in React is a JavaScript function. It is reusable and leverages React's built-in hooks. The purpose is to encapsulate and share logic across multiple components. This promotes code modularity and maintainability.

A custom hook allows us to reuse the fetching logic in various components of our app.

In React, custom hooks are often named with a convention, such as useFetch. Typically, any custom hook follows a naming pattern that starts with the keyword use.

Advantages of a custom hook

Custom hooks make the reusability of logic across multiple components easy.
Custom hooks make the code readable, concise, and maintainable by abstracting complex logic.
Custom hooks allow you to test code independently, ensuring they work as expected before using them in components.
Custom hooks allow you to build bigger features with less code. They prevent complexity in your main code.

How to get data using a custom hook

Open the terminal in your application.
Type this command to install the required package.

npm install react-fetch-hook

Once the installation is complete, navigate to the start of your application's file. Add the following line to import the useFetch hook:

import useFetch from "react-fetch-hook";

Now, you can use the useFetch hook to interact with an API.

Create variables to keep track of errors, loading states, and data by using destructuring.
In your application, make API calls using the useFetch hook. Update the variables.

Code example:

import useFetch from "react-fetch-hook";

const UseFetch = () => {
  const { data: posts, isLoading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

  // Show a loading message while data is fetching
  if (isLoading) {
    return <h2>Loading...h2>;
  }

  // Handle error
  if (error) {
    return <div className="error">Error: error fetchingdiv>;
  }

  return (
    <div>
      <h1 className='title'>Post of usersh1>
      {posts.map((post) => (
        <div key={post.id} className="card">
          <h2 className='users'>{post.title}h2>
          <p>{post.body}p>
        div>
      ))}
    div>
  );
};

Here's the result:

Data called using the custom hook

Conclusion

This article talks about different ways and tools to fetch API data in React.Understanding these methods will assist you in creating advanced applications.

Utilizing React to construct dynamic applications and obtain data from APIs is vital. Many apps rely on data from APIs, so developers need to know the best and quickest ways to get that data.

Whether you're a beginner or experienced developer, every method has its benefits. These benefits can improve your programming skills. They can also help you create reliable apps that use data.

If you found this tutorial helpful, please share it with other developers. They may also find it interesting. You can also stay updated on my latest projects by following me on Twitter and LinkedIn.

Thank you for reading💖

Resource

Public APIs Developers can use in their project

How to Deploy Your Websites and Apps – User-Friendly Deployment Strategies

Ijeoma Igboagu — Wed, 09 Aug 2023 14:23:41 +0000

Deploying your application is a key aspect of software development. Typically, having an app on your local system isn't enough – it needs to be accessible online. So choosing a suitable and user-friendly hosting and deployment plan is vital.

The key to making the right decision lies in understanding the goal of your application. Perhaps it’s a simple website, a one-page app, or it requires serverless or cloud functions. Having clarity about these aspects will significantly ease the deployment process.

In this article, we will look at a few popular methods for deploying your application that will help tackle these challenges.

What we'll cover:

What to consider when deploying a hosting platform
How to deploy a website or app with Render
How to deploy a website or app with Surge
How to deploy a website or app with Vercel
How to deploy a website or app with GitHub Pages
How to deploy a website or app with Netlify
Conclusion

What to Consider when Deploying to a Hosting Platform

There are several factors to take into account when selecting a hosting platform:

Purpose: Before you host your application, consider the technologies you used to build it and how much storage the platform can handle.
Interface: A good interface is essential for a hosting platform. Look for a control panel or dashboard that allows you to easily administer your website.
Reviews: Look at the hosting service's reviews and read what other clients have to say.
Security: To safeguard your website and data, it is essential to have the right security measures in place.
Support: You should always have someone there to help you out when you need it.

Why is Deploying an Application Important?

If you've built an app, there are various reasons you may want or need to deploy it, such as:

It showcases professionalism and credibility to users.
It increases the accessibility of the application to a broader audience.
It enables user interaction and feedback.
It facilitates data analysis and provides insights for informed decision-making.
It identifies areas for improvement in the application.

What's the Benefit of Choosing a User-Friendly Deployment Method?

Opting for a more approachable deployment method brings significant advantages:

Collaboration: When working together as a team, it’s useful to have straightforward methods to deploy your application. This makes collaboration and teamwork easy. These will encourage cooperation throughout the deployment process.
Efficiency: A user-friendly deployment method simplifies the process.
Simplicity: Choosing a hosting platform that is easy to understand will benefit everyone involved.
Reliability: easy to use deployment methods ensure a more reliable application and minimise potential disruptions.

How to Deploy a Website or App with Render

Render provides an interface for quick and straightforward publishing of static web content. Let's now go through how to deploy an app to Render step by step.

Step 1: First, ensure you have deployed your work or code from your editor to your GitHub account.

Step 2: Open a new browser tab and navigate to the Render website.

Render website

Step 3: Select the “GET STARTED” button on Render's home page to get going.

You can use your GitHub, GitLab, or Bitbucket account when signing up. Choose the GitHub option and follow the steps to grant Render access to your GitHub account.
If you already have a Render account, click the “Sign in” button to be redirected to the Sign-in page. You can sign in via email and authenticate using your Google account or your GitHub account.

Sign in page

Step 4: Once you access the dashboard, click the “New” button.

Dashboard of Render

Step 5: Upon doing so, a drop-down menu will appear. It'll show you a comprehensive list of services provided by Render.

List of Services offered by render

Step 6: Clicking “Static Site” from the drop-down menu will lead you to the “Create a New Static Site” page. From there, you can select the repository you wish to host.

Create a New Static Site

Step 7: After selecting the repository you wish to host, you will be directed to the deployment platform. There, you can provide the necessary information to host the application and click the “Create Static Site” button for it to deploy.

Deploying the app using Render

Here's what the final output should look like:

Hosted application

Pros of Deploying With Render

Render has a free tier for hosting basic static websites.
It provides a flexible price structure that ensures transparency and cost-effectiveness.
It makes deployment easy. They provide an interface and connection with standard development tools and platforms. It also supports a wide range of programming languages, frameworks, and databases.
It delivers a variety of integrated features that improve the hosting experience.
It has good customer service support.

Cons of Deploying With Render

Render specializes in static websites, Docker containers, and serverless functions.
For more complex/bigger applications, there's a paid plan. You'll need to go through their price structure and understand the charges related to your usage.
There is a learning curve, especially for newcomers to the platform.

How to Deploy a Website or App with Surge

This friendly platform and tool make it quick and easy to deploy static websites online.

Deploying your static files to surge.sh is easy using the command-line interface (CLI).

This command-line interface (CLI) streamlines the process of hosting and distributing your online projects.

Surge website

Steps to Deploy Your Site Using Surge

First, in the terminal of your project, type the command npm i -g surge.

Then type the command surge.

And that's it! You can deploy your app without logging in into your GitHub account.

To see what you have deployed, first copy the successful link in the terminal. Then paste it into your browser. You should see something like this:

Hosted site with Surge

Like I mentioned before, Surge doesn't need extra code. You can easily deploy your app right from your editor's terminal by typing the command surge.

Pros of Deploying with Surge

Easy to Use: Surge provides a simple deployment for static websites.
Fast Deployment: It has a quick deployment time.
Custom Domains: It allows you to use your domain name for your website.
SSL Support: It provides free SSL certificates.
Support for Single-Page Applications (SPAs): It's well-suited for deploying single-page applications.

Cons of Deploying with Surge

Limited Functions: Surge is designed for static websites.
No Custom Server Configurations: It streamlines the deployment process by abstracting away server configurations.
Premium Features: This platform offers free hosting for basic usage, but you'll have to pay for more features.

How to Deploy a Website or App with Vercel

Vercel is a hosting and deployment platform that specializes in modern web applications.

It is particularly well-suited for single-page applications, serverless operations, and static websites. It integrates with popular frameworks like Next.js and Gatsby.js, making deployments fast and simple.

Steps to Deploy Your Site Using Vercel

First, ensure that you have deployed your work or code from your editor to your GitHub account.

Then open a new browser tab and navigate to Vercel’s website.

Vercel website

Head to the Vercel website and click the “Sign up” button on the homepage.

Sign up using your GitHub account and follow the steps to grant Vercel access to your GitHub account. If you already have a Vercel account, click the “Login” button and enter your login information.
After signing up or logging in, Vercel will request access to specific information from your GitHub account. Review the required permissions and permit Vercel to proceed.

Next, click on “Add New…” on the Vercel dashboard. This action will reveal a drop-down menu. From the menu, select “Project,” which will navigate you to the next page.

Add New Project

On the next page, you will import your repository for deployment.

Vercel Deployment

Here's what the final output should look like:

Hosted site

When deploying your application to Vercel, you may encounter some errors, often caused by routing issues.

To fix this:

Create a file under the root of your application called vercel.json.
Inside the file, write the following code:

vercel.json

{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }

Inside your editor

Pros of Deploying With Vercel

Collaboration: Vercel offers tools for effective teamwork, access control, and cooperative deployments.
Simple Deployment: it simplifies delivering your web apps with ease.
Preview Deployments: it allows you to share and review changes before they go live. This promotes collaboration and ensures a smooth and efficient workflow.
Scalability and Performance: It still guarantees great performance even with a large number of people using it.
Git Integration: it makes Git integration easy.

Cons of Deploying With Vercel

If you are new to Vercel, you must understand how to deploy and configure your application. Reading Vercel’s documentation can help you get up to speed.
Vercel is great for small to medium-sized projects, but it may not be the best fit for large-scale applications with complex backend needs. In such cases, developers may need a hosting solution that offers more customization and scalability.

How to Deploy a Website or App with GitHub Pages

GitHub Pages is a straightforward and cost-free hosting service. You can use it to host static web pages or documentation.

You can publish your site using GitHub Pages by submitting your code to a GitHub account and setting up a repository. Let's go through the process now.

Steps to Deploy Your Site Using GitHub Pages

To use GitHub Pages to host your website, follow these simple steps:

First, go to GitHub's website.

Github website

Then create a GitHub repository. If you don’t have a GitHub account, you'll need to click on “sign up”, or just click “sign in” if you already have an account.

Github sign in button and sign up buttons

Create a new repository by clicking the New button in the upper-right corner of your GitHub profile.

Creating a new repository

Give your repository a name that reflects your website.

Repository name

Once you have finished the previous step, go back to your Editor. Copy the generated code and paste it into your editor.

Code generated from new repository

The code in the image above is generated when creating a new repository.

Go to the settings page of the newly created repository.

Clicking on settings

Click on the settings option to redirect to the settings section. Locate and click on “Pages” in the left-hand side menu.

GitHub pages section on the settings page

To access GitHub Pages, click on the “Pages” section. Once you’re on the GitHub Pages section, click in the drop-down menu and choose either the “master” or “main” branch. Remember to save your selection.

Enabling GitHub Pages to host your site

Refresh the page to find the link leading to your published website.

Seeing your hosted site

Pros of Deploying With GitHub Pages

GitHub Pages are simple to set up – and you can build your website there.
It's free.
GitHub’s version control system makes it simple to keep track of changes and work with others.
GitHub Pages updates your website’s code whenever you make changes to it.
It offers collaboration on projects with other developers.
It ensures your website is safe through HTTPS (Hyper Text Transfer Protocol) encryption.

Cons of Deploying With GitHub Pages

While GitHub Pages offer many advantages, there are a few considerations to keep in mind:

If your website becomes too large due to file size, this can cause some performance issues.
GitHub Pages may only support simple functions.
Understanding Git, the version control system used by GitHub, is essential for managing your website’s code.

How to Deploy a Website or App with Netlify

Netlify integrates with Git repositories and works well with static web pages and single-page apps.

Steps to Deploy Your Site Using Netlify

First, you'll need to make sure that you have deployed your work or code from your editor to your GitHub account.

Then, open a new browser tab and navigate to the Netlify website.

Netlify website

Head to the Netlify website and click the “Sign up” button on the homepage.

Create an account by signing up with your GitHub, GitLab, or Bitbucket credentials.
Select the GitHub option and follow the steps to grant Netlify access to your GitHub account.
If you already have a Netlify account, click the “Login” button and enter your login information. After signing up or logging in, Netlify will request access to specific information from your GitHub account. Review the required permissions and permit Netlify to proceed.

Once you have finished registering, go to the dashboard where you will host your repository.

Netlify has two ways to host your project:

Drag-n-drop
Importing the source code from your repository to the site.

Using the Drag-n-Drop feature:

Once you have logged in, navigate to the left-hand side of the dashboard and select the “site” option.

Netlify dashboard

Before deploying your project, it’s important to include an “index.html” file. Netlify recognizes this file as the main folder for hosting your project.

Root index.html file

Go back to the website click on “site” and scroll down, you will see the drag-n-drop zone where you can drag and drop your file or you upload the folder.

Netlify drag and drop

By using this feature your project will be deployed.

Importing the source code from your repository to the site:

First, upload your code to GitHub.

Then access the Netlify dashboard.

To access the option (drop-down) menu, click on “Add New Site”. Select “Import existing project.”

Import existing project

When you click on “Import existing project,” the system will direct you to a new page. Then you can import your repository from your GitHub account or any other storage account where you stored your source code.

Connect to Git provider

When you click on this button, it will navigate you to the next page where you can choose the desired repository from the available options.

Choosing repository from Netlify

After selecting the repository, the next step is configuring and deploying your site.

Deploying from Netlify

Here's the result:

Hosted App

When deploying your application to Netlify, you may encounter errors, often caused by routing issues.

To fix this:

Create a file called _redirects, and inside write the following code:

_redirect file

/* /index.html 200

Example

Encounter error during deployment which is caused by routing issue

Pros of Deploying with Netlify

Form handling capabilities: Netlify makes handling forms on your websites easy. It has a simple API that allows you to collect and process form submissions. It also integrates with popular form providers like Zapier, Mailchimp, and Slack.
It’s easy to configure custom domains for your websites: it makes it simple to manage your website’s domain and security. It also ensures that your websites are secure with HTTPS.
Web Hosting: Netlify helps you host your websites and applications. It offers static site hosting, allowing you to deploy HTML, CSS, and JavaScript files straight from a Git repository or by drag-and-drop.
Simple Deployment: it makes deploying your website or web app straightforward. When you connect your repository, it will deploy any changes you make.
Continuous Deployment: When you make updates to your source code, Netlify builds and publishes your website for you. This ensures that your website always reflects the latest changes you’ve made.

Cons of Deploying With Netlify

Project size: This hosting platform is an excellent choice for small to medium-sized projects. But you should explore other hosting and deployment options as your website or app grows.
Limited Backend Capabilities: Netlify prioritizes front-end development and static websites. Although it does have some backend functions, it may not be the best option for projects that need complex server-side processing.

Conclusion

In conclusion, deploying an application is crucial so that users can access it and others can see your work. User-friendly deployment methods offer significant benefits, including collaboration, efficiency, simplicity, and reliability.

Here's a quick review of what we've covered here:

Render offers a simple interface, affordable pricing, and built-in features.
Surge offers fast deployment speeds, making deploying static websites a breeze.
Vercel is an expert in creating cutting-edge web apps with scalability and preview deployments.
If you’re looking for an easy-to-use option, consider GitHub Pages. It provides several advantages, including simplicity, free hosting, version control, and HTTPS encryption. But, it has limited functionality and technological limitations for more sophisticated applications.
Netlify is a user-friendly platform that's great for quickly deploying static websites and web apps. It's perfect for projects that want easy setup, automatic deployment, and modern development features

What you choose will depend on the particular needs and objectives of your application and the technical know-how of the developers working on it.

And if you want to improve your Git skills, you can read this Git Command article.

If you found this tutorial helpful, please share it with fellow developers who may also find it interesting. You can also stay updated on my latest projects by following me on Twitter and LinkedIn.

How to Manage State in Your Applications – useState() vs Redux

Ijeoma Igboagu — Mon, 31 Jul 2023 21:35:43 +0000

State management is crucial for handling an application's data, how users interact with it, and how different parts of the app behave.

And it's not something you'll use only in React.js, but also in other popular tools like Angular.js, Vue.js, and Next.js.

There are two common ways to manage a state: useState and Redux. But there are also other options like MobX, Zustand, and Recoil.

In this article, we'll learn about state management and why it's important. We'll also explore common state management methods and understand how they work.

After reading this article, you'll be able to pick the best state management method for your app.

Prerequisites

Have an understanding of React.
Make sure you install Node.js on your system.

What is State Management and Why Is It Important?

State management is a crucial part of application development. It lets programmers control how the app responds to different events and user actions.

It helps you create dynamic and interactive interfaces, making the user experience better.

What Sort of Sites/Apps Use State Management?

State management is used in lots of websites and apps, from simple to complex ones.

React and frameworks like Angular.js, Vue.js, and Next.js often use state management to handle data and control how components behave.

What to Consider When Choosing a State Management Strategy

The application's complexity: For simple apps with few components, use useState(). For complex apps with extensive state interactions, choose Redux.
Team size and skill level: useState() is okay for smaller teams or developers new to state management because it's easy to understand. Redux can be good for larger teams with experienced developers.
Sharing State: Redux centralized state management is easier to use in some cases than useState().
Scalability: Redux offers advanced features that help manage complex states.

State Management Examples:`useState()` vs `Redux`

To understand state management better, let's check out a practical example that shows how useState() and Redux work in React.

Setting Up the Project

First, go to the project folder. Create a React boilerplate using the create-react-app command or the Vite tool.

I prefer vite (and this is what the React document currently recommends), because it's faster for development and easier to configure. Vite is also more versatile and supports other front-end frameworks such as Svelte. But if you prefer, create-react-app is still an option.

Next, in the terminal of your editor, type this command:

npx create-react-app ./ or npx create-vite@latest ./

./ creates the React boilerplate for you right inside the created folder or directory.

Creating the react boilerplate (template)

Option 1: Managing State with `useState()`

useState() is a built-in hook in React. It manages the state of React applications locally.

useState() introduces state management capabilities in functional components. This means you can now use stateful logic within functional components.

In React, you have access to various other hooks that you can import and use in your applications. These hooks make your app more dynamic and efficient.

Check out this article to learn more: Simplify your React programming effortlessly with these 8 amazing hooks.

For more information on the useState() hook, you can check out this tutorial. It will provide you with detailed insights and examples related to useState() in React.

Pros of Using the `useState()` Hook in a React Application

useState() has a smaller footprint than external state management libraries like Redux. This reduces the application's bundle size and improves performance.
It allows for more clear and intuitive state management within functional components.

Cons of Using the `useState()` Hook in a React Application

It is cumbersome to manage the state of complex components with many variables.
Due to its limited capabilities, it leads to issues like prop drilling, which can be a bit confusing if not understood.
It triggers a re-render of the component impacting performance.

How to Use `useState()` in React Applications

So let's create an application that changes the color based on the user's input.

Using useState() involves a simple process:

Import the useState() hook from the 'react' library.
Define a state variable and its initial value using array destructuring.
Then, define another state variable that takes in the color choice of the user when typed.
Use the state variable and its corresponding setter function within the component's logic to read or update the state.

Here's what that looks like in code:

import React, { useState } from 'react';

const State = () => {
  const [text, setText] = useState('black');
  const [color, setColor] = useState('black'); // Another state to store the chosen color by the user

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  // A function is been declared
  const handleButtonClick = () => {
    setColor(text); // it updates the chosen color when the button is clicked
  };

  return (
    <div>
      <p style={{ color: color }}>
        Progressively effective resources via business metrics.
      p>
      <br />
      <div className='inputBtn-container'>
        <input
          type='text'
          className='input'
          value={text}
          onChange={handleInputChange}
        />
        <button className='btn' onClick={handleButtonClick}>
          Change text color
        button>
      div>
    div>
  );
};

export default State;

In the above code, the state variable text is set to the initial state (color) using useState(). The setText function is set to update the value of color when the button is clicked.

The second state defined is to store the color update from the user. So the text color remains unchanged until the button is clicked. Once the button is clicked, the color state updates with text value, changing text color to what the user types.

Result

Option 2: Managing State with `Redux`

Redux is a JavaScript library for managing states in applications. It works with React and other frameworks.

Redux helps you manage the global state of your app. It improves your app's performance as well.

Think of Redux as a traffic controller for the data in the app. It makes sure that the right information goes to the right places, so everything runs smoothly.

Pros of Using `Redux` in Your Application

Redux might seem complex at first, but it comes with several advantages that make learning it worthwhile:

Redux can be used with other front-ends frameworks not only in React applications (for example Angular.js, Vue.js, and Next.js).
Redux allows you to store all the states in a central store, instead of scattering states across many components. This makes it easier to understand, track, and manage the application state.
Many large companies use Redux to manage the state of their application.

Cons of Using `Redux` in Your Application

Using Redux can make your app more complicated, especially if you're new to it. You'll need to learn new concepts and write more code, which might take time to understand and use.
Redux needs more code compared to useState().
If your app is small or doesn't have complex state needs, using Redux may be unnecessary.
Debugging can be challenging in a complex Redux setup.

How to Use `Redux` in Your Application:

First, you'll need to install the Redux package:

Installing redux into your Code editor

The gif above shows that I ran three commands together in the terminal. This is a personal preference.

What are these commands doing:

npm install redux installs the Redux library.
react-redux signifies that Redux is being used in a React application. It provides integration.
@reduxjs/toolkit simplifies Redux, especially for beginners. It offers helpful tools and abstractions that make working with Redux easier and less complex for new developers.

Next, check to make sure that Redux has been added to your dependencies. Look at your package.json file. It contains important information about the packages used in your project.

react-dependencies

Then import {configureStore} from @reduxjs/toolkit to the main.js or index.js.

Use the provider tag to wrap up the main component of our app. Provide the store as an attribute (props) to the provider. This makes the store accessible globally throughout our application.

import of the store and provider tag

Let's go over some key terms used in Redux:

Store: A "container" in our application is like a storage unit. Inside the store, we will define the reducer.

Redux operates based on the principles of a centralized store. It acts as a central store that holds the application's entire state. When any component needs access to the state or needs to be updated , it interacts with the store. The store then manages the data and propagates changes to the relevant parts of the application.

Reducer: A reducer is an object that takes two inputs: the previous state and an action. It returns the updated state based on the dispatched actions. It examines the activity and decides how to update the app's state.

Reducers in Redux control how our app reacts to user input. This flexibility makes it easy to maintain and change our code when needed. We can use the store and Provider imports to update our application.

`Redux` Example

So let's create an application that changes the colour based on the user's input and use Redux to manage state this time.

First, make a folder called components. Inside that folder, create a file named ChangeColor.jsx.

Initial state of the application

Here's the output:

static output

In your project directory, create a folder named features. Inside this folder, create a file called Color.js to hold the Redux logic for your application.

color.js

Next, we want to enable users to input their desired color. To do that, import the useState() hook like this:

ChangeColor.jsx

import { useState } from 'react';   // useState() hook

const ChangeColor = () => {
  const [color, setColor] = useState(''); 
  return (
    <div>
      <p>Progressively effective resources via business metrics.p>
      <br />
      <div className='inputBtn-container'>
        <input
          type='text'
          className='input'
        />
        <button className='btn'>change color textbutton>
      div>
    div>
  );
};

export default ChangeColor;

At the color.js. This file holds the Redux logic for your application.


// Import necessary functions from Redux Toolkit
import { createSlice } from "@reduxjs/toolkit";// Creating a slice for functionality is essential.

// Define the initial state for the slice
const initialState = "black"


// Create a slice using the createSlice function
const themeSlice = createSlice({
  name: 'theme', // Name of the slice
  initialState: { value: initialState},// Initial state for the slice
  reducers: {
    changeColor: (state, action)=>{
      state.value=action.payload // Update the color value based on the dispatched action
    },
    }
  }
})

Let's see what's going on in this code:

createSlice is a function from the Redux Toolkit that lets developers create reducers in a clear and organized way. It simplifies splitting logic and accessing it across the application. With createSlice, changing values and understanding the code become easier.
name is a string that defines the name of the slice. This name is used as a prefix for the generated action type strings.
initialState is the initial state value for the slice.
reducers are objects that take two inputs – the previous state and an action. The reducer returns the updated state based on the dispatched actions. It examines the activity and decides how to update the app's state. Reducers in Redux control how our app reacts to user input. This flexibility makes it easy to maintain and change our code when needed. We can use the store and Provider imports to update our application. Using the reducer, we can manage and update the application in a structured way. It helps us track changes according to our desired logic.
state refers to the data stored and managed by the application. It holds the current values of variables, properties, or fields that determine how the application behaves and looks.
action is a plain JavaScript object that describes an intention to change the state. It's how we communicate with the reducers to initiate state updates.

After defining the reducer logic, we can make it reusable by exporting it from the file and importing it wherever we need to manage the state. For example, in the changeColor.jsx file.

import { createSlice } from "@reduxjs/toolkit";

const initialState="black"
export const themeSlice = createSlice({
  name: 'theme',
  initialState: { value: initialState},
  reducers: {
    changeColor: (state, action)=>{
      state.value=action.payload
    }
  }
})
// Export the reducer function
export const { changeColor } = themeSlice.actions
export default themeSlice.reducer

Let's see what's going on in this code:

We will import the useSelector hook from react-redux to get data from the Redux store. This helps us get the current color value from the state.
We will import the useDispatch hook from react-redux to send actions to the Redux store. This allows us to update the color value in the state.
And finally import the Color.js file, which contains the Redux logic, including the reducer and the action for changing the color.

Then:

We get the current color from the Redux store using the useSelector hook.
We render an input element where users can type their desired color.
We define an event handler to handle changes to the input value. When the user types a color in the input, this event handler will be called.
When the user clicks the "Change Color" button, the event handler dispatches an action to the Redux store with the updated color value.

With these changes, the ChangeColor component now uses Redux to manage the state. Users can change the color of the displayed text by typing their desired color in the input field and clicking the "Change text color" button.

import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { changeColor } from '../features/Color';

const ChangeColor = () => {
  // State to hold the selected color
  const [color, setColor] = useState('');

  // Accessing the dispatch function from react-redux
  const dispatch = useDispatch();

  // Accessing the theme color value from the Redux store
  const themeColor = useSelector((state) => state.theme.value);

  // Event handler for the input change
  const handleColorChange = (e) => {
    setColor(e.target.value);
  };

  // Event handler for the button click
  const handleButtonClick = () => {
    // Dispatching the changeColor action with the selected color
    dispatch(changeColor(color));
  };

  return (
    <div style={{ color: themeColor }}>
      <p>Progressively effective resources via business metrics.p>
      <br />
      <div className='inputBtn-container'>
        <input type='text' className='input' onChange={handleColorChange} />
        <button className='btn' onClick={handleButtonClick}>
          Change text color
        button>
      div>
    div>
  );
};

export default ChangeColor;

Here's the output:

Modified State using Redux

Conclusion

The article covers two state management solutions: the useState() hook for small to medium apps and Redux for larger ones.

When choosing which to use, consider factors like app complexity, team size, and performance needs. Understanding both approaches will help you make the right choice.

You can read the Redux documentation to learn more.

If you found this article helpful, share it with others who may also find it interesting.

You can also stay updated on my latest projects by following me on Twitter and LinkedIn.

Thank you for reading💖.

Ijeoma Igboagu - freeCodeCamp.org

Learn Cloud Security Fundamentals in AWS – A Guide for Beginners

Table of Contents

What is Cloud Security?

Why is Cloud Security Important?

Key Cloud Security Concepts

What is a Root User?

How to Create an IAM User for Daily Tasks

Video Walkthrough of How to Create an IAM User:

Key Differences Between the Root User and an IAM User

Root Account

IAM User Account

What is MFA?

Understanding the AWS Shared Responsibility Model

1. AWS’s Responsibility (Security of the Cloud)

2. Customer’s Responsibility (Security in the Cloud)

RDS (Relational Database Service)

S3 (Simple Storage Service)

How to Give a User Permission

Demonstration

Testing the Policy

Conclusion

Further Reading

How to Deploy a Kubernetes App on AWS EKS

What We’ll Cover:

Prerequisites

What is a Kubernetes Cluster?

What is Amazon Elastic Kubernetes Service?

Why Use Amazon EKS for Kubernetes?

How to Create a Kubernetes Cluster Using AWS

Step 1: How to Install the Tools Needed to Create a Cluster

How to Install eksctl

How to Install kubectl

Step 2: How to Create the Elastic Kubernetes Service (EKS) Cluster

Step 3: How to Create Kubernetes Manifests

Step 4: How to Deploy the App to EKS

Step 5: How to Access Your Application

Conclusion

Resources

The Best AWS Services to Deploy Front-End Applications in 2025

Table of Contents

Why Choose AWS for Frontend Hosting?

AWS Services for Frontend Hosting

Amazon S3 (Simple Storage Service)

AWS Elastic Beanstalk

Amazon EC2 (Elastic Compute Cloud)

AWS Amplify

AWS LightSail

AWS App Runner

Conclusion

Related Articles

How to Connect Your AWS EC2 Instance to VS Code

Table of Contents

Prerequisites

What is an AWS EC2 Instance?

Why Connect Your AWS EC2 Instance to VS Code?

How to Launch and Connect Your AWS EC2 Instance to VS Code

Step 1: Create an AWS EC2 Instance

Step 2: Connect the AWS EC2 Instance to Your Code Editor

What is SSH?

Why is SSH important here?

Step 3: Install the Programming Language

1. Install Java

2. Install Maven

Step 4: Open a Remote Window

Step 5: Access Your Project Folder

Conclusion

What is Backend as a Service (BaaS)? A Beginner's Guide

Table of Contents

​​​What is Backend as a Service (BaaS)?

​​Key Features of BaaS

Why use Backend as a Service (BaaS)?

When to Use Backend as a Service (BaaS)

What are the Popular Backend as a Service (BaaS) Tools?

Clerk

Features of clerk

Pricing

Firebase

Features of Firebase

Backend Services

What is Backend as a Service (BaaS)?

Key Features of BaaS