DEV Community: Fab

NoCodeAPI Google Sheet Tutorial using React and Chakra UI

Fab — Sat, 04 Dec 2021 13:22:55 +0000

We are going to build a simple website 'Fungram' with React, Chakra UI, and NoCodeAPI for fetching the data from Google Sheets. The goal of this tutorial is to make you familiar with NoCodeAPI and how it works.

The final project will look something like this (dark mode):

Check out the project live at - fungram.netlify.app

And source code is available at - github.com/fabcodingzest/fungram

Tech-stack we'll be using-

React

React is a JavaScript library for building faster user interfaces with reusable components.
Chakra UI

Chakra UI is a simple, modular and accessible component library that will help us to style our website.
NoCodeAPI

NoCodeAPI makes it easy to set up Google Sheet, Airtable, Twitter, etc APIs.

Getting Started

Let's get started with setting up the project directory.

Creating React project

We will be using the create-react-app template for Chakra UI.

# using npm
npx create-react-app fungram --template @chakra-ui

# or using yarn
yarn create react-app fungram --template @chakra-ui

# Enter the project directory
cd fungram

# Use the following command to open the project in vs-code
code .

We will be making some changes to files and deleting what is not needed (you can skip this step if you want to and go straight to this section).

Delete the following from the src directory

├── App.test.js
├── Logo.js
├── logo.svg
├── reportWebVitals.js
├── serviceWorker.js
├── setupTests.js
└── test-utils.js

This will show some errors, we need to remove the imports of the deleted files so let's do that.

1) Remove Everything inside App.js return function so it will look like this:

import React from 'react';

function App() {
  return (
    <div>
      Hello
    </div>
  );
}

export default App;

2) Moving onto index.js, it will look like this:

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

ReactDOM.render(
  <StrictMode>
    <ChakraProvider theme={theme}>
      <ColorModeScript />
      <App />
    </ChakraProvider>
  </StrictMode>,
  document.getElementById('root')
);

What did we do here?
Since we removed ChakraProvider from App.js, we added it to the index.js (you can have it in App.js too, I just prefer to have it separately in the index file).

3) Starting the server for development:

yarn start
# or
npm run start

So now we are done with setting up the project, let's go to NoCodeAPI to get our endpoint.

Before we move on I just want to show that I am storing some Posts data in the Google sheet that we will be using for the project which looks something like this:

Note: I converted JSON data obtained from DummyAPI to Google sheets using this tutorial. (I know I could have directly imported data using the NoCodeAPI import feature but since the data was nested and not working without the Dummy API header, so I had to go through this and then import the .xlsx file to google sheets manually xD. You learn something new every day.)

Working with NoCodeAPI

First, you will need to sign up of course. After signing in, go to the Marketplace and search for Google sheet or scroll down a bit, you should see one there (as shown in the picture):

You will see the activate button there(since I am already using the API so it shows Use this API for me), click on it. It will redirect you to a page where you should be able to see a Make Google Sheets API yellow button, click on it and you will see the following drawer:

Give your desired name to the API and enter the sheet ID (take help from the example), click on Create and Holaaa! Our Google Sheet API is ready to use. You will see something like this:

Click on use this API and play with the endpoints however you want, just make sure to enter the tabId (E.g. Sheet1 for my case) as it is the required parameter:

Test the API and you should be able to see the results like this:

Hallelujah! Our API is working now all we need to do is use the API endpoint in our React App, Let's goooo!

Coming back to our React Project

First, we will set up our API with the help of Axios.

1) To install Axios, run the following command in the terminal:

# using Yarn
yarn add axios

# or using npm
npm install axios

2) Create an api folder containing api.js and add the following code:

import axios from 'axios';

export default axios.create({
  baseURL: "Your api endpoint from NoCodeAPI",
  params: {
    tabId: 'Sheet1', // passing the required parameter in the axios instance of api
  },
});

We can't have the API string available publicly so we will store it as an environment variable in a .env file, so let's quickly create one and add our API endpoint with the prefix REACT_APP_ (that is how create-react-app works, you gotta have this), I am gonna go with the following.

REACT_APP_API=your_nocodeapi_endpoint

Now that we are done with this, let's change the baseURL in api.js , so it will look like this:

import axios from 'axios';

export default axios.create({
  baseURL: process.env.REACT_APP_API,
  params: {
    tabId: 'Sheet1',
  },
});

Yay! We are ready to work on our components now.

Let's come back and fetch some data from the api in App.js, we will be using the useEffect hook but before that let's add some states to the component using useState hook (don't forget to import it).

const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');

The states are self-explanatory so let's move onto the useEffect function which will look something like this:

import api from './api/api'; // importing the api

useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await api.get('/');
        setPosts(res.data.data);
      } catch (error) {
        setError(error.message);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

What did we do here?

We created an async function, in which we first set our loading state to true since our data is yet to be fetched.
In the try block, we are awaiting the response from api and saving it in the res variable.
After we get our data, we use the setPosts function provided by the useState hook.
In case of any error we catch, we set the error state to the error message.
After the process ends we set the loading state back to false.
At last, we call the function inside the hook, this will run whenever the App component renders.

We will create a components folder inside the src directory. Remember we have a ColorModeSwitch.js file, move it to the components folder as well.

Now, let's code our App component.

// Adding these in case of data is loading or there is some error
// The components used are simply Chakra UI components (import them)

if (loading)
    return (
      <Flex alignItems={'center'} justifyContent={'center'} minH={'100vh'}>
        <Spinner size="xl" thickness="4px" />
      </Flex>
    );
  if (error) return (
    <Flex alignItems={'center'} justifyContent={'center'} minH={'100vh'}>
      {error}
    </Flex>
  );

// when we get the data
  return (
    <div>
      <Box bg={'teal.600'}>
        <Container as={'header'} maxW={'container.xl'} py={6}>
          <Flex
            w={'full'}
            alignItems={'center'}
            justifyContent={'space-between'}
          >
            <Text
              color={'white'}
              fontSize={'4xl'}
              fontWeight={'600'}
              textTransform={'uppercase'}
            >
              fungram
            </Text>
            <ColorModeSwitcher justifySelf="flex-end" />
          </Flex>
        </Container>
      </Box>

      <Container as="main" maxW="container.xl" my={10}>
        <Grid
          templateColumns={{
            base: 'repeat(1, 1fr)',
            md: 'repeat(2, 1fr)',
            lg: 'repeat(3, 1fr)',
          }}
        >
          {posts.map(post => (
            <PostCard key={post.id} data={post} />
          ))}
        </Grid>
      </Container>
      <Box bg={'teal.600'}>
        <Container as={'footer'} maxW={'container.xl'} align={'center'} py={6}>
          <Text fontSize={'sm'}>
            &copy; 2021 Made by{' '}
            <Link fontWeight={'600'} href="http://github.com/fabcodingzest">
              Fab
            </Link>
          </Text>
          <Text fontSize={'sm'}>
            Checkout the code at{' '}
            <Link
              fontWeight={'600'}
              href="http://github.com/fabcodingzest"
            >
              GitHub
            </Link>
          </Text>
        </Container>
      </Box>
    </div>
  );

Again, what did we do here?

Chakra UI components are used for styling the header, footer and main elements (don't forget to import them).
We used the ColorModeSwitch component in the header.
The main part was mapping through the posts state which contains our array of data.
We render <Postcard /> component for each item in the array and pass the data as data prop along with of course key prop.

Now, we haven't created PostCard Component yet, so let's create it inside src/components/ which will look something like this:

import {
  Image,
  Box,
  Tag,
  Center,
  Heading,
  Text,
  Stack,
  Avatar,
  useColorModeValue,
  HStack,
} from '@chakra-ui/react';

const PostCard = ({ data }) => {
  const {
    image,
    tags,
    text,
    publishDate,
    ownerFirstName,
    ownerLastName,
    ownerImage,
  } = data;
  const date = new Date(publishDate).toLocaleDateString();
  const tagsArr = tags.split(', ');
  return (
    <Center py={6}>
      <Box
        maxW={'350px'}
        w={'full'}
        bg={useColorModeValue('white', 'gray.700')}
        boxShadow={useColorModeValue('2xl', 'sm')}
        rounded={'md'}
        p={6}
        overflow={'hidden'}
      >
        <Box
          h={'210px'}
          bg={'gray.100'}
          mt={-6}
          mx={-6}
          mb={6}
          pos={'relative'}
        >
          <Image
            src={image}
            objectFit={'cover'}
            h={'full'}
            w={'full'}
            alt={text}
          />
        </Box>
        <Stack>
          <HStack spacing={2}>
            {tagsArr.map(item => (
              <Tag size={'sm'} key={item} variant="solid" colorScheme="teal">
                {item}
              </Tag>
            ))}
          </HStack>
          <Heading
            color={useColorModeValue('gray.700', 'white')}
            fontSize={'xl'}
            fontFamily={'body'}
            textTransform="capitalize"
            noOfLines={2}
          >
            {text}
          </Heading>
        </Stack>
        <Stack mt={6} direction={'row'} spacing={4} align={'center'}>
          <Avatar src={ownerImage} alt={'Author'} />
          <Stack direction={'column'} spacing={0} fontSize={'sm'}>
            <Text fontWeight={600}>
              {ownerFirstName} {ownerLastName}
            </Text>
            <Text color={'gray.500'}>{date}</Text>
          </Stack>
        </Stack>
      </Box>
    </Center>
  );
};

export default PostCard;

What did we do here?

We first destructured the data prop we received.
Converted the publishDate to a local date string.
Split the tags string and get an array of tags (this is because of the way I stored tags in Google Sheets).
Rest we just use Chakra UI for the styles.

Hallelujah! We are done with the project, but there is a lot more you can do with NoCodeAPI so make sure to play around with other kinds of requests or products in the marketplace. All the best!

Summary

We learned how to create React project with the Chakra UI template.
We learned how to set up Google Sheet API using NoCodeAPI.
We learned how to fetch data, handle loading and error states.

How to get started with web development (Front-End)?🤔 [Part - 1]

Fab — Sun, 31 May 2020 17:41:51 +0000

So you are perhaps a newbie? Or someone learning to code online but feel like you are missing out something or might not be doing it right? Well, this article is just for you ...most probably XD.

Before I share the road to start Web Development I want to say that whatever I say is no way near a perfect Roadmap, I will just be sharing what I learned from my experience in the last 1 year since I started learning Web Development, feel free to twist the things your way but remember the concept remains same anyways.

What to start with?

The most simple answer to this question is - Start with HTML and CSS followed by JavaScript. Now let's get a bit deeper into it.

Why do you need to start with HTML and CSS?

Let's understand what's HTML and CSS?

In my language, I call HTML - the skeleton, CSS - the makeup or styling and JavaScript the muscles responsible for the functionality of a webpage.

Now we know what does HTML and CSS mean, lemme clear the most common misconception that HTML and CSS are programming languages they are not! HTML is a markup(structure) language that stands for HyperText Markup Language and CSS means styling sheet which stands for Cascading Style Sheets, both are used to structure and style a webpage but can't make it function like a programming language. So HTML and CSS are the essentials(for web development) that you have to learn before you move onto a programming language (JavaScript, we'll talk about it later).

But now the question comes where can I learn them? Well for that, I'm listing some Free resources where anyone can start learning or revise what they know already.

Free Resources to get started with HTML and CSS:-

Choose one from the above and get going ✨

Before you move on to building layouts make sure you know:-

HTML Basic and Semantic Tags
CSS Selectors, box-model, basic properties with their values, positioning
CSS Flexbox (lifesaver - here is Wes Bos Free course which is a good one flexbox.io)
CSS Grid (Here is Wes Bos another free course for CSS Grid cssgrid.io)
CSS Media Queries for Responsive layouts

Now that you know the Basics with CSS Flexbox and Grid, you have to practice building some web pages and I am gonna recommend you an awesome site where you can try building layouts and get some feedback for your work too.

Frontendmentor.io is an awesome site that contains layout challenges for beginners as well, they will basically give you a zip file containing images, design, and style guide which you'll have to follow and you just have to code it without thinking about designing at all! Just choose a beginner level challenge and start doing it. This was where I got my confidence that Yes, I can build layouts now. You can join the Frontendmentor community on Slack where you can have some mates and share your work and get some awesome feedback which will result in your growth.

These were some of the best resources for HTML and CSS that I have used during the last year since I started my journey.

Now that you are comfortable with building Responsive layouts Lets move onto the muscles of a webpage I mean JavaScript.

Haha, these gifs are cool 😂, I hope you enjoy them along with the blog.

Why do we need to learn JavaScript?

JavaScript is must know programming language if you want to become a good web developer as its responsible for the functioning of a webpage like in order to make a button do something (known as DOM manipulation) you'll need JavaScript and so the list goes on. In earlier days, JavaScript was just used as a client-side programming language (scripting that is present inside the client's HTML page) but nowadays we can use it for back end (refers to parts of a computer application or a program's code that allow it to operate and that cannot be accessed by a user) too with the help of Node.js which is a JavaScript runtime environment and can be used to build games, desktop apps, mobile apps and much more. AWESOME RIGHT?

Yeah Fab, we got it now tell us where can we learn this amazing language?😆 Sheesh, I was just coming to that...

Where can you start learning JavaScript?

There are so many resources that people often get confused, so I will explain when and why to use the mentioned resources.

Free resources for learning JavaScript

Colt Steele YouTube Beginner Course (latest) - This video is an almost 3-hour video where Colt (My fav online teacher) walks you through the very basics of JavaScript after which you can move onto learning more advanced stuff. I would recommend this to a complete beginner totally.
Florin Pop's Youtube Channel - This guy is a wizard seriously, after going through the Colt's video you can check out Florin's Learn JavaScript and JavaScript Arrays playlists to learn more advance concepts and practice them. He has other playlists for CSS and Freecodecamp's HTML and CSS curriculum so you can check them out too.
Traversy Media, DevEd, and The Net Ninja Youtube Channels - These are amazing guys who have many videos and playlists for learning JavaScript along with videos which include building a fully functioning webpage with HTML, CSS, and JavaScript(DOM Manipulation).
Wes Bos YouTube Channel - Wes has a JavaScript30 playlist where he teaches us to build 30 things with Vanilla JavaScript in 30 days. It's a must after you understand the basics of JavaScript and are familiar with ES6 (you might want to check out Freecodecamp's ES6 module for this).

These were all visual learning resources but if you like to learn from written resources - I gotcha 🥳.

Hehe I know I am just so Fab 😁 (Sorry cockiness comes with me as a package)

FreeCodeCamp.org, Codecademy.com, and Scrimba.com - All of them are awesome for practicing JavaSript and improve your problem-solving.
You don't know JS - Might not be your best option as a beginner but you can try reading the book after you get good at fundamentals from the above-mentioned resources.
Flavio Copes Handbooks and Blogs - He is an awesome blogger and his handbooks for HTML, CSS, and JavaScript along with others are really handy plus if you want then subscribe to his newsletters which contain tutorials and many more things.
Catalin Pit Blogs - His Blogs are really helpful and for more, you can get connected to him on Twitter and Instagram @catalinmpit.
Chris Ferdinandi Go make things newsletter - An Awesome Daily Tips Newsletter that will teach you many new things and help you to grow as a developer.

Make sure you actually know the below-mentioned concepts in JavaScript after learning it from any of the above resources:-

Variables
Data types
String manipulation
Functions
Arrays
Closures
Scope
Objects
Prototypes
Classes
Promises, Async/Await
DOM Manipulation - Document Object Model is an object-oriented representation of the web page, which can be used to update the content, structure, and style of the HTML and CSS Documents.

Phew, that was a lot, although I still have some resources as a beginner, these will be enough. (Stay tuned for upcoming blogs with more resources). All that I mentioned above comes under Front End Development (Deals with client-side development - what a user can see and use)

So now after you have learned JavaScript you HAVE TO build few things to practice what you learned before you move forwards, trust me it's the only way to become good at it.

Start from building Landing Pages which require some DOM manipulation through JavaScript - it can be as simple as hiding and showing a thing or changing the style on a click, etc, the main point is to practice DOM Manipulation as much as you can.
After you are comfortable with building static sites its time to move onto a bit complex part - to build web apps (Don't worry, if you followed the above-mentioned track you'll be ready to get your hands dirty with some code). Now now, I am not asking you to build the new Facebook or Twitter, We'll start small with a CRUD Todo App which stands for Create Read Update Delete that means building an app where a user can create Todo's, Update and Read the existing ones along with being able to Delete the desired ones. Try creating this on your own at first and don't be afraid to google anytime you feel like you're stuck or can't think of anything (cuz that will happen a lot, trust me).
When you're comfortable with building a Todo App from the scratch without any tutorials at last, on your own then move onto building an app where you fetch some data from an API and display accordingly on the webpage. It can be a Dad Jokes App followed by A Weather App or A Movie App.

You can surely find tutorials for the above-mentioned Projects but try doing these projects again till you can create them on your own without tutorials which can be your 2nd, 3rd, or 4th try doesn't matter how long it takes but make sure you are good at it in the end.

A few tips I would like to give at the end are:-

Don't be sad if you can't remember all HTML tags or CSS at first, it's totally normal to not remember anything at the start. You will remember them better when you keep building stuff more often plus Google exists for a reason alright even senior devs use google all time and its one of the most important skills as a developer to know how to google so don't you dare feel bad for googling too much.

Use your mind as a processor, not as a memory - Just know what and where to find stuff and you are good to go.

Building layouts will feel like climbing Mount Everest at first but don't worry just break down page sections into blocks, use pen and paper and make boxes around elements and then try building the page in chunks - this is the best way to learn.
JavaScript will make you feel overwhelmed (100% guaranteed) but don't give up just because you can't solve the problem on your own or need hints and google for it - its normal because at first, our mind is still adapting the language so it's fine to look at other people code and their solutions and UNDERSTAND why and how that works. Try until you can solve your problems with little or no help but till then its fine to look at solutions to understand how things are done.
Building Web Apps will make you feel - "Holy Cow, how am I supposed to think like that ?"
But don't worry once you get familiar with how others build things your mind will start thinking like that too, just be patient as Patience is the key.
I won't say don't compare yourself to others as I still couldn't get myself to do that completely but I'll share what I do when I start comparing myself to others - I tell myself "It's okay if someone learned it faster than me or became good at something fast, I have a different life with a different timetable so I'll go according to mine and let others go according to theirs. I am doing my best and I am enjoying the process, I'll reach my destination sooner or later but I WILL"
Don't let questions like "I am not good enough, maybe it's not for me?" get to you, you can effin do whatever you want once you are determined.
If you get stuck and have googled enough (< a day) then try contacting other developers asking for help telling them straight that you are stuck here and have googled but couldn't solve it still. Never message anyone just Hey or Hi, mention why are you DMing them as it increases the chance of them helping you. Instagram and twitter have amazing #100DaysOfCode, #Buildupdevs and #DevinitelyHealthy community which are very active and always ready to help others.
At last but not least PLEASE take breaks frequently as they help to refresh your mind and come back stronger.

I am gonna wrap this blog here as its enough for a beginner and I don't want anyone to get overwhelmed with the extra Information. I will be continuing the series in the future as I keep learning more.

PS: If you need help or have any questions then connect with me on Twitter and Instagram @fabcodingzest (I won't be active on Instagram for June 2020 as I am taking Insta Break but you can find me on Twitter)