Include meetups scheduled next 30 days on the front page

[hollomancer]

Feature

Why is this feature being added?

To highlight our meetups and chapters across the country.

What should your feature do?

I would like to use the Meetup Pro API to put any Meetups that may be taking place in the next 30 days, on the front page. This will increase attendance and show how we make a difference in local communities.

There is a design piece here, to determine the ideal location for this - whether it should go above or below the fold, how it should be laid out, etc.

[rgoc123]

Hey @hollomancer, I'd be happy to work on this one the design piece is figured out.

[jjhampton]

Overlaps with #883 and #214

[rgoc123]

@jjhampton Should I wait until those are complete before getting started? It sounds like a decision needs to be made about whether a map or a list of events or both will be on the landing page.

[dmarchante]

@rgoc123 I think you can charge ahead as long as you reference #214

[charlessipe]

My idea for the design of this section is a gray map of the United States in the background with solid dots for cities with an active meetup group. The dots would be Operation Code turquoise. In front of the background is the text info about the next 5 meetups (date, location, event title). The heading could be "Upcoming Local Meetups" in the same style as the other headings on the page. If this sounds good I could mock it up on Illustrator.

[kylemh]

We definitely want to automate this and have it be scalable. If you're planning on using an image of a map, we'll need to recreate that image whenever new cities begin hosting meetups. If we end up having a map and displaying custom icons on in it, we'll need to discuss lazy-loading the map, using Google's API (and potential costs).

For a minimum viable product, I recommend mocking out a nice-looking list.

[hollomancer]

Agreed re. MVP.

[charlessipe]

@kylemh Can you clarify what you mean by mocking out a nice-looking list? Do you mean a nice-looking list of upcoming meetups in front of a map image background?

[kylemh]

Precisely. You can even do without the map image, to avoid contrast issues (tough to read)

[charlessipe]

Here's the design mockup I came up with.

[hollomancer]

Dude. This is awesome.

[kylemh]

@charlessipe perfect 👍

Go ahead and move on that, but also make sure it's developed and written to prepare for a potential of like 5+ meet-ups to display. I have an idea of how you can still have this appearance and fit an unlimited number of events, but I'll leave you to implement your own. Lemme know if you need help.

[LauraUX]

Very cool! I like this very much. It helps users see that we do have events happening, especially recent ones. It will get people exited to participate.

[hollomancer]

The challenging piece here will be managing the amount of space rel. to the other items on the landing page. May be necessary to assess this in the context of a larger landing page redesign later.

[charlessipe]

Plan to Render Upcoming Operation Code Events to a “Upcoming Events” section on the homepage:

1. Store an array of “urlname” for each local Operation Code meetup group (there are about 34 groups?)

2. Loop through the array and make a GET request for each meetup group to:
   https://api.meetup.com/:urlname/events

(Meetup API can be tested at this page https://secure.meetup.com/meetup_api/console/?path=/:urlname/events)

3. Push each event to an array

4. Order the events array by the key “time”

5. For the 5 events with the highest “time” value, get values for the following keys and push to an array:
   name
   local_date
   local_time
   venue.name

6. Loop through this array to render data to component