yarn create react-app mail-list
# или
npx create ...

cd mail-list
yarn add google-spreadsheet dotenv
# или
npm i ...

GOOGLE_SERVICE_ACCOUNT_EMAIL="YOUR_CLIENT_EMAIL"
GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY----- YOUR_PRIVATE_KEY -----END PRIVATE KEY-----\n"
GOOGLE_SPREADSHEET_ID="YOUR_SPREADSHEET_ID"

mkdir functions
cd !$
touch subscribe.js
code subscribe.js

// Загружаем переменные среды окружения из файла ".env"
require('dotenv').config()
const { GoogleSpreadsheet } = require('google-spreadsheet')
// Бессерверная функция (о ее сигнатуре мы поговорим позже)
// В данном случае, нас интересует только первый аргумент, принимаемый функцией - `event`
// `event` - это тоже самое, что `req` в `express`, т.е. объект запроса
exports.handler = async (event) => {
  // Создаем экземпляр класса, представляющего внутренний документ гугл таблиц
  // Конструктор класса принимает идентификатор таблицы
  const doc = new GoogleSpreadsheet(process.env.GOOGLE_SPREADSHEET_ID)
  try {
    // Выполняем авторизацию с помощью сервис-аккаунта
    await doc.useServiceAccountAuth({
      client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/g, '\n')
    })
    // Загружаем данные документа
    await doc.loadInfo()
    // Получаем ссылку на созданную нами таблицу
    const sheet = doc.sheetsByIndex[0]
    // Получаем данные от клиента в формате JSON и преобразуем их в объект
    const data = JSON.parse(event.body)
    // Получаем строки таблицы
    const rows = await sheet.getRows()
    // Обратите внимание, что заголовки столбцов таблицы становятся одноименными свойствами строк
    // Если какая-либо из строк содержит email, указанный пользователем,
    // значит, пользователь уже оформил подписку на обновления
    if (rows.some((row) => row.email === data.email)) {
      // Формируем ответ
      const response = {
        statusCode: 400,
        body: JSON.stringify({
          error: 'Пользователь с таким email уже оформил подписку'
        }),
        // Про это поговорим позже
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Credentials': 'true'
        }
      }
      // и возвращаем его
      return response
    }
    // Добавляем данные пользователя в таблицу в виде новой строки
    await sheet.addRow(data)
    // Формируем ответ
    const response = {
      statusCode: 200,
      body: JSON.stringify({ message: 'Спасибо за подписку!' }),
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': 'true'
      }
    }
    // и возвращаем его
    return response
  } catch (err) {
    // Обрабатываем ошибку, возникшую на стороне сервера
    console.error(err)
    const response = {
      statusCode: 500,
      body: JSON.stringify({ error: 'Что-то пошло не так. Попробуйте позже' }),
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': 'true'
      }
    }
    return response
  }
}

exports.handler = (event, context, callback) => {...}

headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Credentials': 'true'
}

yarn add react-router-dom semantic-ui-css semantic-ui-react react-google-recaptcha
# или
npm i ...

src
  hooks
    index.js
    useDeferredRoute.js
    useTimeout.js
  pages
    Home.js
    NotFound.js
    Subscribe.js
    Success.js
  index.css
  index.js

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
  font-family: 'Montserrat', sans-serif !important;
}
body {
  min-height: 100vh;
  display: grid;
  align-content: center;
  background: #8360c3;
  background: linear-gradient(135deg, #2ebf91, #8360c3);
}
h2 {
  margin-bottom: 3rem;
}
.ui.container {
  max-width: 480px !important;
  margin: 0 auto !important;
  text-align: center;
}
.ui.form {
  max-width: 300px;
  margin: 0 auto;
}
.ui.form .field > label {
  text-align: left;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.ui.button {
  margin-top: 1.5rem;
  font-size: 1rem;
  letter-spacing: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.email-error {
  color: #f93154;
  text-align: left;
}

import React, { lazy, Suspense } from 'react'
import ReactDOM from 'react-dom'
// Средства для маршрутизации
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
// Индикатор загрузки
import { Spinner } from './hooks'
// Стили `semantic-ui`
import 'semantic-ui-css/semantic.min.css'
// Кастомные стили
import './index.css'
// "Ленивые" компоненты - динамический импорт
const Home = lazy(() => import('./pages/Home'))
const Subscribe = lazy(() => import('./pages/Subscribe'))
const Success = lazy(() => import('./pages/Success'))
const NotFound = lazy(() => import('./pages/NotFound'))
ReactDOM.render(
  <Suspense fallback={<Spinner />}>
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/subscribe' component={Subscribe} />
        <Route path='/success' component={Success} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  </Suspense>,
  document.getElementById('root')
)

import { useState, useEffect } from 'react'
const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
export const useDeferredRoute = (ms) => {
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    const wait = async () => {
      await sleep(ms)
      setLoading(false)
    }
    wait()
  }, [ms])
  return { loading }
}

import { useEffect, useRef } from 'react'
export const useTimeout = (cb, ms) => {
  const cbRef = useRef()
  useEffect(() => {
    cbRef.current = cb
  }, [cb])
  useEffect(() => {
    function tick() {
      cbRef.current()
    }
    if (ms > 1) {
      const id = setTimeout(tick, ms)
      return () => {
        clearTimeout(id)
      }
    }
  }, [ms])
}

// Мне не хотелось создавать директорию `components` для одного компонента
import { Loader } from 'semantic-ui-react'
export const Spinner = () => <Loader active inverted size='large' />
export { useDeferredRoute } from './useDeferredRoute'
export { useTimeout } from './useTimeout'

import { Link } from 'react-router-dom'
import { Container, Button } from 'semantic-ui-react'
import { Spinner, useDeferredRoute } from '../hooks'
function Home() {
  const { loading } = useDeferredRoute(1500)
  if (loading) return <Spinner />
  return (
    <Container>
      <h2>Доброго времени суток!</h2>
      <h3>
        Подпишитесь на обновления, <br /> чтобы оставаться в курсе событий!
      </h3>
      <Button color='teal' as={Link} to='/subscribe'>
        Подписаться
      </Button>
    </Container>
  )
}
export default Home

import { Link, useHistory } from 'react-router-dom'
import { Container, Button } from 'semantic-ui-react'
import { Spinner, useDeferredRoute, useTimeout } from '../hooks'
function Success() {
  const { loading } = useDeferredRoute(500)
  const history = useHistory()
  const redirectToHomePage = () => {
    history.push('/')
  }
  useTimeout(redirectToHomePage, 3000)
  if (loading) return <Spinner />
  return (
    <Container>
      <h2>Спасибо за подписку!</h2>
      <h3>Сейчас вы будете перенаправлены на главную страницу</h3>
      <Button color='teal' as={Link} to='/'>
        На главную
      </Button>
    </Container>
  )
}
export default Success

import { Link, useHistory } from 'react-router-dom'
import { Container, Button } from 'semantic-ui-react'
import { Spinner, useDeferredRoute, useTimeout } from '../hooks'
function NotFound() {
  const { loading } = useDeferredRoute(500)
  const history = useHistory()
  const redirectToHomePage = () => {
    history.push('/')
  }
  useTimeout(redirectToHomePage, 2000)
  if (loading) return <Spinner />
  return (
    <Container>
      <h2>Страница отсутствует</h2>
      <h3>Сейчас вы будете перенаправлены на главную страницу</h3>
      <Button color='teal' as={Link} to='/'>
        На главную
      </Button>
    </Container>
  )
}
export default NotFound

import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Container, Form, Button } from 'semantic-ui-react'
import ReCAPTCHA from 'react-google-recaptcha'
import { Spinner, useDeferredRoute } from '../hooks'
// Утилита для проверки того, что все поля заполнены
const isEmpty = (fields) => fields.some((f) => f.trim() === '')
// Простой вариант утилиты для проверки адреса электронной почты
const isEmail = (v) => /\w+@\w+\.\w+/i.test(v)
function Subscribe() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  })
  const [error, setError] = useState(null)
  const [recaptcha, setRecaptcha] = useState(false)
  const { loading } = useDeferredRoute(1000)
  const history = useHistory()
  const onChange = ({ target: { name, value } }) => {
    setError(null)
    setFormData({
      ...formData,
      [name]: value
    })
  }
  const onSubmit = async (e) => {
    e.preventDefault()
    const email = isEmail(formData.email)
    if (!email) {
      return setError('Введен неправильный email')
    }
    try {
      const response = await fetch('/.netlify/functions/subscribe', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
          'Content-Type': 'application/json'
        }
      })
      if (!response.ok) {
        const json = await response.json()
        return setError(json.error)
      }
      history.push('/success')
    } catch (err) {
      console.error(err)
    }
  }
  // Учитывая, что мы используем тестовый ключ, капча всегда будет иметь истинное значение
  const disabled = isEmpty(Object.values(formData)) || !recaptcha
  const { username, email } = formData
  if (loading) return <Spinner />
  return (
    <Container>
      <h2>Подписаться на уведомления</h2>
      <Form onSubmit={onSubmit}>
        <Form.Field>
          <label>Ваше имя</label>
          <input
            placeholder='Имя'
            type='text'
            name='username'
            value={username}
            onChange={onChange}
            required
          />
        </Form.Field>
        <Form.Field>
          <label>Ваш email</label>
          <input
            placeholder='Email'
            type='email'
            name='email'
            value={email}
            onChange={onChange}
            required
          />
        </Form.Field>
        <p className='email-error'>{error}</p>
        <ReCAPTCHA
          sitekey='6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
          onChange={() => setRecaptcha(true)}
        />
        <Button color='teal' type='submit' disabled={disabled}>
          Подписаться
        </Button>
      </Form>
    </Container>
  )
}
export default Subscribe

yarn global add netlify-cli
# или
npm i -g ...

netlify dev