DEV Community: Igor Silveira

Next.js Static Site Generation Practical Example

Igor Silveira — Wed, 15 Jun 2022 09:52:57 +0000

This article is part of an entire Next.js series of articles that I am putting together to help you become a Next.js pro and start building blazing fast React apps.

💡 If you don’t want to miss out on any of the tutorials, signup for my newsletter by clicking here or head over to DailyDev.io for more.

On this issue, we will be learning about how Next.js enables high-performant websites by pre-rendering every page by default instead of having it all done by client-side JavaScript, like regular React apps usually do.

💡 You can find the source code for this project here.

So let’s get started!

Pre-requisites

Node ≥ 12
React Basics

Quick Recap

Up to this point, we have been talking about the concept of pages, how to represent them within our Next.js project, and how to make them either static or dynamic so that Next.js would know how to render and match specific URLs to their corresponding React components.

We then fired up our development server by running npm run dev and waited for a browser window to pop up with our app running at http://localhost:3000. Great! 👍

But one thing we have not done is dive deeper into how Next.js is assembling those pages and serving them back to us when we visit some URL. And better yet, how the production build of our app differs from the development environment we are running locally. And this is really where Next.js shines.

Pre-rendering

“What is pre-rendering?” you might ask. Pre-rendering is the act of taking a page in the application and generating the plain HTML for it beforehand, instead of letting the client-side handle the bulk of the work. The HTML is then also shipped with minimal JavaScript code that will run in the client and that is necessary to make that page fully interactive.

This process helps solve two of the main downsides normally associated with React apps and general Single Page Applications (SPAs):

shockingly low Search Engine Optimization (SEO) capabilities, since all pages and transitions are handled by the client through JavaScript code and, therefore, not crawlable by Search Engines
heavy loads for the clients as they have to download and run the entire application on the browser which quickly presented problems as the applications became larger and more interactive

How Next.js Handles Pre-Rendering

Next.js will pre-render every page, by default. And it can happen in two different ways, the difference is when it generates the HTML for a page:

Static Generation: The HTML is generated at build time and is reused on every request for that page.
Server-side Rendering (for another article): The HTML for a page is generated on each request.

Both of these options will offer the benefits we discussed in the previous section but they can be used for different use cases upon different needs and you can even develop hybrid approaches within the same application by statically generating most pages and server-side rendering others.

The best and most performant choice for serving a web application is by statically generating all the application’s pages since they can be easily cached in a Content Delivery Network (CDN) and boost performance by serving them closest to the requesting client. However, in some cases, Server-side Rendering might be the only option.

For now, let’s take a look at how you can achieve Static Generation within or dog app.

Static Generation

Using Static Generation, the HTML for a page is generated at build time when we run the next build command. That generated HTML is then served and reused whenever the page is requested.

There are two ways to statically generate pages, with or without data from external sources.

Static Generation without data

This is the most basic use case for a Next.js page, as it is the default behavior of the framework.

A simple component exported from a file in the pages folder that does not need to fetch any external data before being pre-rendered generates a single HTML file during the build time.

An example would be the individual dog pages we created in our first tutorial on Next.js Basic Routing:

const Doggo: NextPage = () => {
  return (
    <div>
      <main>
        <h1>
          This is a Doggo.
        </h1>

        <Image alt="This is a doggo" src='google.com' width={520} height={520}/>
        <p style={{color: "#0070f3"}}><Link href="/">Back Home</Link></p>
      </main>
    </div>
  )
}

export default Doggo;

Static Generation with Data

Then there is Static Generation dependent on fetching external data for pre-rendering. You can imagine two different use cases for needing to fetch external data for rendering pages:

Your page content depends on external data.
Your page paths (existing routes) depend on external data.

Scenario 1

We can think of an example within our doggo app where our page content will depend on external data. We made our page dynamic in the last tutorial, so all dogs are rendered by the same React Component. But all dogs have different information to be rendered on the page, therefore, the pages for each dog have distinct content.

Let’s assume the following snippet of our updated dog page:

// Need to get a dog from the API
const Doggo: NextPage = ({ dog }) => {
  return (
    <div>
        <h1>This is a {dog.name}.</h1>

        <Image
          alt="This is a doggo"
          src={dog.imageURL}
          width={520}
          height={520}
        />

        <p>{dog.description}</p>
    </div>
  );
};

export default Doggo;

To render each dog page with the correct data, we need to provide that specific dog data to our React Component.

To do this in Next.js, we will export an async function with a specific name, getStaticProps within the same page where the React Component representing the page is exported. This function will be called at build time when pre-rendering the page, and you can pass the necessary fetched data to the page’s props.

const Doggo: NextPage = ({ dog }) => {
  ...
};

// This function gets called at build time
export const getStaticProps: GetStaticProps = async () => {
  // Call an external API endpoint to get a dog
  const res = await fetch("https://.../dogs/a-doggo");
  const dog = await res.json();

  // By returning { props: { dog } }, the Doggo component
  // will receive `dog` as a prop at build time
  return {
    props: {
      dog,
    },
  };
}

export default Doggo;

Scenario 2

Last time, we created a dynamic page within our app that enabled dynamic routes. With that, our app started responding to all requests for pages under /dogs/:id. But instead of only exposing routes for existing dog ids, our application is matching every id, so it will never return a 404 - Not Found under that route.

In a real-world scenario, this does not make much sense. We would only want to render and serve pages for specific and individual resources that exist within our database.

So our page paths depend on external data and should be pre-rendered. Similar to before, Next.js allows you to declare a specific function within your page component’s file, whose sole purpose is to return a list of paths that this dynamic page should be rendered on, getStaticPaths. This function also gets called at build time.

// This function gets called at build time
export const getStaticPaths: GetStaticPaths = async () => {
  // Call an external API endpoint to get dogs
  const res = await fetch("https://.../dogs");
  const dogs = await res.json();

  // Get the paths we want to pre-render based on dogs
  const paths = dogs.map((dog: any) => ({
    params: { id: dog.id },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

export default Doggo;

Now getStaticPaths and getStaticProps can work together to pre-render all pages for existing dogs, based on a single dynamic React Component.

Updating our Dog App

Now it is time to see this in action and power up our previously created dynamic page so that it can reach its full potential.

Creating a Dog Interface

Since we are using TypeScript to ensure type safety and easy development, we should make use of it and create an interface to represent our dog and facilitate its usage through the app.

Let’s create a new /definitions folder to store our definitions files and create a dogs.d.ts file with the following content, and now we have a simple representation of our dog object.

interface Dog {
    id: number;
    name: string;
    description: string;
}

Creating our Dog Database

For simplicity, we will be creating a small in-memory structure to store our dogs and their information, so that Next.js can then access them and pre-rendered all the individual pages.

Let’s create a /db folder where we can store all our in-memory structures of data for ease of access. Inside we will create a dogs.ts file and populate it with some structure data of some dogs using our previously created interface.

export const dogs: Dog[] = [
    {
        id: 1,
        name: 'Fido',
        description: 'A friendly dog',
    },
    {
        id: 2,
        name: 'Rex',
        description: 'A big dog',
    },
    {
        id: 3,
        name: 'Spot',
        description: 'A small dog',
    }
]

Updating our Dog Page Component

We will make some updates to our page component in order for it to become 100% dynamic, namely:

Remove the use of the Next.js Router: Next.js will be giving us all the necessary information through the component props.
Create the getStaticPaths function to generate a list of string-based paths that represent only our available dogs.
Create the getStaticProps function to fetch the respective dog based on the information received in the params.
Update our page content to use the dog information present on the dog prop is it now receiving from getStaticProps.

By the end, our React Component should look something like this:

import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Link from "next/link";

import { dogs as dogsDB } from "../../db/dogs";

const Doggo: NextPage<{ dog: Dog }> = ({ dog }) => {
  return (
    <div>
      <main>
        <h1>This is {dog.name}.</h1>
        <p>{dog.description}</p>

        <p style={{ color: "#0070f3" }}>
          <Link href="/dogs">Back to Dogs</Link>
        </p>
      </main>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  if (!params || !params.id) {
    return { props: {} };
  }

  const dog = dogsDB.find((dog) => dog.id === parseInt(params.id as string));

  return {
    props: {
      dog,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const dogs = dogsDB;
  const paths = dogs.map((dog: Dog) => ({
    params: { id: dog.id.toString() },
  }));

  return { paths, fallback: false };
};

export default Doggo;

Final Touch: Update Dogs Index Page

Just to end this on a high note, let’s update our dogs’ index.tsx page so that it will list all existing dogs and link to their individual pages.

The same principles apply here, but since it is only a single non-dynamic page, we only use getStaticProps and pass the dog list as props to the page so that it can render the list.

import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import Link from "next/link";

import { dogs as dogsDB } from "../../db/dogs";

const Doggo: NextPage<{ dogs: Dog[] }> = ({ dogs }) => {
  return (
    <div>
      <Head>
        <title>Our Doggos</title>
      </Head>

      <main>
        <h1>Check out our doggos.</h1>

        <ul style={{ color: "#0070f3" }}>
          {dogs.map((dog) => (
            <li key={dog.id}>
              <Link href={`/dogs/${dog.id}`}>{dog.name}</Link>
            </li>
          ))}
        </ul>

        <p style={{ color: "#0070f3" }}>
          <Link href="/">Back Home</Link>
        </p>
      </main>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const dogs = dogsDB;

  return {
    props: {
      dogs,
    },
  };
};

export default Doggo;

Final Result

By the end, your app should look something like this. Pretty neat! 😎

Final Remarks

To experience the full power and speed of Static Generation, don’t forget to run the build command (npm run build) followed by serving (npm run start) the generated files. This is how the pages would be served in a production environment and cached by some CDN.

Running the project in npm run dev mode will always build all pages on each request.

Notice how Next.js detected which pages were static and dependent on external data, generating exactly the routes defined by our in-memory database.

If you run into any trouble feel free to reach out to me on Twitter, my DMs are always open.

Next Steps: Keep an eye out for my following Next.js tutorials where we will go over much more in Next.js territory! If you don’t want to miss out on any of the tutorials, signup for my newsletter by clicking here.

A Comprehensive Guide to NextJS Dynamic Routing

Igor Silveira — Thu, 09 Jun 2022 06:06:41 +0000

This article is part of an entire Next.js series of articles that I am putting together to help you become a Next.js pro and start building blazing fast React apps.

💡 If you don’t want to miss out on any of the tutorials, signup for my newsletter by clicking here or head over to DailyDev.io for more.

On this issue, we will be learning about how Next.js allows us to easily create dynamic pages from a single React component following.

💡 You can find the source code for this project here.

So let’s get started!

Pre-requisites

Node ≥ 12
React Basics

Quick Recap

The last time we were here, we created a basic web app to better understand the basics of how to build an app with Next.js.

We introduced the concept of pages and how Next.js expects us to scaffold our application and our React components in order for it to automatically create and manage page URLs and transitions.

If you missed that introductory issue, I highly recommend you to check it out before continuing.

Pages

In Next.js, every page is a React Component that is exported from a file that lives in the /pages directory at the root of your project. The name of the file dictates the route it will be associated with, including the folder(s), if any, that the React Component is living in.

/pages/index.tsx maps to the / route (special files)
/pages/dogs/a-doggo.tsx maps to the /dogs/a-doggo.tsx route.

The new file's contents can be anything you wish, as long as it exports a default React Component that renders some JSX that Next.js can then render as HTML.

Generating our Project

To kick this off, we will create our Next.js project to host this app by running this command in the directory you wish to store all of your awesome Next.js projects.

npx create-next-app nextjs-dynamic-routing --use-npm --typescript -e https://github.com/igorasilveira/blog-examples/tree/main/nextjs-basic-routing

A breakdown of what we just did:

npx - is a command-line interface tool that makes it easy to execute npm packages without actually installing them on your own machine.
create-next-app - our best friend, will scaffold a perfectly balanced Next.js app for you.
nextjs-dynamic-routing - this is the name I decided to give my project, feel free to mix it up a bit.
--use-npm - this flag specifies that we want to use NPM as our dependency manager.
--typescript - this flag tells the scaffolding tool that we want to generate a TypeScript project and it initializes all required dependencies (this is more of a personal preference of mine - ❤️ TypeScript).
-e - this option specifies an example to bootstrap the app with. In this case, we are using the GitHub repository from the previous issue so that we can continue building our app from where we left off.

Running our App

Our Next.js project has been created and all dependencies automatically installed. We can now run it and see our app come to life! To do so, in the same terminal we used to generate the project, we now cd into our project folder and run the following command to start our project in development mode.

npm run dev

After a couple of seconds, your Next.js app server is launched (hopefully with success) and you can now navigate to http://localhost:3000 and check our doggo-based app! 🐶

Dynamic Routing

Now that we have our application up and running, let’s learn more about what is dynamic routing, why we need it, and how Next.js will handle it for client-side rendered pages.

Why Do We Need It

Predefined path-based routes like we used in our last tutorial are not always the best choice for large complex and dynamic applications.

If we would keep to the previous approach, it would involve creating a React component each time we wanted to create a new page, which would require the application’s developers to create new code, push it to the main branch and then deploy the changes to production. This is not only a CI/CD nightmare as it is also the recipe for duplicated spaghetti code.

For example, in our doggo app, every time we want to add a new dog page to the application, we don’t want to duplicate the previous component and make the necessary changes to reflect the new addition, especially since all our doggos pages render exactly the same structure. This is a perfect use case for component reusability.

Component Reusability

If you’ve used Components before in your web journey, you are already familiar with their benefits.

Components allow you to define the common application’s structures that you can then easily reuse without the need to re-write their appearance and behavior. You then arrange those components in any way you wish to former larger, more complex components that eventually become the pieces that build full application pages. If later you wish to change that structure, design, or functionality, you only need to update the components you want and those changes will reflect everywhere they are used.

How Next.js Handles It

In Next.js you can do just that (as with any modern web framework) and by the end, you have a reusable page for your application just from a single exported React Component. Later, if you need to change every doggo page in your app, you will only need to update ONE component in a single file.

In order to generate dynamic (reusable) pages, there are a couple of changes and additions we need to make to our previous React Component so that Next.js can understand that it is in fact a dynamic route and not a static one.

It all starts with the filename within the pages folder, same as before, but this time with a twist. Dynamic (reusable) pages will be exported from special named files surrounded by brackets ([param]). The rest of the route is still defined by the folder hierarchy as we talked about in the previous article. Let’s take a look at some examples:

pages/dogs/[id].tsx → /dogs/:id (/dogs/123)
pages/post/[...all].tsx → /post/* (/post/2020/id/title)

If we consider the first example, pages/dogs/[id].tsx, any route matching the /dogs/:id pattern will be rendered by the React Component exported by the special [id].tsx page within the pages/dogs directory, such as /dogs/123 and /dogs/russel.

To access the dynamic part of the route (the id in this case), we can access the Next.js Router directly and get it through the query object. In the example of /dogs/russel, the query object would be the following:

{ "id": "russel" }

And to access it within your React Component you would use the provided Next.js hook useRouter.

Updating our Doggo App

Let’s consider our dog app we build in the first tutorial, where we have a file exporting a React Component for each dog:

You can see how this can quickly become a nightmare to manage once we get into the dozens on hundreds of dogs. So let’s instead use Dynamic Routing to only have to manage a single file.

Creating the Special `[id].tsx` File

In order to preserve the previous structure of our doggo pages but still refactor to use Dynamic Routing, we can simply rename one of the files to [id].tsx and delete all the other ones where a single dog is rendered. We can keep the index.tsx file, as it serves a different purpose and will not match the dynamic route we are creating anyway.

So the end result should be something as clean as this:

Now every /dogs/:id route will be rendered by that single [id].tsx file instead of requiring a file for each individual dog. Perfect!

Updating File Content

We can now make the changes to our newly updated special file so that we can actually see the dynamic id being passed on each page.

We will do this by accessing the id through the query object and then rendering it on screen by adding it to the previous h1 tag.

import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";

const Doggo: NextPage = () => {
  const router = useRouter();  // -> Access Next.js Router here
  const { id } = router.query;

  return (
    <div>
      <Head>
        <title>A Doggo</title>
      </Head>

      <main>
                {/* // -> Render the id on the screen  */}
        <h1>This is Doggo: {id}.</h1>

        <Image
          alt="This is a doggo"
          src="https://loremflickr.com/520/520/dog"
          width={520}
          height={520}
        />
        <p style={{ color: "#0070f3" }}>
          <Link href="/">Back Home</Link>
        </p>
      </main>
    </div>
  );
};

export default Doggo;

Great! Now we can see different content on each dog page based on the route provided. How awesome is that? 😎

Final Result

After all your hard work, this is the expected outcome of your doggo app. Looking great already!

Final Remarks

Now that you have a working dynamic doggo app you can try and develop the individual dog page in order to dynamically fetch even more information given an id or test out creating new directories and more complex dynamic routes. If you run into any trouble feel free to reach out to me on Twitter, my DMs are always open.

Next Steps: Keep an eye out for my following Next.js tutorials where we will go over Statically Generated Dynamic Routes (the next step in performant dynamic webpages) and much more! If you don’t want to miss out on any of the tutorials, signup for my newsletter by clicking here.

📝 CometChat tutorial: Marketplace Site With React and Real-time Chat (Amazon Clone)

Igor Silveira — Fri, 07 May 2021 17:21:34 +0000

Prerequisites

In order to complete this tutorial and have a working application, some knowledge in the following can be required:

Basic knowledge of React, React hooks and general JavaScript,
Firebase features knowledge,
TailwindCSS, and
Any text editor (I recommend Visual Studio Code)

Introduction

Have you ever been browsing through Amazon trying to find that specific product that you need to follow particular characteristics? You eventually find it, but you have some questions that the product description just doesn’t answer.

How great would it be if you could chat with the seller, on Amazon?!

In this tutorial, you will learn how to create a React App from scratch that will serve as a basic Amazon Clone with chat capabilities right on the product page using some of CometChat’s features and components with easy steps to follow along!

On the product page, you will have a button to start a chat with the seller. If you are the seller, all chatting requests will reach your inbox, where you can help customers resolve their issues.

Perfect!

If you prefer to jump directly into the code, you can find it here.

Step 1 - Creating a React App

Create React App

Our first step should be to create the scaffold of our vanilla React app and, for that, I like to use the create-react-app package. So, using npx to not need to have the package installed globally, you can run the following command on the folder you’d like your project to life.

npx create-react-app chat-marketplace

You now have a new folder named chat-marketplace that will hold all of our code and configurations.

Install TailwindCSS

In order to install TailwindCSS that we will be using to style our components, please refer to the most updated official tutorial on TailwindCSS docs related to using the Create React App starter, here.

After the setup, replace your tailwind.config.js with the following, for best results.

    module.exports = {
      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
      darkMode: false, // or 'media' or 'class'
      theme: {
        fontSize: {
          tiny: '0.7rem',
        },
        extend: {},
      },
      variants: {
        extend: {
          display: ['group-hover'],
        },
      },
      plugins: [],
    };

Step 2 - Preparing Firebase Integration

The next step you should take in order to get this up and running is to set up your serverless backend. For this project, we are using Firebase to handle our user authentication and to store our application data.

A Firebase project was already provided and configured with the environment variables if you copy the .env.example file in the repository and rename it by following the README instructions, but if you choose to create your own, please follow the steps below.

Creating a Firebase Project

If you go to Firebase’s website here, you are able to login with your Google account and create a new project. Name it something like Chat Marketplace. Once you are there, you are now able to add apps to your newly created project. Choose Web App and you are presented with your much necessary project credentials that you will need in order to run this project.

On the root of your React project, create a new file .env with the following contents, replacing the values with your own project credentials.

    REACT_APP_FIREBASE_API_KEY=<YOUR_FIREBASE_API_KEY>
    REACT_APP_FIREBASE_AUTH_DOMAIN=<YOUR_FIREBASE_AUTH_DOMAIN>
    REACT_APP_FIREBASE_PROJECT_ID=<YOUR_FIREBASE_PROJECT_ID>
    REACT_APP_FIREBASE_STORAGE_BUCKET=<YOUR_FIREBASE_STORAGE_BUCKET>
    REACT_APP_FIREBASE_SENDER_ID=<YOUR_FIREBASE_SENDER_ID>
    REACT_APP_FIREBASE_APP_ID=<YOUR_FIREBASE_APP_ID>

Enabling Authentication

Firebase has the built-in capability of managing users authentication and state. To be able to take advantage of this we must first enable Authentication within our project by going to the sidebar option and enabling Email and Password Signin method.

Initializing our Database

For storing data we will be using Firebase’s Firestore database which is a No-SQL database on the cloud. You also find it on your project’s sidebar and go through the configuration process. At the end, you should be presented with an empty database. We now need to add data to it so that our application doesn’t load empty.

You should create two collections, one named categories and another called products. After that, create a few category documents on the first collection adding a *name* and image attributes to each document of the collection.

For the products collection, each entry should have at least the following attributes: category (should be the name of one of the previously created categories), description, id, image, price, title.

We should now have everything ready regarding our serverless backend and can move on to integrating it with our React project.

For seamless integration, we will be using the React Firebase package. To install it, run the following commands.

npm i firebase && npm i @react-firebase/auth && npm i @react-firebase/firestore

The next step of the configuration is creating a firebase.js file on the src folder of your project where the configuration of your firebase app will be constructed and later used.

    const firebaseConfig = {
      apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
      projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
      storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
      appId: process.env.REACT_APP_FIREBASE_APP_ID,
    };
    export { firebaseConfig };

Step 3 - Preparing CometChat Integration

Get your keys

As you may know by now, we will be using the amazing real-time chat solutions provided by CometChat.

Let’s start by creating a CometChat account by heading to their signup page. After registering, you will land on your new CometChat dashboard and you can now create an App.

Once you create your app and select it, you will find the necessary configuration information right at the top of your page. These are the appId, authKey and region.

Copy those value and add them in the previously created .env file with the variables names like below:

    REACT_APP_COMETCHAT_APP_ID=<YOUR_COMETCHAT_APP_ID>
    REACT_APP_COMETCHAT_REGION=<YOUR_COMETCHAT_REGION>
    REACT_APP_COMETCHAT_AUTH_KEY=<YOUR_COMETCHAT_AUTH_KEY>

Install CometChat Dependencies

To install CometChat required dependencies to your React app, run the following command.

npm install @cometchat-pro/chat@2.2.1 --save

That is it.

Create a Helper File

This step is aimed at abstracting most of CometChat’s required steps in order to register, login, creating and joining groups into simple functions that can be called from anywhere within the app.

On the root of your src folder, create a file called cometchat.js and with the following contents.

    import { CometChat } from '@cometchat-pro/chat';
    const loginCometChatUser = async (uid) => {
      try {
        const user = await CometChat.login(
          uid,
          process.env.REACT_APP_COMETCHAT_AUTH_KEY
        );
        console.log('Login Successful:', { user });
      } catch (error) {
        console.log('Login failed with exception:', { error });
      }
    };
    const logoutCometChatUser = async () => {
      try {
        await CometChat.logout();
        console.log('Logout Successful:');
      } catch (error) {
        console.log('Login failed with exception:', { error });
      }
    };
    const registerCometChatUser = async (name, uid) => {
      var user = new CometChat.User(uid);
      user.setName(name);
      try {
        const createdUser = await CometChat.createUser(
          user,
          process.env.REACT_APP_COMETCHAT_AUTH_KEY
        );
        console.log('user created', createdUser);
      } catch (error) {
        console.log('Register failed with exception:', { error });
      }
    };
    const addCometChatGroup = async (GUID, name, icon, participants) => {
      let membersList = participants.map(
        (participant) =>
          new CometChat.GroupMember(
            participant,
            CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT
          )
      );
      var group = new CometChat.Group(
        GUID,
        name,
        CometChat.GROUP_TYPE.PRIVATE,
        '',
        icon
      );
      try {
        const createdGroup = await CometChat.createGroup(group);
        console.log('Group created successfully:', createdGroup);
        const response = await CometChat.addMembersToGroup(
          createdGroup.getGuid(),
          membersList,
          []
        );
        console.log('response', response);
      } catch (error) {
        console.log('Group creation failed with exception:', error);
      }
    };
    export {
      CometChat,
      loginCometChatUser,
      registerCometChatUser,
      addCometChatGroup,
      logoutCometChatUser,
    };

Copy the React UI Kit

Since we will be building our marketplace app with React, we will be taking advantage of the pre-built CometChat React UI Kit where we are given all the necessary components to make this work, without any further implementations and designs of our own!

To do that, head over to the CometChat React UI Kit repository and clone it. Move the CometChatWorkspace folder to your React app src folder and copy the repository’s dependencies to your package.json and run npm install to install them.

Now all configurations are set and we can start coding away our frontend project!

Step 4 - Putting the Pieces Together

Now it is time to combine all of the above and to create the pages that will make our marketplace with real-time chatting capabilities.

Create the entry point

At the root of your src folder, create a index.js with the following:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { firebaseConfig } from './firebase';
    import { FirebaseAuthProvider } from '@react-firebase/auth';
    import { FirestoreProvider } from '@react-firebase/firestore';
    import firebase from 'firebase';
    import { CometChat } from '@cometchat-pro/chat';
    import './styles/index.css';
    import './styles/tailwind.css';
    import App from './App';
    const appSetting = new CometChat.AppSettingsBuilder()
      .subscribePresenceForAllUsers()
      .setRegion(process.env.REACT_APP_COMETCHAT_REGION)
      .build();
    CometChat.init(process.env.REACT_APP_COMETCHAT_APP_ID, appSetting).then(
      () => {
        console.log('Initialization completed successfully');
        ReactDOM.render(
          <React.StrictMode>
            <FirebaseAuthProvider {...firebaseConfig} firebase={firebase}>
              <FirestoreProvider {...firebaseConfig} firebase={firebase}>
                <App />
              </FirestoreProvider>
            </FirebaseAuthProvider>
          </React.StrictMode>,
          document.getElementById('root')
        );
      },
      (error) => {
        console.log('Initialization failed with error:', error);
        // Check the reason for error and take appropriate action.
      }
    );

This code is responsible for initializing CometChat and setting up Firebase and providing it to the rest of the app.

Setting up our router

The next important step is to create our React Router that will enable us to navigate through our pages.

There should be an App.js file on the src directory with the following code:

    import React, { useEffect } from 'react';
    import firebase from 'firebase';
    import 'firebase/auth';
    import { Route, BrowserRouter, Switch, Redirect } from 'react-router-dom';
    import IndexPage from './pages';
    import CategoryPage from './pages/category';
    import InboxPage from './pages/inbox';
    import LoginPage from './pages/login';
    import LogoutPage from './pages/logout';
    import NewProductPage from './pages/newProduct';
    import ProductPage from './pages/product';
    import RegisterPage from './pages/register';
    function App() {
      useEffect(() => {
        firebase.auth().onAuthStateChanged((user) => {
          if (user) {
            // store the user on local storage
            localStorage.setItem('userUID', user.uid);
          } else {
            // removes the user from local storage on logOut
            localStorage.removeItem('userUID');
          }
        });
      }, []);
      return (
        <>
          <BrowserRouter>
            <Switch>
              <Route exact path="/">
                <IndexPage />
              </Route>
              <Route path="/category/:name">
                <CategoryPage />
              </Route>
              <PrivateRoute path="/inbox">
                <InboxPage />
              </PrivateRoute>
              <PrivateRoute path="/product/new">
                <NewProductPage />
              </PrivateRoute>
              <Route path="/product/:id">
                <ProductPage />
              </Route>
              <Route path="/login">
                <LoginPage />
              </Route>
              <Route path="/logout">
                <LogoutPage />
              </Route>
              <Route path="/register">
                <RegisterPage />
              </Route>
              <Route path="*">
                <IndexPage />
              </Route>
            </Switch>
          </BrowserRouter>
        </>
      );
    }
    function PrivateRoute({ children, ...rest }) {
      return (
        <Route
          {...rest}
          render={({ location }) =>
            localStorage.getItem('userUID') ? (
              children
            ) : (
              <Redirect
                to={{
                  pathname: '/login',
                  state: { from: location },
                }}
              />
            )
          }
        />
      );
    }
    export default App;

You now added the capabilities of moving through pages and protecting routes from unauthenticated users by checking if they are logged in prior to rendering the corresponding component!

Create a Layout Wrapper

This is a nice practice I like to have in order to keep code duplication to a minimum, and ease of development. Create a High-Order-Component that you can use to wrap around the render of each page, taking care of common elements like the footer and navigation bar, as well as providing common and necessary props to each page.

On the src directory, create a new wrappers folder and in it, a layout.js file with the following content:

    import Navbar from "../components/Navbar";
    import Footer from "../components/Footer";
    const withLayout = (BaseComponent, { bgWhite = false } = {}) => (props) => {
      return (
        <>
          <Navbar />
          <main className={`px-4 bg-${bgWhite ? "white" : "gray-200"}  pb-4 `}>
            <BaseComponent {...props} />
          </main>
          <Footer />
        </>
      );
    };
    export { withLayout };

Now, any component can be wrapper with withLayout(Component) and will be rendered within the same conditions.

Creating our Components

On the src directory, create a components folder where all of our components will exist.

Let’s create our navigation bar first. Create a Navbar.js file with this content:

    import { FirebaseAuthConsumer } from '@react-firebase/auth';
    import { FirestoreCollection } from '@react-firebase/firestore';
    import React from 'react';
    import { Link } from 'react-router-dom';
    export default function Navbar() {
      return (
        <nav className="w-full flex flex-col relative z-10">
          <div className="bg-gray-900 w-full flex justify-between items-center mx-auto px-3 py-1">
            {/* <!-- logo --> */}
            <div className="inline-flex">
              <a className="_o6689fn" href="/">
                <img src="/logo-white.png" className="w-24" alt="Logo"></img>
              </a>
            </div>
            {/* <!-- end logo --> */}
            {/* <!-- start delivery location --> */}
            <button type="button">
              <div className="hidden sm:block flex mx-1">
                <div className="flex justify-center items-center">
                  <div className="h-6 w-6 flex justify-center items-center">
                    <svg
                      viewBox="0 0 12 12"
                      xmlns="http://www.w3.org/2000/svg"
                      aria-hidden="true"
                      role="presentation"
                      focusable="false"
                      className="h-2 w-2 overflow-visible"
                      style={{
                        fill: 'none',
                        stroke: '#ffffff',
                        strokeWidth: 1.33333,
                      }}
                    >
                      <g fill="none">
                        <path d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
                      </g>
                    </svg>
                  </div>
                  <div className="flex flex-col text-base leading-tight text-left">
                    <p className="text-gray-400 font-bold tracking-tight">
                      Deliver to
                    </p>
                    <p className="text-white font-bold">Portugal</p>
                  </div>
                </div>
              </div>
            </button>
            {/* <!-- end delivery location --> */}
            {/* <!-- search bar --> */}
            <div className="sm:block flex flex-grow mx-2">
              <div className="flex items-center flex-grow max-w-full">
                <form
                  className="flex items-center flex-grow pl-2 relative rounded-sm bg-white"
                  type="button"
                >
                  <input
                    className="flex-grow relative text-sm"
                    placeholder="Search anything..."
                  ></input>
                  <div className="flex items-center justify-center relative rounded-r-sm bg-yellow-400 p-2">
                    <div className="h-3 w-3">
                      <svg
                        viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true"
                        role="presentation"
                        focusable="false"
                        className="h-2 w-2 overflow-visible"
                        style={{
                          fill: 'none',
                          stroke: 'currentcolor',
                          strokeWidth: 3.33333,
                        }}
                      >
                        <g fill="none">
                          <path d="m13 24c6.0751322 0 11-4.9248678 11-11 0-6.07513225-4.9248678-11-11-11-6.07513225 0-11 4.92486775-11 11 0 6.0751322 4.92486775 11 11 11zm8-3 9 9"></path>
                        </g>
                      </svg>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            {/* <!-- end search bar --> */}
            {/* <!-- login --> */}
            <div className="sm:block flex mx-2 mr-4">
              <div className="flex justify-center items-center">
                <div className="flex flex-col text-base leading-tight text-left group inline-block relative">
                  <p className="text-white inline-flex">Hello,</p>
                  <FirebaseAuthConsumer>
                    {({ isSignedIn }) => (
                      <ul className="absolute hidden text-gray-700 group-hover:block rounded bg-white shadow mt-16 md:mt-7 font-bold text-md">
                        {!isSignedIn && (
                          <li className="">
                            <Link
                              className="rounded-t hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                              to="/login"
                            >
                              Sign In
                            </Link>
                          </li>
                        )}
                        {isSignedIn && (
                          <>
                            <li className="">
                              <Link
                                className="rounded-t hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                                to="/logout"
                              >
                                Sign Out
                              </Link>
                            </li>
                            <li className="">
                              <Link
                                className="rounded-t hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                                to="/product/new"
                              >
                                New Product
                              </Link>
                            </li>
                            <li className="block md:hidden">
                              <Link
                                className="rounded-t hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap"
                                to="/inbox"
                              >
                                Inbox
                              </Link>
                            </li>
                          </>
                        )}
                      </ul>
                    )}
                  </FirebaseAuthConsumer>
                  <p className="text-white font-bold">Account & Lists</p>
                </div>
              </div>
            </div>
            {/* <!-- end login --> */}
            {/* <!-- start cart --> */}
            <Link to="/inbox">
              <button type="button">
                <div className="hidden sm:block flex mx-1">
                  <div className="flex justify-center items-end">
                    <div className="h-8 w-8 flex justify-center items-end">
                      <img
                        src="/inbox.png"
                        width="24"
                        height="24"
                        alt="Inbox Icon"
                      ></img>
                    </div>
                    <p className="text-white font-bold text-base pb-1">Inbox</p>
                  </div>
                </div>
              </button>
            </Link>
            {/* <!-- end cart --> */}
          </div>
          <div className="hidden md:block bg-gray-800 w-full flex justify-start items-center mx-auto px-2 py-2">
            <div className="text-white text-base leading-4">
              <ul className="flex">
                <FirestoreCollection path="/categories" limit={4}>
                  {({ isLoading, value }) => {
                    return isLoading ? (
                      <li>Loading</li>
                    ) : (
                      React.Children.toArray(
                        value.map((category) => (
                          <li className="capitalize mr-2">
                            <Link to={`/category/${category.name}`}>
                              {category.name}
                            </Link>
                          </li>
                        ))
                      )
                    );
                  }}
                </FirestoreCollection>
              </ul>
            </div>
          </div>
        </nav>
      );
    }

Next, we are creating the footer. The same as before, create a Footer.js file with these contents:

    import React from 'react';
    export default function Footer() {
      return (
        <footer className="w-full flex flex-col relative">
          <div className="bg-gray-700 w-full flex justify-center items-center mx-auto px-2 py-1 md:py-2">
            <a href="#" className="text-white text-base leading-4 text-center">
              Back to top
            </a>
          </div>
          <div className="bg-gray-800 w-full flex flex-col text-center md:text-left md:flex-row justify-center md:justify-between items-center md:items-start mx-auto px-2 md:px-48 lg:px-96 py-4 md:py-10">
            <section className="my-2 md:my-0">
              <h5 className="font-bold text-white text-base">Get to Know Us</h5>
              <ul className="text-gray-200 text-base">
                <li className="leading-5">
                  <a href="#">Careers</a>
                </li>
                <li className="leading-5">
                  <a href="#">Blog</a>
                </li>
                <li className="leading-5">
                  <a href="#">About Amazon</a>
                </li>
                <li className="leading-5">
                  <a href="#">Sustainability</a>
                </li>
                <li className="leading-5">
                  <a href="#">Investor Relations</a>
                </li>
                <li className="leading-5">
                  <a href="#">Amazon Devices</a>
                </li>
                <li className="leading-5">
                  <a href="#">Amazon Tours</a>
                </li>
              </ul>
            </section>
            <section className="my-2 md:my-0">
              <h5 className="font-bold text-white text-base">Make Money with Us</h5>
              <ul className="text-gray-200 text-base">
                <li className="leading-5">
                  <a href="#">Sell products on Amazon</a>
                </li>
                <li className="leading-5">
                  <a href="#">Sell apps on Amazon</a>
                </li>
                <li className="leading-5">
                  <a href="#">Become an Affiliate</a>
                </li>
                <li className="leading-5">
                  <a href="#">Advertise Your Products</a>
                </li>
                <li className="leading-5">
                  <a href="#">Self-publish with Us</a>
                </li>
                <li className="leading-5">
                  <a href="#">Host an Amazon Hub</a>
                </li>
              </ul>
            </section>
            <section className="my-2 md:my-0">
              <h5 className="font-bold text-white text-base">
                Amazon Payment Products
              </h5>
              <ul className="text-gray-200 text-base">
                <li className="leading-5">
                  <a href="#">Amazon Business Card</a>
                </li>
                <li className="leading-5">
                  <a href="#">Shop With Points</a>
                </li>
                <li className="leading-5">
                  <a href="#">Reload Your Balance</a>
                </li>
                <li className="leading-5">
                  <a href="#">Amazon Currency Converter</a>
                </li>
              </ul>
            </section>
            <section className="my-2 md:my-0">
              <h5 className="font-bold text-white text-base">Let Us Help You</h5>
              <ul className="text-gray-200 text-base">
                <li className="leading-5">
                  <a href="#">Amazon and COVID-19</a>
                </li>
                <li className="leading-5">
                  <a href="#">Your Account</a>
                </li>
                <li className="leading-5">
                  <a href="#">Your Orders</a>
                </li>
                <li className="leading-5">
                  <a href="#">Shipping Rates and Policies</a>
                </li>
                <li className="leading-5">
                  <a href="#">Returns and Replacements</a>
                </li>
                <li className="leading-5">
                  <a href="#">Manage Your Content and Devices</a>
                </li>
                <li className="leading-5">
                  <a href="#">Amazon Assistant</a>
                </li>
                <li className="leading-5">
                  <a href="#">Help</a>
                </li>
              </ul>
            </section>
          </div>
          <div className="bg-gray-800 w-full flex justify-center items-center mx-auto py-4 lg:py-6 border-t border-gray-700">
            <div className="inline-flex">
              <a className="_o6689fn" href="/">
                <img src="/logo-white.png" className="w-24" alt="Logo"></img>
              </a>
            </div>
          </div>
          <div className="bg-black w-full flex justify-center items-center mx-auto py-2 border-t border-gray-700">
            <ul className="text-white flex text-base">
              <li>
                <a href="#" className="font-bold mr-2">
                  Conditions of Use
                </a>
              </li>
              <li>
                <a href="#" className="font-bold mr-2">
                  Privacy Notice
                </a>
              </li>
              <li>
                <a href="#" className="font-bold mr-2">
                  Interest-Based Ads
                </a>
              </li>
              <li>
                <span className="text-gray-400">
                  &copy; 1996-2021, Amazon.com, Inc. or its affiliates
                </span>
              </li>
            </ul>
          </div>
        </footer>
      );
    }

Now our most common components which are part of our Layout component are finished and we can move on to your specific on-page components.

Let’s start with our category cards that feature on the main page. Create a CategoryCard.js and add the following code:

    import React from 'react';
    import { Link } from 'react-router-dom';
    export default function CategoryCard({ category: { name, image } }) {
      return (
        <div className="bg-white w-full h-full p-4">
          <p className="font-bold capitalize">{name}</p>
          <Link to={`/category/${name}`} className="text-base text-blue-500">
            <img
              src={image}
              alt={name}
              className="w-48 h-48 my-4 lg:my-6 mx-auto"
            />
            <p>Shop now</p>
          </Link>
        </div>
      );
    }

Still for the main page, let’s create a product slider which features horizontal scrolling! Create a `ProductSlider.js` with the following:

    import React from 'react';
    import { Link } from 'react-router-dom';
    export default function ProductSlider({ title, products }) {
      return (
        <div className="bg-white p-4">
          <span className="font-bold text-md text-gray-600 mr-4">{title}</span>
          <a href="#" className="text-base text-blue-500">
            Shop now
          </a>
          <div
            style={{
              gridTemplateColumns: `repeat(${products.length}, calc(20% - 1rem * ${
                2 / window.innerWidth
              }))`,
            }}
            className={`grid gap-2 md:gap-4 grid-rows-1 overflow-x-scroll whitespace-nowrap my-4`}
          >
            {React.Children.toArray(
              products.map((product) => (
                <Link to={`/product/${product.id || 1}`}>
                  <img
                    src={product.image}
                    alt={product.title}
                    className="h-24 md:w-24 md:my-3"
                  />
                </Link>
              ))
            )}
          </div>
        </div>
      );
    }

When we are on a specific category page, we have multiple products being displayed on a very structured manner. Let’s create that specific individuallized component, ProductCard. Create that file and add the code:

    import React from 'react';
    import { Link } from 'react-router-dom';
    export default function ProductCard({
      product: { image, title, price, id },
      bestSeller = false,
    }) {
      return (
        <Link to={`/product/${id}`}>
          <div className="p-2 flex flex-col bg-white">
            {bestSeller && (
              <div className="bg-yellow-600 py-1 px-2 bo self-start text-base font-bold text-white">
                Best Seller
              </div>
            )}
            <img src={image} className="h-32 w-32 my-4"></img>
            <p className="text-base">{title}</p>
            <div className="h-2 w-2 flex justify-center items-center my-2">
              <svg
                viewBox="0 0 16 16"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
                role="presentation"
                focusable="false"
                className="h-2 w-2 overflow-visible"
                style={{
                  fill: '#FF9900',
                  stroke: '#bd7100',
                  strokeWidth: 1,
                }}
              >
                <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
                <path
                  transform="translate(21)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                />
                <path
                  transform="translate(42)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                />
                <path
                  transform="translate(64)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                />
                <path
                  transform="translate(86)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                  fill="#f9de8c"
                />
                <path
                  transform="translate(86)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792"
                />
              </svg>
            </div>
            <span className="text-sm leading-1">{price}€</span>
            <p className="text-base">
              Arrives: <span className="font-bold">Tomorrow</span>
            </p>
          </div>
        </Link>
      );
    }

All that is left, component-wise, is the side-filter that we normally see on Amazon’s product search pages. Ours is entirely mocked with no real function, but it serves it purpose. Add a new SideFilter.js file and paste the contents:

    import React from 'react';
    import { Link } from 'react-router-dom';
    export default function ProductCard({
      product: { image, title, price, id },
      bestSeller = false,
    }) {
      return (
        <Link to={`/product/${id}`}>
          <div className="p-2 flex flex-col bg-white">
            {bestSeller && (
              <div className="bg-yellow-600 py-1 px-2 bo self-start text-base font-bold text-white">
                Best Seller
              </div>
            )}
            <img src={image} className="h-32 w-32 my-4"></img>
            <p className="text-base">{title}</p>
            <div className="h-2 w-2 flex justify-center items-center my-2">
              <svg
                viewBox="0 0 16 16"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
                role="presentation"
                focusable="false"
                className="h-2 w-2 overflow-visible"
                style={{
                  fill: '#FF9900',
                  stroke: '#bd7100',
                  strokeWidth: 1,
                }}
              >
                <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
                <path
                  transform="translate(21)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                />
                <path
                  transform="translate(42)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                />
                <path
                  transform="translate(64)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                />
                <path
                  transform="translate(86)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                  fill="#f9de8c"
                />
                <path
                  transform="translate(86)"
                  d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792"
                />
              </svg>
            </div>
            <span className="text-sm leading-1">{price}€</span>
            <p className="text-base">
              Arrives: <span className="font-bold">Tomorrow</span>
            </p>
          </div>
        </Link>
      );
    }

All done now. Let’s create the pages!

Creating the Pages

We already have a handful of components, but nowhere to display them since our router can’t even find the pages it needs to properly manage navigations, so let’s fix that. Still on the src folder, create a new directory to hold our pages. Call it pages.

Starting with Login and Register pages, create two files named login.js and register.js and add the following code to each, respectively.

login.js

    import React, { useReducer, useState } from 'react';
    import { Link, useHistory } from 'react-router-dom';
    import firebase from 'firebase/app';
    import 'firebase/auth';
    import { loginCometChatUser } from '../cometchat';
    const initialState = {
      email: '',
      password: '',
    };
    const reducer = (state, action) => {
      switch (action.type) {
        case 'email':
          return { ...state, email: action.payload };
        case 'password':
          return { ...state, password: action.payload };
        default:
          throw new Error();
      }
    };
    export default function LoginPage() {
      const [state, dispatch] = useReducer(reducer, initialState);
      const [error, setError] = useState('');
      let history = useHistory();
      const handleOnChange = (evt) => {
        const { target } = evt;
        dispatch({
          type: target.name,
          payload: target.value,
        });
      };
      const loginUser = (evt) => {
        evt.preventDefault();
        firebase
          .auth()
          .signInWithEmailAndPassword(state.email, state.password)
          .then((doc) => {
            loginCometChatUser(doc.user.uid);
            history.push('/');
          })
          .catch((err) => {
            setError(err.message);
            console.log(`Unable to login: ${err.message}`);
          });
      };
      return (
        <div>
          <div className="flex flex-col justify-center items-center mx-auto px-2 py-2 border-gray-700 w-full md:w-96">
            <div className="inline-flex">
              <Link to="/">
                <img src="/logo-black.png" className="w-24" alt="Logo"></img>
              </Link>
            </div>
            <form
              className="border-gray-300 border rounded-sm my-4 p-4"
              onSubmit={loginUser}
            >
              <h1 className="font-bold">Sign-In</h1>
              {error && (
                <p className="text-red-500 font-bold text-base py-2 ">{error}</p>
              )}
              <label htmlFor="email" className="font-bold text-base md:ml-1">
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                onChange={handleOnChange}
                value={state.email}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 text-base"
                placeholder="Email"
              />
              <label htmlFor="password" className="font-bold text-base md:ml-1">
                Password
              </label>
              <input
                id="password"
                name="password"
                type="password"
                autoComplete="password"
                required
                onChange={handleOnChange}
                value={state.password}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 text-base"
                placeholder="Password"
              />
              <button
                type="submit"
                className="bg-gradient-to-t from-yellow-300 to-yellow-100 text-base p-1 w-full rounded-sm my-3 border border-gray-500"
              >
                Continue
              </button>
              <p className="text-base tracking-none">
                By continuing, you agree to Amazon's{' '}
                <a href="#" className="text-blue-500">
                  Conditions of Use
                </a>{' '}
                and{' '}
                <a href="#" className="text-blue-500">
                  Privacy Notice
                </a>
                .
              </p>
            </form>
            <p className="text-center text-base text-gray-500">New to Amazon?</p>
            <button
              type="submit"
              className="w-full bg-gradient-to-t from-gray-200 to-white text-base p-1 rounded-sm my-3 border border-gray-500"
            >
              <Link to="/register">Create your Amazon account</Link>
            </button>
          </div>
        </div>
      );
    }

register.js

    import React, { useReducer, useState } from 'react';
    import { Link, useHistory } from 'react-router-dom';
    import firebase from 'firebase/app';
    import 'firebase/auth';
    import { loginCometChatUser, registerCometChatUser } from '../cometchat';
    const initialState = {
      name: '',
      email: '',
      password: '',
      confirmPassword: '',
    };
    const reducer = (state, action) => {
      switch (action.type) {
        case 'name':
          return { ...state, name: action.payload };
        case 'email':
          return { ...state, email: action.payload };
        case 'password':
          return { ...state, password: action.payload };
        case 'confirmPassword':
          return { ...state, confirmPassword: action.payload };
        default:
          throw new Error();
      }
    };
    export default function RegisterPage() {
      const [state, dispatch] = useReducer(reducer, initialState);
      const [error, setError] = useState('');
      const history = useHistory();
      const handleOnChange = (evt) => {
        const { target } = evt;
        dispatch({
          type: target.name,
          payload: target.value,
        });
      };
      const registerUser = (evt) => {
        evt.preventDefault();
        if (state.password !== state.confirmPassword) {
          setError('Error: Passwords do not match.');
          return;
        }
        firebase
          .auth()
          .createUserWithEmailAndPassword(state.email, state.password)
          .then(async (doc) => {
            await registerCometChatUser(state.name, doc.user.uid);
            await loginCometChatUser(doc.user.uid);
            history.push('/');
          })
          .catch((err) => {
            setError(err.message);
            console.log(`Unable to register user: ${err.message}`);
          });
      };
      return (
        <div>
          <div className="flex flex-col justify-center items-center mx-auto px-2 py-2 border-gray-700 w-full md:w-96">
            <div className="inline-flex">
              <Link to="/">
                <img src="/logo-black.png" className="w-24" alt="Logo"></img>
              </Link>
            </div>
            <form
              className="border-gray-300 border rounded-sm my-4 p-4"
              onSubmit={registerUser}
            >
              <h1 className="font-bold">Create Account</h1>
              {error && (
                <p className="text-red-500 font-bold text-base py-2 ">{error}</p>
              )}
              <label htmlFor="name" className="font-bold text-base md:ml-1">
                Name
              </label>
              <input
                id="name"
                name="name"
                type="name"
                autoComplete="name"
                required
                onChange={handleOnChange}
                value={state.name}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Name"
                minLength={3}
              />
              <label htmlFor="email" className="font-bold text-base md:ml-1">
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                onChange={handleOnChange}
                value={state.email}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Email"
              />
              <label htmlFor="password" className="font-bold text-base md:ml-1">
                Password
              </label>
              <input
                id="password"
                name="password"
                type="password"
                autoComplete="password"
                required
                onChange={handleOnChange}
                value={state.password}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Password"
                minLength={6}
              />
              <label htmlFor="password" className="font-bold text-base md:ml-1">
                Re-Enter Password
              </label>
              <input
                id="confirmPassword"
                name="confirmPassword"
                type="password"
                autoComplete="password"
                required
                onChange={handleOnChange}
                value={state.confirmPassword}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Re-Enter Password"
                minLength={6}
              />
              <button
                type="submit"
                className="bg-gradient-to-t from-yellow-300 to-yellow-100 text-base p-1 w-full rounded-sm my-3 border border-gray-500"
              >
                Create your Amazon account
              </button>
              <p className="text-base tracking-none">
                By continuing, you agree to Amazon's{' '}
                <a href="#" className="text-blue-500">
                  Conditions of Use
                </a>{' '}
                and{' '}
                <a href="#" className="text-blue-500">
                  Privacy Notice
                </a>
                .
              </p>
              <div className="w-1/2 mx-auto mt-4 border-t-2 border-gray-100"></div>
              <p className="text-base">
                Alread have an account?{' '}
                <Link to="login" className="text-blue-500">
                  Sign In
                </Link>
              </p>
            </form>
          </div>
        </div>
      );
    }

Now going onto the main pages, the index page is the first time we resort to our Firestore collections in order to render it, since it will display both category and product lists! Create a new index.js file and paste its contents:

    import { FirestoreCollection } from '@react-firebase/firestore';
    import React from 'react';
    import CategoryCard from '../components/CategoryCard';
    import ProductSlider from '../components/ProductSlider';
    import { withLayout } from '../wrappers/layout';
    const IndexPage = () => {
      return (
        <div
          style={{
            backgroundImage: `url("/hero.jpg")`,
          }}
          className="w-full h-full pt-10 md:pt-32 bg-no-repeat bg-contain"
        >
          <div className="mx-4">
            <section className="grid grid-cols-1 md:grid-cols-4 gap-4 grid-flow-row auto-rows-max">
              <FirestoreCollection path="/categories">
                {({ isLoading, value }) => {
                  return isLoading ? (
                    <h3>Loading</h3>
                  ) : (
                    React.Children.toArray(
                      value.map((category) => <CategoryCard category={category} />)
                    )
                  );
                }}
              </FirestoreCollection>
            </section>
            <section className="mt-4">
              <FirestoreCollection path="/products" limit={12}>
                {({ isLoading, value }) => {
                  return isLoading ? (
                    <h3>Loading</h3>
                  ) : (
                    <ProductSlider products={value} title="Recent Products" />
                  );
                }}
              </FirestoreCollection>
            </section>
          </div>
        </div>
      );
    };
    export default withLayout(IndexPage);

The rest of the pages are pretty straightforward. We will be creating specific pages for category, product, new product, and a simple logout.

category.js

    import { FirestoreCollection } from '@react-firebase/firestore';
    import React from 'react';
    import { useParams } from 'react-router';
    import ProductCard from '../components/ProductCard';
    import SideFilter from '../components/SideFilter';
    import { withLayout } from '../wrappers/layout';
    const CategoryPage = () => {
      const { name } = useParams();
      return (
        <div className="grid grid-cols-3 md:grid-cols-9 py-4">
          <div className="col-span-1">
            <SideFilter />
          </div>
          <div className="flex-grow w-full ml-4 col-span-2 md:col-span-8">
            <div className="text-black border-b border-gray-300 pb-2">
              <h1 className="capitalize font-bold">{name}</h1>
              <h3 className="capitalize text-base">Shop {name}</h3>
            </div>
            <section className="grid grid-cols-1 md:grid-cols-3 gap-8 my-4">
              <FirestoreCollection
                path="/products"
                limit={12}
                where={{
                  field: 'category',
                  operator: '==',
                  value: name,
                }}
              >
                {({ isLoading, value }) => {
                  return isLoading ? (
                    <h3>Loading</h3>
                  ) : (
                    React.Children.toArray(
                      value.map((product, index) => (
                        <div className="border-b">
                          <ProductCard product={product} bestSeller={index === 0} />
                        </div>
                      ))
                    )
                  );
                }}
              </FirestoreCollection>
            </section>
          </div>
        </div>
      );
    };
    export default withLayout(CategoryPage, { bgWhite: true });

product.js

    import { IfFirebaseAuthedAnd } from '@react-firebase/auth';
    import { FirestoreCollection } from '@react-firebase/firestore';
    import React from 'react';
    import { useHistory, useParams } from 'react-router';
    import { addCometChatGroup } from '../cometchat';
    import { withLayout } from '../wrappers/layout';
    const ProductPage = () => {
      const { id } = useParams();
      const history = useHistory();
      const createProductChatGroup = async (
        uid,
        ownerUID,
        title,
        image,
        productId
      ) => {
        const GUID = `${uid}-${ownerUID}-${productId}`;
        try {
          await addCometChatGroup(GUID, title, image, [uid, ownerUID]);
          history.push('/inbox');
        } catch (error) {
          console.log('Group creation failed with exception:', error);
        }
      };
      return (
        <FirestoreCollection
          limit={1}
          path="/products"
          where={{
            field: 'id',
            operator: '==',
            value: id,
          }}
        >
          {({ isLoading, value }) => {
            if (isLoading) {
              return <p>Loading...</p>;
            }
            const { image, title, price, description, ownerUID, id } = value[0];
            return (
              <div className="flex flex-col px-2 md:px-10">
                <div className="block md:grid grid-cols-11 py-4 gap-4 md:gap-6">
                  <div className="col-span-5 bg-red-200">
                    <img src={image} className="w-full" alt="Product"></img>
                  </div>
                  <div className="col-span-4">
                    <div className="">
                      <p className="font-bold text-lg">{title}</p>
                      <div className="h-2 flex flew-row justify-start items-center my-2">
                        <svg
                          viewBox="0 0 120 16"
                          xmlns="http://www.w3.org/2000/svg"
                          aria-hidden="true"
                          role="presentation"
                          focusable="false"
                          className="h-2 overflow-visible"
                          style={{
                            fill: '#FF9900',
                            stroke: '#bd7100',
                            strokeWidth: 1,
                          }}
                        >
                          <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
                          <path
                            transform="translate(21)"
                            d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                          />
                          <path
                            transform="translate(42)"
                            d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                          />
                          <path
                            transform="translate(64)"
                            d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                          />
                          <path
                            transform="translate(86)"
                            d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
                            fill="#f9de8c"
                          />
                          <path
                            transform="translate(86)"
                            d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792"
                          />
                        </svg>
                        <p className="text-blue-500 text-base">426 ratings</p>
                      </div>
                    </div>
                    <div className="border-b border-t my-2 py-2">
                      <p className="text-base text-gray-700 mb-1">
                        Price:{' '}
                        <span className="text-lg text-red-600 font-bold px-1">
                          {price}€
                        </span>
                        + Shipping fees to delivery
                      </p>
                      <p className="text-base">
                        Available at a lower price from other sellers that may not
                        offer free Prime shipping.
                      </p>
                    </div>
                    <div className="my-1 text-base">
                      <h4 className="font-bold">About this item</h4>
                      <p className="py-1">{description}</p>
                    </div>
                  </div>
                  <div className="block col-span-2 p-3 rounded border border-gray-300 w-full">
                    <p className="text-base text-gray-700 mb-1">
                      <span className="text-md text-red-600 font-bold pr-1">
                        {price}€
                      </span>
                      + Shipping fees to delivery
                    </p>
                    <div className="my-2">
                      <p className="text-gray-700 text-base py-1">
                        Arrives:{' '}
                        <span className="font-bold text-black">Tomorrow</span>
                      </p>
                      <div className="flex justify-start items-center">
                        <div className="h-4 w-4 flex justify-start items-center">
                          <svg
                            viewBox="0 0 12 12"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            role="presentation"
                            focusable="false"
                            className="h-2 w-2 overflow-visible -mt-1"
                            style={{
                              fill: 'none',
                              stroke: '#000000',
                              strokeWidth: 1,
                            }}
                          >
                            <g fill="none">
                              <path d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
                            </g>
                          </svg>
                        </div>
                        <p className="text-blue-400  text-base">
                          Deliver to Portugal
                        </p>
                      </div>
                    </div>
                    <p className="font-bold text-green-600 my-2">In Stock.</p>
                    <select className="text-base bg-gradient-to-t from-gray-300 to-gray-100 rounded-lg border border-gray-400 shadow">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                    </select>
                    <button
                      type="submit"
                      className="bg-gradient-to-t from-yellow-300 to-yellow-100 text-base p-1 w-full rounded-sm my-2 border border-gray-500"
                    >
                      Add to Cart
                    </button>
                    <button
                      type="submit"
                      className="bg-gradient-to-t from-yellow-600 to-yellow-400 text-base p-1 w-full rounded-sm my-2 border border-gray-500"
                    >
                      Buy now
                    </button>
                    <IfFirebaseAuthedAnd
                      filter={({ user }) => {
                        return ownerUID && user.uid !== ownerUID;
                      }}
                    >
                      {({ user }) => (
                        <button
                          className="bg-gradient-to-t from-blue-400 to-blue-200 text-base p-1 w-full my-2 rounded-sm border border-gray-500 text-white"
                          onClick={() =>
                            createProductChatGroup(
                              user.uid,
                              ownerUID,
                              title,
                              image,
                              id
                            )
                          }
                        >
                          Chat with Seller
                        </button>
                      )}
                    </IfFirebaseAuthedAnd>
                  </div>
                </div>
              </div>
            );
          }}
        </FirestoreCollection>
      );
    };
    export default withLayout(ProductPage, { bgWhite: true });

newProduct.js

    import React, { useReducer, useState } from 'react';
    import { Link } from 'react-router-dom';
    import firebase from 'firebase/app';
    import 'firebase/auth';
    import 'firebase/database';
    import { FirestoreCollection } from '@react-firebase/firestore';
    import { v4 as uuidv4 } from 'uuid';
    const initialState = {
      title: '',
      description: '',
      category: '',
      image: '',
      price: 1,
    };
    const reducer = (state, action) => {
      switch (action.type) {
        case 'title':
          return { ...state, title: action.payload };
        case 'description':
          return { ...state, description: action.payload };
        case 'category':
          return { ...state, category: action.payload };
        case 'image':
          return { ...state, image: action.payload };
        case 'price':
          return { ...state, price: action.payload };
        case 'reset':
          return { ...action.payload };
        default:
          throw new Error();
      }
    };
    export default function NewProductPage() {
      const [state, dispatch] = useReducer(reducer, initialState);
      const [error, setError] = useState('');
      const handleOnChange = (evt) => {
        const { target } = evt;
        dispatch({
          type: target.name,
          payload: target.value,
        });
      };
      const createProduct = (evt) => {
        evt.preventDefault();
        const currentUserUID = firebase.auth().currentUser.uid;
        firebase
          .firestore()
          .collection('/products')
          .add({
            ...state,
            ownerUID: currentUserUID,
            id: uuidv4(),
          })
          .then(() => {
            dispatch({
              type: 'reset',
              payload: initialState,
            });
          })
          .catch((err) => {
            setError(err.message);
            console.log(`Unable to login: ${err.message}`);
          });
      };
      return (
        <div className="w-full">
          <div className="flex flex-col justify-center items-center mx-auto px-2 py-2 border-gray-700 w-full md:w-96">
            <div className="inline-flex">
              <Link to="/">
                <img src="/logo-black.png" className="w-24" alt="Logo"></img>
              </Link>
            </div>
            <form
              className="border-gray-300 border rounded-sm my-4 p-4 w-full"
              onSubmit={createProduct}
            >
              <h1 className="font-bold">New Product</h1>
              {error && (
                <p className="text-red-500 font-bold text-base py-2 ">{error}</p>
              )}
              <label htmlFor="title" className="font-bold text-base ml-1">
                Title
              </label>
              <input
                id="title"
                name="title"
                type="title"
                autoComplete="title"
                required
                onChange={handleOnChange}
                value={state.title}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Title"
              />
              <label htmlFor="description" className="font-bold text-base ml-1">
                Description
              </label>
              <textarea
                id="description"
                name="description"
                autoComplete="description"
                required
                onChange={handleOnChange}
                value={state.description}
                rows={4}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Description"
              />
              <label htmlFor="image" className="font-bold text-base ml-1">
                Image URL
              </label>
              <input
                id="image"
                name="image"
                type="text"
                autoComplete="image"
                required
                onChange={handleOnChange}
                value={state.image}
                className="appearance-none rounded-sm relative block w-full p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="https://..."
              />
              <label htmlFor="category" className="font-bold text-base ml-1">
                Category
              </label>
              <select
                id="category"
                name="category"
                required
                onChange={handleOnChange}
                value={state.category}
                className="capitalize appearance-none rounded-sm relative block w-1/2 p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
              >
                <option className="capitalize" value="">
                  Please select one
                </option>
                <FirestoreCollection path="/categories">
                  {({ isLoading, value }) => {
                    return (
                      !isLoading &&
                      React.Children.toArray(
                        value.map((category) => {
                          return (
                            <option className="capitalize" value={category.name}>
                              {category.name}
                            </option>
                          );
                        })
                      )
                    );
                  }}
                </FirestoreCollection>
              </select>
              <label htmlFor="price" className="font-bold text-base ml-1">
                Price (€)
              </label>
              <input
                id="price"
                name="price"
                type="number"
                min={1}
                required
                onChange={handleOnChange}
                value={state.price}
                className="appearance-none rounded-sm relative block w-1/2 p-1 border border-gray-400 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-base"
                placeholder="Price per unit"
              />
              <button
                type="submit"
                className="bg-gradient-to-t from-yellow-300 to-yellow-100 text-base p-1 w-full rounded-sm my-3 border border-gray-500"
              >
                Continue
              </button>
              <p className="text-base tracking-none">
                By continuing, you agree to Amazon's{' '}
                <a href="#" className="text-blue-500">
                  Conditions of Use
                </a>{' '}
                and{' '}
                <a href="#" className="text-blue-500">
                  Privacy Notice
                </a>
                .
              </p>
            </form>
          </div>
        </div>
      );
    }

logout.js

    import React, { useEffect } from 'react';
    import { useHistory } from 'react-router-dom';
    import firebase from 'firebase/app';
    import 'firebase/auth';
    import { logoutCometChatUser } from '../cometchat';
    export default function LogoutPage() {
      let history = useHistory();
      useEffect(() => {
        firebase
          .auth()
          .signOut()
          .then(async () => {
            await logoutCometChatUser();
            history.push('/');
          });
      }, []);
      return <div></div>;
    }

Now comes one of the most important pages and yet, the simplest. The CometChat integration for visualization of conversations, for the ability to send and receive messages can be narrowed down to a single line of code using the CometChat React UI Kit. We integrated CometChat into its own page that we called the Inbox page. Create a new inbox.js file and paste this few lines:

    import React from 'react';
    import { withLayout } from '../wrappers/layout';
    import { CometChatGroupListWithMessages } from '../CometChatWorkspace/src';
    const InboxPage = () => {
      return (
        <div className="h-screen w-full">
          <CometChatGroupListWithMessages />
        </div>
      );
    };
    export default withLayout(InboxPage);

And that is it, you now have a fully-fledged chat window!

Step 5 - Seeing the Magic Happen

If everything went according to plan, you can now run the following command to start your web application locally and visit it at localhost:3000:

npm run start

If it compiles the first try, all that is left now is to create some users and get them chatting with one another!

Conclusion

Hopefully, with this tutorial, you were able to create a working marketplace web app with real-time chatting capabilities and no backend coding of any kind.

You have configured a fresh Firebase project, inserted No-SQL data into a cloud data source, authenticated users, set up a real-time chat solution with CometChat and got your users sending messages to each other in around 30 minutes or so.

Hope you find this tutorial helpful and don’t forget to check the official documentation of CometChat to explore further and add more features to your app. The complete source code to this tutorial is available on GitHub.

5 Projects to Learn Coding in 2021

Igor Silveira — Fri, 19 Feb 2021 08:43:02 +0000

You can watch the video for this post on YouTube.

In the previous article that you can find here, we talked about 5 tips that you could follow in order to stay motivated while learning a new skill, like coding. The very first key point was "Practice what you have learned" as this is the single best way to be able to retain what you have learned to then easily apply it as you move along to more advanced concepts. We even ended the video with a twist to the old saying: "Practice makes fluent".

Now, you may even agree with all that but you still raise a valid question: "How do I get ideas on what to build with the skills I have just learned?".

Today, we will be introducing 5 different app ideas to challenge you and to hone in your newly gained skills. We will be going from an easy level of difficulty to a higher level, in that order, so feel free to skip some of them if you are already comfortable with some more basic concepts.

These app ideas were adapted from a great online list put together by Florin Pop on GitHub. In there, you can find a long list of app ideas bundled by the level of knowledge or interest of the developer. On each individual app, you will find a description of the project, applicable constraints for development and user stories to guide you through your development). Some of them also have example apps created by the community. This is incredible and I strongly recommend that you complete as many of them as you can.

I selected 5 specific ideas that I feel are the best to improve your skills, as they provide a good balance of being challenging and with common real-life applications. So let's take a look at them!

App Idea #1 - Border-Radius Previewer

In #1 we have a simple and good introduction to the manipulation of a reactive state, with a Border radius preview app. You should be able to listen to several inputs change and render their effect on an HTML element's border-radius CCS property. See the project's specification here.

App Idea #2 - Countdown Timer

Next, up, we have a slightly more difficult challenge, but still within the beginner tier, which is a Countdown timer. This challenge will introduce you to some new browser APIs, like setInterval. The goal is to make use of interval functions to manipulate the DOMelements containing the number and update them accordingly. See the project's specification here.

App Idea #3 - Weather App

The last project in our beginner tier will test your skills for external APIs integration. It is a well-known, Weather App. But try to make yours stand out, give it something unique. See the project's specification here.

App Idea #4 - Regular Expressions Helper

Now going on to tier 2, Intermediate level. This project is extremely valuable as it will solidify many of the previous project's knowledge but also make you practice a very important aspect of programming, which are regular expressions. See the project's specification here.

App Idea #5 - Real-Time Chat App

The last project, and the only one on the Advanced tier, is a Realtime Chat App. This is a great project because it will involve many new concepts, like sockets and real-time databases, but it is also one of the most well-documented apps that you can find on the web, so if you get stuck, there is plenty of help out there to reach your final destination.See the project's specification here.

Takeaways

And there you have it, these were the 5 projects that I recommend for you to start practicing your skills and improving yourself to eventually land that dream job! There are many more on that GitHub list and I strongly recommend you to practice by doing as many as you can, whenever you have time. Remember, the best method to improve, is by consistently applying the skills you have acquired.

Happy coding!

5 Tips to Stay Motivated While Learning to Code

Igor Silveira — Fri, 12 Feb 2021 14:44:25 +0000

You can watch the video for this post on YouTube.

One of the most important and difficult aspects of learning any new skill, like coding, is to be able to stay motivated throughout the whole learning journey so today, we are introducing 5 tips that can help you keep that initial motivation.

We've all been there: you are trying to learn some new skill and you pour your heart and soul out into the task only to eventually hit what feels like an enormous roadblock that mentally drains you, to the point where your motivation levels hit rock bottom and you feel like quitting.

Learning something new is challenging by itself, and coding is absolutely no exception. If you are having a hard time staying motivated while learning to code, know that you are not alone. In the end, motivation can only come from within, but a few tips can help you sway the scale the right way and help you achieve your dream of making it into the developer industry.

Let's start with the tips!

Tip #1 - Practise what you have learned

You may be moving too quickly through the lessons or tutorials that you are taking and not dedicating enough time to apply those concepts and getting your hands dirty by building something. Spending time with a new concept is important so you can retain what you've learned and apply it as you move along to more advanced concepts.

The same happens when you are learning a new language. At the moment I'm trying to learn Swedish, and although repetitive, I go over the basics regularly, as they will lay the foundation for me to eventually be fluent in the language, sometime in the future.

So remember, practice makes fluent.

Tip #2 - Don't forget what you've already accomplished

When you get stuck on learning a new concept or it gets too intense that it eventually overwhelms you, it can also be frustrating, and your mind starts to wander and think about the long road that you still have ahead.

If this happens, just remind yourself of how far you've come. Take a look at what you've already built along this journey and at all the challenges you have already overcome. Look at it from a standpoint of "look at how far I've come" instead of "look at how far I still have to go".

Tip #3 - Keep your eye on the prize

This may sound like a given, but you'd be surprised with the number of people that lose track of their goals and are never able to get it back.

On those dark days of having no appetite for learning, take a step back, a deep breath, and try to remind yourself of the goal you had when you first decided to embark on this long journey. What motivated you then?

If you have yet not established a goal, time to one and to stick with it!

Tip #4 - Baby steps, consistently

Now, initially, it might seem right to you to spend the most amount of time possible learning to code. But too long of a session can actually hurt in you the long run.

You might start to get frustrated by not being able to make time during the day to take a lesson, or even the other way around, you might feel that this learning process is taking too much of your day away, and you start attributing a negative connotation to the process!

A strategy is to set a timer for a small achievable goal. Set it for 10/15/30 minutes, whatever feels right for you.

Then, if you feel that you are on a roll and that today is your day, just extend your coding past that time until you finish your awesome new feature. If not, when the timer goes off, just called it a day and gather your strengths for tomorrow.

Tip #5 - Take breaks, regularly

Most times when we are feeling stuck or overwhelmed, the easiest solution of all time, is to take a break.

Get your mind off of the current task and dedicate your efforts to something else you enjoy. Read a book, listen to your favorite track or latest podcast episode, or go for a walk with your dogs. After a while, you will feel reinvigorated and with a killer mindset for problem-solving! And just like magic, your task got a lot easier, and your body thanks you for that relaxation period.

And those were the 5 tips that you can and should follow the next time you're feeling stuck or a bit overwhelmed by the learning process or tasks at hand to find the motivation needed to plow through and towards your goals and dreams.

Keep your eye on the prize! 🏆

Add a Subscription Form to ANY Website in 3 Simple Steps

Igor Silveira — Thu, 19 Nov 2020 16:31:02 +0000

Every journey has a starting point, for the visitors on your freshly built website, it all starts at subscription form. You may be selling a product online or simply creating and sharing content on your custom blog. Either way, it is always a good idea to give your visitors a chance to show that they are interested in your product or content and that they want to come back for more. The easier way is to present them with a simple form to close that gap and create a bridge between you and their mail inbox.

Before, you had to create an entire workflow that would enable a form on a page to be submitted to your server, which would then save the data into a database of subscribed users which you could later query and contact. It has, since then become a lot easier, with many new solutions now available as a service that you can integrate into ANY website and framework, thankfully!

Introducing ConvertKit

One of the most seamless integrations that I was able to achieve and with incredible results, was using ConvertKit's service.

ConvertKit is a complete suite of tools for audience building and retention. Within their list of features you are able to build automated email funnels for your subscribers, design incredible email templates from within their editor, and, of course, embed email sign-up forms on your website.

ConvertKit is free to use most of its features up to 1,000 subscribers on their free plan which is a great amount for those starting out! Probably by the time you reach that threshold you should be on your way to unlocking more. Until then, you can collect subscribers and managed them through the incredible dashboard from within your account, not losing track of how your landing page is performing!

Step-by-step tutorial (5 min)

Enough talk, it is time to get our hands dirty (in code). Now I'll show you how you can integrate a ConvertKit sign-up form within your app or website in just a matter of minutes!

Step #1 - Create a Sign-Up form

On your own dashboard, on the Landing Pages & Forms page, click on "Create New".

On the following pages, choose Form, and then we are going to be implementing an Inline form. On the next page, you can select any theme of your liking to use as a template for the form (you can edit it later). I'm choosing "Clare" for this example.

On the form editor, everything is customizable from the buttons text, and colors to adding more fields and inserting your own custom CSS onto it.

Step #2 - Copy your Creation

Once you are happy with the result, click on Embed at the top and then select the HTML tab and copy all the content inside.

Step #3 - Add the Form to your Website

Now, this step is divided into two parts. First, you need to add the <script> tag and its content to the body of HTML file where this form will be placed, right at the bottom. It should look something like the image below:

Now that the script was added, the form will be able to communicate back to ConvertKit and submit the subscribers' data correctly.

All that's left now is to add the <form> tag and all its contents to that page's body and you are ready to go! To add some styling you can write CSS as normal using the right selectors for the resultant HTML.

Note: if you are using React, you have to adapt the HTML to JSX syntax where, for example, <input> tags must always be closed with an '/'.

Final Results

You can see the live demo here and check out the source code at GitHub.

Hopefully, by the end of reading this, you should have a simple little page just like this. If not, feel free to reach out to me!

5 Tips That Will Enable You to Write Cleaner Code

Igor Silveira — Mon, 16 Nov 2020 10:35:22 +0000

Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on my Twitter profile, come and say 'Hi! 👋'.

Clean Freak
One-man Band vs. Enterprise
The Tips

Clean Freak

You may have been coding for a while now, but would you consider your code to be clean? When you are coding, do you take cleanliness into account (not relating to your surrounding btw, that's for another time)?

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." - Martin Fowler

It may be tempting to forget about doing a cleaning round once your code is up and running as expected (I know it is). It can happen often that we forget how we have written things and just call it a day. You may have also already taken into consideration some of the most common tips while developing your masterpiece, but chances are that if you go about the code with a pair of judgmental eyes, you'll find several missing spots (pun intended).

One-man Band vs. Enterprise

When you are working on your side projects there is no implicit obligation of always committing the most impeccable code. You are there to have fun and learn a thing or two on your own time. You may have watched an awesome tutorial online and you couldn't wait to fire up your editor and create your own version of it.

That is fine! Coding on your own is mostly about having fun and loving what you do, but it may also be important that a couple of those online tutorials that you watch be about coding practices. Even on your own written projects, you will probably have a hard time figuring out what was done when you look back at it down the road.

Once you're in a work environment and the team is no longer comprised of you alone, things get a bit more serious. Several people are working on the same codebase, meaning that the code someone writes today may be in front of someone else tomorrow to add a new feature of some sort. This is when eyes will be directed at you and you'll most certainly be prompted to aid in understanding the what and the why of the code you have written.

Most clean code practices can be enforced at the time of code review before merging your changes into the project's main branch or even before it leaves the code editor, but, as I have experienced several times, many things can slip under the radar, only to be dug out later down the road.

The Tips

With all the context already given, let's jump right into some important tips for writing your clean code.

Tip #1 - Write meaningful names

This first tip is often memed about around the internet, with my favorite being the Narcos meme. It is joked that a developer may spend more time on deciding how to name functions and variables, than actually coding a given feature. Although somewhat exaggerated, naming is an extremely important aspect of writing clean code. It helps to enable the code to be self-documenting, meaning that if at some point down the future you look back at old code, it should be like reading plain English.

Tip #2 - Make the code readable

As with anything written, you will struggle to read it if it is all cluttered and doesn't follow any pre-existing formatting or agreed-upon structure. For example, you wouldn't be able to read code with ease if all of it was on the same line and had no spacing in between (this is an extreme example, but most parts of it are true).

Today, it is easy to fit your project with a linter that will automatically take care of that for you and check for inconsistencies. A linter operates on top of a set of rules that tell it how the code should be formatted and what syntax should be enforced. This is very common on larger teams where the code is verified before going to the main repository.

Tip #3 - Classes and functions are concise and follow the Single Responsibility Principle (SRP)

I believe everyone would agree that a small and concise block of code would be easier to read than its counterpart. Apart from that, segmenting your code in each of its individual pieces would ease unit testing since you are testing small bits at a time, so you know exactly the source of the bug, and the debugging process is accelerated.

Of course, there will always be a handful of functions that you simply can't keep on a lower line count. However, that's when following SRP will reap its benefits by enabling the ability to pinpoint the source of a bug since it would be the only class or function with the responsibility to commit that change. Also, by following this principle, you would have an easier time naming the class or function because it only has one clear, simple job (instead of 4 or 5 mashed together).

Tip #4 - Remove duplicates

Duplicate code is the recipe for disaster. if at any point in the future you need to go back and edit it, you are extremely likely to not know that the same logic is replicated somewhere else, and thus, this is how many bugs are introduced into your system.

Once you are done coding your awesomely new feature, be sure to go back and re-read what you've coded and look for duplicates. These can be hiding in different forms of implementation, so keep your eyes wide open looking for these. Once spotted, extract that piece of duplicated code into a new method, mostly likely a helper. In the future, when something needs changing, you can refer simply to that extracted helper method, making the changes cheaper to conduct.

Tip #5 - Review other's code

It is easy to fall in love with your own code and, as they say, love is sometimes blind.

Reviewing other people's code, the same as reading someone's book, helps you open your mind to new realities. It is easier to be judgmental of other people's property instead of your own, so you can gain some insights from your own evaluation of their code. Keep in mind that can be both on the positive side and on the negative, the idea is that you will slowly but surely pick up a more refined sense of what is clean code and therefore, begin implementing it in your own work.

Of course that if you are working alone and have no other co-workers code to look at, you can always wander around some random GitHub accounts and see what they are up to. There is even a subreddit where people review each other's work, check it out!

Now get out there and start coding a bit cleaner and don't worry that with time everything gets easier, just keep going strong!

The Indie Developer's Masterplan

Igor Silveira — Sun, 06 Sep 2020 11:31:45 +0000

Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on my Twitter profile.

The Idea 💡
The Flawed Creator 🧠
Feeling Lost 😩
The Indie Developer Journey 💻
The Masterplan 🗒
Takeaways ✅

The Idea 💡

Let me paint you a picture:

You are in the middle of taking the most relaxing shower you had taken in a long time. Amidst massaging your head to evenly apply the shampoo, all your neurons fired at once and you were hit with the most amazing idea ever! You rush to finish the cleansing, dry yourself, and start working on it ASAP.

"This is going to be the best product ever!" - you say.

The Flawed Creator 🧠

Our brain is an incredible piece of organic machinery and it is creative by default, ideas come to individuals naturally, from the most simple to the most complex, and some have a bit too many probably.

What our brain is not so good at, is storing those ideas efficiently and for easy access. How many times haven't I had an incredible idea to forget it afterward nothing short of 5 minutes. Many productivity masters realize this incapability of our center of operations and recommend to always have on hand some note-taking apparatus - digital or not.

I couldn't agree more (remember the 5-minute memory loss?).

Feeling Lost 😩

It isn't long before you start realizing how much there needs to be done that you don't even know how to quantify it yet. What was once a sweet little nifty idea is now starting to get overly complicated (at least inside your head) and you are starting to feel overwhelmed. If all goes wrong, within a couple of weeks, you give up on the project because you don't know where to turn next.

This process may have already happened to you once or on repeat. You have by now either learned how to control this inner affluence of information, or you are still lost in your thoughts. For the latter case, I hope this will help.

The Indie Developer Journey 💻

I believe many of us would consider ourselves to be some kind of an indie developer. After all, we do have our own side projects that we mainly work on alone. All projects are different, but they all follow the same journey from idea to conception. A list of steps can be roughly summarized by:

Features - what does it do or allow others to?
Design - how does it look? (good probably)
Architecture - how does it function on the inside and out?

We certainly are not strong in all of the above steps, but we can still craft something on each level and come out with a working product.

The biggest mistake that the brave indie developer can do is to be all over the place.

The eagerness to be all hands on coding the new idea right out of the shower is understandable, you are extremely excited to get it going, but that approach normally leads to a black-hole of a lifetime of discarded projects.

Remember, our brain can't easily store all those great ideas and manage them efficiently. It gets them all mixed up and tangled, leaving you with nothing but a bowl of idea noodles when you try to process them all at once.

The Masterplan 🗒

The solution to being able to sail that ship home (I mean the new project to its final host) successfully is to plan ahead. Simple as that.

Splitting your tasks helps to keep you from feeling overwhelmed.

If you spend a couple of side-project working days with the sole goal of organizing the development journey ahead, you will be able to lift 2 metric tons out of your shoulders.

The plan should still follow the aforementioned order. Start with defining your desired implemented features. The design phase follows next since you now know exactly WHAT you want to build. The architectural part can be last now that you know what information is required to store and access, and at what points in time.

The best way I found to organize my projects' requirements, is to use a drag-and-drop board that could either contemplate all the 3 stages at once or even have a board for each (probably depends on the overall application size). The most known tool for this is probably Trello, but my best heartfelt recommendation goes to Notion. At first glance, Notion might seem daunting to use, but once you get around to know it you will realize just how powerful it can be.

Don't forget that a nice pen and paper will also suffice!

Takeaways ✅

Our brain is great at coming up with ideas but terrible at storing them for easy access later.
The biggest mistake that the brave indie developer can do is to be all over the place.
Splitting your tasks helps to keep you from feeling overwhelmed.
Using some kind of drag-and-drop board to organize your tasks.

As always, if you enjoyed reading this and want to reach out to me, let's connect! @igorasilveira.

Degree (Not) Required: A Tale

Igor Silveira — Tue, 01 Sep 2020 11:57:00 +0000

Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on my Twitter profile.

DISCLAIMER: This article was written specifically for the tech field and may not apply for all areas of expertise.

Why listen to me? 👂
Well, everyone is getting one so... 🤷‍♂️
My story 📖
Construction Supplier to Bread Distributor/Guitar Player/Part-time Student 🥖
The next level 🎓
Job applications 👨‍💻 (no degree)
Working environment 💼
Takeaways ✅

A debut 🎊

Hurray! This is the first-ever article that I am writing to publish online! Any feedback is well appreciated, and please feel free to reach out to me on Twitter or any other way you can find.

It is sort of a long one, but I had so much to put out there all at once.

Why listen to me? 👂

Being straight to the point, I myself have in my possession a 5-year degree in Software Engineering making me a Master on the subject (whatever that's worth). That is why, after all the hard work I had to output in order to obtain it, I'm here to tell you:

You probably DON'T need a degree.

Sure it can open many doors for you, and each college is itself and will teach you differently. But, in my experience, it is not what kind of paper you have under your belt with a seal of trust, but the sort of work you put out on a given subject.

Well, everyone is getting one so... 🤷‍♂️

This is very hard to understand by those coming straight out of high-school (like it was for me) since all they are taught during those formative years is:

"Stay in school, get good grades, land a nice job and that's it".

The fear of failure in life settles in and they feel pressured to achieve what they have been told, at all costs, some paving their way to stress and anxiety.

I'll tell you my story to put everything into context when I give you the final conclusions.

My story 📖

I come from a small group of 9 islands in the middle of the Atlantic Ocean which I can call a small paradise on Earth, but not exactly the land of opportunity, the Azores, a Portuguese archipelago.

The normal flow of education is to complete the 12 mandatory years of basic education and then apply for colleges abroad (one of the two islands that have faculties or mainland Portugal) and so I did, or at least tried to.

I was an average student and managed to finish the final year (or graduate high-school, in more American terms) with a score of 15/20. All that was left now was to take the admission exams and apply to universities.

I failed.

With 6/20 in the Math exam, I could not apply to any degree that would interest me. I could have taken the 2nd phase exam and join uni a month later, but instead, I made the dreadful choice of calling it quits (go figure). This was around summertime, and when the summer holidays were over, I had no more school to go to and had to find a job and start living the adult life.

Construction Supplier to Bread Distributor/Guitar Player/Part-time Student 🥖

My adult life began with working at a construction materials supplier during the hot sun of summer. It was a straight underpaid 9-to-5 job that consisted of carrying heavy loads pretty much all day long. I started to re-think my life choices and it was easy to conclude:

"I need to finish my studies, retake the admission exam (Math), and go to university."

With the help of a relative, I was able to find a physically less demanding job as a bread distributor. I would get up between 4 AM and 5 AM and drive a van full of bread around the island delivering to customers. I'd wrap it up around 1 PM, get some lunch and head up to my cousin's place to have band practice.

I've always loved to play the guitar 🎸

We were not the greatest showmen in town but we did have a lot of fun! We managed to book some summer gigs getting some extra cash in that would be much needed once I took off to uni.

The rest of the afternoon/evening I would go to my room and study as much as I could in preparation for the exam.

This was my routine for a few months until the day arrived. I woke up, headed to school, and took the exam. The grades would take a couple of weeks to be given so I kept on working and playing music.

I did it.

I score 16/20 in the individual Math's admission exam and was qualified to apply for colleges! I already knew I wanted to pursue Software Engineering so I applied to the same degree in several different places. I ended up being accepted into my first choice, which was a five-year integrated Masters at a top engineering college in the country (through a special island-guy program, but still). I packed my bags, got on the plane, thought "the hardest part is done".

The next level 🎓

Oh boy, was I in for a treat. I knew uni wouldn't be easy, but it was actually extremely hard! Countless sleepless nights, unfinished projects, and stressful weeks. Nevertheless, I was plowing through the adversities.

When it came to my fifth and final year, I started applying for jobs. The semesters were starting to ease in work and the last of them all was dedicated to writing the dissertation. I felt that I could manage a full-time job along with these tasks.

I was neither wrong nor right 😅

Job applications 👨‍💻 (no degree)

I did a few interviews for several companies looking for full-stack developers. At this point, I was still a student with no degree just randomly applying to jump-start my career.

The credentials did not matter.

I know I still hadn't finished the 5-year course but I thought the other 4 would at least raise some important discussion points.

I was wrong.

All that was asked in reference to the degree I was obtaining was mainly what I had learned in terms of teamwork and deadline management. There was some talk regarding used technologies, but most came from my own personal projects that were created with tech I chose to learn outside school hours! It didn't matter which classes I took, it didn't matter what score was I averaging at the moment! I took some code challenges in-person and after a couple of weeks I was in 😎

Working environment 💼

We, developers, have a very interesting field of business. All the fancy offices, tasty snacks, and ice-cold beer at our disposal. I was lucky to have landed a job in such a place that was so heavily fantasied. I couldn't be happier, but also hit by the all-famous imposter syndrome.

"What am I doing here, am I even qualified? I don't have a degree!"

The days were passing, I was managing the balance the final stage of my degree with my full-time job. The more I spoke to my fellow coworkers, the more I realized an unexpected truth:

Most of them had no degree whatsoever. Self-taught!

Many of those incredible professionals surrounding me, filled with knowledge and eager to share it, had not gone to school to obtain a specific degree in order to execute the functions (pun intended!) they were at that moment. They got to where they were by having an incredible passion for programming and building their ideas and nothing else. Sure they had a lot of hours of coding and tutorial hell under their belt, but:

Those who do it with passion do it effortlessly.

Takeaways ✅

There might be special cases where the pursuit of a degree is the only way out (like me), but every day is released more and more free content online that can get you to where you really want to be. The only thing between the present you and your ideal you is yourself (there was a lot of 'you' referencing on this sentence).
I am now a certified Master in Software Engineering and I still learn from my coworkers each and every single day and I will continue to do so and pursue that knowledge.
It does not matter what a seal-marked paper tells about you, but your actions and self-initiative do.

DEV Community: Igor Silveira

Next.js Static Site Generation Practical Example

Pre-requisites

Quick Recap

Pre-rendering

How Next.js Handles Pre-Rendering

Static Generation

Static Generation without data

Static Generation with Data

Updating our Dog App

Creating a Dog Interface

Creating our Dog Database

Updating our Dog Page Component

Final Touch: Update Dogs Index Page

Final Result

Final Remarks

A Comprehensive Guide to NextJS Dynamic Routing

Pre-requisites

Quick Recap

Pages

Generating our Project

Running our App

Dynamic Routing

Why Do We Need It

Component Reusability

How Next.js Handles It

Updating our Doggo App

Creating the Special [id].tsx File

Updating File Content

Final Result

Final Remarks

📝 CometChat tutorial: Marketplace Site With React and Real-time Chat (Amazon Clone)

Prerequisites

Introduction

Step 1 - Creating a React App

Step 2 - Preparing Firebase Integration

Step 3 - Preparing CometChat Integration

Step 4 - Putting the Pieces Together

Step 5 - Seeing the Magic Happen

Conclusion

5 Projects to Learn Coding in 2021

App Idea #1 - Border-Radius Previewer

App Idea #2 - Countdown Timer

App Idea #3 - Weather App

App Idea #4 - Regular Expressions Helper

App Idea #5 - Real-Time Chat App

Takeaways

5 Tips to Stay Motivated While Learning to Code

Tip #1 - Practise what you have learned

Tip #2 - Don't forget what you've already accomplished

Tip #3 - Keep your eye on the prize

Tip #4 - Baby steps, consistently

Tip #5 - Take breaks, regularly

Add a Subscription Form to ANY Website in 3 Simple Steps

Introducing ConvertKit

Step-by-step tutorial (5 min)

Step #1 - Create a Sign-Up form

Step #2 - Copy your Creation

Step #3 - Add the Form to your Website

Final Results

5 Tips That Will Enable You to Write Cleaner Code

Contents

Clean Freak

One-man Band vs. Enterprise

The Tips

Tip #1 - Write meaningful names

Tip #2 - Make the code readable

Tip #3 - Classes and functions are concise and follow the Single Responsibility Principle (SRP)

Tip #4 - Remove duplicates

Tip #5 - Review other's code

The Indie Developer's Masterplan

Contents

The Idea 💡

The Flawed Creator 🧠

Feeling Lost 😩

The Indie Developer Journey 💻

The Masterplan 🗒

Takeaways ✅

Degree (Not) Required: A Tale

Contents

Creating the Special `[id].tsx` File