We'll use Next.js as our front end, and we'll use Google Sheets as the back end to send the data we receive through a form. This way we can learn how to use Next.js and Google Sheets to build a simple form.

Here's what we'll cover in this tutorial:

1. How to set up a new project in Google Cloud Console
2. How to connect the new project with a Google Sheet
3. How to create a front-end form in a Next.js application.
4. How to connect the form to the Google Sheet

To help you follow along, I have made a GitHub repo. If you ever get lost, have a look around.

How to Set Up a New Project in Google Cloud Console

To access the Google Sheets API, we first need to set up a new project on Google Cloud Console. Head over to the site, go to the console and make a new project.

After the new project gets set up, go to APIs and Services and click on Enable APIs and Services.

Search Google Sheets from the library and enable it.

Now, go to APIs and Services, then Credentials and click on New Credential. Make a new Service account.

Give it a suitable name and fill in all the details. After generating the service account, copy the email ID somewhere. We'll need to add it to our Google Sheet afterward. We just created a Bot account to handle the various requests which will be sent from the front-end.

Next, click on the Service account in Credentials and them move to Keys. Click on Add Key. Make sure you set it to JSON format.

A file will get downloaded on creating the new key. It contains all the environment variables that we need while connecting our front-end application to the Google Sheets.

How to Connect the New Project to a Google Sheet

Now let's connect the newly created project on Google Cloud Console with a Google Sheet. Head over to Google Sheets and create a new spreadsheet.

Before we move ahead, feel free to put in some raw data so that we have something to fetch while calling the requests in the next section.

With that done, click on Share and add the service account email we just created. Make sure you give it Editor access and un-check Notify people.

Now for the fun part. Let's go over to the code editor and create the front-end for our form.

How to Create the Front-end Form

For building out the front end we'll use Next.js and use the API-routes feature to send a POST request to our Google Sheet.

Install Next using this command:

npx create-next-app

To build out the form and speed up the development process, we'll be using some third party packages. So go ahead and install the following:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 react-hook-form

• Chakra-UI: an accessible framework that has personally helped me speed up the front-end design of most of my applications.
• React-Hook-Form: helps you build efficient forms with client-side validation on the fly.

In this tutorial, I'll be focusing more on executing the functionality of the form rather than building out the client-side validation. Here is a complete guide on adding client-side validation using React-Hook-Form. Of course feel free to pay a visit to the Chakra-UI documentation as well.

After installing all the packages, open it using any code editor. In Next.js, each file you create in the /pages folder is an individual route. You can create a new one but here I'll be using the root file itself, that is /pages/index.js.

Clear out all the pre-generated lines of code. Now, let's make a basic structure for the Form.

import { VStack, Text, Input } from "@chakra-ui/react"

function Home () {
    function submitHandler () {
     // POST request
    }

    return (
        <VStack>
          <Text fontSize="2xl" fontWeight="bold">
            Your response matters!
          </Text>

          <form onSubmit={submitHandler}>
              <Input placeholder="Enter Name" />
              <Button>Submit!</Button>
          </form>
        </VStack>
    )
}

VStack wraps all the elements vertically. It's easy shorthand for flex-direction: column. The rest of the code should be pretty much self-explanatory

The beauty of Chakra-UI is that each of its components closely resembles actual HTML elements, greatly reducing the learning curve.

You may add some more input fields of your choice. Here's the end result:

Now let's handle the form response when the user submits. For this we will use react-hook-form.

For getting the response from the form, we have to import the useForm hook, like this:

import { useForm } from 'react-hook-form';

From the hook, destructure the following:

const {
    register,
    handleSubmit
  } = useForm();

Wrap around the submitHandler we created earlier with handleSubmit:

<form onSubmit={handleSubmit(submitHandler)}>
   {/* Input fields here */}               
</form>

Now add register to all the input fields as follows:

<Input placeholder="Enter your message" {...register('name') />

Now when the button is clicked, we should be able to see the entered data. For now simply log the data over to the console as follows:

function submitHandler (data) {
    console.log(data);
}

With that done, let's now create a new API-route for the POST request to be sent from the form.

How to Connect the Form to the Google Sheet

Create a new file in the ./pages/api/ route. Each file you make in this route is an api-route, which provides access to all Node.js features.

Go ahead and create a new file in the route, let's say ./pages/api/sheet.js. Structure out a basic GET request to see if all works fine:

function handler (req, res) {
    res.json({message: "It works!"});
}

export default handler;

To check if the API request is working at this point, go to http://localhost:3000/api/sheet.

With that done, let's first set up the POST request to be sent from the front-end using the native Fetch method.

async function submitHandler (data) {
    const response = await fetch("/api/sheet", {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json',
              },
        })
}

Before doing anything else, we have to download another package:

npm install googleapis

On the API-route (/pages/api/sheet), destructure the data we get from the front end.

import {google} from "googleapis"

async function handler (req, res) {
    if (req.method === "POST"){
            const {name, message} = req.body;
        res.json({message: "It works!"});
    }
}

export default handler;

Note: The API routes by default will listen for a GET request. So we have to explicitly check if the method is a POST request.

Before moving ahead, there's one last thing to set up, and that's the environment variables. Open the JSON file containing all the credentials while we created the new key.

Make a new file .env.local in the root. Go ahead and enter in the following variables.

CLIENT_EMAIL=yourclientemail
CLIENT_ID=yourclientid
PRIVATE_KEY=yourprivatekey
SPREADSHEET_ID=yourspreadsheetid

With that done, we are pretty much finished setting up the API route to handle the request we'll be sending to our Google Sheet. First, let's create a authentication token:

const auth = new google.auth.GoogleAuth({
    credentials: {
      client_email: process.env.CLIENT_EMAIL,
      client_id: process.env.CLIENT_ID,
      private_key: process.env.PRIVATE_KEY.replace(/\\n/g, '\n'),
    },
    scopes: [
      'https://www.googleapis.com/auth/drive',
      'https://www.googleapis.com/auth/drive.file',
      'https://www.googleapis.com/auth/spreadsheets',
    ],
  });

To gain access to the Google Sheet, our application needs to provide some scopes first – usually read and write access.

You can find more about scopes in the official Google Sheets documentation.

You might be wondering about the replace method I used in the third environment variable. This was due to a typical error I was encountering earlier. After browsing through Stack Overflow, I finally found the solution. Looks like the PRIVATE_KEY needs to be parsed properly by removing the slashes in the original key. This can be easily solved using the replace method.

You can find about this error in this Pull request I opened.

Next, pass in the auth token and specify the version of the API. The latest is v4.

const sheets = google.sheets({
    auth,
    version: 'v4',
  });

Then we call the spreadsheets.value.append method to append the user entry into cells in the spreadsheet.

const response = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.DATABASE_ID,
      range: 'Sheet1!A2:C',
      valueInputOption: 'USER_ENTERED',
      requestBody: {
        values: [[name, message]],
      },
    });

You can find the spreadsheet ID from the URL itself:

https://docs.google.com/spreadsheets/d/{spreadsheetID}/edit#gid=0

The range determines which rows and columns the application must read from or write to. If you're confused with how to find the range, you can determine it using Google Sheets itself using the user-interface.

The third property, valueInputOption, determines how the user entered value has to be parsed into the spreadsheet.

For example if the user has entered a number, then the spreadsheet will read it as a number as well.

The fourth property carries in the data to be appended into a particular cell. To append multiple values, you can put it all in an array, like in this case – name and message.

To end the API-route, at last send a response back to the front-end:

res.status(201).json({response, result: "Feedback posted to spreadsheet!"})

If all goes well, you should be able to make a POST request and successfully add a new cell value into the spreadsheet.

Conclusion

Congratulations! You're ready to start collecting feedback. You could build out your own feedback form on your website. Or you could integrate with an existing service like Typeform.

But you want to keep your feedback form on your site, on your page. This is where integrating with the Google Sheets API comes in handy.

The Google Sheets API is pretty basic – it can read and write to spreadsheets. Moreover it's completely free, although there is a limitation on the API requests you can make within a particular time frame.

So Google Sheets API would be ideal for small-scale application and platforms with a smaller audience. If you ever have any questions, do ping me on Twitter.

If you have recently gone through a React course, you probably didn't like this part, because there are a lot of states to manage if you have multiple input fields.

Firstly, you track the state of the input field using the onChange property which calls the useState() function. The input fields are wrapped around a form element.

When the user submits the form, it triggers the onClick or onSubmit property to set the inputs either to an array containing values or objects, depending on the number of input fields.

Then comes validation, which checks whether the user has entered any input. If not, then return an error, prompting the user to enter a valid input.

The logic here is a whole lot of boilerplate. You might be bored just hearing about the process.

What if I tell you that a single library can achieve all of this?

Here is what I’ll cover in this article:

1. What is React-Hook-Form?
2. How React-Hook-Form Affects Performance
3. How to Get User Data
4. How to Add Validation to Your Forms
5. How to Improve the Front End and User Experience Using Chakra-UI.

What is React-Hook-Form?

React-Hook-Form is a flexible library that takes care of all your validation, state management, and user data – and it's all packed within a size of 25.3 kb (unpacked) and 9.1 kb GZip (changes with versions).

It's simple and straightforward to use, and you have to write minimal code.

Image source

One of the features I’m impressed with is its performance. As mentioned in its official site, React-Hook-Form:

“Minimizes the number of re-renders and faster mounting, striving to provide the best user experience.”

How React-Hook-Form Affects Performance

If you have been following the previous versions of the library, the documentation often referenced the ref property to handle state management and validation.

<input type=”password” placeholder=”Password” ref={register} />

In this way, React-Hook-Form adopts a method of uncontrolled input, rather than changing the state every single time. It isolates the selected component and avoids rendering the child components.

This significantly reduces the number of re-renders and boosts the overall performance of the application. (Source)

How to Get User Data from a Form

I have made a Codesandbox for this particular tutorial, so make sure you refer to it in case you get lost.

Here's what you'll need to follow along:

• App link
• Source code

And here’s what we will be building. It's a simple form with validation, alerts when a user submits, and errors that's built using Chakra UI.

First, let's install the library:

npm install react-hook-form

Now import the useForm hook from the package:

import { useForm } from "react-hook-form";

Destructure the following constants from the useForm hook:

const { register, handleSubmit, formState: { errors } } = useForm();

Create a simple form element like this:

<form onSubmit={handleSubmit(onSubmit)}>
    <input type=”text” placeholder=”First Name” {...register(“firstname”)} />
    <input type=”submit” />
</form>

On submit, the form will pass a function onto the handleSubmit function. We can define the onSubmit function like this:

const onSubmit = data => console.log(data);

Now if we test out our form element, when it's submitted the console returns the following:

Looks like it returned an object with the property firstname and has successfully gotten ahold of the data in the input field.

Let’s now add a bunch more input fields:

<form onSubmit={handleSubmit(onSubmit)}>
    <input type=”text” placeholder=”First Name” {...register(“firstname”)} />
    <input type=”text” placeholder=”Last Name” {...register(“lastname”)} />
    <input type=”password” placeholder=”Your password” {...register(“password”)} />
    <input type=”submit” />
</form>

On logging the response, we get an object back:

Now, this data can be sent back to the database. But in this tutorial, let’s just display it back to the user, using useState( ).

const [data, setData] = useState();
const onSubmit = (data) => {
   setData(data);
 };

Let’s make a new component called Stats.js. Here, we’ll make use of Chakra UI’s Stat component.

import {
 HStack,
 Stack,
 Stat,
 StatHelpText,
 StatLabel
} from "@chakra-ui/react";
import React from "react";

export default function Stats(props) {
 return (
   <Stat mt={5}>
     <Stack
       p={4}
       borderWidth="3px"
       borderRadius="md"
       direction="column"
       align="flex-start"
     >
       <HStack>
         <StatLabel>Name: {props.Firstname}</StatLabel>
         <StatLabel>{props.Lastname}</StatLabel>
       </HStack>
       <StatHelpText>Password: {props.Password}</StatHelpText>
     </Stack>
   </Stat>
 );
}

Now, import this component into your root file and pass the respective props.

import Stats from "./Stats";
// App.js
{data && (
       <Stats
         Firstname={data.firstname}
         Lastname={data.lastname}
         Password={data.password}
       />
)}

The stats will only be displayed if the data is true.

The final result should look something like this:

How to Add Validation to a Form

Why do we need validation anyways? Let me take you through an example I went through during one of the hackathon projects I was working on.

I had built a Password manager, and I didn’t pay any attention to form validation. Users started entering empty passwords into the form. Eventually, there was a whole load of invalid data in the database.

Now if you visit any popular site, you might have noticed that it forces you to enter a strong password.

Let’s draw some conclusions from this case-study

• We want to get valid data
• We want our user data to be protected by entering strong passwords
• We want to keep the database clean by blocking invalid data

We’ll try to achieve these objectives using client-side validation provided by React-Hook-Form. We will use the register method provided by the library. It allows you to register the data a user enters and apply validation rules to it.

Consider the example below:

<input
      type="text"
      placeholder="First name"
      {...register("firstname", { required: true })}
/>


By setting the rule required to `true`, the user will be now forced to provide a string to pass the validation. We can further modify this by returning a message back to the user when this event occurs.

```js
<input
      type="text"
      placeholder="First name"
      {...register("firstname", { required: “Please enter your first name” })}
/>
{errors.firstname && <p>{errors.firstname.message}</p>}

If the object errors returns a true value, it will display the message to the user.

Let’s now force the user to provide a password with more than 8 characters.

<Input
      type="password"
      placeholder="Password"
      {...register("password", {
        required: "Please enter Password",
        minLength: { value: 8, message: "Too short" }
      })}
 />

By assigning the minLength property to 8, the user now will be compelled to enter an 8 character password.

Also, we can alert the user at the front-end by using the same method we used previously using And operator.

{errors.password && <p>{errors.password.message}</p>}

If you notice now, React-Hook-Form listens to the changes dynamically. So if the input is left empty, it displays an alert at the same time. If the password is too short, it updates the message dynamically. Beauty!

Now go ahead and make your own form. In the next section we’ll customise the form and send alerts to the user when an error pops up.

How to Improve the Front End and User Experience Using Chakra-UI

First of all let’s convert all the components we've used so far to Chakra UI components.

Instead of the normal <input />, simply replace the existing one with the Input from Chakra UI.

Import { Input } from “@chakra-ui/react”

Now import the VStack and Button component the same way and wrap the whole form with VStack.

<VStack>
         <Input
           type="text"
           placeholder="First name"
           {...register("firstname", {
             required: "Please enter first name",
             minLength: 3,
             maxLength: 80
           })}
         />
         <Input
           type="text"
           placeholder="Last name"
           {...register("lastname", {
             required: "Please enter Last name",
             minLength: 3,
             maxLength: 100
           })}
         />
         <Input
           type="password"
           placeholder="Password"
           {...register("password", {
             required: "Please enter Password",
             minLength: { value: 8, message: "Too short" }
           })}
         />
         <Button
           borderRadius="md"
           bg="cyan.600"
           _hover={{ bg: "cyan.200" }}
           variant="ghost"
           type="submit"
         >
           Submit
         </Button>
</VStack>

The props you see for the Button component are similar to the CSS properties, so migrating to Chakra UI won’t be a problem.

Now let’s give prompt alerts to the user when they enter any invalid data.

Make a new component AlertPop.js.

Import the following code:

import { Alert, AlertIcon, AlertTitle } from "@chakra-ui/react";

Let's define a prop for displaying the error message.

export default function AlertPop (props) {
 return (
   <Alert status="error">
     <AlertIcon />
     <AlertTitle mr={2}>{props.title}</AlertTitle>
   </Alert>
 );
}

Now import this component into the root file, and under every input field type in the below logic:

{errors.firstname && <AlertPop title={errors.firstname.message} />}
{errors.lastname && <AlertPop title={errors.lastname.message} />}
{errors.password && <AlertPop title={errors.password.message} />}

Finally import useToast like this:

import { useToast } from "@chakra-ui/react"

Using this component, we’ll be able to to display a pop-up message when the user successfully submits the form.

Here’s how we will perform this:

Import { useToast } from “@chakra-ui/react”

const toast = useToast( )
const onSubmit = (data) => {
   //console.log(data);
   toast({
     title: "Submitted!",
     status: "success",
     duration: 3000,
     isClosable: true
   });

   setData(data);
 };

The end result should look something like this:

Conclusion

Web technology is advancing every day, at a very fast rate. It’s good to learn to use various libraries, but make sure you understand the basics first.

For example, you just can’t start learning ReactJS all of a sudden without understanding DOM manipulation. The basics are the foundation, else you won’t be able to understand the beauty of how the web works.

Thanks for Reading!✨

It’s good to see that you have read this far. If you did gain some insights from this article, feel free to share it with your community and co-workers.

I talk about web technologies and build projects, further documenting the development process for other developers to reference. If you need any guidance, make sure you hit me up on Twitter.

Chakra UI is a component-based library. It's made up of basic building blocks that can help you build the front-end of your web application.

It is customizable and reusable, and most importantly it supports ReactJs, along with some other libraries too.

Here's what we'll cover in this article:

1. What is Chakra UI?
2. How to get Started and Install Chakra UI
3. Chakra UI Customization and Features
4. How Chakra UI affects your Lighthouse Score
5. How to use Dark Mode in Chakra UI
6. Conclusion

What is Chakra UI?

Have you ever struggled with whether to focus more on the back-end or front-end of your project? Well believe me, both are equally important.

I started using Chakra UI because I wanted to focus on my back-end code more than being stuck on "How to center a div element?".

Chakra UI is extremely simple to use, especially when you are familiar with how to use ReactJs components.

How to Get Started and Install Chakra UI

Inside your respective directory, install ChakraUI using Yarn or NPM

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

For React:

For ChakraUI to get initialised you first need to add <ChakraProvider> in your index.js file.

import React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
 // 2. Use at the root of your app
 return (
   <ChakraProvider>
     <Component />
   </ChakraProvider>
 )
}

For Next.js

Go to pages/_app.js and add the following lines of code:

import { ChakraProvider } from "@chakra-ui/react"
function MyApp({ Component, pageProps }) {
 return (
   <ChakraProvider>
     <Component {...pageProps} />
   </ChakraProvider>
 )
}
export default MyApp

(Source: Chakra UI Docs)

You can refer the documentation to checkout ChakraUI’s support for other libraries: https://chakra-ui.com/docs/getting-started

ChakraUI Customization and Features

Style Props

Chakra UI supports Reactjs, and every component is customizable using the Style props. They map to almost all necessary CSS properties that are available.

For example, for margin-top in CSS, you would write it as <Text mt={8} >. This will set a top margin of 8px on the selected element.

Chakra UI is inspired by TailwindCSS's color palette, so you can find all your favorite colors!

How to override ChakraUI's default theme

You can override Chakra UI's default theme and create your own theme with the colors of your choice. You can do this using Chakra UI’s CSS variables.

All you need to do is either make a new theme.js file or edit the existing index.js file on React or the _app.js file on Nextjs.

// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"

// 2. Call `extendTheme` and pass your custom values
const theme = extendTheme({
 colors: {
   brand: {
     100: "#f7fafc",
     // ...
     900: "#1a202c",
   },
 },
})

// 4. Now you can use these colors in your components
function Usage() {
 return <Box bg="brand.100">Welcome</Box>
}

(Source: Chakra Ui Docs)

For more information on overriding the ChakraUI default theme, visit the Chakra UI docs at https://chakra-ui.com/docs/theming/customize-theme

Responsive styles

How about responsiveness? The biggest headache, for me at least. I don't enjoy this part, but with Chakra UI, it’s no longer a huge pain.

For example, consider the line of code below:

<Box m={[2, 3]} />

(Source: Chakra UI Docs)

So now by defining this value inside an array, the Box component will be 8px on all viewports, and 16px from the first breakpoint.

Now we can override this in many ways, one of which is easier to understand – using the object syntax.

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
 This is responsive text
</Text>

(Source: Chakra UI Docs)

So now on smaller screens, the fontSize is 24px, on medium size it's 40px, and on larger screens it's 56px.

You might have noticed that Chakra UI strictly follows the ReactJs syntax for defining inline styles by capitalizing the second word (that is fontSize) as in the CSS property font-size for its style props too.

For more information on Responsive styles visit the ChakraUI docs at https://chakra-ui.com/docs/features/responsive-styles

Stack Component

Another commonly-used feature which I used to dislike in CSS is the flex property. It's a bit confusing to grasp how the property works.

Well it’s my honor to say here – “Chakra UI to the rescue🚀!”

I'd like to introduce you to the Stack component.

Stack is a simple layout component which you can use to stack elements, vertically and horizontally.

So there is Stack, HStack (short hand for Horizontal Stack), and VStack (short hand for Vertical stack). You might have guessed it right by now, but HStack will stack the elements horizontally and VStack will do the same layout vertically – but most importantly with zero CSS.

For more information on the Stack component, visit the Chakra UI Docs at https://chakra-ui.com/docs/layout/stack.

How Chakra UI affects your Lighthouse Score

When you're finally ready to deploy a web application, you should first run it through Google Lighthouse.

Google Lighthouse is an automation tool that is in-built on your Chrome developer tools. It helps you run audits on your web applications, and determines a score based on their performance, accessibility, progressive web apps, SEO, and much more.

The word we want to look out for here is Accessibility.

What is Web Accessibility?

As a developer, it’s our responsibility to make the web acessible for everyone, and Google is taking this matter very seriously.

When websites are properly designed, it helps everyone. Proper design means that, for example, screen readers should be able to properly read out the elements on your page to a user. These principles are reflected in the the Web Accessibility Initiative (WAI).

Good accessibility doesn't just benefit people with disabilities. It's also helpful to users with smartphones, smart TVs, screens of all sizes, older people who might not see their screens very well, users with color blindness, and people using slow internet connections.

For more information on WAI you can visit their official site at https://www.w3.org/WAI/.

What does ChakraUI have to do with accessibility?

ChakraUI follows all the standards laid down by WAI for all its components. So all you have to do is add the Aria-label property to the Chakra component.

This is just what Chakra does behind-the-scenes to help you during the development process.

But why do we have to follow WAI anyways? What if we don’t?

As I said, Google is takes accessibility very seriously. As a result, the search engine will rank your page based partly on your accessibility score. That’s why Lighthouse has dedicated audits for accessibility.

How to use Dark Mode in ChakraUI

Dark mode is ever more popular these days, and ChakraUI makes it easy to use.

Let's say that you're in a React project with the below index.js file:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
)

All you need to do to initialise Dark mode on your site is make a few changes in the index.js file and make a Button component for toggling dark mode.

Let’s initialise the hook for toggling between dark and light mode first.

Head over to the index.js file, and type in the following lines of code:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'

ReactDOM.render(
  <ChakraProvider>
    <ColorModeScript initialColorMode="light" />
    <App />
  </ChakraProvider>,
  document.getElementById('root')
)

The hook ColorModeScript will track the mode which is currently set on the site.

Set the prop initialColorMode to “light”, “dark”, or “system”.

Now head over to your App.js file.

Install react-icons using npm like this: npm i react-icons

Import two React icons:

import { FaMoon, FaSun } from 'react-icons/fa'

Import the following ChakraUI component and useColorMode hook and initialise the hook.

import {IconButton, useColorMode } from '@chakra-ui/react

const { colorMode, toggleColorMode } = useColorMode()

The hook is similar to the useState hook, except that toggleColorMode will set the theme of the site to dark or light mode globally, while colorMode will store the value "light" or "dark".

Now let's bring in the icon button and give the component the following props:

<IconButton
    icon={colorMode === 'light' ? <FaSun /> : <FaMoon />}
    isRound="true"
    size="lg"
    alignSelf="flex-end"
    onClick={toggleColorMode}
/>

Now when you click the button the site should change to Dark mode, and toggle between the two icons.

How easy was that?

Conclusion

Chakra UI has helped me boost my development process to another level. It's very flexible, the documentation is great, and there are a lot of pre-built templates to help you speed up the process.

Two of the templates I want to call out are Choc UI and Chakra-Templates.

Chakra UI also has a very active community on Discord.

Thank you for Reading so far 🎉

If you did like this article, share it with your co-workers. I tweet about my development journey as a Self-taught developer, so hit me up on Twitter.

Until then, have an amazing week!