A landing page for FreeSQL with Google Sheets integration for email collection.
- Clone the repository
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Go to Google Cloud Console
- Create a new project
- Enable the Google Sheets API
- Create a Service Account:
- Go to "IAM & Admin" > "Service Accounts"
- Click "Create Service Account"
- Fill in the details and grant necessary permissions
- Create a key (JSON type) and download it
- Create a Google Sheet:
- Create a new spreadsheet in Google Sheets
- Add these column headers to the first row: Email, Timestamp, Source
- Share the spreadsheet with the service account email (with Editor permissions)
- Copy the spreadsheet ID from the URL (the long string in the middle of the URL)
- Deploy the site to Netlify
- In the Netlify dashboard, go to Site settings > Environment variables
- Add the following environment variables:
GOOGLE_SHEET_ID
: Your Google Sheet IDGOOGLE_SERVICE_ACCOUNT_EMAIL
: Email from your service accountGOOGLE_PRIVATE_KEY
: The entire private key from your service account JSON file
-
Install the Netlify CLI:
npm install -g netlify-cli
-
Create a
.env
file in the root with your Google credentials:GOOGLE_SHEET_ID=your_sheet_id GOOGLE_SERVICE_ACCOUNT_EMAIL=your_service_account_email GOOGLE_PRIVATE_KEY="your_private_key"
-
Run the development server with Netlify Functions:
netlify dev
- Eye-catching design with the iconic all-seeing eye
- Email collection form that saves to Google Sheets
- Responsive design for all device sizes
- Easy to deploy on Netlify
- Update the eye image in
public/freesql.png
- Modify the copy in the React components
- Adjust the color scheme in
src/index.css