Building and Customizing CRUD Applications with React and Google App Script

Overview

• Goal: Show how to build and customize CRUD applications using React and Google App Script.
• Database: Google Sheets.
• Application Focus: Task management system displaying a list of tasks with due dates and statuses.
• Customization: Can be done by editing the schema.

Application Features

• Automatic Sheet Creation: The application creates necessary sheets and headers automatically if they do not exist.
• Task Creation: Users can create new tasks through a form that includes a creatable select feature.
  • Example: New project items can be added directly from the dropdown.
• CRUD Operations:
  • Create tasks.
  • Edit tasks.
  • Delete tasks by clicking the trash icon.
• Dropdown Management:
  • Automatically generated based on the schema.
  • CRUD operations available for managing dropdown items.

Setting Up the Application

1. Copy Spreadsheet: Start by making a copy of the provided spreadsheet link.
2. Open App Script:
   • Go to Extensions > App Script.
   • This opens the script editor.
3. Deploy App:
   • Click Deploy > New Deployment.
   • Set deployment type to Web App.
   • Fill in the description and adjust access settings.
   • Click Deploy and authorize the script.
4. Access Application: A web app URL will be provided; open it to access the application live.
5. Modify Application:
   • Download the GitHub repository zip file.
   • Open it in a code editor, attach the script to the spreadsheet.
   • Rename the configuration file to clasp.json and replace the script ID.
   • Run npm install for packages, install clasp if necessary.
   • Deploy by executing npm run deploy and repeat the deployment in the script editor.
   • Use the dev URL for live testing without redeploying every change.

Understanding the Code Structure

Important Files and Folders

• gas folder: Contains Google Apps Script files.
  • api.js: Functions to interact with Google Sheets.
  • appsscript.json: Manifest file.
  • code.js: Contains core functions to deploy the web app.
• CSS and HTML Files: For styling and front-end structure.
• Source Directory: Contains React frontend code.
  • Components: Includes form, table, and navbar components, supporting dynamic fields and validations.
  • Smart Table: A dynamic table component for CRUD operations and rich formatting.
  • Pages Directory: Contains different application pages (home, dropdowns, settings).
  • Schema: Defines fields for tasks and logic for formatting.
• Server Folder: Houses gas.jsx, connecting React frontend with Google Apps Script backend.

Adding New Features

• To add a new page (e.g., budgeting):
  • Duplicate an existing folder and modify the schema.
  • Import the new page into the routes file.
  • Deploy the application to reflect changes.

Conclusion

• Customization is straightforward through the schema and file structure.
• Encourage viewers to subscribe and follow for more tutorials.