Feat: Event Calendar

[zenlex]

Build out page that displays index of event card components. Should pull data from Meetup API. Might be good if we can also pull from an airtable or google sheet-esque source. Maybe we single source the site to the sheet/table and run an ETL to populate meetup to the table so there's a layer of manual control between meetup and site?

[helmturner]

Create the file src/pages/events/index.tsx which meets the following minimum requirements:

• Queries events from Meetup events
• Renders a responsive grid of cards for each event with standard details
• Allows for sorting and searching events by name, date, etc.
• Each event card links to a details page for that event at codefortulsa.org/events/[event-name]
• Is wrapped in a layout that matches other areas of the site

[destos]

Did a little research on potential plugin to use and came across a few:

• https://www.gatsbyjs.com/plugins/gatsby-source-google-calendar-events/
• https://www.gatsbyjs.com/plugins/gatsby-source-meetup/
• https://www.gatsbyjs.com/plugins/gatsby-source-meetup-events/

The feature that may cause problems is being able to add additional events besides those found on meetup.
May be able to accomplish this request by querying multiple sources and any local defined events and then combining them and filtering out past events. ( re-read the first comment and realized I'm just re-stating it) Are there any existing features where we use an external data source or plans to do so? Also would a build need to be triggered manually if the source is updated or can we make google actions run periodically?

gatsby-source-meetup Looks the most used for interacting with Meetup. I'd suggest just going with that for the MVP.

[helmturner]

Did a little research on potential plugin to use and came across a few:

• https://www.gatsbyjs.com/plugins/gatsby-source-google-calendar-events/
• https://www.gatsbyjs.com/plugins/gatsby-source-meetup/
• https://www.gatsbyjs.com/plugins/gatsby-source-meetup-events/

The feature that may cause problems is being able to add additional events besides those found on meetup. May be able to accomplish this request by querying multiple sources and any local defined events and then combining them and filtering out past events. ( re-read the first comment and realized I'm just re-stating it) Are there any existing features where we use an external data source or plans to do so? Also would a build need to be triggered manually if the source is updated or can we make google actions run periodically?

gatsby-source-meetup Looks the most used for interacting with Meetup. I'd suggest just going with that for the MVP.

Thanks for that research @destos. Now that we've moved over to using NextJS instead of Gatsby, however, it's likely that we'll be able to implement this with a simple data loader.

We're currently in the process of updating the documentation to reflect the change in framework. You'll find some helpful information in the README.md and CONTRIBUTING.md.

Don't hesitate to reach out with any questions, of course! We have a new Slack Channel dedicated to this project that will probably get you the quickest response.

[helmturner]

@destos To answer a few of your questions above, I do think it's been mentioned that events may well come from outside of meetup, as well. I think organizers liked the idea of using Google Sheets as the source of Truth and updating the website, meetup, etc. based on the Google Sheets primary source. @chimchim237 would know better than I, though.

As far as how and when the website updates from that source, I think a compelling option is to use Next's Incremental Static Regeneration feature.

[zenlex]

Ok, so looks like plan here is 2 pronged approach:

1. Query the meetup API at build time to get list of Techlahoma events, potentially filtered to those containing 'code for tulsa'.
2. Merge that dataset with a query from a google sheet that will only contain non-meetup events.

Use the merged dataset to prerender the page at build time and we'll do regular builds via GH actions as needed. I think as Alec points out we can probably leverage the Incremental regeneration here too. Need to figure out how we want to handle secrets/dataset for local development. For deployment we can use GH Repo and Heroku as needed for secret stores. I was just reading up on doing encrypted secrets on github for environment configs so I can hopefully just set that up with the meetup and google sheets keys.

Meetup API looks like it's GraphQL and it seems like Apollo is the most ubiquitous client approach with Next..? Seems easy enough to do the two queries and format the dataset in getStaticProps and then render cards from that.

[zenlex]

Just pushed up a branch feature/events as a starting point for this. Currently using mock local data. Needs:

• Styling cards and layout to match mockup
• Implement data fetching & transformation from Meetup and Google sheets to replace mock data.

[zenlex]

We're going to drop the google sheet integration for now in favor of pulling event info from .md files in an /events folder. So we will need to make a graphQL query for the meetup data and merge that into the data pulled from the md files instead of merging it with google sheets data. See @zenlex or @AlecVision with questions about this