React Goal Manager

Solution to a challenge from 50 react projects for the static web.

Table of Contents

• Overview
  • Built With
  • Thoughts
• Requirements
• Improvements
• Useful Resources

Overview

Built With

• Airtable
• React
• To run, git clone and add an airtable api key.

Thoughts

Linked records are not worth it. Managing linked records causes code duplication and extra api requests.
You can't update them inside an embedded form. Deleting a record with a linked field does not delete the linked record in its table. Thus you will have orphaned data cluttering your table. The orphaned data can break your app. You have to delete it at the same time you delete the main record.

You can embed an iframe and create record but you cannot create a linked record with custom data at the same time.

Have to look up about Airtable case sensitivity.

Requirements

• Create a list of goals and put them on your website.
• Add your goals to Airtable and use the API to dynamically request your list of goals.
• Add a field to Airtable that tracks progress of each goal and show that progress status on your website.

Improvements

• styling / accessibility
• make full crud
• can add a form from airtable inside an iframe (using env variable in iframe causes problems with cross origin)

Resources

• Stack Overflow - React & dotenv
• CRA - docs from create-react-app on env variables
• CD DATA - react & airtable
• Crowdbotics - react & airtable
• YouTube - Airtable CRUD
• Medium - useRef and forms
• YouTube - Airtable forms
• Stack Overflow - checkbox and useRef
• Airtable Forums - on delete, linked records are orphaned.
• Stack Overflow - conditional rendering
• Stack Overflow - react empty props
• Blog - iframes in react
• Airtable Forums - Airtable Form to link records