Batten Programs

This repository contains the frontend for displaying Batten Institute's (and other centers') programs/events on the Darden website via iframe.

Tasks (features/bugs) are managed via GitHub Issues.

Technologies Used

• Svelte: Frontend framework for building user interfaces.
• Netlify Functions: Serverless functions to fetch data from Airtable.
• Airtable: Backend database to store program information.
• Google Sheets: To specify which months to display.

Airtable as Backend

The programs data are fetched from Airtable using Netlify functions.

The free Airtable plan is used, which has a limit of 1,000 records per base and 1,000 API requests per month per workspace, and 5 editors per base. The API usage often gets close to the limit, but there's a 30-day grace period if the limit is ever reached.

Development

To set up the project locally for development, follow these steps:

1. Clone the repository to your local machine.

2. Navigate to the project directory.

3. Install the dependencies using npm:

   npm install
   

4. Install Netlify Cli.

5. Start the development server:

   netlify dev
   

   npm run dev won't work because it won't run the Netlify functions.

6. Open your browser and go to http://localhost:8888 to view the application.

Environment Variables

Set the correct AIRTABLE_TOKEN and GOOGLE_SHEETS_API_KEY environment variables using netlify env:set command or in the Netlify project settings.

Deployment

The main branch is automatically deployed to Netlify when changes are pushed to the repository.

Deployed to: https://batten-programs.netlify.app/

Review branches

Netlify is configured to deploy all branches to a unique URL. For example, a branch named 'review' will be deployed to: https://review--batten-programs.netlify.app/

Append the route to see the corresponding page. For example, to see the 'batten-full' page, go to: https://review--batten-programs.netlify.app/batten-full

Important Notes

Changing displayed months

The list of months to be displayed is fetched from a Google Sheet. This is handled by the src/data/getMonthsToShow.js file.

To change which months are displayed, you need to update the following Google Sheet: https://docs.google.com/spreadsheets/d/1Uc-nT4W7rtyw6TyxM6XHpof5GwmvboArJREdaCCV4P0/edit

Any changes in the sheet will be reflected in the application automatically.

Airtable API Rate Limits

Airtable's free plan has a limit of 1,000 API requests per month per workspace. The Netlify function fetches data from Airtable on each request, which can quickly use up the API limit if the site has high traffic.

To mitigate this, consider implementing caching in the Netlify function to reduce the number of API requests made to Airtable.

Source Code

Routes and Components

A Svelte component is created for each view. The component is then imported into the 'App.svelte' file and the route is defined there.

The routes currently are:

• /batten-full
• /batten-featured
• /mayo-full
• /mayo-featured
• /vc-full

The corresponding components are:

• BattenFull.svelte
• BattenFeatured.svelte
• MayoFull.svelte
• MayoFeatured.svelte
• VCFull.svelte

The routes are used to show different views on the Darden website via iframe.

Netlify Functions

Located in the 'netlify/functions' directory, getdata.js function fetches the programs data from Airtable using Airtable's API.

Airtable Structure

The Airtable base contains a table named 'Programs' with the following fields: [TODO: List the fields here for reference]