This landing page was built with Nuxt3, an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence.
The service pattern was used to organize the business logic of the application. This pattern helps to keep the code clean and easy to maintain, clearly separating responsibilities.
Google APIs were used to integrate the application with Google Sheets. This allows data to be sent directly to a Google Sheets spreadsheet, making it easy to manage and analyze data.
The @nuxtseo/module module was used to generate metadata that makes the application easier to index by search engines.
The entire application is built using Tailwind CSS, a low-level CSS framework that allows for the easy creation of custom designs. This makes the application incredibly fast and lightweight.
The application uses ESLint with specific plugins to work together with Tailwind and Vue. This helps to maintain code quality and prevent common errors.
nuxt-speedkit and @nuxt/image were used to speed up page performance. These tools help to optimize image loading and the overall performance of the application.
Nuxt-icon was used for the icons. This allows for the use of a wide variety of icons easily and efficiently.
This feature adds Google Fonts to the landing page with the better practices to improve the page speed.
This architecture allows for a clear separation of responsibilities and facilitates the maintenance and expansion of the application in the future. Additionally, the integration with Google Sheets offers a convenient and efficient way to manage user data. And of course, it's FREE 💸
Make sure to install the dependencies:
# pnpm
pnpm installStart the development server on http://localhost:3000:
# pnpm
pnpm run devBuild the application for production:
# pnpm
pnpm run buildLocally preview production build:
# pnpm
pnpm run previewCheck out the deployment documentation for more information.
Objective: This tutorial will guide you through the process of obtaining the necessary Google credentials to connect to the Google API and perform actions on your account. The credentials you will obtain are:
- GOOGLE_CLIENT: The email address of the Google Cloud Platform (GCP) service account.
- GOOGLE_API: The private key of the service account in PEM format.
Prerequisites:
- A Google Cloud Platform (GCP) account.
- Permissions to create and manage service accounts on GCP.
- A text editor, such as Notepad++ or Sublime Text.
Steps:
1. Create a service account:
- Access the Google Cloud Platform Console: https://console.cloud.google.com/.
- In the left menu, click on "IAM & Admin".
- Click on "Service accounts".
- Click on "Create service account".
- Enter a name for the service account, for example, "My robot".
- Select the "Editor" role from the list of predefined roles.
- Click on "Create".
2. Download the private key:
- On the service account page, click on the "Keys" tab.
- Click on "Add key" and select "Create new key".
- Select the "JSON" key type.
- Click on "Create".
- The private key will be downloaded to your computer in JSON format.
3. Extract information from the private key:
- Open the downloaded JSON file in a text editor.
- Locate the "client_email" field. This is the value you need to use for the
GOOGLE_CLIENTvariable. - Locate the "private_key" field. This is the value you need to use for the
GOOGLE_APIvariable.
4. Set up environment variables:
-
Create a configuration file:**
-
Create a text file named
.envin the root of your code. -
In the
.envfile, add the following lines, replacing the values according to your information:
GOOGLE_CLIENT="[email protected]"
GOOGLE_API="-----BEGIN PRIVATE KEY-----
< YOUR PRIVATE KEY HERE >
-----END PRIVATE KEY-----"
To enable services in your IAM account, you need to follow these steps:
1. Access the Google Cloud Platform Console:
- Go to the Google Cloud Platform Console at https://console.cloud.google.com/.
- Sign in to your Google Cloud Platform account.
2. Open the APIs & Services page:
- In the left navigation menu, click "APIs & Services".
- Select "Library".
3. Locate the services you want to enable:
- In the search bar, type the name of the service you want to enable. For example, type "Google Sheets" to enable the service "https://www.googleapis.com/auth/spreadsheets".
- Click the name of the service to open the service details page.
4. Enable the service:
- On the service details page, click "Enable".
- If you are prompted to review the service permissions, read them carefully and click "Enable".
5. Repeat steps 3 and 4 for each service you want to enable:
- Repeat steps 3 and 4 for each of the services you listed:
6. Verify that the services have been enabled:
- On the "Library" page, you can verify that the services have been enabled. Enabled services will be displayed with a status of "Enabled".
Now that we have an IAM account configured, the next steps to receive customer data in the spreadsheet are:
1. Create a Google Sheets spreadsheet.
2. Change the name of the Sheet Page to match the name of the runtime config google.sheet_page.
3. Invite the IAM account to modify the spreadsheet by clicking on the "share" button. Send an invitation to your IAM, example: [email protected].
4. Set the GOOGLE_SHEET_ID in the .env file. This value can be found in the link of the spreadsheet.
## Your .env file should look like this
GOOGLE_SHEET_ID = "<insert the id of the link to your google sheet here>"
GOOGLE_CLIENT = "[email protected]"
GOOGLE_API = "-----BEGIN PRIVATE KEY-----
< YOUR PRIVATE KEY HERE >
-----END PRIVATE KEY-----"
That's it, integration done. Here is some information about the Google Sheets API (Free plan).
Limit per minute: 100 forms per minute per project. Limit per day: 4,000 forms per day per project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent