DEV Community: Stephanie Opala

How to build an e-commerce website using Next.js, Xata, and Cloudinary.

Stephanie Opala — Wed, 23 Nov 2022 17:23:43 +0000

This article is a step-by-step guide on how to build an e-commerce website using NextJs, Xata, and Cloudinary. Xata is a serverless database; on the other hand, Cloudinary is a platform used to manage media, that is, images, videos, etc. The other technologies required to build this application include Redux Toolkit and Redux Persist for state management.

Prerequisites

To follow along, you will need to have:

Basic knowledge of Next JS.

Getting started

Create a Next.js application using the following command.

npx create-next-app@latest

Creating a Cloudinary account

Go to Cloudinary and sign up for an account. If you already have an account, log in. Go to the Media Library section. Click on the + icon on your top left as shown below and create a folder containing the application's images.

Double-click to open the folder. Next, upload images either by using the Upload button at the top right corner of the website or drag-and-drop your files if the folder is empty.

Setting up Xata

First, create an account if you do not have one. Go to Xata and sign up or log in. Once logged in, the landing page is the workspace where you will create your databases. Click on Add a database and give it a name. For the region, you can leave the default.

Creating tables

We will have two tables, namely, product and product_category. Click Add a table on the menu on your left and add a table named product, which will contain products.

This table will have the following columns; id, name, description, category, image_url, and price. You will notice that the id column is created automatically because it is a mandatory column. To create a column, click on the + icon and select the type, e.g String.

A pop-up will appear. Fill in the details, that is, the column name, Unique, and Not null checkboxes, and then click on create the column.

For the name column, the type will be a string and unique. The description column will be of a string type and will not be unique. The category column will be of a link type and linked to the product_category table. The image_url will be of a string type and will be unique. Lastly, the price column will be of an integer number or a decimal number type, not unique.

The product_category table will only have two columns, id, and name. The name column will be of a string type and unique.

Adding records to the tables

Our application requires data; in this case, the data will be a list of products. In the products table, click the Add a record button, and a pop-up will appear. Fill in the details and click on the create record button once you are done.

A record in this database is a single product containing information such as the name, description, category, price etc, according to the columns we created earlier. Add as many records as you need. Do the same for the product_category table.

Connecting Xata to Next.js

In your terminal, run the following command to install the Xata CLI globally.

npm i -g @xata.io/cli

The CLI needs to be authenticated to connect to the database using the Xata CLI. This can be done either globally or project-based. For this project, we will use project-based authentication.

Go to the Xata Web UI and then to your workspace. Next, navigate to the configuration section and the workspace API base URL.

Copy the URL and replace the {region} and {database} with the region and your database name, respectively. Back in the terminal, run the following command to initialize the authentication process. Replace databaseUrl with the URL that you copied earlier.

xata init --db=databaseUrl

When you run this command, you will be redirected to the browser, where a new API key will be created. You will be prompted to name the API key. Once that is done, a project configuration file will be created in your current working directory, your .env file will be updated with the API key, and you will be asked if you want to install the SDK and/or use the TypeScript/JavaScript code generator. Choose the latter as it is recommended.

Setting up Redux Toolkit and Redux Persist

We will use Redux Toolkit to manage the state of the cart in our application. On the other hand, we will use redux to persist the state of our application so that when you reload the page, the state is not lost. Run this command in your terminal to install redux toolkit and redux persist.

npm install @reduxjs/toolkit react-redux redux-persist

Creating a slice

Create a folder, redux, at the root of your project folder. Next, create a file named cartSlice.js.

    import { createSlice } from '@reduxjs/toolkit';

    const initialState = {
     cart: []
    };

    export const cartSlice = createSlice({
     name: 'cart',
     initialState,
     reducers: {
      addToCart: (state, action) => {
       const productExists = state.cart?.find((product) => product.id === action.payload.id);
       if(productExists) {
        productExists.quantity++;
       } else {
        state.cart.push({
         ...action.payload, quantity: 1
        })
       }
      },
      incrementQuantity: (state, action) => {
       const product = state.cart?.find((item) => item.id === action.payload.id);
       product.quantity++;
      },
      decrementQuantity: (state, action) => {
       const product = state.cart?.find((item) => item.id === action.payload.id);
       if (product.quantity === 1) {
        const index = state.cart.findIndex((item) => item.id === action.payload.id);
        state.cart.splice(index, 1);
       } else {
        product.quantity--;
       }
      },
      removeFromCart: (state, action) => {
       const index = state.cart?.findIndex((item) => item.id === action.payload.id);
       state.cart.splice(index, 1);
      }
     }
    });

    export const {
     addToCart,
     removeFromCart,
     incrementQuantity,
     decrementQuantity
    } = cartSlice.actions;

    export default cartSlice.reducer;

At the top of our file, we import createSlice from the redux toolkit. A slice contains the name, initialState, and reducer functions. Our slice has four reducer functions; addToCart, incrementQuantity, decrementQuantity and removeFromCart.

The addToCart function takes state and action parameters. This function checks to see if a product exists. If it exists, the quantity increases by one; if it doesn’t, the state is updated with the new product, and the quantity is one.

The incrementQuantity function increases the quantity of the product by one.

The decrementQuantity function checks if the product quantity is equal to one. If so, the product is removed from the cart. If not, the quantity of the product is reduced by one.

The last reducer function is removeFromCart which finds the index of the product in the cart and we the splice() method to remove it.

At the bottom of the file, we export the actions and reducer to use them in other files in our application.

Creating a store

Inside the redux folder, create a store.js file and add the following code;

    import { configureStore } from "@reduxjs/toolkit";
    import cartReducer from './cartSlice';
    import {
     persistReducer,
     persistStore
    } from 'redux-persist';
    import thunk from "redux-thunk";
    import createWebStorage from "redux-persist/lib/storage/createWebStorage";

    const createNoopStorage = () => {
     return {
      getItem(_key) {
       return Promise.resolve(null);
      },
      setItem(_key, value) {
       return Promise.resolve(value);
      },
      removeItem(_key) {
       return Promise.resolve();
      },
     };
    };
    const storage = typeof window !== "undefined" ? createWebStorage("local") : createNoopStorage();
    export default storage;

    const persistConfig = {
     key: 'root',
     version: 1,
     storage
    };
    const persistedReducer = persistReducer(persistConfig, cartReducer);

    export const store = configureStore({
     reducer: persistedReducer,
     middleware: [thunk]
    });

    export const persistor = persistStore(store);

Providing state to the application

We will wrap our App component with a Provider to access the state from anywhere in our application. Go to the pages folder and then _app.js, and add the following code.

    import '../styles/global.css';
    import { Provider } from 'react-redux';
    import { store, persistor } from '../redux/store';
    import { PersistGate } from 'redux-persist/integration/react';

    const App = ({ Component, pageProps}) => {
     return (
      <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
        <div className="app">
         <Component {...pageProps} />
        </div>
       </PersistGate>
      </Provider>
     )
    }
    export default App;

Creating the navbar and footer components

Create a components folder at the root of your project.
Inside this folder, create these two files; Navbar.jsx and Footer.jsx
In the Navbar.jsx file, add the following code.

    import Link from 'next/link';
    import styles from '../styles/Navbar.module.css';
    import { useSelector } from 'react-redux';

    const Navbar = () => {
     const cart = useSelector((state) => state.cart);
     const sumOfCartItems = () => {
      return cart?.reduce((accumulator, item) => accumulator + item.quantity, 0);
     };
     return (
      <nav className={styles.navbar}>
       <h4 className={styles.logo}>Kwetu Furniture</h4>
       <ul className={styles.navlinks}>
        <li className={styles.navlink}>
         <Link href="/">Home</Link>
        </li>
        <li className={styles.navlink}>
         <Link href="/shop">Shop</Link>
        </li>
        <li className={styles.navlink}>
         <Link href="/cart">
          <p className={styles.cart}>
           Cart <span>{sumOfCartItems()}</span>
          </p>
         </Link>
        </li>
       </ul>
      </nav>
     )
    }
    export default Navbar

At the top, we import the useSelector hook and use it later in the code to access the state in our store. This file also contains the navigation links to our pages, including Home, Shop, and Cart. For styling, we will use CSS modules. Go to the styles folder, create a file named Navbar.module.css and add the following code. The CSS file is imported in Navbar.jsx as shown above, to apply the styles.

    .navbar {
     width: '100%';
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 1rem;
    }
    .logo {
     font-size: 1.2rem;
     font-weight: 600;
     color: #654236
    }
    .navlinks {
     display: flex;
    }
    .navlink {
     list-style: none;
     margin: 0 0.75rem;
     text-transform: uppercase;
    }
    .navlink a {
     text-decoration: none;
     color: #654236;
    }
    .navlink a:hover {
     color: #f9826c;
    }

In the Footer.jsx file, add the following code.

    import styles from '../styles/Footer.module.css';

    const Footer = () => {
     return (
      <footer className={styles.footer}>
       Kwetu &copy; 2022
      </footer>
     )
    }
    export default Footer

In the styles folder, create a Footer.module.css file and add these styles. This file is imported in the Footer.jsx file, as shown above.

    .footer {
     text-align: center;
     color: #654236;
    }

Navigate to _app.js file inside the pages folder and add the following code.

    import Navbar from '../components/Navbar';
    import Footer from '../components/Footer';
    import '../styles/global.css';
    import { Provider } from 'react-redux';
    import { store, persistor } from '../redux/store';
    import { PersistGate } from 'redux-persist/integration/react';

    const App = ({ Component, pageProps}) => {
     return (
      <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
        <div className="app">
         <Navbar />
         <Component {...pageProps} />
         <Footer />
        </div>
       </PersistGate>
      </Provider>
     )
    }
    export default App;

We import the Navbar and Footer components in this file to appear on all of our pages in the application. Add the following in the global.css file in the styles folder for the global styles.

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
    * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
    }
    .app {
     padding: 2rem;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
    }
    @media only screen and (max-width: 768px) {
     .app {
      padding: 1rem;
     }
    }

Creating the ProductCard component

This is a card component that will display information about a product. Inside the components folder, create a ProductCard.jsx file. Add the code below.

    import Image from 'next/image';
    import Link from 'next/link';
    import styles from '../styles/ProductCard.module.css';
    import { useDispatch } from 'react-redux';
    import { addToCart } from '../redux/cartSlice';

    export const ProductCard = ({url, id, name, price, categoryName, product}) => {
     const dispatch = useDispatch();
     return (
      <div className={styles.card}>
       <Image className={styles.image}
        src={url}
        width={320}
        height={300}
       />
       <h4 className={styles.name}>{name}</h4>
       <h5 className={styles.price}>${price}</h5>
       <h6 className={styles.category}>{categoryName}</h6>
       <div className={styles.buttons}>
        <Link href={`/shop/${id}`}>
         <button className={styles.buttonone}>
          Product Details
         </button>
        </Link>
        <button
         className={styles.buttontwo}
         onClick={() => dispatch(addToCart(product))}
        >
         Add to cart
        </button>
       </div>
      </div>
     )
    };

This component accepts the following props;

URL, id, name, price, categoryName, product

It also has a link to the Product Details page that we will create next and a button to add the product to the cart. On click of the Add to Cart button, we dispatch the addToCart action and pass the product as the payload.
To style this component, create a ProductCard.module.css file in the styles folder and add these styles.

    .card {
     width: 280px;
     height: 380px;
     padding: 1rem 1.2rem;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
    }
    .card:hover {
     box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }
    .buttons {
     width: '100%';
     display: flex;
     justify-content: space-between;
    }
    .name {
     color: #654236;
    }
    .price {
     color: #E24E1B;
    }
    .category {
     color: #654236;
     margin-bottom: 15px;
    }
    .buttonone, .buttontwo {
     background-color: #E24E1B;
     color: white;
     padding: 10px 10px;
     border-radius: 6px;
     border: 1px solid #E24E1B;
    }
    .buttonone:hover {
     background-color: white;
     color: #E24E1B;
     border: 1px solid #E24E1B;
     cursor: pointer;
    }
    .buttonone {
     margin-right: 20px;
    }
    .buttontwo:hover {
     background-color: white;
     color: #E24E1B;
     border: 1px solid #E24E1B;
     cursor: pointer;
    }

Adding pages

As mentioned earlier, our Next.js application will have three pages; Home, Shop, and Cart. We will start with creating the Home page.
Navigate to the index.js file in the pages folder and replace the boilerplate code with the following code.

    import Image from 'next/image';
    import Head from 'next/head';
    import Link from 'next/link';
    import styles from '../styles/Home.module.css';

    const HomePage = () => {
     return (
      <>
       <Head>
        <title>Kwetu Furniture | Home</title>
       </Head>
       <div className={styles.container}>
        <div className={styles.sectionone}>
         <h4 className={styles.title}>
          Home of elegant, stylish and affordable furniture
         </h4>
         <Link href="/shop">
          <button className={styles.button}>
           Shop Now
          </button>
         </Link>
        </div>
        <div className={styles.sectiontwo}>
         <Image
          className={styles.image}
          src={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/v1666527186/ecommerce/couch_yqi3f0.jpg`}
          alt="couch"
          layout='fill'
         />
        </div>
       </div>
      </>
     )
    }
    export default HomePage;

This page contains an image that is served from Cloudinary. To get the link to your image, go to your Cloudinary account and open the folder that contains your images. Once you have an image, you would like to use for the home page, click on the three dots and copy the URL.

The URL contains your Cloudinary name, which will be stored in a .env.local file in our Next.js app. Create a .env.local file at the root of your project. Inside this file, add the following.

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=yourcloudname

Replace yourcloudname with your Cloudinary cloud name.

In the index.js file, update the URL with process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME as shown below.

<Image
 className={styles.image}
 src={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARCLOUD_NAME}/image/upload/v1666527186/ecommerce/couch_yqi3f0.jpg`}
 alt="couch"
 layout='fill'
/>

To style this page, create a Home.module.css file in the styles folder and add the styling.

    .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 30px;
    }
    .title {
     font-size: xx-large;
     margin-bottom: 20px;
     color: #654236;
    }
    .sectionone, .sectiontwo {
     height: 70vh;
    }
    .sectionone {
     width: '100%';
     display: flex;
     flex-direction: column;
     justify-content: center;
    }
    .sectiontwo {
     position: relative;
    }
    .image {
     border-radius: 12px 12px 12px 12px;
    }
    .button {
     width: 120px;
     background-color: #E24E1B;
     color: white;
     padding: 10px 12px;
     border-radius: 6px;
     border: 1px solid #E24E1B;
    }
    .button:hover {
     background-color: white;
     color: #E24E1B;
     cursor: pointer;
     border: 1px solid #E24E1B;
    }
    @media only screen and (max-width: 768px) {
     .container {
      grid-template-columns: 1fr;
     }
    }

Next, create a folder named shop inside the pages folder. Inside the shop folder, create two files, index.js and [id].js. index.js is the page that will have all our products, while [id].js is a dynamic page route that will show the details of a particular product. Inside the index.js file, add the following;

    import Head from "next/head";
    import { ProductCard } from "../../components/ProductCard";
    import styles from '../../styles/Shop.module.css';
    import { XataClient } from '../../src/xata';
    const Shop = ({ products }) => {
     return (
      <>
       <Head>
        <title>Kwetu Furniture | Shop</title>
       </Head>
       <div className={styles.container}>
        {products.map((product) => (
         <ProductCard
          product={product}
          key={product.id}
          id={product.id}
          url={product.image_url}
          name={product.name}
          price={product.price}
          categoryName={product.category.name}
         />
        ))}
       </div>
      </>
     )
    }
    const xata = new XataClient();
    export const getServerSideProps = async () => {
     const response = await xata.db.product.select(["*", "category.*"]).getAll();
     return {
      props: {
       products: response
      }
     }
    };

    export default Shop;

At the top of the file, we are importing the XataClient.

import { XataClient } from '../../src/xata';

Later, we make an instance of the XataClient and assign it to a variable xata.

const xata = new XataClient();

We then use the getServerSideProps function to fetch the products from our database.

const response = await xata.db.product.select(["*", "category.*"]).getAll();

The code snippet above selects all columns in our product tables and all columns in the product_category table. getAll() method is one of the methods that you can use to query your data. It returns an array with all the items in our product table. If your table contains a lot of data, it is advisable to use other methods, such as getMany() or getPaginated(), which return subsets of data.

The getServerSideProps function stores the results in a variable, response, and return props. Props is an object with a key of products, and the value is response. The Shop component receives products as props. We then map through products and return a component, ProductCard, that displays the products. In the styles folder, create a Shop.module.css file and add the following styles.

    .container {
     width: '100%';
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 16px;
    }
    @media only screen and (max-width: 992px) {
     .container {
      grid-template-columns: 1fr 1fr 1fr;
     }
    }
    @media only screen and (max-width: 768px) {
     .container {
      grid-template-columns: 1fr 1fr;
     }
    }
    @media only screen and (max-width: 368px) {
     .container {
      grid-template-columns: 1fr;
     }
    }

[id].js will have more details about the product, such as the product description. Add the code below to the file.

    import { XataClient } from "../../src/xata";
    import Link from "next/link";
    import Image from 'next/image';
    import styles from '../../styles/ProductDetails.module.css';
    import { useDispatch } from 'react-redux';
    import { addToCart } from '../../redux/cartSlice';

    const ProductDetails = ({ item }) => {
     const dispatch = useDispatch();
     return (
      <div className={styles.wrapper}>
       <Link href="/shop">
        <a className={styles.link}>Go to shop</a>
       </Link>
       <div className={styles.container}>
        <Image
         src={item.image_url}
         width={400}
         height={450}
        />
        <div className={styles.details}>
         <p><span className={styles.title}>Name: </span>{item.name}</p>
         <p><span className={styles.title}>Description: </span>{item.description}</p>
         <p className={styles.price}><span className={styles.title}>Price: </span>${item.price}</p>
         <p className={styles.category}><span className={styles.title}>Category: </span>{item.category.name}</p>
         <div className={styles.button}>
          <button
           onClick={() => dispatch(addToCart(item))}
          >
           Add to cart
          </button>
         </div>
        </div>
       </div>
      </div>
     )
    }
    const xata = new XataClient();
    export const getServerSideProps = async(context) => {
     const products = await xata.db.product.select(["*", "category.*"]).getAll();
     const item = products.find((product) => product.id === context.params.id)
     return {
      props: {
       item
      }
     };
    };
    export default ProductDetails;

Create a ProductDetails.module.css file and add the following styles.

    .title {
     font-weight: 600;
    }
    .container {
     max-width: fit-content;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     gap: 18px;
     padding: 15px;
    }
    .link {
     color: #E24E1B;
     text-decoration: none;
    }
    .link:hover {
     color: #9b2b06;
    }
    .button {
     margin-top: 20px;
    }
    .button button{
     width: '60px';
     background-color: #E24E1B;
     color: white;
     padding: 10px 12px;
     border-radius: 6px;
     border: 1px solid #E24E1B;
    }
    .button button:hover {
     background-color: white;
     color: #E24E1B;
     cursor: pointer;
     border: 1px solid #E24E1B;
    }
    @media only screen and (max-width: 768px) {
     .container {
      flex-direction: column;
     }
    }

Lastly, we will create the Cart Page. Go to the pages folder and create a file cart.js.

    import { useDispatch, useSelector } from "react-redux";
    import styles from '../styles/Cart.module.css';
    import Image from "next/image";
    import { incrementQuantity, decrementQuantity, removeFromCart } from "../redux/cartSlice";

    const Cart = () => {
     const cartList = useSelector((state) => state.cart);
     const dispatch = useDispatch();
     const totalPrice = () => {
      return cartList.reduce(
       (accumulator, item) => accumulator + item.quantity * item.price,
       0
      );
     };
     return (
      <div className={styles.container}>
       {cartList?.length === 0 ? (
        <h4>Cart is empty</h4>
       ) : (
        <>
         <div className={styles.header}>
          <div>Image</div>
          <div>Product Name</div>
          <div>Price</div>
          <div>Quantity</div>
          <div>Actions</div>
          <div>Total Price</div>
         </div>
         {cartList?.map((item) => (
          <div className={styles.body} key={item.id}>
           <div className={styles.image}>
            <Image src={item.image_url} height="90" width="65" />
           </div>
           <p>{item.name}</p>
           <p>$ {item.price}</p>
           <p>{item.quantity}</p>
           <div className={styles.buttons}>
            <button onClick={() => dispatch(incrementQuantity(item))}>
             +
            </button>
            <button onClick={() => dispatch(decrementQuantity(item))}>
             -
            </button>
            <button onClick={() => dispatch(removeFromCart(item))}>
             x
            </button>
           </div>
           <p>$ {item.quantity * item.price}</p>
          </div>
         ))}
         <h2>Grand Total: $ {totalPrice()}</h2>
        </>
       )}
      </div>
     )
    }
    export default Cart;

In the Cart component, we access the state of our application using the useSelector hook and store the array of products in a variable, cartList. We then use the reduce() function to calculate the total price of the products in the cart. In the JSX, we check if the length of cartList is equal to zero. If so, we return ‘Cart is empty’, if not, we map through the array and return the list of products. Each product has increment, decrement, and remove buttons.

Conclusion

This article has covered how to set up and use Xata and Cloudinary in your Next.js e-commerce website and how to use Redux Toolkit, and Redux persist for state management. You can find more information about the different methods to query your data and additional features, such as authentication using Xata, in the Xata documentation.

Below are screenshots of the final web application.

Home page

Shop

Product Details

Cart

Here are the links to the deployed application and the Github repositiory.

How to build a multi-step form using React.js + Material UI

Stephanie Opala — Wed, 09 Nov 2022 11:17:55 +0000

Forms are used often in applications to capture information from users. A multi-step form is a form where its content is grouped into various steps with smaller pieces of the content. These types of forms are mostly used in cases where the content on the form is a lot, therefore, breaking it into smaller sections improves the user experience.

This article covers the steps on how to make a multi-step form using React.js, Material UI, and Formik and Yup for form validation.

Prerequisites
Getting Started
Creating the parent component
Creating the child components
Conclusion

Prerequisites

To follow along, you will need to have:

Basic knowledge of React JS.
Basic knowledge of Formik.

Getting Started

Create a new React project using the commands below in your terminal.

npx create-react-app multistep-form

cd multistep-form

Install Material UI for styling. This library also contains some components that we
will use to build the form.

npm install @mui/material @emotion/react @emotion/styled

Next, install Formik and Yup for form handling and validation.

npm install formik yup

Start the project on localhost.

npm start

Creating the parent component

Our form will have three steps. The first step will contain the account details such as email and password.
The second step will contain a user's personal information such as name, phone number, and residence. The last step
is a review step where all the information that the user has entered in the form is displayed before he/she submits the form. We will have a parent component Form and three child components namely, AccountDetails, PersonalInfo
and ReviewInfo.

Navigate to the src folder and create a folder named components. Inside the components folder, create a file, Form.jsx.
This will be the parent component. Create three other files namely, AccountDetails.jsx, PersonalInfo.jsx
and ReviewInfo.jsx that will contain the child components. In Form.jsx, add the following code.

import { useState } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
  Box,
  Stepper,
  Step,
  StepLabel,
  Grid,
  FormHelperText,
  Button
} from '@mui/material';
import PersonalInfo from './PersonalInfo';
import AccountDetails from './AccountDetails';
import ReviewInfo from './ReviewInfo';

const steps = [' Account Details', 'Personal Info', 'Review and Submit'];

const Form = () => {
  const [activeStep, setActiveStep] = useState(0);

  const handleBack = () => {
    setActiveStep((prevStep) => prevStep - 1);
  };

  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
      confirmPassword: '',
      firstName: '',
      lastName: '',
      phone: '',
      residence: ''
    },
    validationSchema: Yup.object().shape({
      email: Yup.string()
        .required('Email is required')
        .email('Invalid email'),
      password: Yup.string()
        .min(8),
      confirmPassword: Yup.string()
        .min(8)
        .oneOf([Yup.ref('password')], 'Passwords do not match'),
      firstName: Yup.string()
        .required('First Name is required'),
      lastName: Yup.string()
        .required('Last Name is required'),
    }),
    onSubmit: () => {
      if (activeStep === steps.length - 1) {
        console.log('last step');
      } else {
        setActiveStep((prevStep) => prevStep + 1);
      }
    }
  });

  const formContent = (step) => {
    switch(step) {
      case 0:
        return <AccountDetails formik={formik} />;
      case 1:
        return <PersonalInfo formik={formik} />;
      case 2:
        return <ReviewInfo formik={formik} />;
      default:
        return <div>404: Not Found</div>
    }
  };

  return (
    <Box
      sx={{
        maxWidth: '600px',
        padding: 2
      }}
    >
      <Stepper
        activeStep={activeStep}
        orientation="horizontal"
      >
        {steps.map((label, index) => (
          <Step key={index}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <Grid container>
        <Grid
          item
          xs={12}
          sx={{ padding: '20px' }}
        >
          {formContent(activeStep)}
        </Grid>
        {formik.errors.submit && (
          <Grid
            item
            xs={12}
          >
            <FormHelperText error>
              {formik.errors.submit}
            </FormHelperText>
          </Grid>
        )}
        <Grid
          item
          xs={12}
        >
          <Button
            disabled={activeStep === 0}
            onClick={handleBack}
          >
            Back
          </Button>
          {activeStep === steps.length - 1 ? (
            <Button>
              Submit
            </Button>
          ) : (
            <Button onClick={formik.handleSubmit}>
              Next
            </Button>
          ) }
        </Grid>
      </Grid>
    </Box>
  )
}

export default Form;

At the top of Form.jsx, we import the useState hook from react. We then import the useFormik hook and Yup for form handling and validation. Next, we import Material UI components and lastly, the child components.
After the imports, we declare a variable steps that is an array of strings with the names of our steps in the form.

The Form component returns JSX which includes the <Stepper></Stepper> material UI component. For this project, we will use a horizontal linear stepper. A linear stepper allows the user to complete the steps in sequence. This component accepts several props which include activeStep, orientation etc. The activeStep prop is a zero-based index. In our code, we initialize the state activeStep and set it to 0.

  const [activeStep, setActiveStep] = useState(0);

We then pass it as props to the Stepper component.

<Stepper
  activeStep={activeStep}
  orientation="horizontal"
>
  {steps.map((label, index) => (
    <Step key={index}>
      <StepLabel>{label}</StepLabel>
    </Step>
  ))}
</Stepper>

The orientation prop is the layout flow direction. The value can either be horizontal or vertical. Inside the <Stepper></Stepper> component we map through the steps array and return a <Step></Step> component for each item.

Below the <Stepper></Stepper>, we have a grid container with grid items. The first grid item wraps around a function call, formContent, that accepts the activeStep prop and returns a switch statement with the respective child component. The other grid item wraps around the back and next/submit buttons. The back button is disabled if the activeStep is equal to 0, which means that the user is on the first step of the form.
To display the next or submit button, we have a ternary operator to check if the user is on the last step. If so, we display the submit button, if not, we display the next button. The back and submit buttons have an onClick event handler that calls the handleBack and handleSubmit functions respectively.

Form.jsx also contains our validation schema and we pass the formik object to the child components as props.

Creating the child components

The three children components recieve the formik object that has the form values, errors, and onSubmit event listener among other properties.

AccountDetails.jsx

import {
  Grid,
  TextField,
  FormHelperText
} from "@mui/material";

const AccountDetails = (props) => {
  const { formik } = props;
  return (
    <Grid
      container
      spacing={2}
    >
      <Grid
        item
        xs={12}
      >
        <TextField
          name="email"
          label="Email"
          variant="outlined"
          type="email"
          fullWidth
          size="small"
          error={Boolean(formik.touched.email && formik.errors.email)}
          onChange={formik.handleChange}
          value={formik.values.email}
        />
      </Grid>
      <Grid
        item
        xs={12}
      >
        <TextField
          name="password"
          label="Password"
          variant="outlined"
          size='small'
          type="password"
          fullWidth
          error={Boolean(formik.touched.password && formik.errors.password)}
          onChange={formik.handleChange}
          value={formik.values.password}
        />
      </Grid>
      <Grid
        item
        xs={12}
      >
        <TextField
          name="confirmPassword"
          label="Confirm Password"
          variant="outlined"
          size="small"
          type="password"
          fullWidth
          error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
          onChange={formik.handleChange}
          value={formik.values.confirmPassword}
        />
      </Grid>
      {formik.errors.submit && (
        <Grid
          item
          xs={12}
        >
          <FormHelperText error>
            {formik.errors.submit}
          </FormHelperText>
        </Grid>
      )}
    </Grid>
  )
}

export default AccountDetails

PersonalInfo.jsx

import {
  TextField,
  Grid
} from '@mui/material';

const PersonalInfo = (props) => {
  const { formik } = props;
  return (
    <Grid
      container
      spacing={2}
    >
      <Grid
        item
        xs={6}
      >
        <TextField
          name="firstName"
          label="First Name"
          variant="outlined"
          size='small'
          fullWidth
          value={formik.values.firstName}
          onChange={formik.handleChange}
          error={formik.touched.firstName && Boolean(formik.errors.firstName)}
          helperText={formik.touched.firstName && formik.errors.firstName}
        />
      </Grid>
      <Grid
        item
        xs={6}
      >
        <TextField
          name="lastName"
          label="Last Name"
          variant="outlined"
          size="small"
          fullWidth
          value={formik.values.lastName}
          onChange={formik.handleChange}
          error={formik.touched.lastName && Boolean(formik.errors.lastNamel)}
          helperText={formik.touched.lastName && formik.errors.lastName}
        />
      </Grid>
      <Grid
        item
        xs={12}
      >
        <TextField
          name="phone"
          label="Phone Number"
          variant="outlined"
          type="phone"
          fullWidth
          size="small"
          value={formik.values.phone}
          onChange={formik.handleChange}
          error={formik.touched.phone && Boolean(formik.errors.phone)}
          helperText={formik.touched.phone && formik.errors.phone}
        />
      </Grid>
      <Grid
        item
        xs={12}
      >
        <TextField
          name="residence"
          label="Residence"
          variant="outlined"
          size="small"
          fullWidth
          value={formik.values.residence}
          onChange={formik.handleChange}
          error={formik.touched.residence && Boolean(formik.errors.residence)}
          helperText={formik.touched.residence && formik.errors.residence}
        />
      </Grid>
    </Grid>
  )
}

export default PersonalInfo

ReviewInfo.jsx

This file will display the form values that the user entered in the form.

import {
  Typography,
  List,
  ListItem,
  ListItemText
} from '@mui/material';

const ReviewInfo = ({ formik }) => {
  const { values } = formik;
  return (
    <>
      <Typography variant="overline" >
        Account Details
      </Typography>
      <List>
        <ListItem>
          <ListItemText
            primary="Email"
            secondary={values.email}
          />
        </ListItem>
      </List>
      <Typography variant="overline">
        Personal Information
      </Typography>
      <List>
        <ListItem>
          <ListItemText
            primary="First Name"
            secondary={values.firstName}
          />
        </ListItem>
        <ListItem>
          <ListItemText
            primary="Last Name"
            secondary={values.lastName}
          />
        </ListItem>
        <ListItem>
          <ListItemText
            primary="Phone Number"
            secondary={values.phone}
          />
        </ListItem>
        <ListItem>
          <ListItemText
            primary="Residence"
            secondary={values.residence}
          />
        </ListItem>
      </List>
    </>
  )
}

export default ReviewInfo

Lastly, import the Form.jsx file in App.jsx.

import './App.css';
import Form from './components/Form';

const App = () => {
  return (
    <div className="App">
      <Form />
    </div>
  );
}

export default App;

Conclusion

In this article, we have covered how to create a multi-step form using React, Material UI, and Formik and Yup for form handling and validation. If you would like to customize your form further, you can check the Material UI documentation on how you can do that using the Stepper component.

Helpful Open Source Programs for Early Career Software Developers

Stephanie Opala — Thu, 22 Sep 2022 11:34:07 +0000

There are various reasons and benefits to contributing to open-source software. In this article, I will cover a few open source programs that are helpful for early career software developers who are looking to work on real-world projects and gain some experience while improving their skills. This list does not exhaust all the programs but the ones that I have been part of or come across. I would also like to point out that some of these programs are not only open to software developers but also designers, and technical writers among other professions in the tech industry, depending on the program.

All the programs that are mentioned below are virtual and they provide stipends to the participants, as of the day that this article is written.

RubyMe Mentorship Program

In this program, early career Ruby developers work on open source projects and are paired with experienced Ruby developers for mentorship. The open source contribution ranges from development to documentation, security, etc. Both the mentee and mentor are compensated.

Outreachy Internship Program

This is a virtual program that aims to promote diversity and inclusion in the tech industry. Individuals who are subject to systemic bias and impacted by underrepresentation in the industry are encouraged to apply. The interns work with open-source organizations and their contribution ranges from development, documentation, UI/UX design, and data science, among others. Application for the December 2022 - March 2023 intake is currently open and closes on Aug, 29th 2022 4pm UTC.

Google Summer of Code

The program aims to bring new contributors into the world of open-source software development. The participants work with open-source organizations during the period of the program.

Contributhon by She Code Africa

This is also a virtual program specific to African women in technology, where they work with open-source organizations. The program aims to create diversity and inclusion in the open-source ecosystem.

LFN Mentorship Program

This program provides an opportunity for early career developers to gain experience in open-source software development. The mentees are also paired with mentors throughout the program.

Conclusion

The above programs provide an opportunity for early career developers to put their skills into practice and learn while working on real-world projects. They also provide mentors for the participants which is a huge plus. Hoping that this article will be of benefit to you or someone you know.

Happy coding!

Server-side pagination in React JS + Material UI

Stephanie Opala — Fri, 15 Jul 2022 15:03:00 +0000

Server-side pagination involves making requests to the server to fetch subsets of data that match the query parameters of the request such as page size and page index. Unlike client-side pagination where we fetch all the data at once and handle the pagination on the frontend.
This article covers reasons why you should use server-side pagination and how to implement it in React JS and Material UI.

Prerequisites
Use Cases
Benefits of server side pagination
Getting Started
Creating the table component
Fetching paginated data
Displaying data
Handling pagination
Conclusion

Prerequisites

To follow along, you will need to have:

Basic knowledge of React JS.

Use Cases

Before we start building the application, below are some of the use cases where one would consider server-side pagination instead of client-side pagination.

The data is large.
The server supports server-side pagination.

Benefits of server-side pagination

It is fast.
Improved performance in your application especially when a large amount of data is involved.

Getting started

In the terminal, run the following command to create a React application using Create React App.



npx create-react-app my-app

Once the process is done, run the following command to get into the my-app folder.



cd my-app

Next, install the Material-UI library using the following command in your terminal. We will use the TablePagination component from Material-UI when implementing pagination.



npm install @mui/material @emotion/react @emotion/styled

Start the React application using the following command.



npm start

In this article, we will use a free fake REST API from Instant Web Tools. However, if you have an existing API endpoint that supports server-side pagination, you can use that to follow along.

Creating the table component

In the src folder, create a components folder. Inside the components folder, create a file Passengers.jsx. This will contain the functional component that displays the list of passengers in a table.



import {
  Card,
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TablePagination
} from '@mui/material';

const Passengers = () => {
  return (
    <Card>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>
              Name
            </TableCell>
            <TableCell>
              Trips
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

        </TableBody>
      </Table>
      <TablePagination />
    </Card>
  )
}

export default Users;

Fetching paginated data

In Passengers.jsx, we will use the useEffect hook to fetch data that will be displayed in the table.



import { useState, useEffect } from 'react';
import {
  Card,
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TablePagination
} from '@mui/material';

const Passengers = () => {
  const [passengersList, setPassengersList] = useState([]);
  const [passengersCount, setPassengersCount] = useState(0);
  const [controller, setController] = useState({
    page: 0,
    rowsPerPage: 10
  });

  useEffect(() => {
    const getData = async () => {
      const url = `https://api.instantwebtools.net/v1/passenger?page=${controller.page}&size=${controller.rowsPerPage}`
      try {
        const response = await fetch(url);
        if (response.statusText === 'OK') {
          const data = await response.json();
          console.log(data);
          setPassengersList(data.data);
          setPassengersCount(data.totalPassengers);
        } else {
          throw new Error('Request failed')
        }
      } catch (error) {
        console.log(error);
      }
    };
    getData();
  }, [controller]);

  return (
    <Card>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>
              Name
            </TableCell>
            <TableCell>
              Trips
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

        </TableBody>
      </Table>
      <TablePagination
      />
    </Card>
  )
}

export default Passengers;

In the code snippet above, we fetch data in the useEffect hook which we import at the top of our file.
Inside the Passengers functional component, we have three states that we are managing using the useState hook.



const [passengersList, setPassengersList] = useState([]);
  const [passengersCount, setPassengersCount] = useState(0);
  const [controller, setController] = useState({
    page: 0,
    rowsPerPage: 10
  });

passengersList is an array that will contain the list of passengers that we will fetch from the API. passengersCount is the value of the total number of passengers and controller is an object with pagination information, that is, the page index and page size.

Inside the useEffect hook, we have an asynchronous function, getData that fetches the data when the page renders for the first and whenever the controller state changes. We then have a try...catch statement inside this function.

In the try block of code, we make the API call using fetch method and await the response. We then check whether the request is successful or not. If successful, the response is converted to JSON format using the json() method and stored in a variable data. We then use the setPassengersList setter function to update the state of the passengersList. We do the same for setPassengersCount which is updated with the total number of passengers from our API. On the other hand, if the request fails, an error is thrown.

In the catch block of code, we console.log() the error from the response to our console.

Displaying data



  <Card>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>
            Name
          </TableCell>
          <TableCell>
            Trips
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {passengersList.map((passenger) => (
          <TableRow key={passenger._id}>
            <TableCell>
              {passenger.name}
            </TableCell>
            <TableCell>
              {passenger.trips}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
    <TablePagination />
  </Card>

The above code snippet is the JSX that will be in the return statement. Since we have the data stored in the passengersList state, we will map through each object and display the name and number of trips of the passenger in the table as shown above.

Handling pagination



  <TablePagination
    component="div"
    onPageChange={handlePageChange}
    page={controller.page}
    count={passengersCount}
    rowsPerPage={controller.rowsPerPage}
    onRowsPerPageChange={handleChangeRowsPerPage}
  />

The TablePagination component accepts the following props;
count - This is the number of records/rows.
page - This is the page index.
rowsPerPage - This is the number of rows that will be displayed per page.
onPageChange - This is a callback function that is fired when the page is changed.
onRowsPerPageChange - This is the callback function that is called when the number of rows per page is changed.
component - The component used for the root node.

In our case, we will pass these six props in our TablePagination component. The first four props are required while the last two props are optional. This component also accepts several other props. More details can be found in the Material UI documentation.

Inside the Passengers component just before we return the JSX, we will define two functions, handlePageChange and handleChangeRowsPerPage.



  const handlePageChange = (event, newPage) => {
    setController({
      ...controller,
      page: newPage
    });
  };

  const handleChangeRowsPerPage = (event) => {
    setController({
      ...controller,
      rowsPerPage: parseInt(event.target.value, 10),
      page: 0
    });
  };

handlePageChange will be called when the page is changed. Inside this function, we set the controller.page state to the new page that we have navigated to. The useEffect will run again and will cause a re-render.

handleChangeRowsPerPage will be called when the number of rows per page is changed.

Below is the full code snippet in Passengers.jsx.



import { useState, useEffect } from 'react';
import {
  Card,
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TablePagination
} from '@mui/material';

const Passengers = () => {
  const [passengersList, setPassengersList] = useState([]);
  const [passengersCount, setPassengersCount] = useState(0);
  const [controller, setController] = useState({
    page: 0,
    rowsPerPage: 10
  });

  useEffect(() => {
    const getData = async () => {
      const url = `https://api.instantwebtools.net/v1/passenger?page=${controller.page}&size=${controller.rowsPerPage}`
      try {
        const response = await fetch(url);
        if (response.statusText === 'OK') {
          const data = await response.json();
          console.log(data);
          setPassengersList(data.data);
          setPassengersCount(data.totalPassengers);
        } else {
          throw new Error('Request failed')
        }
      } catch (error) {
        console.log(error);
      }
    };
    getData();
  }, [controller]);

  const handlePageChange = (event, newPage) => {
    setController({
      ...controller,
      page: newPage
    });
  };

  const handleChangeRowsPerPage = (event) => {
    setController({
      ...controller,
      rowsPerPage: parseInt(event.target.value, 10),
      page: 0
    });
  };

  return (
    <Card>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>
              Name
            </TableCell>
            <TableCell>
              Trips
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {passengersList.map((passenger) => (
            <TableRow key={passenger._id}>
              <TableCell>
                {passenger.name}
              </TableCell>
              <TableCell>
                {passenger.trips}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <TablePagination
        component="div"
        onPageChange={handlePageChange}
        page={controller.page}
        count={passengersCount}
        rowsPerPage={controller.rowsPerPage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </Card>
  )
}

export default Passengers;

Finally, import Passengers.jsx file in App.js.
On localhost, below is the image of the final project.

Conclusion

This article has covered the use cases of server-side pagination, its benefits, and steps in implementing it in a React JS and Material UI application.

If you would like to know more about customizing your pagination and tables using Material UI, check out the official Material UI documentation.

Happy coding.

HNG 8.0 INTERNSHIP: My Front-end Development Journey

Stephanie Opala — Mon, 16 Aug 2021 07:28:13 +0000

I applied for the HNG 8.0 Internship and got in. Someone might ask, what is the HNG Internship? This is a remote internship program for developers and designers that focuses on the post-training phase therefore, you get to work on real-world projects and challenges during the program. You can get more information about the program here.

My goals for the internship

I am on the Front-end Development track therefore one of my goals is to be able to put my skills into practice, connect and learn from other developers.

What I want to achieve at the end of the internship

I want to improve my collaboration skills and also learn new skills.

If you are a beginner or getting started on your development journey, here are a few resources to get you started.

Design track
Figma Crash Course
Version control using Git
Git and Github for beginners
JavaScript Course
Modern JavaScript

Happy coding!

Simple responsive navigation bar | React.js

Stephanie Opala — Wed, 23 Jun 2021 09:18:36 +0000

This article is a step-by-step guide on how to create a simple navigation bar using React.js, styled components for styling, and react router to handle routing.
NOTE: This article has been updated to use the latest version of react router, that is, version 6.

Prerequisites
Setting up the React environment
Installing the required dependencies
Structuring the project
Creating the navbar component
Styling the navbar component
Implementing routes
Adding content to the pages
Conclusion

Prerequisites

To follow along, you will need to have:

Basic knowledge of React JS.

Setting up the React environment

In the terminal, run the following command to create a React application using Create React App.

npx create-react-app my-app

Once the process is done, run the following command to get into the my-app folder.

cd my-app

Installing the required dependencies

Install react-router-dom using the following command in your terminal.

npm install react-router-dom

We will use styled components for styling, therefore install it using the command below.

npm install --save styled components

Lastly, we will need some icons for the project. For this, we will use react-icons. Install it using the command below.

npm install react-icons --save

Once the installation of the above is done, start the React application using the following command.

npm start

Structuring the project

Create a folder named components in the src folder.
Inside the components folder, create a another folder named Navbar.
Inside the Navbar folder, create two files named index.js and NavbarElements.js.

We will create another folder for the pages.
Go to src folder and create a folder named pages.
Inside pages create the following files.
index.js
about.js
contact.js
signin.js
signup.js

These will be the web pages on our website.

Creating the navbar component

Go to the components/Navbar/index.js file and create a functional component, Navbar.

index.js

import React from "react";

const Navbar = () => {
    return (
        <>
           <Nav>
            <NavLogo to="/">
                Logo
            </NavLogo>
            <Bars />

            <NavMenu>
                <NavLink 
                  to="/"
                  activeStyle={{ color:'black' }}
                >
                    Home
                </NavLink>
                <NavLink 
                  to="/about"
                  activeStyle={{ color: 'black' }}
                >
                    About
                </NavLink>
                <NavLink 
                  to="/contact" 
                  activeStyle={{ color: 'black' }}
                >
                    Contact
                </NavLink>
                <NavLink
                  to="/signin"
                  activeStyle={{ color: 'black' }}
                >
                    Sign In
                </NavLink>
                <NavBtn>
                    <NavBtnLink to="/sign-up">Sign Up</NavBtnLink>
                </NavBtn>
            </NavMenu>
           </Nav> 
        </>
    );
};
export default Navbar;

The code snippet above is the navbar component which includes the logo and various links.

Styling the navbar component

In NavbarElements.js, include the following styles.

import { FaBars } from "react-icons/fa";
import { NavLink as Link } from "react-router-dom";
import styled from "styled-components";

export const Nav = styled.nav`
    background: orangered;
    height: 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem calc((100vw - 1000px) / 2);
    z-index: 12;
`;
export const NavLogo = styled(Link)`
  cursor: pointer;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;

`;

export const NavLink = styled(Link)`
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&:hover {
  color: black;
}
`;

export const Bars = styled(FaBars)`
  display: none;
  color: #fff;
  @media screen and (max-width: 768px) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 75%);
    font-size: 1.8rem;
    cursor: pointer;
  }
`;

export const NavMenu = styled.div`
  display: flex;
  align-items: center;
  margin-right: -24px;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavBtn = styled.nav`
  display: flex;
  align-items: center;
  margin-right: 24px;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavBtnLink = styled(Link)`
  border-radius: 4px;
  background: transparent;
  padding: 10px 22px;
  color: #fff;
  outline: none;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  margin-left: 24px;
  &:hover {
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #808080;
  }
`;

At the top of the file, we are importing FaBars which is an icon from react-icons. We are also importing styled from styled-components and lastly Navlink as Link from react-router-dom.
Styled components allows you to include pseudo selectors and media queries when writing your styles, similar to how you would write them when using SASS/SCSS.

Go to components\Navbar\index.js and import the following from NavbarElements.js just before the functional component.

import {
    Nav,
    NavLogo,
    NavLink,
    Bars,
    NavMenu,
    NavBtn,
    NavBtnLink,
} from "./NavbarElements";

Implementing routes

In App.js, import the Navbar component and the pages. We will also import BrowserRouter, Routes, Route from react-router-dom.

import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from './pages';
import About from './pages/about';
import Contact from './pages/contact';
import SignUp from './pages/signup';
import SignIn from './pages/signin';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/signin" element={<SignIn />} />
        <Route path="/sign-up" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Adding content to the pages

In the following pages, add placeholder text or any suitable content for your pages.

about.js

const About = () => {
    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh'
            }}
        >
            <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, totam.</h1>
        </div>
    );
};

export default About;

contact.js

const Contact = () => {
    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh'
            }}
        >
           <h1>Contact Us</h1> 
        </div>
    );
};

export default Contact;

index.js

const Home = () => {
  return (    
    <h1>Welcome to our website!</h1>
  );
};

export default Home;

signin.js


const SignIn = () => {
  return (
    <div>
      <h1>Sign In</h1>
    </div>
  )
}

export default SignIn;

signup.js


const SignUp = () => {
  return (
    <div>
      <h1>Sign Up and get started</h1>
    </div>
  )
}

export default SignUp;

Conclusion

In this article, we have created a navigation bar using React, styled components and react-router for routing.

Happy coding.

Resources to learn JavaScript for beginners

Stephanie Opala — Wed, 31 Mar 2021 14:10:44 +0000

In this post I will share some of the resources that one can use to learn vanilla JavaScript. There are a lot of resources out there but here are a few that I have used and I decided to share.

Codecademy

They offer both free and pro membership. The pro membership is paid. I used Codecademy to learn the basics of JavaScript. The lessons go in-depth into the concepts which was a plus for me.

The Net Ninja

He has a Youtube series on Modern JavaScript and also a course on Udemy on the same.

Traversy Media

He has a Youtube series on vanilla JavaScript and a Udemy course on Modern JavaScript

FreeCodeCamp

They have a free course on JavaScript Algorithmns and Data Structures

The Odin Project

The JavaScript Course by The Odin Project is well structured and great for beginners.

Webdev Simplified

This is a YouTube channel. He covers all concepts related to Web development including vanilla JavaScript.

Happy coding!

Difference between JSX and HTML

Stephanie Opala — Tue, 30 Mar 2021 09:37:41 +0000

One of the requirements when you start to learn React is learning JSX. So what is JSX? This is a JavaScript syntax extension. When you are new to it and have a glance at the syntax for the first time, it looks like a mixture of both JavaScript and HTML. Here is an example;

const heading = <h1>Hello world</h1>;

JSX is popularly used in React and in this post, I will be highlighting the key differences between JSX and HTML syntax.

Use of className instead of class attribute

In JSX we use className attribute whereas in HTML we use the class attribute. This is because JSX is transpiled into JavaScript and class is a reserved word in JavaScript.
JSX
<div className = "container"></div>
HTML
<div class = "container"></div>

Self closing tags

Self-closing tags in JSX must have the forward slash whereas the forward slash is optional in the HTML self-closing tags.
JSX
<img src="#" /> <br/>
HTML
<img src="#" > <br>

Event listeners

Event listeners in JSX are written in camelCase, for instance, onClick whereas in HTML, they are written in lowercase for instance, onclick

These are some of the key differences. You can have a look at the React documentation if you would like to learn more about JSX.
Happy coding!

Nevertheless, Steph Coded in 2021! 👩‍💻

Stephanie Opala — Mon, 08 Mar 2021 15:55:21 +0000

How it started 👩‍💻

If on this day last year, someone told me that I would have accomplished this much into my journey in tech, I would not have believed them. After my graduation in 2019, I worked in the marketing field but I had always wanted to get into tech. Therefore, in September 2020 after doing my research on careers in the tech industry and how to get started, I enrolled to a bootcamp, Introduction to Web Development by Code First Girls. The bootcamp lasted 8 weeks and thereafter, I decided to continue learning as a self-taught developer. Here I am 7 months later!

My most recent achievement🏆 was...

Learning and building mini projects in JavaScript. I've been struggling with JavaScript since it's my first programming language but I'm proud that I've tackled that, and built mini-projects.

Advocating for myself looks like…

Self-affirmations 😊
Taking breaks when necessary.
Reminding myself that an expert in their field was once a beginner.

My biggest goal is…

Grow career-wise and support other women transitioning into the tech industry and even those in the industry. The first few months can be tough. I am thankful to all the women that continued to encourage me to get going. There were days especially as a self-taught developer, where I felt so demotivated and wasn't sure if I'd get to achieve what I had set out to do, but watching or listening to other women's stories about how they got to navigate similar obstacles really motivated me.

My advice for allies to support underrepresented folks who code is...

Give them a chance.

Writing clean JavaScript code: Variables

Stephanie Opala — Fri, 05 Feb 2021 10:15:45 +0000

What is clean code? It is code that is easy to understand by humans and easy to change or extend.
In this post, I will cover JavaScript clean coding best practices when it comes to variables.

Use meaningful and pronounceable variables. You should name your variables such that they reveal the intention behind it. This makes it easier to read and understand.

DON'T

 let fName = "Stephanie";

 let firstName = "Stephanie";

Use ES6 constants when variable values do not change.
At this point, you have interacted with JavaScript ES6 severally/ a few times depending on your level of expertise therefore, keep this in mind.
Use the same vocabulary for the same type of variable.

DON'T

getUserInfo();
getClientData();
getCustomerRecord();

getUser();

Use searchable names. This is helpful when you are looking for something or refactoring your code.

DON'T

setTimeout(blastOff, 86400000); //what is 86400000???

const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

Do not add unneeded context.

DON'T

const Laptop = {
 laptopMake: "Dell",
 laptopColor: "Grey",
 laptopPrice: 2400
};

const Laptop = {
 make: "Dell",
 color: "Grey",
 price: 2400
};

Happy coding!

Docker for beginners: Installing Docker on Windows 10

Stephanie Opala — Sun, 17 Jan 2021 16:48:39 +0000

Before Installation
As a beginner this part can easily be overlooked but it is an important step. There are some system requirements before installing Docker, in this case, on Windows OS and here is a guide on what to do before installation.

Check the Windows version that you are using.
The latest Docker version runs on Windows 10 64-bit: Pro, Enterprise, or Education (Build 16299 or later).
There is also a Docker package for Windows 10 Home.
Check the RAM size. Another system requirement is 4GB system RAM.

Below are the rest of the system requirements;

Hyper-V and Containers Windows features must be enabled.
BIOS-level hardware virtualization support must be enabled in the BIOS settings. After confirming this, you can also have a look at the product manual and then download and install Docker.

Confirming installation
Open the terminal and type the following.

docker -v

You should see a docker version. If you don't see a Docker version, reinstall or restart your machine.

What to learn before learning React

Stephanie Opala — Sun, 03 Jan 2021 05:28:23 +0000

I am currently learning React( A JavaScript library) and here are a few prerequisites before diving into the JavaScript library.

BASIC HTML AND CSS
You should have a basic understanding of HTML and CSS. Knowing how to write HTML sematic tags will make it easier to grasp the concepts of JSX(a JavaScript syntax extension) used in React. Besides that, you should learn how CSS is used in styling and in responsive web applications.

VERSION CONTROL(GIT AND GITHUB)
Git is an open source version control tool that lets you manage and keep track of your code and GitHub on the other hand, is a code hosting platform for version control and enables collaboration among developers.

VANILLA JAVASCRIPT
Before jumping into a JavaScript library or framework, it is a good idea to learn the vanilla JavaScript. Below is a list of JavaScript features that you should learn before learning React.

General JavaScript features(variables, functions, datatypes, conditional statements e.t.c)
Modern JavaScript features
- ES6 classes
- The new variable declaration let/const
- Arrow functions
- Destructuring assignment
- Array functions especially Map and filter
- ES6 modules
- Asynchronous JavaScript

Happy coding!

DEV Community: Stephanie Opala

How to build an e-commerce website using Next.js, Xata, and Cloudinary.

Prerequisites

Getting started

Creating a Cloudinary account

Setting up Xata

Creating tables

Adding records to the tables

Connecting Xata to Next.js

Setting up Redux Toolkit and Redux Persist

Creating a slice

Creating a store

Providing state to the application

Creating the navbar and footer components

Creating the ProductCard component

Adding pages

Conclusion

Home page

Shop

Product Details

Cart

How to build a multi-step form using React.js + Material UI

Table of contents

Prerequisites

Getting Started

Creating the parent component

Creating the child components

AccountDetails.jsx

PersonalInfo.jsx

ReviewInfo.jsx

Conclusion

Helpful Open Source Programs for Early Career Software Developers

RubyMe Mentorship Program

Outreachy Internship Program

Google Summer of Code

Contributhon by She Code Africa

LFN Mentorship Program

Conclusion

Server-side pagination in React JS + Material UI

Table of contents

Prerequisites

Use Cases

Benefits of server-side pagination

Getting started

Creating the table component

Fetching paginated data

Displaying data

Handling pagination

Conclusion

HNG 8.0 INTERNSHIP: My Front-end Development Journey

My goals for the internship

What I want to achieve at the end of the internship

Simple responsive navigation bar | React.js

Table of contents

Prerequisites

Setting up the React environment

Installing the required dependencies

Structuring the project

Creating the navbar component

index.js

Styling the navbar component

Implementing routes

Adding content to the pages

about.js

contact.js

index.js

signin.js

signup.js

Conclusion

Resources to learn JavaScript for beginners

Difference between JSX and HTML

Use of className instead of class attribute

Self closing tags

Event listeners

Nevertheless, Steph Coded in 2021! 👩‍💻

How it started 👩‍💻

My most recent achievement🏆 was...

Advocating for myself looks like…

My biggest goal is…

My advice for allies to support underrepresented folks who code is...