DEV Community: Gbadebo ifedayo

Ensuring effective cloud security: Best practices and real-world insights

Gbadebo ifedayo — Wed, 08 Nov 2023 09:44:52 +0000

The widespread adoption of cloud computing by businesses has various advantages, including higher scalability and cost-effectiveness which is why 94% of companies use cloud services in 2023. However, as cloud computing becomes increasingly popular in today's digital world, cloud security becomes more crucial.
Cloud computing can be a prime target for cyberattacks because of its widespread use, 93% of organizations identify cloud security as a high priority. This places organizations in a vulnerable position where their entire business finances and reputation are at risk.
This article gives an insight into the best cloud security practices that are used by organizations to prevent cyber attacks.

What is cloud security?

Cloud security, also referred to as cloud computing security, is a collection of security controls intended to protect against cyberattacks like data breaches and safeguard cloud-based data, apps, and infrastructure. Data breaches can be caused by various factors including human error, malicious attacks, system vulnerabilities and so on.

Importance of cloud security

Organizations need to have cloud security in place when storing sensitive data in the cloud in order to protect sensitive data against breaches and illegal access. It is important as it helps organizations avoid legal and financial consequences by ensuring compliance with industry standards and data protection laws.

Consequences of inadequate cloud security

The following are potential risks faced when cloud security is not implemented properly:

Data breaches: Inadequate security can lead to data breaches, exposing sensitive information to unauthorized access. 19% of data breaches occurred due to stolen or compromised credentials in 2022 at an average cost of USD 4.50 million.
Legal and regulatory issues: Non-compliance with data protection laws can lead to legal penalties and reputational damage.
Reputation damage: Security breaches can harm a company's reputation, impacting customer trust and partnerships.
Intellectual property loss: Weak security may result in intellectual property theft, affecting competitiveness and innovation.
Financial impact: Security incidents can lead to financial losses, including remediation costs and potential legal penalties.

Shared responsibility model in the cloud

Cloud service providers (CSPs) adhere to a working framework known as the shared responsibility model, which lays out the obligations of both CSPs and their clients for securing every aspect of the cloud environment, including infrastructure, hardware, data, identities, workloads, networks, settings, and more. Therefore, responsibility is divided between the CSP and the customers.
This means that cloud providers such as Microsoft Azure, Amazon Web Service (AWS), or Google Cloud Platform (GCP) must monitor and respond to security threats related to the cloud itself and its underlying infrastructure. Meanwhile, end users including individuals and companies, are responsible for protecting data and other assets they store in any cloud environment

Compliance standards in cloud security

Cloud security compliance refers to the act and process of adhering to regulatory criteria for cloud usage according to industry guidelines and associated laws,
The absence of a cloud compliance framework may result in negative effects like fines, penalties, damages, bad press, and legal problems.
Compliance with cloud security might be difficult. However, it will be easier and more efficient to achieve full compliance if an organization uses an automated platform for managing risks and compliance. Some of these platforms are Wiz, Drata, Vanta, Microsoft Defender for Cloud etc.

Best practices for cloud security

The following practices address crucial aspects of cloud security, from access control to monitoring and compliance, helping protect an organization's data and applications from a wide range of threats.

1. Ask your cloud Provider detailed security questions:

In addition to outlining shared responsibilities, organizations should ask their public cloud vendors specific questions regarding the security protocols and procedures they have in place. This is crucial since different vendors may use varying security protocols and practices.

2. Implementing IAM:

Identity and access management (IAM) is a framework of business policies and technologies that facilitates the management and protection of data. Information technology (IT) administrators can regulate user access to vital information within their organizations by implementing an IAM framework.
To reduce risk, organizations can implement IAM systems by adhering to some of the following guidelines:

Implementing multi-factor authentication(MFA) to improve security. This adds another layer of protection in the event that hackers manage to obtain credentials such as usernames and passwords, since MFA requires extra verification, such SMS codes, email codes, and biometric scans.
Implementing IAM policies that offer permissions based on role-based access control (RBAC). This reduces the chance of unauthorized access by ensuring that users' access is granted in accordance with their different roles within the organization.

3. Data Encryption:

A crucial component of any cloud security plan is data encryption. Organizations should make sure that data is encrypted while it is in transit, as this is when it may be most exposed to attacks. This should be done in addition to encrypting any data stored in a public cloud storage service.
This guarantees that the data will remain unreadable in the event that unauthorized persons obtain access to it.

4. Network Security:

This involves the network segmentation and deployment of firewalls to monitor and manage network traffic. Real-time threat detection and blocking capabilities of intrusion detection systems(IDS) and intrusion prevention systems (IPS) provide an extra degree of protection.

5. Backups and Disaster Recovery:

In the case of a security breach or data loss, regularly scheduled backups guarantee that you have data recovered. An efficient disaster recovery plan offers a systematic approach to restoring operations following a disaster, minimizing downtime.

6. Logging and Monitoring:

Logging provides a clear record of an attacker's actions in the event that they gain access and make changes, and a Security Information and Event Management (SIEM) tool will provide real-time threat detection and quick remediation to limit damage. System administrators and security teams use logs to monitor and detect unapproved activity with the aid of a SIEM system. This monitoring process would be impossible to accomplish manually without the use of a SIEM tool.

7. Compliance and Regulations:

Organizations must thoroughly understand the requirements of relevant regulations and compliance standards such as GDPR (General Data Protection Regulation) or HIPAA (Health Insurance Portability and Accountability Act). Following these rules lowers the risk of data breaches and the related legal consequences by ensuring that sensitive data stored in the cloud is properly secured. It's also crucial to make sure your cloud provider holds the required certifications.

8. Third-Party Security:

Third-party security is the situation where any external tools, services, or apps that a company integrates with its cloud environment infrastructure are subject to a thorough security screening process. In order to avoid vulnerabilities, it also entails making sure they comply with the security standards of the company. These can include software-as-a-service (SaaS) applications, plugins, APIs, or any solution that interacts with the organization's cloud

Case studies of real-world security breaches and solutions

According to recent research, the top security-related cloud threats are misconfiguration, data exposed by users, account compromise, and vulnerability exploits. The following are some examples of real-life data breaches.

Breach 1: Capital One

An attack on Capital One’s cloud environment between March and July of 2019 compromised the personal data of approximately 100 million customers of this financial institution.
The breach started in March and was discovered almost four months later by Capital One on 19th July. Credit card numbers, birth dates, addresses, names, phone numbers, transaction history, 140,000 Social Security numbers and 80,000 bank account numbers were among the stolen information.
Paige Thompson, an employee of Amazon Web Services, was responsible for this data breach. Prior to her arrest, she had been publishing details about her activities publicly online and uploading information to GitHub. Paige Thompson, the alleged hacker, simply took advantage of a misconfiguration in the Amazon Web Services (AWS) web application firewall (WAF).

The type of cyberattack is known as a Server-Side Request Forgery (SSRF), which is a trick used to make a server execute unauthorized commands on behalf of a remote user. By using this method, the user can acquire access to private endpoints by treating the server as a proxy for requests.

Breach 2: Target

In late November of 2013, the breach began with a cybercriminal group gaining access to Target's internal network using credentials stolen from a third-party vendor, Fazio Mechanical Services.
The attackers gained access to Target's point-of-sale (POS) system through improper network segmentation, and they proceeded to infect it with malware. In addition to the personal data of over 70 million people, this spyware took the details of over 40 million credit cards that were used at Target stores. Target's system was being watched by antimalware software, but it was not monitored and configured properly. The software was not able to automatically remove the malware, and the alerts it raised went uninvestigated.

In the aftermath of the breach, Target invested 100 million dollars into improving its cybersecurity and paid out an additional 18.5 million dollars in settlement costs.
Target carried out the following in response to the breach:

Increase monitoring and recording of alerts
Enhance segmentation of networks
Restrict vendor access
Reset 445,000 employee and contractor passwords
Introduce 2-factor authentication

Breach 3: Equifax

The Equifax data breach occurred between May and July 2017, and although the initial Equifax data breach date was March 10, 2017, the attackers don’t seem to have done much of anything immediately.
The criminals exploited a vulnerability in Apache Struts, a widely used open-source framework for developing web applications.
The main breach wasn’t until May 13, 2017 in what Equifax referred to as a “separate incident”, data from the compromised server was being moved by the attackers into other areas of the network. To make it more difficult for Equifax's admins to detect, the attackers encrypted the data they were moving.
Equifax used tools to sniff out instances of data exfiltration like this by analyzing network traffic within the company. However, a public-key certificate that is acquired from third parties is required to accomplish that. This certificate must be renewed annually, but Equifax hadn't done so for almost ten months.
It took another full month of internal investigation before Equifax publicized the breach, on September 8, 2017.
The breach exposed the personal information of approximately 147 million individuals, including names, addresses, Social Security numbers, birthdates.

Cloud security tools offered by cloud service providers

Most organizations rely on cloud service providers (CSP) for securing sensitive data. These providers include Google Cloud, Microsoft Azure, and Amazon Web Services (AWS); As well as other less-popular ones such as Oracle, IBM, Red Hat, DigitalOcean, Alibaba.
Some security tools offered by these cloud service providers are:

Identity and Access Management (IAM)
Network Security
Encryption
Firewalls and WAF (Web Application Firewall)
Threat Detection and Prevention
Security Monitoring and Logging

Conclusion

The article highlights the significance of cloud security to organizations that utilize cloud computing, provides a list of recommended measures, and provides real-life instances of data breaches. In addition to protecting their sensitive data, organizations may also prevent other negative effects of inadequate cloud security by employing these insights and taking preventive measures. Developing a culture of cybersecurity awareness, being informed, and responding to new threats are all essential components of an organization's cloud security journey.

Resources

Exploring lesser-known React hooks and their importance

Gbadebo ifedayo — Fri, 01 Sep 2023 17:17:50 +0000

Hooks which were introduced in React version 16.8, provide function components access to React's state and lifecycle features. Hooks make components more organized and reusable by enabling developers to divide components into smaller parts that can be joined easily.
The most commonly used hooks which are useState and useEffect are useful in React apps as useState allows developers to add state to functional components, while useEffect helps manage side effects such as data fetching and DOM updates. Both hooks can be combined to carry out complex tasks.
Although these fundamental hooks are necessary for creating React applications, this article focuses on uncovering lesser-known React hooks that offer specialized solutions for improving performance and simplifying code.

useContext

The useContext hook is a fundamental part of React that provides a better way to manage state globally. It provides a way to share state across multiple nested components without needing to pass props through every level of the component tree.

Use case: counter app

When a state is passed down nested components without the use of the useContext hook like in the example below, it results in what is called "prop drilling".

import React, { useState } from 'react';

function Counter () {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter</h1>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
      <ParentComponent count={count}/>
    </div>
  );
};

function Counterchild ({ count }) {
  return (
    <div>
      <h2>Counter Child</h2>
      <ChildComponent count={count}/>
    </div>
  );
};

function Counterdisplay ({ count }) {
  return (
    <div>
      <h3>Counter Display</h3>
      <p>Count: {count}</p>
    </div>
  );
};

export default Counter;

In this example, the count state is defined in the Counter component, and it's passed down as props through the Counterchild to the Counterdisplay. Each component receives the count state as a prop, allowing them to display it's value.
Although this method is effective, it becomes lengthy when the state is passed down through many nested child components.
To use the useContext hook, we first import createContext and initialize it.

import { useState, createContext } from "react";

const count = createContext()

Next, we'll wrap the tree of components that require the state with the context provider.

function Counter () {
  const [count, setCount] = useState(0);

  return (
<UserContext.Provider value={user}>
    <div>
      <h1>Counter</h1>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
      <Counterchild count={count}/>
    </div>
</UserContext.Provider>
  );
};

To make use of the previously created context located in the parent component, we need to import useContext.

import { useContext } from "react";

Now, our context is available for use in the child component.

function Counterdisplay() {
  const user = useContext(count);

  return (
    <div>
      <h3>Counter Display</h3>
      <p>Count: {count}</p>
    </div>
  );
}

useRef

The useRef hook allows us to create a mutable reference to a value or a DOM element. Unlike the useState hook, useRef doesn't cause a re-render when its value changes.
useRef accepts one argument as the initial value and returns one object called current. For example:

const initialValue = ''
const reference = useRef(initialValue)

A reference can be accessed and changed using the current object:

  useEffect(() => {
    reference.current = 'My Reference';
  });

Use case 1: Tracking application re-renders

We would start an infinite loop if we attempted to count how many times our application renders using the useState hook as it causes a re-render itself. To avoid this, we can use the useRef Hook:

import { useState, useEffect, useRef } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

In the example above we set the initial value of the reference with useRef(0) and access the value of count using count.current.

Use case 2: Focusing the input element

useRef can be used to hold a reference to a DOM element, we can then directly access and perform functions on this element by carrying out the following:

Define the reference to be used in accessing the element
Assign the reference to the ref attribute of the element to be interacted with

import { useRef } from "react";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

In the example above, the reference that was created was assigned to the input tag, and we were able to focus the element using the reference assigned to it.

Limitations

Updating a reference should be done inside a useEffect callback or inside handlers (event handlers, timer handlers, etc.), not inside the immediate scope of the functional component's function, as the function scope of the functional component should either calculate the output or invoke hooks.

import { useRef } from "react";

function App() {
  const count = useRef(0);
      useEffect(() => {
    count.current++; // Success

    setTimeout(() => {
      count.current++; // Success
    }, 1000);
  }, []);

  count.current++; // Error
}

useReducer

The useReducer hook is used for managing complex state logic in a more organized way. It's an alternative to useState and is particularly useful when state changes entail numerous actions.
useReducer takes in a reducer function and an initial state. It returns the current state and a dispatch function that you can use to send actions to update the state based on the logic defined in the reducer function

Use case: Creating a counter

import { useReducer } from 'react';

// Reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

function Counter() {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

In this example, the reducer function handles different actions ('INCREMENT' and 'DECREMENT') to update the state. The useReducer hook initializes the state with { count: 0 } and provides a dispatch function to trigger these actions.
When we click the "Increment" button, it dispatches an action of type 'INCREMENT', which causes the state to be updated and the count to increase. Similarly, clicking the "Decrement" button dispatches an action of type 'DECREMENT', reducing the count.

useCallback

The useCallback hook is primarily used to memoize functions, preventing their needless re-creation on each render. This can be very helpful when sending functions to child components as props.

Use case: Improving performance

The useCallback's basic syntax is as follows:

import React, { useState, useCallback } from 'react';

function ChildComponent({ handleClick }) {
  console.log('ChildComponent rendered');
  return <button onClick={handleClick}>Click me</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  console.log('ParentComponent rendered');

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent handleClick={increment} />
    </div>
  );
}

The increment function is memoized because the useCallback hook ensures the function remains the same between renders if the dependencies (count in this case) haven't changed. This prevents the unnecessary re-creation of the increment function when the ParentComponent re-renders.
The increment function is then passed as the handleClick prop to the ChildComponent. Thanks to useCallback, the handleClick prop will remain stable between renders, even as the ParentComponent updates its state.

useMemo

The useMemo and useCallback hooks have some similarities. The main difference is useMemo returns a memoized value whereas useCallback returns a memoized function.

Use case: Improving performance

The useMemo Hook can be used to keep expensive, resource intensive functions from needlessly running, thereby improving the performance of the React app.

import React, { useState, useMemo } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Using useMemo to optimize a calculation
  const squaredCount = useMemo(() => {
    console.log('Calculating squaredCount');
    return count * count;
  }, [count]);

  console.log('ParentComponent rendered');

  return (
    <div>
      <p>Count: {count}</p>
      <p>Squared Count: {squaredCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ParentComponent;

In this example, the useMemo hook is used to optimize the calculation of the squaredCount value and the calculation depends on the count state. By specifying [count] as the dependency array, we ensure that the calculation is only recomputed when the count state changes.

When you click the "Increment" button, the count state is updated, triggering a re-render of the ParentComponent. However, thanks to the useMemo optimization, the calculation of squaredCount only occurs when the count state changes, avoiding unnecessary recalculations.

Conclusion

React hooks are crucial tools for front-end development for creating dynamic and effective applications. This article delves into lesser-known hooks like "useContext," "useRef," "useReducer," "useCallback," and "useMemo" that provide solutions for various challenges. I urge you to experiment with and include these hooks in your projects to attain a better understanding of React's capabilities.

Resources

Complete React hooks documentation

How to create a Currency Converter app using ExchangeRate REST API

Gbadebo ifedayo — Wed, 19 Jul 2023 23:47:14 +0000

It is impossible to underplay how crucial currency converters are for navigating the complex nature of the global economy, whether they take the shape of web platforms, smartphone applications, or integrated banking systems.
The ability to accurately price goods and services across borders, as well as the ability to track changes in exchange rate valuations in real-time, make currency conversion valuable in international trade, foreign exchange, travel and other areas of life.
This article demonstrates how to create a Currency Converter app in Vanilla JS using a REST API.

Pre-requisites for this project

Understanding of API interaction
An ExchangeRate-API account, create one here
Knowledge of jQuery animation

The repository for this project is located at Github; fork it to get started. A live demo of this app can also be found on Vercel.

Setting up the project

Including jQuery in the project

jQuery is a Javascript library that optimizes web development by providing solutions that shorten and simplify Javascript code. An instance of this is its collection of preset effects that can be used to manipulate the DOM.
To include jQuery in the app, we download it from jQuery and copy the jquery.min file from it into our app's root directory.

Establishing a connection to the REST API

What is a REST API?

A RESTful API is a method for online information sharing and communication across various computer systems. It functions like a collection of guidelines that allow communication between software programs. When a client (such as a web or mobile application) wants to receive or send data while using a REST API, It makes a request to the API which responds to the request by returning data that was requested by the client.

In this project, we require a REST API that can provide data containing up-to-date conversions between currencies, a great example that is used for this project is ExchangeRate-API. It also offers access to historical exchange rate data, allowing developers to retrieve rates for dates or past periods.
After creating an Exchange Rates API account, we head over to the dashboard to find our API key, URL, and information on our API usage. We can find the link to the documentation in the sidebar to learn more about ExchangeRate-API.

NOTE: Don't share your ExchangeRate API key or URL

Constructing the app

First, we create a file named index.js and insert the following code into the body tag:


        <header>
            <div class="logo">             
                <h1>currency converter <i class="fa fa-money"></i></h1>
                <p class="msg"></p>
            </div>
        </header>

        <div class="actual-page">
            <form action="">
                <label for="amount">Amount</label>
                <input type="number" id="amount" placeholder="0">
                <div class="inputs">
                    <div class="from">
                        <label for="first-input">From</label>
                        <select name="from" id="first-input" onchange="updateCurrencyName()">
                            <option value="UGX">UGX - Ugandan shilling</option>
                            <option value="USD" selected>USD - United States dollar</option>
                            <option value="UYU">UYU - Uruguayan peso</option>
                            <option value="UZS">UZS - Uzbekistani soʻm</option>
                            <option value="VES">VES - Venezuelan bolívar</option>
                        </select>
                    </div>
                    <div class="to">
                        <label for="second-input">To</label>
                        <select name="to" id="second-input" onchange="updateCurrencyName()">    
                            <option value="EUR" selected>EUR - Euro</option>
                            <option value="FJD">FJD - Fijian dollar</option>
                            <option value="FKP">FKP - Falkland Islands pound</option>
                            <option value="GBP">GBP - British pound</option>
                            <option value="GEL">GEL - Georgian lari</option>
                        </select>
                    </div>
                </div>
                <button class="btn" onclick="getExRate()" type="button">Convert <i class="fa fa-exchange"></i></button>
            </form>
        <script src="script.js" defer></script>

In the code above:

-We create two select tags whose values represent the source and destination currencies respectively.

The value of the selected option tag is sent to the API and used to obtain conversion rates.

To include additional currencies in the app, more option tags can be added.
Next, the app is styled in style.css:

Next, we create a script.js file in the app's directory to store the code that interacts with the API to fetch the conversion rates.

//Define variables
var fromCurrency=document.querySelector('#first-input');
var toCurrency=document.querySelector('#second-input');
var button=document.querySelector('.btn');
var message=document.querySelector('.msg');
var input=document.getElementById('amount');
const submit=document.querySelector('.submit');
var outputText
const actualPage=document.querySelector('.actual-page');

The first step is to define the variables that will be used in this project. Some of these variables will be assigned to DOM elements.
Next, we develop a function that translates the display price figures to currency format and reduces them to a maximum of two fraction digits. To achieve this, we use Javascript's Intl.NumberFormat which accepts two parameters namely:

Language which specifies what language the number is displayed in, e.g., 'en-US', 'de-DE', 'en-GB'
A list of options used to customize the result

function formatToCurrency(number,currencyCode){
    var options={
        style:'currency',
        currency:currencyCode,
        maximumFractionDigits:2,
        currencyDisplay:'symbol',
    };
    const currencyFormatText=new Intl.NumberFormat('en-US',options).format(number);
    return currencyFormatText;
};

The function above contains an object called options which contain the following properties:

style: This property determines the formatting style for the number, e.g., decimal, currency, percent
currency: This property specifies the currency code or symbol to be used for formatting the number as currency
maximumFractionDigits: This property specifies the maximum number of digits to display after the decimal point
currencyDisplay: This property determines how the currency should be displayed, e.g., symbol, code, name

Next up, we create an async function getExRate which awaits for the rates to be fetched from the API before calculating the conversion result using the rate between the currencies selected:

async function getExRate(){
    const amount=input.value;   
    const fromText=fromCurrency.value;
    const toText=toCurrency.value;
    const apiKey='72f99500f6844804f605d47c';
    const url =`https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`;
    const api=await fetch(url);
    const data=await api.json();
    const rates=data.conversion_rates;
    const exchangeRate=rates[toText]/rates[fromText];
    const result= exchangeRate*amount;
    const fromNumber=formatToCurrency(amount,fromText);
    const toNumber=formatToCurrency(result,toText);
    outputText=`${fromNumber} is equal to ${toNumber}`;
    message.textContent=outputText; 
};

The function in the code block above:

Collects the value of money to be converted, the currency it is being converted from, and the currency to be converted to
Defines a variable url to store the combination of the Exchange rates URL and API key.
Creates the variables api and data which fetches the data and converts it to a readable format respectively
Calculates the equivalent of the amount in the latter currency

Now that the functions needed for the currency conversion is complete, we call it whenever the convert button is clicked.

button.addEventListener('click',getExRate);

Creating animations with jQuery

Now that the functionality of the app is complete, we add animations that are performed once the app is loaded:

//screen load animations
$(document).ready(function(){
    $('.actual-page').fadeIn(1500);    
    $('.btn').animate({top:'0'},800);
    $('h1').animate({bottom:'0'},800);
    $('figure').animate({top:'0'},1200);
    $('label').animate({bottom:'0'},1000);
}
);

The jQuery code above is placed in a $(document).ready() function and is executed once only when the DOM is fully loaded.
fadeIn() used in the first function is one of the preset effects available in the JQuery library, to learn more on these effects, click here.
As for the remaining functions, the targeted elements have their position property set to relative, and have all been displaced in a direction. The code above reverts their displacement to the default position using the animate function.
In jQuery, DOM elements are accessed with the following methods:

By Tag Name e.g $('div')
By ID e.g $('#myElement')
By Class e.g $('.myClass')
By Using CSS Selectors e.g $('#myDiv .myClass')
By Traversing the DOM e.g .parent(), .children(), .siblings(), .find(), etc.

Conclusion

In summary, this article gives an overview of REST APIs and then demonstrates how to use JavaScript to retrieve data from ExchangeRate-API in a currency converter application. By following the steps mentioned, we can provide seamless currency conversion functionality for our application.

Resources

Preventing Data Breaches in React Applications with Supabase

Gbadebo ifedayo — Fri, 10 Mar 2023 09:57:04 +0000

The world of data security has become increasingly important in recent years due to the rise of cyber threats and data breaches. It is a concept that incorporates all aspects of information security, from hardware and storage device physical security to administrative and access controls, as well as the logical security of software applications. It also comprises policies and procedures for the organization.

When implemented properly, robust data security strategies safeguard an organization's information assets not just from cybercriminal activity but also from insider threats and human errors, which are still among the primary causes of data breaches today. According to a Verizon survey, 85% of data breaches are caused by human error, such as accidental data exposure or misconfigured security settings. This suggests that while organizations may implement data security measures, there’s room for improvement regarding employee training and awareness.

Furthermore, a study by Risk Based Security found that there were 36 billion records exposed in data breaches in the first half of 2021, an increase of 18% from the previous year. This highlights the ongoing cyber-attack threat and the need for organizations to monitor and update their data security measures continually.

These statistics highlight the importance of data security and the need for organizations to implement adequate data security measures to protect their sensitive information.

The significance of data security, its compromises, and solutions

The importance of data security cannot be overstated, as it protects sensitive and confidential information from unauthorized access, theft, or damage. The compromise of data is a significant challenge that organizations face. Data breaches can lead to the theft, modification, or destruction of sensitive information, resulting in financial losses, legal liabilities, and damage to an organization's reputation.

Organizations must include data security as a high priority. Governments worldwide have established regulations that require organizations to protect sensitive data. For instance, the General Data Protection Regulation (GDPR) in the European Union and the Health Insurance Portability and Accountability Act (HIPAA) in the United States are just a few examples of government regulations. Organizations must adhere to these regulations to avoid legal penalties, fines, and damage to their reputation. Data security measures such as access controls, encryption, firewalls, and security audits help mitigate the risks of data compromise. Employee training and awareness programs can also help prevent human error-related data breaches.

Data security maintains business continuity and helps organizations comply with government regulations. Proper data security measures help to prevent cyber-attacks, data breaches, and other forms of malicious activity that can result in significant financial and reputational damage.

In summary, implementing proper data security measures can mitigate the challenges of data compromise.

Types of data security

Input validation
Input validation is the process of ensuring that user input is accurate and consistent. To avoid malicious information that could exploit weaknesses in the application, it entails validating the format, type, and length of data supplied by users.

Access Control
The access control process is simply limiting access to sensitive information or program functionalities to authorized users. It entails establishing user roles and permissions, putting authentication systems in place, and enforcing rules that regulate who has access to what data.

Writing Secure Code
Writing code resistant to attacks and exploits is a key component of secure coding methods. This includes adopting secure programming techniques like input sanitization, error handling and preventing typical programming problems like buffer overflows and SQL injection.

Encryption
Encryption converts plain text data into an incomprehensible format to prevent unauthorised access. Data in transit, like network conversations, and data at rest, like passwords and other sensitive files, can be protected by encryption.

Regular Security Audits
The application's security controls are examined periodically during routine security audits, where flaws and vulnerabilities are identified, and corrective action is implemented to curb these flaws and vulnerabilities. For an application to remain secure over time, this includes inspection, code reviews, and vulnerability assessments.

Firewalls
Firewalls are a barrier between an organization's network and external networks, preventing unauthorized access and filtering incoming traffic to block potentially harmful data.

Data Backup and Recovery
Data backup and recovery is the process of creating and storing copies of an organization's data in case of data loss or a breach. The backup process involves making a duplicate copy of critical data and storing it in a secure location, either on-site or off-site. Data backup and recovery ensures that data can be restored during data loss or a breach.

The need for a Data Security Plan

A data security plan provides a framework for ensuring that data is protected and that employees know their responsibilities in maintaining data security.
A data security plan should include access controls, encryption, firewalls, and data backup and recovery. It should also outline procedures for responding to security incidents, such as data breaches, and for educating employees on data security best practices.
Organizations can ensure they are prepared for potential security threats and take all necessary measures to protect their sensitive data by having a data security plan in place.

Key factors Organizations consider when designing a Data Security Plan

Identify categories: The first stage in creating a data security strategy is to determine the various categories of data that the application will deal with. Sensitive data such as personally identifiable information (PII), financial information, medical data, or other private information can fall under this category. Categorizing the data can determine the level of security necessary to safeguard each piece of data.
Assess Data Flow: Knowing how data moves through the application is crucial. This involves identifying the locations and processes used to gather, store, process, and send data. Understanding the data flow simplifies spotting potential weaknesses and putting the necessary security precautions in place.
Risk Assessment: Perform a thorough risk assessment to identify potential risks to data security. This includes identifying potential threats like unauthorized access, data theft, or data loss and analyzing the impact of each potential risk on the application and its users.
Implement industry-recognized best practices: To protect the application's and its data's security. This entails using secure coding techniques, regularly fixing vulnerabilities, and conducting frequent security assessments.
Incident Response Plan: Even with the best security measures in place, a data breach is always possible. Developing an incident response plan is essential to quickly and effectively respond to security incidents.

There are numerous open-source platforms available that provide exciting tools and services to curb data breaches. Among these platforms, Supabase stands out as a reliable and secure platform.

What is Supabase?

Supabase is an open-source Firebase alternative that provides a range of developer-friendly tools and services for building scalable and secure applications.
Behind the scenes, Supabase utilizes a PostgreSQL database. It is regarded widely as one of the best tools based on Postgres - a highly scalable relational database, making it easy to build and scale secure applications. Supabase stands out as a good data security platform for several reasons:

Security: Supabase has built-in end-to-end encryption, role-based access controls, and automated backups, ensuring that data is protected from unauthorized access and accidental loss.
Scalability: Supabase is built on PostgreSQL, known for its scalability, making it easy to scale applications as they grow.
Developer-friendly tools: Supabase offers RESTful APIs, real-time event streaming, and other developer-friendly tools that make building and deploying applications easy.
Cost-effectiveness: Supabase offers flexible pricing plans that allow organizations to pay only for the resources they use, making it a cost-effective option for data storage.
Built-in compliance: Supabase complies with industry standards such as HIPAA, GDPR, and SOC 2, making it a suitable platform for organizations that need to comply with these regulations.

Overall, Supabase can be a valuable, cost-effective tool for organizations looking to implement a proper data security plan, focusing on security, developer-friendly tools, and built-in compliance with industry standards.

Conclusion

With Supabase, developers can build React applications with robust data security measures, reducing the risk of data breaches and ensuring the safety of sensitive information.

Resources

The following resources can help you get started with Supabase:
Supabase Documentation
Supabase Documentation for React

How to create a Newsletter feedback form using React and Supabase

Gbadebo ifedayo — Wed, 01 Mar 2023 23:46:40 +0000

Businesses are looking for new ways to connect with their customers as more and more customers prefer online communication channels. Allowing clients to provide their information and receive regular updates and promotional offers via email is an excellent solution. This does not only enables companies to stay in touch with their clients, but additionally enables businesses to precisely target their marketing campaigns and customize their messaging. This article will offer a step-by-step tutorial on how to create an app that allows users to sign up to receive feedback.

Pre-requisites for this project

Latest version of Node.js installed
Knowledge of React and React hooks
A Supabase account, you can create one here

You can find the repo for this project on Github, a live demo of the app is hosted on vercel.

Setting up the project

First, create a new react app by running the following in the terminal:

npx create-react-app react-feedback-form

After that, run the following to install React Router in the project:

npm install react-router-dom@5.3.3

Next, integrate the Supabase client library into your project using the following:

npm install @supabase/supabase-js

Running npm start will launch the project on the local development server at http://localhost:3000/ in our browser.

Setting up our database in Supabase

What is Supabase?

Supabase is a cloud-based platform that provides a real-time database and API for online and mobile apps. It allows for simple database setup, administration, and scaling while providing a user-friendly interface for data management and visualization. Supabase also provides features such as authentication, authorization, and secure access control to keep data safe and secure.
To get started, create an account in Supabase here.
Next, navigate to the All projects tab where you should see this page and click the New project button the project as shown below.

Note that the project is named react-feedback-form, feel free to name it any name that deems fit.

Navigate to the table editor tab, where you will construct a table to store the database information.

The table used for this project will contain 5 columns:

An id which is included in every table by default and assigns an unique key for our data in a chronological order
name, email, company, role columns which accepts a text input and has a null default value

After setting your parameters, go ahead and save the table and it is ready to go.

When you click on the newly created table in the table editor tab, the following should appear:

Constructing our components

After setting up the database, navigate to the src directory of your React app and create a components folder to store all the app's components.

Interacting with the Database

You can locate the Project URL and Project API key, which are needed to operate your database, on the API tab in Settings. Don’t share your Supabase Key or Supabase URL as they’re sensitive credentials., so we create a .env file in your project's root directory to store our it here in a REACT_APP_SUPABASE_ANON_KEY variable.
Next, in supabaseclient.js we input the following:

import { createClient } from '@supabase/supabase-js' 

const supabaseUrl = 'https://dbyqqbijztrdgdzysseg.supabase.co' //project URL 
const supabaseKey = process.env.REACT_APP_SUPABASE_ANON_KEY //API key stored in the .env file
export const supabase = createClient(supabaseUrl, supabaseKey) //interact with the database using the URL and API key

Next up, create the Form component which collects the information to be stored in the database.

import React,{useState} from 'react'
import {useHistory} from 'react-router-dom'
import { supabase } from './supabaseclient'
import logo from '../images/logo.png'

function Form(){

    const [name,setName]=useState('')
    const [email,setEmail]=useState('')
    const [company,setCompany]=useState('')
    const [role,setRole]=useState('')

    const history=useHistory() //assign history function to a variable


    async function handleSubmit(e){ //function to be carried out when form is submitted
        e.preventDefault()

        await supabase.from('feedback form').insert([ //insert values into database
            {name: {name},
            email:{email},
            company:{company},
            role:{role}} 
          ]).then((res)=>{ //function to be carried out if action is successful
            console.log('success');
            console.log(res)
            history.push('/success')} //changes page url to render success component
            ,function(err){
                console.log(err)
                console.log('error')
                history.push('/failure') //changes page url to render failure component
            })
    }


    return(
        <div className='form'>
            <img src={logo}/>
            <h1>Sign up for Feedback</h1>
            <form onSubmit={handleSubmit}>
              <input type='text' name='name' placeholder='Full Name' onChange={(e)=>{setName(e.target.value)}}/> 
              <input type='email' name='email' placeholder='Email' onChange={(e)=>{setEmail(e.target.value)}}/>
              <input type='text' name='company' placeholder='Company' onChange={(e)=>{setCompany(e.target.value)}}/>
              <input type='text' name='role' placeholder='Role' onChange={(e)=>{setRole(e.target.value)}}/>
              <input type='submit' value='Submit' className='submit'/>
            </form>
        </div>
    )
}

export default Form

React, useState, and useHistory are imported first in the code above. useHistory is used in this project to render the Success and Failure component by manipulating the browser URL; the supabase component is then imported after that and useState is used to store the values inputed in the form.
Four text areas on the form are used to collect the following information -- Name, Email, Company, and Role. Submitting the form invokes the handleSubmit function, awaits the values entered in the form to be uploaded to the database, and then display the subsequent page based on whether the information was successful or not through the use of an async function.

Styling the app

After successfully creating the Form component which is the major part of the app, style the app in App.css

.form{
    width: 40%;
    background-color: rgb(205, 174, 143);
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 25px;
    box-shadow: 0px 0px 15px  grey;
}
.form img{
   width: 30%;
   margin: auto;
   display: block;
}
.form h1{
    text-align: center;
    margin-bottom: 30px;
    color: rgb(54, 46, 46);
}
.form form input{
    width: 80%;
    display: block;
    height: 40px;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    outline: none;
    box-shadow: 0px 0px 5px grey;
    margin: auto;
    margin-bottom: 15px;
}


.form .submit{
    width: unset;
    font-size: 18px;
    height: unset;
    padding: 15px 50px;
    cursor: pointer;
    background-color: rgb(220, 192, 81);
    border-radius: 25px;
    transition: background-color,color 0.3s ;
    color: black;
    font-weight: 700;
}   
.form .submit:hover {
   background-color: rgb(218, 142, 66);
   color: white;

}

Defining the Success and Failure component

Input the following code into the success component:

import React from "react";
import {Link} from "react-router-dom" //import Link element which is used to navigate the app

function Success(){
    return(
        <div className="success">
            <h2>SUCCESSFUL!</h2>
            <p>Congratulations, you have sucessfully signed up. Have a nice day!</p>
            <Link to='/' className="link">Go Back</Link> //React Router Link to return to home page

        </div>
    )
}

export default Success

Next up, style the success component

The following is the code for the failure component:

import React from "react";
import {Link} from "react-router-dom"

function Failure(){
    return(
        <div className="failure">
            <h2>FAILED!</h2>
            <p>Sorry, there was a problem while trying to sign up.</p>
            <Link to='/' className="link">Retry</Link> //React Router Link to return to home page


        </div>
    )
}

export default Failure

Thus far, you have successfully developed an operational form as well as success and failure components that will be shown in response to the outcomes of the query to the database. To navigate the pages of the Feedback Form app, the React Router is u.

import React from 'react';
import './App.css';
import {BrowserRouter as Router,Route} from 'react-router-dom'
import Form from './components/form';
import Success from './components/sucess';
import Failure from './components/failure';



function App() {
  return (
    <div>
      <Router>  
        <Route exact path='/'><Form/></Route>
        <Route path='/success'><Success/></Route>
        <Route path='/failure'><Failure/></Route>
      </Router>
    </div> 
  )
}

export default App;

In the code above, first Router is imported which serves as a parent element for all other elements. A Route changes the page to a component when it's path matches that of the page's URL.
Here's is what a live version of the app looks like:

Conclusion

In conclusion, creating an app that allows customers to sign up for emails is a powerful tool for businesses looking to improve their customer engagement and retention rates. This article demonstrates how to make use of Supabase and React Hooks to accomplish this goal.

How to create a video streaming app using React and Vime

Gbadebo ifedayo — Tue, 20 Dec 2022 12:41:42 +0000

Video streaming has transformed the way video media is delivered to us online as it allows users to watch videos without the having to download them.
This is highly convenient as it saves us the time spent downloading a video and the storage space required for downloaded content.
It is a key resource for information sharing in today's world, serving educational, entertainment, professional, and other functions.

Vime

Vime is a simple React framework that provides a flexible, expandable media player that can be used with a variety of Javascript frameworks like React, Vue, Angular, and Svelte. This project will utilize a sample clip from the Vime documentation.

Prerequisites for this project

Knowledge of CSS, and React and React hooks
Latest version of Node.js installed

This project's source code can be found on Github, and a live demo of the app is hosted on Vercel.

Setting up the project

First, we create a new React app with the following line of code:

npx create-react-app react-streaming-app

After that, run the following line of code in the terminal to include Vime in the project:

npm i @vime/core @vime/react

Running npm start will launch the project on the local development server at http://localhost:3000/ in our browser.

Constructing our components

Now that we've installed our app's dependencies, we create a components folder to store the two components that will be used in this project, Home and Video1.

First of all, we create the Home component which accesses all videos available in our app.

//components/Home.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Home(){

  return(

      <div className="home">
      <Link to="/Video" >
      <img src="https://media.vimejs.com/poster.png"/>
      <p>Video 1</p></Link>
      </div>

  )
}


export default Home

To prevent the site from refreshing when the video link is clicked, we utilize React Router. In Home.js, The React Router's 'BrowserRouter' and 'Link' are imported, Link creates an anchor tag that leads to the page specified in it's to prop, in this case /video which stores the video to be used.

//components/Videoplayer.js
import React from "react";
import {
  Player,
  DefaultUi,
  Video
} from "@vime/react";

 function VideoPlayer() {

  return (
    <div className="player">
    <Player>
      //this inserts our video into the app.
      <Video crossOrigin=""  poster="https://media.vimejs.com/poster.png">
        //specify location of video to be used
        <source data-src="https://media.vimejs.com/720p.mp4" type="video/mp4" />
        <track
          default
          kind="subtitles"
          src="https://media.vimejs.com/subs/english.vtt"
          srcLang="en"
          label="English"
        />
      </Video>
      //this loads the default UI of the vime framework
      <DefaultUi ></DefaultUi>
    </Player>
    </div>
  );
}


export default VideoPlayer

In The VideoPlayer component above, we import the dependencies needed to display the video from @vime/react and then create the body for the video. Providers load the video to be used into the app and Vime supports a couple including Youtube, Vimeo, and Dash.
The poster prop of Video fetches a thumbnail to be displayed while the video is loading, source contains the link to the clip to be loaded, DefaultUi ensures that the default interface of vime is used for the video; note that a few dependencies can be imported to create a custom User Interface for the video.

Now that our components are now defined, they are imported into App.js where they are displayed.

Importing defined components into `App` component

//App.js

import React from "react";
import { BrowserRouter as Router, Route,Switch} from "react-router-dom";
import VideoPlayer from "./components/Video";
import "./App.css"
import Home from "./components/Home";

function App(){


  return(
    <div className="player">

  <Router>
    <Switch>
      //displays only on the home page
      <Route exact path="/" ><Home/></Route>
      //displays while the path of the app is `Video`
      <Route path="/Video"><VideoPlayer/></Route>
    </Switch>

  </Router>
  </div>


  )
}


export default App

In the the App component, Router and Route are both imported and a Router component is required to house the Routes being used. Route contains a component which is rendered when the path matches the url of the page, meaning the / path of the first Route matches the initial and additional pages of the app, making the component it contains render on every page; because of this, we include exact in the Route so that it only appears on the initial page.
The second route has a path of /Video which can be visited when the Link in the Home component is clicked.

Styling the app


.home{
  width: 30%;
  text-align: center;
  border: 1px solid black;
  margin: auto;
  padding-top: 10px;
  background-color: rgb(173, 212, 207);
  border-radius: 5px;
  font-weight: 700;
  box-shadow: #73ffe0 0px 0px 20px 10px;
}
.home p{
  font-size: 20px;
}
.home img{
  width: 95%;
}
span{
  font-size: 30px;
  position: absolute;
  top: 0;
  z-index: 5;
  left: 0;
  color: white;
  padding: 30px 100px;
}

a{
  text-decoration: none;
}
.player{
  padding-top: 10vh;
}
.video{
  width: 70%;
  margin: auto;
}
.message{
  border: 1px solid black;
  font-size: 40px;
}
.message button{
  padding: 15px 30px;
}

Let's have a peek at the finished product now that our app has been styled.

Conclusion

This article demonstrates how a video streaming app can be created using React and the Vime framework, which includes several features. Feel free to expand the app by adding new videos and features.

Resources

Vime documentation

How to create an e-commerce website with React, Cloudinary, and Xata

Gbadebo ifedayo — Wed, 23 Nov 2022 17:39:09 +0000

In today's world, most shopping is done online rather than in person, making e-commerce websites increasingly important. The speed of the website is important because some can have thousands of huge images that slow down the website's performance; this is why Cloudinary is used to store and compress all images on the site. Xata is a severless database that can be used to store all of the images' data.

Prerequisites for this project

Knowledge of Javascript, React and CSS
Node.js installed
A Cloudinary account. Create one here if you don’t have an account

You can find the repo for this project in Github. Fork it to get started. A live demo of this project can be found on Vercel

Setting up our project's images in Cloudinary

After our Cloudinary account is successfully created, we navigate to the media library where we create the folders to store our images, we then upload the various images to be used in our project. Cloudinary offers a wide range of tools and effects applicable to our images to reduce their size and make our site lighter.

Setting up the project

First, we run the following line of code in the terminal to create a new react app:

npx create-react-app ecommerce-website

To store all of our app's components, we create a components folder:

Next, we run the following to install the dependencies for the project:

// install React Router 
npm i react-router-dom@5.3.3

// install uuid 
$ npm install uuidv4

// install cloudinary 
npm install cloudinary-react

In the Home component, React and the usestate hook are imported, it is then exported in order for it to be rendered in the app.js file.
Following that, we import and utilize React Router to show the app's components based on the url of the page. Then, we use useState hooks to save both the items in the cart and current category.


import React,{useState} from "react";
import {BrowserRouter as Router,Route} from "react-router-dom"


function Home (){
    const [cartItems,setCartItems]=useState([])
    const [categ,setCateg]=useState()


  return ()

}

export default Home

After that, we'll utilize useState to build an array of objects that will serve as our products. Each product is assigned an id that is obtained using uuid. We import it into the app with import {v4 as uuid} from 'uuid'

    const [products,setProducts]=useState([
        {
            title:'Blender',
            price:'15',
            categ:'electronics',
            id:uuid()
        },
        {
            title:'Apple airpods',
            price:'200',
            categ:'electronics',
            id:uuid()
        },
        {
            title:'T-shirt',
            price:'20',
            categ:'clothing',
            id:uuid()
        },
        {
            title:'Shorts',
            price:'10',
            categ:'clothing',
            id:uuid()
        },
        {
            title:'Book-1',
            price:'10',
            categ:'books',
            id:uuid()
        },
        {
            title:'Book-2',
            price:'10',
            categ:'books',
            id:uuid()
        },
        {
            title:'Barbell',
            price:'5',
            categ:'fitness',
            id:uuid()
        },
        {
            title:'Dumbbell',
            price:'10',
            categ:'fitness',
            id:uuid()
        },
        {
            title:'Phone-1',
            price:'300',
            categ:'phones',
            id:uuid()
        },
        {
            title:'Phone-2',
            price:'500',
            categ:'phones',
            id:uuid()
        },
        {
            title:'Toy truck',
            price:'17',
            categ:'toys',
            id:uuid()
        },
        {
            title:'Fidget spinner',
            price:'20',
            categ:'toys',
            id:uuid()
        }


    ])

Building the functions of the app

The next step is to build functions to carry out the app's various tasks. To do that, we add the following in the home component:

    const addToCart=(id)=>{
        setCartItems((prevState)=>[...prevState,
            products.find((item)=>item.id===id)
        ]);
    }


    const removeFromCart =(id)=>{
        setTimeout(()=>{setCartItems(cartItems.filter((item)=> item.id !== id))},0)
    }

In the code above, we:

Defined the addToCart function, which accepts an id argument and adds to the cart any product whose id property matches the id argument.
Defined RemoveFromCart function which accepts an id argument and deletes any product whose id property matches the id argument from the cart.

Constructing our components

After that, we build the individual components, which are imported into the Home component later. They are:

Category
Productlist
Productpage
Cart
Cartbutton

The first component is the Category component, which contains the categories array, and stores the many groups that will be used in this project. For each category, we use the Javascript map technique to generate a div with an image and a name. It is passed a changecateg props, which delivers the clicked category to the home component, allowing the correct list of products to be presented.

import React,{useState, useEffect} from "react";
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {Link} from "react-router-dom"


function Category({changeCateg}){
   // define categories of products in the app 
    const categories=['electronics','clothing','books','fitness','phones','toys']

   // access cloudinary account 
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'dhdmchgsh'
    }
  });
    return(
        <div className="categories">
            <h1>Shop by Category</h1>

            {categories.map((category)=>{

               // fetch image from cloudinary based on category 

                var myImage=cld.image(`categories/${category}`);

                    return (
                    <div className="category">
                        <Link to='/products' onClick={()=>changeCateg(category)} className='category-link'>
                          <AdvancedImage cldImg={myImage} className="image"/>
                          <p>{category}</p>
                        </Link>                        
                      </div>

                    )})}
        </div>
    )
}

export default Category

The cld variable helps us to access our cloudinary account, the Advancedimage component contains the myImage prop which passes a string to cld to retrieve the image for each category.
The React Router Link is imported and then used to change the url of the app to /products, this triggers the Router to display the Productlist component.

import React from "react";
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {Link} from "react-router-dom"



function Productlist ({list,category}){
    const cld = new Cloudinary({
        cloud: {
          cloudName: 'dhdmchgsh'
        }
      });

      const filteredProducts=list.filter((product)=>product.categ==category)
    return(
      <div>
      {filteredProducts.map((item)=>{
      var myImage=cld.image(`products/${item.title}`);
        return(
          <div className="product">
            <Link to={`/products/${item.title}`}  className='product-link'>
              <AdvancedImage cldImg={myImage} className="image"/>
              <p>{item.title}</p>
              <span>${item.price}</span>
            </Link>
          </div>
        )
      })}
      </div>

    )
}

export default Productlist

Productlist is a component that renders all the products available for a selected category. It is passed both list and category props.
list inserts the array of products into the Productlist component while category is the category selected. filteredProducts checks the list array and returns products whose categ property matches the selected category.
When a product is clicked, we use React Router useParams to change the url of the page to match the product.

import React from "react";
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {useParams} from "react-router-dom";


function Productpage({addToCart,list}){
    const cld = new Cloudinary({
        cloud: {
          cloudName: 'dhdmchgsh'
        }
      });
      const {title}=useParams()

    return(
      <div>
            {list.filter((item)=>item.title === title).map((item)=>{
              var myImage=cld.image(`products/${item.title}`)
              return(
              <div className="product-page">
                <AdvancedImage cldImg={myImage} className="big-image"/>
                <div>
                  <h5>{item.title}</h5>
                  <p>${item.price}</p>
                  <button className="firstbtn" onClick={()=>{addToCart(item.id)}}>ADD TO CART</button>
                  <button>BUY NOW</button>
                </div>
              </div>
              )})}
      </div>
    )
}

export default Productpage

Following that is the Productpage component, which shows product information. It is supplied the 'list' props, which represents the array of products, and addToCart is a function that is called when the first button is clicked.
We import useParams then it is assigned title, this changes the url of the app based on the title property of the product that is clicked. Click here to learn more about useParams.

import React from "react";
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";

function Cart({cartItems,removeItem}){
    const cld = new Cloudinary({
        cloud: {
          cloudName: 'dhdmchgsh'
        }
      });
    return(
        <div >
            {cartItems.map((item)=>{
                var myImage=cld.image(`products/${item.title}`)
                return (
                <div className="cart">
                    <AdvancedImage cldImg={myImage} className="cart-image"/>
                    <div>
                        <h6>{item.title}</h6>
                        <p>${item.price}</p>
                        <button onClick={()=>{removeItem(item.id)}}>DELETE</button>
                    </div>
                </div>
                )})}
        </div>
    )
}

export default Cart

Now that we've defined the Productpage component, the next step is to create the Cart component which will display all products currently stored in the cartItems variable. It is passed a removeItem prop which deletes a product using it's id property.

import React from 'react'
import {Link} from 'react-router-dom'
import cart from '../images/cart.jpg'

function Cartbutton(){
    return(
        <div className='cart-button'>
            <Link to='/cart' className='cart-button-link'>
                    <img src={cart}/>
                    <span>Cart</span>
            </Link>
        </div>
    )
}


export default Cartbutton

We have sucessfully defined our Cart component but we still need a way to access it, this is why we create Cartbutton which renders a React Router Link component that changes the app's url to /cart which displays the cart.

Importing our components into `Home.js`

The various components to be used in this app have all been defined but need to be imported into the Home component in order to be displayed.

import Productlist from "./Productlist";
import Cart from "./Cart";
import Category from "./Category";
import Productpage from "./Productpage";
import Cartbutton from "./Cartbutton";

After that, we replace the return statement in the Home component with the following:

    return(
        <div className="home">
            <div className="header">
                <div className="logo">easy<span>Buy</span></div>
            </div>
            <Router>
                <Route path='/'><Cartbutton/></Route>
                <Route exact path='/'><Category changeCateg={categ=>setCateg(categ)}/></Route> 
                <Route exact path='/products'><Productlist  list={products} category={categ} /></Route>
                <Route exact path='/products/:title'><Productpage list={products} addToCart={addToCart}/></Route>
                <Route exact path='/cart'><Cart cartItems={cartItems} removeItem={removeFromCart}/></Route>
            </Router>
        </div>
    )

The Route containing Cartbutton is given a path of '/' so it is displayed on every page of the app. exact ensures that the corresponding component renders only when the page url is matched by the path.
Next, we style our app in app.css.

Conclusion

This article demonstrates how to create a simple e-commerce website utilizing Cloudinary and React hooks to store images and values respectively. Xata can also be used to store the products in a secure database.

Using React to create a Budget Manager

Gbadebo ifedayo — Sat, 24 Sep 2022 14:04:10 +0000

Keeping track of daily expenses can be difficult, especially if a lot of items are purchased. As a result, we might not be aware of where particular expenses in our budget are allocated, an app that keeps track of our spending and displays it in a concise, precise manner is therefore essential.
The prerequisites for this project are:

Knowledge of CSS, Javascript, and React
Latest version of Node.js installed

Getting started

First, we create a new React app in the terminal using the code below.

npx create-react-app Budget manager

Next, we create a folder in the src directory to store all of our app's components and styles.

In Parent.js file, we import React, the hooks required for our project, and define our "Parent" component.

import React ,{useState,useEffect} from "react";

function Parent(){
    return()
}
export default Parent

Next, we utilize the usestate hook to store the the list of purchases made and input text.

    const [purchases,setPurchases]=useState([])
    const [purchase,setPurchase]=useState('')
    const [dates,setDates]=useState('')
    const [category,setCategory]=useState('')
    const [cost,setCost]=useState('')

Building the operations of the app

We have to define of the activities that can be done on the app. We also define functions to update the values of the different sections of a purchase.

    const _purchase=(e)=>{
      setPurchase(e.target.value)
    }
    const _category=(e)=>{
      setCategory(e.target.value)
    }
    const _cost=(e)=>{
      setCost(e.target.value)
    }

    const savePurchase=()=>{
      setPurchases((prevState)=>[...prevState,{
        key:uuid(),
        id:uuid(),
        purchase:purchase,
        category:category,
        date:current_date,
        cost:cost,
      }
      ]);
      setPurchase('')
      setCategory('')
      setCost('')
      setDates('')
    }

    const deletePurchase=(id)=>{
      const filteredPurchases=purchases.filter((purchase)=>{
        return purchase.id !== id;
      });
      setPurchases(filteredPurchases)
    }

In the above code:

The savePurchase function appends a new object to the purchase array.
The key and id are generated with uuidv4. It is set up using npm install uuidv4 in the terminal, and the following line of code imports it into the project:

import { v4 as uuid } from "uuid";

The deletePurchase function takes in an id argument and returns a filtered purchases array.

Creating a statistics section

Our app needs a statistics area to display the budget and total money spent. The cost of each purchase is added to a totalSpent array, and the array's sum is used to determine the total amount spent.
The useEffect hook is used to perform this so that the total is executed each time the purchases array is changed.

    useEffect(()=>{
        const totalArray=purchases.map((item)=>{
          const value= item.cost;
          const num= parseFloat(value);
          return num
        });
        setSpent(
          totalArray.reduce((a,b)=>{
            return a+b
          },0));
    },[purchases])

In order to load the app, we want the proposed budget to be entered by the user. In App.js, we import the Parent component and display the app if a condition is met.

import React,{useState} from 'react'
import Parent from './components/Parent';
function App() {
  const [budget,setBudget]=useState()
  const [page,setPage]=useState(true)
  const updateBudget=(e)=>{
    setBudget(e.target.value);
  }

  const saveBudget=()=>{
    setPage(!page)
  }

  return (
    <div className="App">
      {page? <div className='createbudget'>
            <h1>Get started by creating a new budget</h1>
            <input onChange={updateBudget} type="number"/>
            <button onClick={()=>{saveBudget()}} className="createbudget">create</button></div>
            :
      <Parent budget={budget}/>}
    </div>
  );
}

export default App;

The code above displays an input field when page is set to 'true', the useState hook is used to update the value of the budget variable. When the submit button is hit, the value of page is changed to 'false', making the app display the parent component.

Defining our components

Next, we'll define the Createpurchase,Stats, and Tablelist components which will be imported to the Parent component.
Our Createpurchase component displays a form that collects the information to be stored in a purchase, it is passed a number of props, each of which is allocated to a function in the Parent component

import React from 'react'


function Createpurchase({save,pur,categ,cost,update}){
    return(
        <div className='create'>
            <h5>New Purchase</h5>
            <div>
                <label >Purchase</label>
                <input type="text" onChange={pur} value={update.pur} />
            </div>
            <div>
                <label>Category</label>
                <select onChange={categ} value={update.categ}>                    
                    <option>Housing</option>
                    <option>Food</option>
                    <option>Transportation</option>
                    <option>Utilities</option>
                    <option>Medical</option>
                    <option>Personal</option>
                </select>
            </div>

            <div>
                <label >Cost</label>
                <input type="number" onChange={cost} value={update.cost}/>
            </div>
            <button onClick={save}>save</button>
        </div>
    )
}

export default Createpurchase

The stats component displays both the total amount spent and the budget provided by the user.

import React from 'react'


function Stats({spent,budget}){
    return(
        <div className='statistics'>
            <span>
                <h6>Spent</h6>
                <p>${spent}</p>
            </span>

            <span>
                <h6>Budget</h6>
                <p>${budget}</p>
            </span>
        </div>
    )
}



export default Stats

And the Tablelist component comprises of the structure for a purchase saved in the app.

import React from 'react'

function Tablelist({purchase,category,date,cost,del,id}){
    return(
        <div className='list'>
            <p className='purchase'>{purchase}</p>
            <p className='category'>{category}</p>
            <p className='date'>{date}</p>
            <p className='cost'>${cost}</p>
            <button onClick={()=>del(id)}>delete</button>
        </div>
    )
}

export default Tablelist

The Createpurchase, Stat, and Tablelist components have been successfully defined, but they still need to be imported into the Parent.js file. We return our imported components in the Parent component and assign their props to our defined functions.

import Tablelist from "./Tablelist"
import Createpurchase from "./Createpurchase"
import Stats from "./Stats"
  function Parent({budget}){
    return(
        <div>
          <div className="dashboard">
            <Stats spent={spent} budget={budget}/>
          </div>       
          {purchases.map((row)=>(
            <Tablelist purchase={row.purchase} key={row.key} 
             category={row.category} date={row.date} cost= 
             {row.cost} del={deletePurchase} id={row.id}/>
          ))}
            <Createpurchase save={savePurchase} pur={_purchase} 
            categ={_category} cost={_cost}  update={updateValues}/>
        </div>
    )

Adding a cost tracker chart

Our budget manager is almost complete, and the final thing to be added is a chart that displays the total cost spent on each category of purchase. The chart used in this project is gotten from Recharts, it is installed with the following line of code in the terminal:

npm install recharts

To accomplish this, we first create a Chart.js file in our components folder and then import the required resources to include a chart in our app. Next, we add the chart's content.

import React from "react";
import {PieChart,Pie,Tooltip} from 'recharts'


function Chart({data}){
  return (
      <PieChart width={300} height={300}>
        <Pie
          dataKey="value"
          isAnimationActive={false}
          data={data}
          cx="50%"
          cy="50%"
          outerRadius={80}
          fill="#6bbd99"
          label
        />
        <Tooltip />
      </PieChart>
  );
}

export default Chart

An array of values will be assigned to the chart's data prop, which will be displayed in the chart.

<div className="chart">
    <Chart data={chartData}/>
</div>

chartData in the code above is an array that sums the total cost for each category.

Storing purchases using `Localstorage`

We'll utilize the javascript Localstorage method to ensure that the purchases are not lost if the user leaves the app.

    useEffect(()=>{
      const data=JSON.parse(localStorage.getItem('Purchases'))
      setPurchases(data)
    },[])
    useEffect(()=>{
      localStorage.setItem('Purchases',JSON.stringify(purchases))
    },[purchases])

The first useEffect hook's second argument is an empty square bracket so it runs only when the app is first loaded while the second is only carried out when the purchases array is modified.
Next we style our app in the Parent.css file located in the css folder.

Conclusion

This article demonstrates a simple way of utilising React to build a budget manager app. We are able to do this using React hooks to store various data to be utilised later on, and also perform functions when an array is updated.
You can get the source code for this project on Github , a live demo of the site is on Vercel.

Create a Notes app with React and javascript Localstorage.

Gbadebo ifedayo — Mon, 05 Sep 2022 20:37:30 +0000

A notes app is a crucial tool for recording information that has to be retrieved later.
In this tutorial, we'll create a working notes app with features like note deletion, we'll utilise react hooks to store the notes and use localstorage to keep our notes even when the browser is closed.

The prerequisites for this project are:

Knowledge of CSS, Javascript, React.js
Latest version of Node.js installed

Getting started

If you have npm and Node.js installed, create a new react app notes-app. We'll achieve this using npx create-react-app

Creating our components

First, we make a components folder in the app's src directory which will store our components - Note, Notes and Createnote. Additionally, it will have a CSS folder in which our app's styles will be kept.

Storing necessary data

Both the text that is presently being typed and the list of notes that we currently have must be stores in order for them to be used in the notes application.
To achieve this, in our Notes.js file we import react and useState from react.

import React,{useState} from 'react'

Then we use the useState hook to store our notes array and input text.

    const [notes,setNotes]=useState([])
    const [text,setText]=useState('')

Building the basic procedures of the notes app

We will create the functions that will update input text, save and delete a note.

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

    const saveNote=()=>{
        setNotes((prevState)=>[
            ...prevState , {
                key:uuid(),
                id:uuid(),
                text:text,
            }
        ]);
        setText('');
    }

    const deleteNote =(id)=>{
        const filteredNotes=notes.filter((note)=>{return note.id !== id});
        setNotes(filteredNotes);
    }

In the above code

updateText function takes the user's keyboard input and stores it in the text variable using the useState hook.
saveNote function creates a new object and adds it to the existing notes array. We create a key and an id for the object in order to construct arrays in React and delete a note respectively.
They are generated with uuid v4. You can install it as follows:

npm install uuidv4

And use it as follows:

import { v4 as uuid } from "uuid";

The text parameter will be assigned to the value of text, that is our desired text cotent for the note. The value of text was then set to empty in order to create new content for our future note.

deleteNote function takes in the id of our note as a parameter, uses the filter method to return all notes except for that which it's id has been passed to the function.

Constructing the body of our notes app

We want the structure of our notes app to first display all saved notes, then display an input field to create a new note.

 return(
        <div className='Notes'>
            {notes.map((note)=>(
            <Note deleteNote={deleteNote} id={note.id} text={note.text}/>
            ))}
            <Createnote updateText={updateText} saveNote={saveNote} inputText={text} />
        </div>
    )

First of all, we call a map method on the notes array, the note is passed deleteNote, id, and text props which will be utilised to make it perform it's functions. The id and text prop are passed to the value of the note's id key and text key respectively.

Then, we include our Createnote component and pass the necessary functions to the updateText and saveNote props. text is passed to the inputText prop and is used in the Createnote component to update the value of our textarea.

Preparing the `Note` component

After we created the notes app's general framework, the next task is to head over to Note.js and develop the Note component by typing the following:

import React from "react"


function Note({id,deleteNote,text}){
    return(
        <div className="note">
            <div className="note-body">{text}</div>
            <div className="note-footer">
                <button onClick={()=> deleteNote(id)}>Delete</button>
            </div>
        </div>
    )
}

export default Note

The note-body div contains the content of the note therefore the value of text is passed to it. Remember that this is the content that is stored in the note object when a new note is saved.
The note-footer div contains the delete button that performs a function when clicked. The function calls our deleteNote function located in Notes.js with id passed as a parameter.

Building our `Createnote` component

We have successfully completed the structure of our note, but we still need a textarea to collect the user's input and store it as a new note. In Createnote.js, we add the following:

import React from 'react'

function Createnote({updateText,saveNote,inputText}){

    return (
        <div className='note' >
            <textarea onChange={updateText} maxLength={100} placeholder='Type Here...' value={inputText} ></textarea>
            <div className='note-footer'>
                <button onClick={saveNote}>Save note</button>
            </div>
        </div>
    )
}


export default Createnote

All text is inputed into a textarea with a maximum length of 100 characters, the value is also set to inputText so that the textarea can be cleared once we save the note. We add onChange attribute to the textarea in order to update the text in our Notes component. The note-footer div contains the delete button that perform the saveNote function when clicked.
Next, we include a counter to let the user know how many characters are still available for input.

    const maxLength=100;
    const counter=maxLength-inputText.length;
    return (
        <div className='note' >
            <textarea onChange={updateText} maxLength={100} placeholder='Type Here...' value={inputText} ></textarea>
            <div className='note-footer'>
                <span>{counter}</span>
                <button onClick={saveNote}>Save note</button>
            </div>
        </div>
    )

Storing notes with `localstorage`

Our notes app is complete but we don't what to lose our saved notes when the browser is closed, we prevent this by using javascript localstorage and useEffect hook. notes is included in the square bracket of the useEffect function to make sure our notes are saved upon every render in which notes is updated.

    useEffect(()=>{localStorage.setItem('Notes',JSON.stringify(notes))},[notes]);

    useEffect(()=>{const data=JSON.parse(localStorage.getItem('Notes'));setNotes(data)},[]);

useEffect has to be imported from react for this to work.

import React,{useState,useEffect} from 'react'

Linking our components

We've created our Note and Createnote conponents, next we import them in Notes.js in order to make our note app fully functional.

import Note from './Note'
import Createnote from './Createnote'
import Note from './Note'

Our app won't display yet because we still haven't imported the Notes component into App.js. We complete the body of our notes app with the following:

import React from 'react'
import './App.css';
import Notes from './components/Notes.js'

function App() {

  return (
    <div className="App">
      <h1>Notes</h1>
      <Notes />
    </div>
  );
}

export default App;

Styling our app

The styles for notes app will be stored in our notes.css file located in our css folder.

.note{
    height: 250px;
    margin-right: 10px;
    border-radius: 35px;
    width: 30%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 2px solid black;
    margin-bottom: 20px;
    background-color: #f9ce69;
}
textarea{
    outline: none;
    resize: none;
    border: none;
    background: transparent;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 100%;
    max-height: 82%;
    min-height: 82%;
    font-size: 25px;
    line-height: 35px;
    padding: 10px 0 0 10px;
}

.note-body{
    line-height: 35px;
    padding: 10px 0 0 10px;
    font-size: 25px;
    height: 82%;
}


button{
    background-color: #4741a6;
    padding: 10px 15px;
    float: right;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    color: white;

    position: absolute;
    bottom: 10px;
    right: 10px;
}
span{
    color: red;
    padding-left: 10px;
    font-weight: 600;
}

Conclusion

This article demonstrated how to build a straightforward notes app which saves notes even if the browser is lost. Additionally, it explains how to use react hooks to store items and carry out specific tasks automatically.
The Github repository is located here and a live demo of the site is hosted on vercel.

Build a Flashcard quiz with React

Gbadebo ifedayo — Mon, 15 Aug 2022 17:12:16 +0000

Welcome, today we're going to make a react flashcard quiz with React.js.

First, launch your terminal and use the create react-app command to create our new React app.

Next, we open up our project in our code editor and and remove unnecessary code in the App.js file.

Next, we import React and make an array questions_list with our test questions in it. Then we develop Flashcard.js and Flashcardlist.js files in the src folder to store project-related components.

The structure of our flashcards is generated next by going to Flashcard.js. We create a function component and give it a props "card" to achieve this. When a flashcard is clicked, the card flip concept is used to reveal the answer. We import useState in order to achieve this.

In Flashcardlist.js, we import the Flashcard component and construct a list of flashcards, passing our Flashcard prop card to each element of the flashcards array.

After navigating to App.js, we import the useState hook and our flashcardlist component. We create a state variable array and assign it to the questions_list array.The array list is then passed as flashcards props to the Flashcardlist component.

The styles for our flashcards are then stored in a Flashcard.css file that is created next. In Flashcard.js, this file has been imported.

After finishing our quick flashcard app using React, feel free to add more questions to the list to make it more interesting. Here is the URL of the github repository.

DEV Community: Gbadebo ifedayo

Ensuring effective cloud security: Best practices and real-world insights

What is cloud security?

Importance of cloud security

Consequences of inadequate cloud security

Shared responsibility model in the cloud

Compliance standards in cloud security

Best practices for cloud security

1. Ask your cloud Provider detailed security questions:

2. Implementing IAM:

3. Data Encryption:

4. Network Security:

5. Backups and Disaster Recovery:

6. Logging and Monitoring:

7. Compliance and Regulations:

8. Third-Party Security:

Case studies of real-world security breaches and solutions

Breach 1: Capital One

Breach 2: Target

Breach 3: Equifax

Cloud security tools offered by cloud service providers

Conclusion

Resources

Exploring lesser-known React hooks and their importance

useContext

Use case: counter app

useRef

Use case 1: Tracking application re-renders

Use case 2: Focusing the input element

Limitations

useReducer

Use case: Creating a counter

useCallback

Use case: Improving performance

useMemo

Use case: Improving performance

Conclusion

Resources

How to create a Currency Converter app using ExchangeRate REST API

Pre-requisites for this project

Setting up the project

Including jQuery in the project

Establishing a connection to the REST API

What is a REST API?

Constructing the app

Creating animations with jQuery

Conclusion

Resources

Preventing Data Breaches in React Applications with Supabase

The significance of data security, its compromises, and solutions

Types of data security

The need for a Data Security Plan

Key factors Organizations consider when designing a Data Security Plan

What is Supabase?

Conclusion

Resources

How to create a Newsletter feedback form using React and Supabase

Pre-requisites for this project

Setting up the project

Setting up our database in Supabase

What is Supabase?

Constructing our components

Interacting with the Database

Styling the app

Defining the Success and Failure component

Conclusion

How to create a video streaming app using React and Vime

Vime

Prerequisites for this project

Setting up the project

Constructing our components

Importing defined components into App component

Styling the app

Conclusion

Resources

How to create an e-commerce website with React, Cloudinary, and Xata

Prerequisites for this project

Setting up our project's images in Cloudinary

Setting up the project

Building the functions of the app

Importing defined components into `App` component

Importing our components into `Home.js`

Storing purchases using `Localstorage`

Preparing the `Note` component

Building our `Createnote` component

Storing notes with `localstorage`