This project is a React assignment for Assessli. It aims to create a dynamic and visually appealing contact page using React that can be easily integrated into your website to allow visitors to send you messages. The contact page includes a form with fields for name, email, phone, and message. The project integrates with Google Sheets, and the form data is being submitted to the where the proper working of the form can be checked.

This project was bootstrapped with Create React App.

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

This function creates a compact folders of all the essential part of the application so that it can be deployed.

Integrating Google Sheets with a React.js application using Google Apps Script involves creating an Apps Script project to act as an intermediary between our React.js front end and the Google Sheets backend. This allows our React.js application to send data to Google Sheets for storage and retrieval. Here are the steps to achieve this integration:

1. Create a new Google Sheets document or open an existing one.
2. Set up the sheet with the necessary columns to store your data.
3. Go to the Google Apps Script website.
4. Create a new project and give it a name.
5. Write the Apps Script code to handle incoming HTTP requests and interact with Google Sheets.
6. Deploy your Apps Script project as a web app to obtain a URL that your React.js application can send requests to.
7. Choose "Web App" as the deployment type and configure settings like access permissions.
8. Deploy the web app and note down the URL generated.
9. Create a new React.js application or use an existing one and fetch the api from Google Sheet backend.
10. Now after fixing the CORS issue, we can create the frontend and retrieve the data written in the app directly from google sheet.

• Easy integration into any HTML/CSS/JS or React and Tailwind CSS based website.
• Collects sender's name, email, and message or more fields can be added.
• Sends messages to your Google Sheets using server-side processing.

1. Clone the repository: git clone https://github.com/soubhatta/Assessli-Contact-Form-Internship-Task.git
2. Install dependencies: npm install
3. Run the project: npm run dev
4. Access the server at http://localhost:3000

The project integrates with Google Sheets, and the form data is being submitted to https://docs.google.com/spreadsheets/d/1xo_z8qvE0RI85VQEdNvK5MRnD4Ls-sEnmw12HuaNYgQ/edit?usp=sharing, where you can check the data submitted to the form.

• The project uses React for frontend development.
• For any issues or suggestions, please contact me. Email: [email protected]