DEV Community: Kelvin Moses

Optimization and Deployment of Vue App on Firebase

Kelvin Moses — Fri, 18 Aug 2023 21:16:30 +0000

Introduction

Optimizing apps and deployment is a crucial task that an average engineer should be capable of apart from running an app on a local address like 8080.

That is normal during development, but ultimately your goal may not be to have your application running locally on your machine, but you may want to deploy it and bring it to live on a live server for others to use.

In this article, You will learn how to deploy and optimize VUE apps from development to production.

You will learn

What deployment means
What to deploy
Learn optimization techniques with examples

Prerequisites

Basic Vue js knowledge

Table of Content

Introduction
What is deployment? and what to deploy.
Optimizing your code.
Creating deployable Resources
Deploying Vue App.

What is deployment?, and What to deploy.

Deployment is the process of installing, configuring, updating, and enabling one application or suite of applications that make an app available.

Let's always note that Vue js runs in a browser. Any website is loaded with a browser, but the Vue app is driven by browser-side javascript code.

All the code is written and transformed by the project setup and converted into javascript code, which our browser understands, so what is seen on the screen is loaded from a server but rendered on the screen by Vue.

NOTE: " I am emphasizing this because this influences how a web app/website is deployed.

Since our Vue app is made up of:

HTML (just one HTML file named index)
CSS (often seprated )
Javascript (default javascript file built by Vue project setup)

These are the files we have with no code to run on the server. Therefore we have a static web app/website and hence a static website hosting provider is all we need.

Some of the static hosting providers include:

AWS (Free)
Firebase Hosting,
Netlify
Vercel and many more

Optimizing your code.

After building your app and before pushing your code to production, you have to finalize and polish your code and make sure it's optimized. Code optimization involves actions like

Testing your code: Testing for errors and different scenarios and finding possible errors in the code and fixing them.
Refactor your code: Don't repeat yourself too often. Create reusable code and have less code. (The less code you have, the less code the app user have to download before the app load on the screen, Less code means a faster website)
Consider using the "asynchronous components approach": There are certain components we don't need when every time our application is loaded. This means that only the code that will be used at a certain moment will be downloaded using the Vue defineAsyncComponent method.

Creating deployable Resources

After optimizing the project by fixing all the errors, refactoring the code, and adding asynchronous components.

Now it's time to upload the Vue project to some static host.

Let's differentiate between two kinds of projects.

If you have a very simple project, we really may just have a couple of customs HTML, CSS and JS files. and we have no project setup created by the Vue CLI or anything like that. In that case, we can grab such files and upload them onto a server
If the project has a bit more complexity typically created with the Vue CLI, then there will be more steps. You have to optimize your code as discussed in the Optimizing your code section and then you need to build your project. Building your project may even optimize your code for you automatically the more.

Building your code is required because the raw code in your project with all those file extensions (.vue), and that is not the code the browser would understand, that is the code that needs to be transformed into regular javascript code first and the CLI-created projects have a built-in script, which you can execute, which will do the transformation.

Only once you've got that built and optimized code, only then will you have a couple of files that are generated for you which you can then take and upload unto a server.

We will be focusing on the second kind of project which is the complex project build with the Vue CLI.

So let's build the project. To build a project generated with the Vue CLI, we will have to execute it. In the package.json as shown below, you will see all the scripts you can execute.

Now we will be using the build script to build the production application and optimizes it for production by running the:

"npm run build"

This will bundle all our code into one big app file and the smaller chunk files for the async components and will transform the code into a code the browser can understand and optimize it.

When this finishes you will find a disk folder inside the project the dist folder now contain the single page and a javascript folder with all the code chuck highly optimized to javascript code and the CSS folder with the generated CSS files all minify and optimized to take up little space as possible.

It's the content of the dist folder that is needed to be uploaded to the static hosting server.

Deploying Vue App.

So, we are done optimizing and building our app now let's deploy our app. As said earlier there are different platforms for static hosting which include: AWS, Firebase, and Netlify hosting.

In this article, we will be using firebase hosting.

Visit the firebase console and register an account (if you don't have one)
Create a new project and use the setup wizard (you can skip in if you already have a project setup)
Click on the build collapse menu on the left side navbar.
Click on the get started button to start the setup wizard.

(https://cdn.hashnode.com/res/hashnode/image/upload/v1673218576243/a804353b-242e-404b-92b2-9d8174010f3a.png align="center")
Install the firebase and click on next when the fire-base tool finishes installing
```
npm install -g firebase-tools
```
Now at this stage, we need to login by running
```
firebase login
```
Login with the credentials that you use to login into your firebase account if you are not logged already

Once that is done, you need to run the "firebase init" in your terminal, this will ask you a couple of questions about which part of the firebase you want to manage with the command.

For this article, we will be using hosting because that's what we want to do. So select hosting by navigating with the arrow keys and press space to mark it and then press enter.

Since we have already created a project we can select the "existing project" options and select the project we created earlier.

Important:

Firebase will ask for the public directory. This is important because this is the directory where the files that will be uploaded are loaded. Remember that our build app is located in the dist folder.

You can now type dist and press enter Firebase will ask you whether it should be configured as a single-page app. since we're deploying a single-page app we type

"YES"

so that always it's the index.html that will be served Firebase may ask if you want to overwrite your file we select "No" because we want to keep your files. Now that firebase has been initialized.

NOTE:

Never touch the code which is generated from the build which is located in the "dist" folder, instead, edit the unbuild code and run the build script command again.

Lastly, our build app is ready for deployment, following the firebase setup wizard we can now type the "firebase deploy" command to deploy our app which will take the code and upload it to firebase.

firebase deploy

Once it is finished deploying firebase will generate the deployed link which will be used the access the app.

Congratulation!, you have just build deployed and deployed an optimized and standard production code.

You can go back to your firebase console and make some changes such as adding a custom domain.

14+ Best Freelance Websites to Find Work in 2023

Kelvin Moses — Fri, 18 Aug 2023 21:12:06 +0000

Many people prefer to be independently freelancing if they want to work from home, since most people want to work from home it's also good to start looking for the best remote job websites to find a freelancing job.

In this article, we'll go through a fantastic selection of freelancing websites to help you find work (gig) on any skill.

1. Upwork

Upwork is one of the popular marketplaces for freelancers in fields like writing, graphic design, web development and other soft skill.

Many freelancers use Upwork because of its market size of about 750,000 clients and millions of freelancers.

2.Refrens

Lots of people always think that Refren is only about the management tool services they offer but Refren Equally have a freelancing marketplace where the freelancer can easily get work with less stress.

Rehires freelancer modules that allow freelancers to register and be merged

3. Fiverr

What really comes to your mind when you heard the word 'Fiverr' as a freelance?

Fiverr is another popular marketplace for freelancing where you can connect with people or businesses looking to hire for gigs all over the world.

Fiver has about 3.42 million active users each year using its platform for freelancing

4. Toptal

Toptal is a global remote company that provides a freelancing platform, connecting businesses with software engineers, designers, finance experts, product managers, and project managers.

5. Freelancer

Freelancer is a global platform that connects freelancers from more than 240 countries. You can find a job as a freelancer or hire a freelancer, easily, with the help of Freelancer.com

6. Guru.com

Guru.com is another famous marketplace, and it works exactly like Upwork. Freelancers can sign up to join the website and verify their details; as soon as they’re in, they can build their profiles and showcase their portfolios to attract clients.

7. Truelancer.com

Truelancer is a Global Community of Trusted & Talented Freelancers. It's a Curated Marketplace of Freelance Services. Freelancers can SELL Services and Find Projects to work on based on their skills & expertise.

8. Peopleperhour

Peopleperhour is another marketplace founded in 2007 that gives companies access to freelance workers.

PeoplePerHour is a trustworthy freelance website people (freelancers)can select remote outsourcers and workers in their local area.

9. Designhill

Designhill is a graphic design marketplace that offers ready-made logos or custom consultations at affordable price.

If you are a designer then one place you need to check out is designHill for passive jobs

10. GoLance

Just like Upwork or Freelancer and other freelance marketplaces, GoLance is another broad platform for freelancing where you can create a profile on the site and add your skills.

Golance is the only freelance platform that rewards clients for hiring and paying freelancers.

11. 24task

When listing freelance platforms, 24task should be listed because 24task.com connect freelancers with businesses looking for top-rated professionals to collaborate.

12. Linkedin

LinkedIn is another popular professional social platform that is owned by Microsoft.

LinkedIn is used for professional networking and career development and allows job seekers to post their CVs and employers to post a job. LinkedIn allows you to connect directly to company recruiters.

13. Behance

A lot of people thought that Behance was limited to displaying your works. Behance is a social media platform with over 24 million members owned by Adobe whose main focus is to showcase and discover creative work.

Behance equally allows designers to showcase their work and get hired by clients.

14. Dribbble

Dribbble just like Benhance allows designers to showcase their work. Most companies hire based on a designer portfolio Dribble allows designers to create a better portfolio which organizations will use to rate their skills and get hired.

15. Codeable

Are you a WordPress developer? then codeable should be the best freelancing platform for you 😊.

Codeable is the only freelance platform which only focuses on WordPress, matching WordPress freelancers to clients.

I hope you find these resources helpful 😊

I'd love to connect with you on Twitter | LinkedIn | GitHub | Portfolio

See you in my next blog article, and feel free to Subscribe to my Newsletter. Take care!!!

Mastering Asynchronous Workflows with Redux Toolkit and Thunk Actions

Kelvin Moses — Fri, 18 Aug 2023 21:09:47 +0000

Introduction 🎯

Learn how to simplify the process of writing and managing complex asynchronous logic in your Redux store with Redux Toolkit. This popular library from the Redux team provides a simplified API for handling asynchronous workflows, including the ability to dispatch Thunk Actions.

In this article, we'll walk through an example of using Thunk Actions with Redux Toolkit to fetch data from an API and display it on the screen. Follow along and see how you can efficiently manage the state of your application in a predictable and scalable way.

Prerequisites 🎯

Setting up a react application.
How to install and setup redux-toolkit
Have basic knowledge of redux-toolkit.
Basic knowledge of javascript will be good.

Redux is a popular state management library for JavaScript applications. It allows developers to manage the state of their applications in a predictable and scalable way. One of the key features of Redux is the ability to dispatch asynchronous actions using middleware, such as the redux-thunk middleware.

However, writing and managing complex asynchronous logic with redux-thunk can be difficult, especially in larger applications. That's where Redux Toolkit comes in. Redux Toolkit is a new library from the Redux team that provides a simplified API for writing and testing asynchronous logic in your Redux store.

One of the key features of Redux Toolkit is the createSlice function, which allows you to easily create and manage your Redux store state and actions. In addition to createSlice, Redux Toolkit also includes the ability to dispatch Thunk Actions, which allows you to write asynchronous logic in your actions.

Let's look at an example to see how we can use Thunk Actions with Redux Toolkit to handle a complex asynchronous workflow in our application.

Example: Fetching Data from an API

Suppose we have a React application that needs to fetch products from an API and display it on the screen. With Redux Toolkit, you can write a Thunk Action to handle this process and dispatch it from your component.

In this article, we will be using the dummyjson API for better understanding.😊

Here's an example of how we might write a Thunk Action to fetch products from our API:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchData = createAsyncThunk(
  'fetchData',
  async () => {
    const response = await axios.get('https://dummyjson.com/products');
    return response.products;
  }
);

const productSlice = createSlice({
  name: 'products',
  initialState: {
    products: [],
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: {
    [fetchData.pending]: (state) => {
      state.loading = true;
    },
    [fetchData.fulfilled]: (state, action) => {
      state.data = action.payload;
      state.loading = false;
      state.error = null;
    },
    [fetchData.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error;
    },
  },
});

export const { } = productSlice.actions;
export default productSlice.reducer;

In this example, we use the createAsyncThunk function from Redux Toolkit to create an asynchronous Thunk Action. The first argument to createAsyncThunk is the name of the action, and the second argument is an asynchronous function that returns the data we want to fetch from the API.

We then use the createSlice function from Redux Toolkit to create a slice for our data. In the extraReducers object, we handle the three possible states of the Thunk Action: pending, fulfilled, and rejected.

With this setup, we can dispatch the fetchData Thunk Action from our component using the useDispatch hook from the react-redux library:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './dataSlice';

const DataList = () => {
  const dispatch = useDispatch();
  const { products, loading, error } = useSelector((state) => state.products);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
};

export default ProductList;

In this example, we use the useDispatch hook to get the dispatch function from the Redux store. We then use the useEffect hook to dispatch the fetchData Thunk Action when the component is mounted.

We also use the useSelector hook from the react-redux library to get the data, loading, and error state from the Redux store.

Finally, we render the component based on the state of the data fetch. If the data is loading, we display a "Loading..." message. If there is an error, we display the error message. If the data was successfully fetched, we display a list of the data.

Conclusion 🎯

In this article, we learned how to use Thunk Actions with Redux Toolkit to handle complex asynchronous workflows in our Redux store. With Redux Toolkit, we can write asynchronous logic in our actions and efficiently manage the state of our application in a predictable and scalable way.

Isn't it simple?🤗 Let me know what you think.

Try it out in your own projects and see the difference it can make!

I hope you find these resources helpful 😊

I'd love to connect with you on Twitter | LinkedIn | GitHub

See you in my next blog article. Take care!!!

Resources

Simplify Payment Processing on Your React App with Paystack Integration in 3 mins

Kelvin Moses — Fri, 18 Aug 2023 21:07:50 +0000

React is a popular JavaScript library used to build user interfaces. One common requirement for many React apps is the ability to process payments. Fortunately, there are many payment gateway options available for React apps, and one of the most popular is Paystack. In this article, we will explore how to simplify payment processing on your React app with Paystack integration.

Prerequisites 🎯

Have an active paystack account, or create one at paystack.com
Have basic knowledge of React js

Setting up Paystack 🎯

The first step to using Paystack in your React app is setting up a Paystack account. To create an account, visit Paystack's website and follow the signup instructions. After signing up, you will need to generate an API key that can be used to communicate with the Paystack API. To generate an API key, log into your Paystack dashboard, click on the settings, and go to the API Keys section. There are two API keys, one for test mode and one for live mode. Copy the test API key and save it in a safe place as you will need it later.

Integrating Paystack with React 🎯

There are several ways to integrate Paystack with a React app, but the easiest is to use the Paystack React library. To install the library, open a terminal window and navigate to your React app directory. Run the following command:

npm install react-paystack

Once the installation is complete, we can import the library into your React app as follows:

import PaystackButton from 'react-paystack';

With the Paystack React library installed and imported, we can now create a payment form that users can use to make payments. The PaystackButton component takes several props, including the amount to charge, the email of the user making the payment, and the Paystack test API key. The props and their purpose will be explained in a moment. For now, we'll add them and hardcode the public key and product quantity as they don't change*.* Here is an example of a basic payment form:

<PaystackButton
  text="Make Payment"
  email="user@example.com"
  amount={1000000}
  publicKey="pk_test_1234567890123456789012345"
  onSuccess: () =>{
    return alert("Thanks for doing business with us! Come back soon!!")
    },
  onClose: () => alert("Wait! You need this oil, don't go!!!!"),

/>

In this example, the text prop sets the text that appears on the payment button, the email prop sets the email address of the user making the payment, the amount prop sets the amount to charge in kobo (1000000 kobo is equivalent to 10,000 naira), the publicKey prop sets the Paystack test API key, the onSuccess props take a function after a successful transaction completes, and the onClose props take a function that executes when the user closes Paystack Checkout

Handling Payments 🎯

After the user submits the payment form, the Paystack API will process the payment and return a transaction reference. You can use this reference to verify the payment and perform other actions, such as updating the user's account or sending a confirmation email.

To handle payments, you will need to create a server-side endpoint that receives the transaction reference and verifies the payment. Paystack provides detailed documentation on how to do this for several programming languages, including Node.js and PHP. Once you have verified the payment, you can update your database or perform other actions as necessary.

Conclusion 😊🤗

Payment processing is a frequently used feature in apps.

There are different payment gateways to integrate your app but one the most popular is paystack which is very easy to integrate into our apps as seen above.

Hope you have learned a lot from this article 😊😊

I'd love to connect with you on Twitter | LinkedIn | GitHub

Resources

Paystack documentation

React Js documentation

BudPay Integration: The Easy Way to Accept Payments on Your Next JS App

Kelvin Moses — Fri, 18 Aug 2023 20:53:52 +0000

Introduction

BudPay is a powerful payment gateway that provides a simple and secure way to accept payments in your web applications. In this tutorial, I will walk you through the process of integrating BudPay into your Next.js application, allowing you to easily accept payments from your users. By following the steps below, you'll be able to seamlessly integrate BudPay into your Next js app and start accepting payments quickly and efficiently.

Prerequisites:

Before getting started, make sure you have the following in place:

A BudPay account. This is necessary to integrate BudPay into your app or website. You can create one at Budpay.com
Basic knowledge of Next js and JavaScript.
Nodejs is installed on your machine.

Step 1: Create a Next.js Application

To begin, let's create a new Next.js application. Open your terminal and run the following commands:

npx create-next-app budpay-integration
cd budpay-integration

This will create a new Next.js project and navigate you into the project directory.

Step 2: BudPay React Js Library

Next, we need to install the necessary dependencies for integrating BudPay. Run the following command to install the budpay package:

npm i budpay-react-v2

npm install is the command to install Node.js packages and their dependencies.
budpay-react-v2 is the package name for the BudPay integration library.

By running this command, npm will download the BudPay package from the npm registry and install it into your project.

After running the command, npm will automatically download and install the BudPay package and its dependencies. Once the installation process is complete, you can proceed with the next steps of the integration process.

Step 3: Create a BudPay Account

If you haven't already, head over to the BudPay website and create an account. Once you've signed up and logged in, you'll be able to retrieve your BudPay API credentials in the account setting as shown below.

This will generate a secret key for you which we will be using later in this article.

Step 4: Initialize BudPay

To use BudPay in your Next.js application, you need to initialize it with the API credentials that we generated in our previous step. we will be importing the BudPayButton and closeBudPayPaymentModal components from the budpay-react-v2 package that was installed earlier by adding the code below:

import { BudPayButton, closeBudPayPaymentModal } from 'budpay-react-v2'

After importing the BudPayButton and closeBudPayPaymentModal from your Budpay package, you can create a configuration object that will hold the payment information by adding the code below:

const config = {
  api_key: 'sk_live_*******************', 
  reference: '', 
  email: 'test@test.com',
  amount: '1000',
  first_name: 'Kelvin',
  last_name: 'Moses',
  currency: 'NGN', 
};

api_key: This is your secret key obtained from BudPay. It is a unique identifier that authorizes your requests to the BudPay API. Make sure to replace 'sk_live_*******************' with the actual secret key that you generated from your BudPay account.
reference: This property represents a reference or identifier for the payment. You can generate a unique reference yourself and replace the empty string '' with it. Alternatively, if you leave it empty, the BudPay API will generate a reference for you.
email: This property represents the email address of the customer making the payment. It should be set to the customer's email address for communication and transaction purposes.
amount: This property represents the amount of the payment. It specifies the value of the transaction in the specified currency. The value '100' represents 100 units of the specified currency.
first_name: This property represents the first name of the customer making the payment. It should be set to the customer's first name.
last_name: This property represents the last name of the customer making the payment. It should be set to the customer's last name.
currency: This property specifies the currency in which the payment is made. The value 'NGN' represents the Nigerian Naira. You can change it to 'GHS' for Ghana Cedis or 'USD' for US Dollars, depending on your desired currency.

By populating these properties with the appropriate values, you can create a configuration object that provides the necessary details for making a payment request to BudPay. Once you have this configuration set up, you can pass it as an argument when making a payment request using the BudPay API.

Step 5: Populating our Configuration Object with Dynamic Data with useState Hook

import React, { useRef, useState } from 'react'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

import { BudPayButton, closeBudPayPaymentModal } from 'budpay-react-v2'

export default function Home() {
  const [email, setEmail] = useState()
  const [amount, setAmount] = useState()
  const [firstName, setFirstName] = useState()
  const [last_name, setLastName] = useState()
  const [currency, setCurrency] = useState()


 return (
    <main></main>
}

In the provided above code, there are several useState hooks used to create state variables and their corresponding setter functions. Each state variable represents a piece of data captured from the user input. Here's an explanation of the code:

The useState hook is used to create state variables and their setter functions. The initial value for each state variable is undefined because no initial value is provided in the useState calls.

Each state variable is paired with its corresponding setter function (setEmail, setAmount, setFirstName, setLastName, and setCurrency). These setter functions are used to update the values of the state variables later on.

The config object is then defined using these state variables to populate its properties:

import React, { useRef, useState } from 'react'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

import { BudPayButton, closeBudPayPaymentModal } from 'budpay-react-v2'

export default function Home() {
  const [email, setEmail] = useState()
  const [amount, setAmount] = useState()
  const [firstName, setFirstName] = useState()
  const [last_name, setLastName] = useState()
  const [currency, setCurrency] = useState()

const config = {
  api_key: 'sk_test_*******************************', 
  reference: '', 
  email: email,
  amount: amount,
  first_name: firstName,
  last_name: last_name,
  currency: currency,
};

 return (
    <main></main>
}

Step 6: Create a Payment Form

Now let's create a simple payment form component. inside the Home component and add the following code in our return main container:

import React, { useRef, useState } from 'react'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

import { BudPayButton, closeBudPayPaymentModal } from 'budpay-react-v2'

export default function Home() {
  const [email, setEmail] = useState()
  const [amount, setAmount] = useState()
  const [firstName, setFirstName] = useState()
  const [last_name, setLastName] = useState()
  const [currency, setCurrency] = useState()

  const config = {
    api_key: 'sk_test_*****************************************',
    reference: '', 
    email: email,
    amount: amount,
    first_name: firstName,
    last_name: last_name,
    currency: currency, 
  }

  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
    >
      <div>
        <h1>PayForm</h1>
        <form className="flex flex-col" onSubmit={(e) => e.preventDefault()}>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            onChange={(e) => setEmail(e.target.value)}
            name="email"
            id="email"
          />
          <label htmlFor="amount">Amount</label>
          <input
            type="number"
            name="amount"
            id="amount"
            onChange={(e) => setAmount(e.target.value)}
          />
          <label htmlFor="first_name">First Name</label>
          <input
            type="text"
            name="first_name"
            id="first_name"
            onChange={(e) => setFirstName(e.target.value)}
          />
          <label htmlFor="last_name">Last Name</label>
          <input
            type="text"
            name="last_name"
            id="last_name"
            onChange={(e) => setLastName(e.target.value)}
          />
          <label htmlFor="currency">Currency</label>
          <select
            name="current"
            id="currency"
            onChange={(e) => setCurrency(e.target.value)}
          >
            <option value="NGN" key="NGN">
              NGN
            </option>
            <option value="GHS" key="GHS">
              GHS
            </option>
            <option value="USD" key="USD">
              USD
            </option>
          </select>
        </form>
      </div>
    </main>
  )
}

We have just added a payment form and another thing that is remaining is creating our budPay Configuration object by adding the code below:

const budPayConfig = {
  ...config,
  text: 'Pay with BudPay',
  btnSize: 'medium', // small, medium, large
  callback_url: 'localhost:3000',
  callback: function (response) {
    closeBudPayPaymentModal() // this will close the modal programmatically
    // this happens after the payment is completed successfully if callback_url is not provided
    alert(
      'Payment complete! Reference: ' +
        response.reference +
        ', Status: ' +
        response.status,
    );
  },
  onClose: function (response) {
    console.log(response);
    alert('Transaction was not completed, window closed.');
  },
};

budPayConfig: is an extended configuration object that includes the properties from the config object as well as additional properties specific to BudPay integration.
...config: spreads the properties of the config object into the budPayConfig object, allowing it to inherit the same properties for BudPay integration.
text: represents the text to be displayed on the BudPay payment button. In this case, it is set to 'Pay with BudPay'.
btnSize: determines the size of the BudPay payment button. It can be set to 'small', 'medium', or 'large'.
callback_url: specifies the URL that BudPay should redirect to after the payment is completed successfully. In this example, it is set to localhost:3000.
callback: This is a callback function that will be called after the payment is completed successfully. It receives a response object containing information about the payment, such as the reference and status. In this example, the function calls closeBudPayPaymentModal() which we imported from the budpay-react-v2 package to close the payment modal programmatically and displays an alert with the payment details.
onClose: This is a callback function that will be called if the BudPay payment window is closed before the payment is completed. It receives a response object and in this example, logs the response to the console and displays an alert indicating that the transaction was not completed.

Step 7: Adding BudPay Pay Button

We have now created our form and configuration objects. Now what is left is to add a buy button to the payment form so that users can use it to trigger the BudPay Modal.

The BudPayButton component that we imported from budpay-react-v2' allow us to use the buy button and pass our budPayConfig object as a prop.

 <BudPayButton {...budPayConfig} />

The code <BudPayButton {...budPayConfig} /> is how you can use the budPayConfig object to configure and render a BudPay payment button component.

In this case, BudPayButton is a component that accepts props to configure and render the BudPay payment button. The spread operator {...budPayConfig} is used to pass all the properties from the budPayConfig object as props to the BudPayButton component.

By passing the budPayConfig object as props to the BudPayButton component, you are providing all the necessary configuration options for the BudPay integration, including the API key, payment details, button text, button size, callbacks, and more. The BudPayButton component will then handle the rendering and functionality of the BudPay payment button based on the provided configuration.

import React, { useRef, useState } from 'react'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

import { BudPayButton, closeBudPayPaymentModal } from 'budpay-react-v2'

export default function Home() {
  const [email, setEmail] = useState()
  const [amount, setAmount] = useState()
  const [firstName, setFirstName] = useState()
  const [last_name, setLastName] = useState()
  const [currency, setCurrency] = useState()

  const config = {
    api_key: 'sk_test_********************************', // Replace with your secret key
    reference: '', 
    email: email,
    amount: amount,
    first_name: firstName,
    last_name: last_name,
    currency: currency,
  }

  const budPayConfig = {
    ...config,
    text: 'Pay with BudPay',
    btnSize: 'medium', 
    callback_url: 'localhost:3000',
    callback: function (response) {
      closeBudPayPaymentModal() 
      alert(
        'Payment complete! Reference: ' +
          response.reference +
          ', Status: ' +
          response.status,
      )
    },
    onClose: function (response) {
      console.log(response)
      alert('Transaction was not completed, window closed.')
    },
  }

  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
    >
      <div>
        <h1>PayForm</h1>
        <form className="flex flex-col" onSubmit={(e) => e.preventDefault()}>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            onChange={(e) => setEmail(e.target.value)}
            name="email"
            id="email"
          />
          <label htmlFor="amount">Amount</label>
          <input
            type="number"
            name="amount"
            id="amount"
            onChange={(e) => setAmount(e.target.value)}
          />
          <label htmlFor="first_name">First Name</label>
          <input
            type="text"
            name="first_name"
            id="first_name"
            onChange={(e) => setFirstName(e.target.value)}
          />
          <label htmlFor="last_name">Last Name</label>
          <input
            type="text"
            name="last_name"
            id="last_name"
            onChange={(e) => setLastName(e.target.value)}
          />
          <label htmlFor="currency">Currency</label>
          <select
            name="current"
            id="currency"
            onChange={(e) => setCurrency(e.target.value)}
          >
            <option value="NGN" key="NGN">
              NGN
            </option>
            <option value="GHS" key="GHS">
              GHS
            </option>
            <option value="USD" key="USD">
              USD
            </option>
          </select>

          <BudPayButton {...budPayConfig} />
        </form>
      </div>
    </main>
  )
}

Conclusion

In this article, we learned how to seamlessly integrate BudPay, a payment gateway, into a Next.js application. By following a few simple steps, we set up a form to capture user input and configured BudPay with the necessary API key and payment details. We then rendered the BudPay payment button component, allowing users to make payments easily.

Integrating BudPay into your Next.js app provides a secure and efficient way to accept payments. Whether you're running an e-commerce store or offering subscription-based services, BudPay simplifies the payment process, enabling a seamless user experience.

Congratulations! You have just integrated BudPay into your Next js App. 😊.

You can view the source code here

Hope you have learned a lot from this article 😊😊

I'd love to connect with you on Twitter | LinkedIn | GitHub

Resources

Next JS Official Documentation

BudPay Developers Documentation

A Step-by-Step Guide to Building and Publishing a React Package

Kelvin Moses — Fri, 18 Aug 2023 20:48:24 +0000

Introduction

Creating reusable components is a fundamental aspect of modern web development. In this tutorial, I will walk you through the process of building your own React package. By packaging your components, you can easily share and reuse them across multiple projects or even publish them as open-source libraries. This tutorial will provide you with a step-by-step guide to create, build, and distribute your React package.

Prerequisites

Before getting started, ensure you have the following prerequisites:

Basic knowledge of JavaScript and React.
Node.js installed on your machine.

Step 1: Setting Up Your Project

To begin building your own React package, follow these steps to set up your project:

Create a new directory for your project. Open your terminal and run the following command:

mkdir my-react-package

This command will create a new folder named **my-react-package\** in your current directory.

Navigate to the project directory by running the following command:

cd my-react-package

Now you are inside the **my-react-package\** directory.

Initialize a new Node.js project by running the following command:

npm init -y

This command creates a new **package.json\** file, which will serve as the configuration and dependency management file for your project.

By following these detailed steps, you will have a new project directory with a **package.json\** file ready for the next steps of building your React package.

Step 2: Create Your React Component

In this step, you will create your React component inside the project directory. Create a new file called **MyComponent.js\** and add the following code:

import React from 'react';

function MyComponent() {
  return <div>This is my custom React component!</div>;
}

export default MyComponent;

Feel free to modify the component code to suit your requirements. You can add props, state, and any other functionality needed for your component.

Step 3: Building Your Package

To make your React component usable as a package, you need to transpile and bundle it using a build tool like Babel and webpack.

Install the necessary dependencies by running the following command:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Create a new file called **webpack.config.js\** in your project directory and add the following code:

const path = require('path');

module.exports = {
  entry: './MyComponent.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-react-package.js',
    library: 'MyReactPackage',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

This configuration file tells webpack to transpile your component using Babel and bundle it into a single file inside a **dist\** folder. The bundled file will be named my-react-package.js, and the component will be exposed as MyReactPackage using the Universal Module Definition (UMD) format.

Next, update your package.json file with the following:

{
  "main": "dist/my-react-package.js",
  "scripts": {
    "build": "webpack"
  }
}

Step 4: Building and Testing Your Package

To build your React package, run the following command:

npm run build

This will transpile and bundle your component, generating the my-react-package.js file inside the dist folder.

To test your React package locally, create a new React project in a separate directory and install your package as a dependency:

npx create-react-app my-test-app
cd my-test-app
npm install /path/to/my-react-package

Replace **/path/to/my-react-package\** with the actual path to your React package.

Now, you can import and use your React component in your test application:

import React from 'react';
import MyComponent from 'my-react-package';

function App() {
  return (
    <div>
      <h1>Welcome to my test application!</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Step 5: Publishing Your Package

To share your React package with others or publish it as an open-source library, you can publish it to a package registry like npm. Follow these steps to publish your package:

Create an account on npm by visiting https://www.npmjs.com/signup.
Log in to your npm account using the command:

npm login

Publish your package by running the command:

npm publish

Step 6: Running Your React App

To see your React app in action, follow these steps to run it locally:

Open your terminal and navigate to the root directory of your React app.
Run the following command to start the development server:

npm start

This command will compile your React app and launch a local development server. You should see output indicating that the server is running.

Open your web browser and visit **http://localhost:3000\**. You should see your React app running live.

Now you can interact with your React components and test the functionality of your app in the browser. Any changes you make to your code will trigger automatic reloading, allowing you to see the updates in real-time.

Congratulations! Your React package is now published and ready to be installed by others. 😊

Conclusion

In this tutorial, you learned how to build your own React package. You created a React component, bundled it using webpack and Babel, and published it to the npm package registry. Now, you can easily reuse and share your custom React component across various projects or with the wider developer community.

Remember to regularly update and maintain your React package to provide bug fixes, new features, and improvements to your users.

Happy packaging!

Note: The above tutorial provides a basic understanding of building a React package. For more advanced usage, consider exploring additional tools, techniques, and best practices, such as TypeScript integration, testing, and versioning. Make sure and package name you're using is not taken

You can view the source code here

You can check the published version on NPM here

Hope you have learned a lot from this article 😊😊

I'd love to connect with you on Twitter | LinkedIn | GitHub

Resources

NPM Documentation

Webpack.js

Demystifying Server-Side Rendering in Next JS: A Beginner's Guide

Kelvin Moses — Mon, 10 Jul 2023 18:50:45 +0000

Server-side rendering (SSR) plays a vital role in modern web development, providing enhanced performance, search engine optimization (SEO), and improved user experience. Next.js, a popular React framework, simplifies the implementation of SSR.

Before server-side rendering, frontend development relied primarily on client-side rendering (CSR) techniques. This involved loading initial HTML from the server and using JavaScript on the client-side (browser) for subsequent interactions and content updates. Single-page applications (SPAs) like React, Angular, and Vue.js became popular, providing dynamic user experiences without full page reloads. Progressive enhancement and pre-rendering were also used. However, SSR emerged as a solution to improve performance, SEO, and user experience by pre-rendering content on the server and delivering optimized initial page loads. SSR combines the benefits of server-side and client-side rendering for enhanced frontend development.

Sever-Side rendering excites fronted developers by offering faster page loads, improved SEO, and increased security.

This article explains server-side rendering in Next.js for beginners by taking the reader through the concept and how server-side rendering is implemented in Next.js app.

Introduction to Next.js

Next.js is a React framework that gives you building blocks to create web applications.

By framework, it means Next.js handles the tooling and configuration needed for React, and provides additional architecture, features, and optimization.

Next.js gives you all the features of React to build your UI and provides features such as routing, data fetching, client-side (CSR), and server-side rendering (SSR) for a better developer and end-user experience.

Next.js provides a straightforward project structure, with the key files and directories being:

pages: Contains the pages of your application. Each JavaScript file inside this directory represents a unique route.
public: Stores static assets such as images, stylesheets, and fonts.
components: Holds reusable React components.

GitHub

The project's GitHub repository can be found here.

Prerequisites

Before getting started, you must have the following prerequisites:

Basic knowledge of HTML, CSS, and JavaScript.
Familiarity with React.
Understanding of frontend development concepts.
Familiarity with Node.js and npm.
IDE or text editor for coding.

Setting Up a Next.js Project

To get started with Next.js, follow these steps:

Install Node.js and npm (Node Package Manager) if you haven't already.
Open your terminal and run the following command to install the Next.js CLI globally: npm install create-next-app.
Create a new Next.js project by executing npx create-next-app my-next-app in your desired project directory.
Once the project is created, navigate to the project directory using cd my-next-app or the name you choose to give your project directory.
Start the development server with the command npm run dev.
Open your browser and visit http://localhost:3000 to see your Next.js application running.

Understanding Server Side Rendering (SSR)

Server-side rendering involves generating HTML on the server and sending it to the client (browser). Unlike client-side rendering (CSR), where HTML is generated in the browser, SSR offers several advantages, such as improved page load times, SEO friendliness, and better initial rendering which equally provide a better user experience.

Creating Pages with Server-Side Rendering

Let's create a basic page that utilizes server-side rendering in Next.js. Follow these steps:

Inside the pages directory, create a new JavaScript file called users.js.
In users.js, define a functional React component representing the Users page.

import React from 'react';

    const Users = ({ users }) => {
      return (
        <div>
          <h1>Users</h1>
          <ul>
            {users.map((user) => (
              <li key={user.id}>{user.name}</li>
            ))}
          </ul>
        </div>
      );
    };

    export async function getServerSideProps() {
      // Fetch data from jsonplaceholder API 
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const users = await response.json();

      return {
        props: {
          users,
        },
      };
    }    
    export default Users;

In the code above, you define the Users component that renders a list of users fetched from the jsonplaceholder API.

The getServerSideProps function allows you to bring data on the server side and pass it as props to your page component. It runs on every request made to the page, making it suitable for dynamic data that needs to be fetched at runtime. The getServerSideProps function takes an object as an argument with the following properties:

context: The context object contains information about the current request, such as the request parameters context.params, query parameters context.query, and the HTTP request context.req and response context.res objects.

params: The params property within the context object contains the dynamic route parameters specified in the page's filename. For example, if you have a dynamic page with the filename [userId].js, the corresponding value of params would contain the actual userId value from the URL.
query: The query property within the context object contains the query parameters passed in the URL. For example, if the URL is /user?id=1, context.query would be { id: '1' }.

The getServerSideProps function should be defined as an async function that returns an object with the following properties:

props: The props property is an object that contains the data you want to pass to your page component. The data can be fetched from an API, a database, or any other data source. The props object will be serialized and sent to the client.
revalidate: The revalidate property is optional and determines how frequently Next.js should re-generate the page on the server. It specifies the number of seconds after which a new request will trigger a re-rendering of the page. This is useful for pages that have data that frequently changes. For example, revalidate: 10 will regenerate the page every 10 seconds to make sure the page is up to date.
The getServerSideProps function asynchronous enables efficient handling of data fetching operations during server-side rendering in Next.js, ensuring that the server remains responsive and can handle multiple requests concurrently.

Run the Next.js development server with npm run dev and visit http://localhost:3000/users. You should see the Users page with the list of users rendered on the server.

Handling Dynamic Routes

Next.js provides an intuitive way to handle dynamic routes. Here's an example of creating dynamic routes and fetching data for those routes:

Create a new file called **[userId].js** inside the page's directory.
In [userId].js, define a functional React component representing the dynamic route.


import React from 'react';

const Post = ({ user }) => {
  return (
    <div>
      <h1>{user.title}</h1>
      <p>{user.body}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${params.userId}`);
  const user= await response.json();

  return {
    props: {
      user,
    },
  };
}

export default Post;

In this example, you create a dynamic route that fetches a specific user based on the userId parameter passed in the URL. The fetched user is then rendered on the server side.

Conclusion

Server-side rendering is a powerful technique that enhances the performance and SEO of web applications. Next.js simplifies the implementation of server-side rendering by providing a seamless development experience. In this beginner's guide, you explored the basics of server-side rendering in Next.js, including setting up a project, creating pages with server-side rendering, implementing pre-rendering and caching, and handling dynamic routes.

I hope you have learned a lot from this article. Feel free to drop your comments 😊
I'd love to connect with you on Twitter | LinkedIn | GitHub

Resources

Next JS Official Documentation
Jsonplaceholder API Documentation