Forem: Emmanuel Festus

Effortless Star Rating Implementation with custom useStar Visualization hook in React

Emmanuel Festus — Sat, 29 Jul 2023 15:10:52 +0000

Introduction

Have you ever come across a website with a rating feature, such as an e-commerce site or a blog? Ratings play a crucial role in influencing our decisions while navigating these websites. For instance, when shopping for a laptop on Amazon, we often check the product's rating to gauge its quality based on user experiences. A positive rating might lead us to make a purchase, while a negative one could deter us.

Additionally, ratings allow us to express appreciation or dissatisfaction with a product or service. If we're dissatisfied, we leave comments and rate accordingly. Star ratings are an essential part of this feedback system, and that's what we'll focus on in this blog.

Introducing the useStar Visualization Hook

The useStar visualization hook is a custom hook designed to simplify the process of rendering star ratings in the UI. It alleviates the burden of handling logic for displaying stars, including choosing icons and handling fractional stars.

By using the useStar hook, developers can offload all the intricate logic and icon management to the hook itself, enabling them to effortlessly render star ratings in the UI.

How does it work

The useStar hook functions like a generator, taking in input and producing immediate results without involving asynchronous operations.

To use the hook, you need to provide three parameters in the following order: RATING NUMBER, BASE STAR NUMBER and an OBJECT CONTAINING CSS STYLES.

Rating Number

The first parameter, the RATING NUMBER, represents the actual rating given to a product or item by users. It should be a number, and the hook is strongly typed to only accept numeric values.

Base Star Number

The BASE STAR NUMBER refers to the maximum number of stars to display. Most websites use 5 stars, but some may prefer using 7 or 10 stars to rate their products. Regardless of the number you choose, the base stars cannot exceed the rating number, as it represents the highest possible rating.

Object Containing CSS Styles

The last parameter is an object containing CSS styles that override the hook's default styles. You can choose to use the default styles by passing in an empty object. The hook's default style is as follows:

const DEFAULT_STYLE: object = {
    fontSize: "20px",
    color: "gold",
    margin: "0 5px",
  };

When you have successfully passed in data into the hook eg. useStarVisualization(2.6, 5, {color: "red"}), the hook will take all this and spit out a react component of stars using the fontAwesome library. That is why the extension is TSX and not TS.

The hook distinguishes between three types of stars: empty star, half star, and full star.

Empty star

The empty star represents the state when the user's rating doesn't fill up all the stars. For example, a rating of 3.0 with a base of 5 will show 3 full stars and 2 empty stars. The calculation for empty stars is base star - rating. When a half star is present, the calculation changes.

Half star

The half star represents the state between a full star and an empty star. When the decimal unit of the rating is greater than 0, a half star appears. For example, a rating of 3.0 with a base of 5 will not have a half star, while a rating of 2.8 with a base of 5 will display 2 full stars, 1 half star, and 2 empty stars.

Full star

The full star represents the maximum state of a star. It corresponds to the whole number part of the rating. For instance, a 5.0 rating with a base of 5 will display 5 full stars, while a 2.1 rating with a base of 10 will show 2 full stars, 1 half star, and 7 empty stars.

How to use

Before we proceed to use the hook, let's first clone the repository to get access to the hook and install the necessary dependencies.

Clone the Repository
https://github.com/GeneralAike/useStarVisualization.git
Copy the useStarVisualization hook from the hooks folder into your project. The file is located at src/hooks/useStarVisualization.tsx.
Import the useStarVisualization hook
import useStarVisualization from "./hooks/useStarVisualization";.
Edit the directory to your appropriate hooks folder where the useStarVisualization file is.
Install the following dependencies

npm install @fortawesome/react-fontawesome
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-regular-svg-icons

As you can see, these dependencies are used for the icons only. The core code is written purely in TypeScript.

Generate your stars by calling the function in your JSX or TSX

<div>
  {useStarVisualization(data.rating.rate, 5, {
  fontSize: "18px",
  color: "red",
  margin: "3px",
  })}
</div>

Once you have completed these steps, useStarVisualization hook will be integrated into your project successfully.

Conclusion

The useStar visualization hook was designed by developers for developers. I hope you now understand how to integrate the hook into your project seamlessly and use it effectively. If you found this blog helpful, please consider leaving a like and sharing your experience in the comments. Thank you!

How to Consume an API with Vanilla Javascript

Emmanuel Festus — Thu, 02 Mar 2023 22:49:49 +0000

INTRODUCTION

API consumption or API fetching refers to the process of accessing and using data or services provided by an Application Programming Interface (API). Almost all websites use APIs to communicate with their backends or servers. APIs contain important information that you may want to show in the front-end of your website, such as a weather forecast or current crypto prices. In this tutorial, we will show you how to consume an API using JavaScript.

Requirements

Basic knowledge of HTML, CSS and Javascript
an IDE (example: VScode)

Step 1: Creating the HTML template

Before we start writing JavaScript code, we need to create the HTML template. Here is a sample template that you can use as a reference. You can also use an image as a placeholder until you get your API up and running.

Step 2: Finding an API

We will use 2 API links in this tutorial

https://xsgames.co/randomusers/avatar.php?g=male

This is for the profile image

https://randomuser.me/api/

This is for the user details.

We are using different links because the image in the second API isn't working, so we had to find another API that provides only images.

Step 3: Fetching data from the API

Now that we have the necessary API links, we can start consuming them. Let's start with the image. We will simply put the link for the image API inside the src attribute of the img tag in our HTML template.

        <div class="imghold">
            <img src="https://xsgames.co/randomusers/avatar.php?g=male" alt="">
        </div>

This should generate a random image every time you reload the page.

STEP 4

In your javascript file, we will assign the API link to a constant variable so that we can reuse it throughout our code.

const url = "https://randomuser.me/api/"

Doing this will make our link reuseable so if you want to use your link anywhere else on your code, you can just call the url variable.
NOTE: Its a constant so you wont be able to change its value anywhere eles in your code

Lets use an in-built Javascript function called fetch. fetch() is a built-in function in JavaScript that is used to make network requests and retrieve resources from a server using the Fetch API.

fetch(url)

This will return a promise, which either resolves or rejects. If you are not familiar with promises, think of them as sending someone on an errand to go and get something. The person either comes back with what you sent them to get (resolved) or comes back without it (rejected).

When we log out fetch(url) to the console, we get a pending promise because the data has not yet been returned from the API.

This is because at the time this promise fetch url was logged out, it didnt come back with the information from the API yet, so we get pending promise instead of the actual data.

To handle this issue, we can use the then() method to register a callback function that will be called when the Promise is resolved successfully. Within the callback function, we can then extract the JSON data using the json() method and use it in our code.

.then(resolve => resolve.json())

This attaches a callback function to the Promise object returned by fetch(). The callback function takes the resolved Response object as its argument and calls the json() method on it to extract the JSON data from the response. The json() method also returns a Promise object that resolves to the parsed JSON data.
Since it returns another promise, we have to use a then function again so we can get the json data

.then(data => {console.log(data)})

if you console.log data, it will give you an object containing all the information you want

This is a complex object containing arrays and other objects inside, so you have to navigate through to get what you want. If you dont know how, just know that you use dot nothation (.) to navigate an object, by calling the key (example: object.key, this will give you the value of that key) or if you want to navigat an array, you use box notation ([]) by inputting the index, Note that the index of an array starts from 0, so the first item in the array has an index of 0 (example: myArr[1], this will get the second item in myArr). This is how mine looks.

const url = "https://randomuser.me/api/"
fetch(url)
.then(resolve => resolve.json())
.then(data => {
    let name = `${data.results[0].name.title} ${data.results[0].name.first} ${data.results[0].name.last}`
    document.querySelector("#name").innerHTML = name
    document.querySelector("#email").innerHTML = data.results[0].email
    document.querySelector("#phone").innerHTML = data.results[0].phone
    document.querySelector("#age").innerHTML = data.results[0].dob.age
    document.querySelector("#gender").innerHTML = data.results[0].gender
})
.catch((err) => {
    console.log(err);
})

We also add a catch() method to catch any errors that may occur during the fetch() request, which can help us debug any issues and handle them appropriately.
This is my final result

To conclude, consuming APIs is an essential part of modern web development, and with the Fetch API, it has become easier than ever to interact with web services and retrieve data. We learned that fetch() is a Promise-based function that returns a Promise object, which resolves to the Response object representing the response to our request. We also learned that the Response object provides a set of methods to extract the data we need, and that we can chain these methods together using the then() method.

In addition, we explored the json() method, which is used to extract JSON data from a Response object, and how we can use dot and box notation to navigate complex objects and arrays. Finally, we saw an example of how to use fetch() to consume an API and update a web page with the retrieved data.

Overall, fetch() is a powerful and flexible tool that can be used to interact with a wide variety of APIs, and with some practice, you can leverage it to create dynamic and engaging web applications.

Developing an E-Commerce Website with Javascript and Firebase: A Comprehensive Guide - Series 1

Emmanuel Festus — Tue, 21 Feb 2023 18:40:05 +0000

As a developer, it is essential to learn and master programming languages that are relevant to your field. For web development, JavaScript is typically the first programming language that most developers learn. However, it is important to note that HTML and CSS are markup languages and not programming languages. Once you have learned JavaScript, you are typically eager to start building your first project to advance your skills.

In this tutorial, we will build an e-commerce website using vanilla JavaScript, which is plain JavaScript without any framework. We will also use Firebase to handle our back-end operations. Firebase is capable of performing a variety of back-end operations, including storage, real-time database, and authentication, among others. Given the broad scope of creating an e-commerce website, we will only cover a section of it in this post and cover more in other series.

Before we begin, here are some prerequisites:

Visual studio code or any source-code editor
A firebase account
Node.js installed in your computer
Good knowledge of Html, CSS, and Javascript

Once you have these tools, you are ready to get started.

STEP 1

Lets get our basic html and css set-up

Before we begin coding, you should design your website based on the design you feel comfortable with. You can add fake products to your website to act as a placeholder until you can set up your Firebase. If you find it hard to design websites on your own, you can go to colorlib if you find it hard to design websites on your own.

This is an example of a design template I came up with in a short time:

This is just a visual aid to give you an idea of what we will be working with. This is how my item card looks like. You can visit the website here and the the link to the github soucre code here

The capabilities of this website are:

Displaying products on the wesbite
Adding products to cart
Deleting and adding products to the website

STEP 2

Now that we done with all the boring HTML, CSS and designing, lets go on to setting up our firebase account

Assuming you have created an account on firebase, go to console

Click on "Add project," give it a product name, and follow all the steps. As you can see from mine, I have already created my project named SHOP-WEBSITE:

-Follow all the steps till you reach this page:

Click on "Web," and follow all the steps and continue to the console.

-Go to your project settings and het your config, this should look like this

Copy this and keep it somewhere, we will need it later

STEP 3

To set up Firebase in your project, it is important to first ensure that Node.js is installed on your VS Code. To check if Node.js is installed, simply type "node --version"

node --version

in your terminal. If it is installed, it will return a version number.

After ensuring that Node.js is installed, follow these steps to set up Firebase in your project:

Navigate to the root folder of your website using the VS Code terminal and type "firebase login".

firebase login

This will prompt you to log in to your Google account, so follow the steps in your browser until you are logged in.

Next, initialize Firebase in your project by typing "firebase init" in the terminal.

firebase init

This will prompt a series of questions that you should answer based on your specific needs and preferences. If you are unsure about any of the questions, there are plenty of resources available online, including Stack Overflow, that can provide assistance.

Once Firebase has been initialized in the directory, there are a few additional steps you need to take. Specifically, you need to add the Firebase script tag to the head of your HTML file by including the following line:

<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>

Finally, create a JavaScript file, add your Firebase configuration, and initialize Firebase using the following code:

const firebaseConfig = {
  apiKey: "AIzaSyC-AYn0Oos9Z_yqojxKjMdeuKrF68quVnw",
  authDomain: "blog-16faf.firebaseapp.com",
  projectId: "blog-16faf",
  storageBucket: "blog-16faf.appspot.com",
  messagingSenderId: "31630474371",
  appId: "1:31630474371:web:f0135de93da7ba016aafb6",
  measurementId: "G-BMTYFXS9LH"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

By following these steps, you have successfully set up Firebase in your project and can begin utilizing it for your specific purposes. In our next series, I will cover how to setup firebase Realtime Database for storing and retrieving of the details of our items.