In this series we will build a react app which will make CRUD requests to google sheets. We will use a third party service Sheet.Best which will connect our react app with google sheets.

This is the first tutorial of this series in which we will setup google sheet, sheet.best and create a boilerplate react app.

Go to https://docs.google.com/spreadsheets/u/0/ and click on Blank sheet. At the top of the sheet give your sheet any name of your choice. Now we will setup headings for columns we need. I will create 4 headings which are date, name, email and message. So in row 1 of the sheet add the headings in each column.

After that on the right-top click on Share button, a popup will open and at the bottom of the popup, click Change to anyone with the link and then from drop-down change the Viewer to Editor. Copy the link and click Done.

Open another tab and go to Sheet.Best and from the navigation bar click on Pricing and then click on Start Free under Free Account plan. The free plan provides 3 connections means we can integrate 3 different spread sheets, 500 requests per month and full CRUD API.

From your sheet.best dashboard click Connection and provide any name of your choice to the connection, keep the origin to Google Spreadsheets and paste the connection url you copied earlier from google spreadsheet. Finally click Connect. You will be redirected to dashboard you will see your new connection there. Click on DETAILS you will see the information about your connection and at the top the connection url will be the end point we will make request from our react app.

Now that we have setup sheet.best and google sheets, let's create react app now. Navigate to desired directory in your system, open terminal and run

npx create-react-app gsheet

It will create a react app. Once its done, navigate into project directory and from terminal run

npm install react-router-dom

Open project in code editor, go to public/index.html file and inside head tag add

 <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossOrigin="anonymous"
    />

and before closing body tag, add

<script      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
      crossorigin="anonymous"
    ></script>

I will be using bootstrap for styling that's why I have added these. Feel free to style the app as you like. Open src/App.js file and paste the following code

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Add from "./pages/Add";
import Edit from "./pages/Edit";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/add" component={Add} />
          <Route exact path="/edit/:rowIndex" component={Edit} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Now we need to create Navbar, Home, Add and Edit files. In src directory, create a folder components and inside it create a file Navbar.js and paste the following

import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
      <div className="container">
        <Link className="navbar-brand" to="/">
          CRUD Google Sheet
        </Link>
        <div>
          <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
            <li className="nav-item mt-1">
              <Link className="btn btn-primary btn-sm" to="/add">
                Add
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

It's a simple Navbar which contains link to home page and add page. In src directory create three files, Home.js, Add.js and Edit.js and paste the following code in respective files

// Home.js
const Home = () => {
  return (
    <div>
	Home
    </div>
  );
};

export default Home;

// Add.js
const Add = () => {
  return (
    <div>
	Add
    </div>
  );
};

export default Add;

// Edit.js
const Edit = () => {
  return (
    <div>
	Edit
    </div>
  );
};

export default Edit;

So we have setup sheet.best, google sheet and setup boilerplate react app. In the next part we will start working on adding the data from react app into google sheet.