React Montreal Meetup

React / Gatsby

A website for a local developer meetup group in Montreal where upcoming and past meetups can be viewed.

Objective

The React Montreal meetup group was looking to have a web presence where they could display their past and future meetups. For interested attendees, the site permits the meetup group to be discovered through search engines, allow interested members to get an idea of what the meetup group is about, and discover details about upcoming meetups. For attendees of the meetup group, the website would be a place to reference additional information related to meetup presentations (presenter links/notes and presentation video recording links). For meetup presenters, the site would allow them to reference their talk when sharing their presentation with others.


Design

The website design was prepared with a mockup designed in Figma. Before beginning the development of the site, the mockups were presented to the meetup group organizers for approval.

Mockups were designed in Figma before beginning development

Result

Content Management

In order to allow the meetup organizers to easily enter information on the meetup site, Netlify CMS was used as an interface to easily edit the content on the website. The CMS also allows to preview content before publishing the content to go live.

The CMS allows meetup organizers to add new information to the website and preview their changes before publishing the content

Meetup Listings

Each meetup has its own entry within the CMS that allows meetup organizers to add the following information related to a meetup:

  • Description + Title
  • Date + Time + Location
  • Meetup.com link (in order to RSVP to the event)
  • Presenter info: name, presentation title, image, description, etc
  • Sponsors info: name, logo, description, links
Each meetup has all of its presenters and sponsor information listed on the website

Search Engine and Social Media Optimization

The website is built with GatsbyJS which is a static site generator. Since all the pages are pre-built, all the pages can be properly crawled and indexed by search engines. Furthermore, the metadata for each page can be configured in Netlify CMS, enabling each page to have its own custom title, description, and image used by search engines and social media sites.

Sharing the website on social media presents the site details in an attractive manner

Performance

Because the site is static, the pages load quickly in the browser. A lighthouse speed test performed on the website returns a perfect score in all areas.

Results of running a lighthouse speed test on the website