Meet App 📌

This app displays events for different cities that users have selected.

It's a serverless, progressive web application (PWA) built with React using a test-driven development (TDD) technique. The application uses the Google Calendar API to fetch upcoming events.

meet-app-demo.mp4

Deployment

Here is the link to the Meet App on github-pages.

User Stories and Gerkhin Scenarios

▪️ FEATURE 1: FILTER EVENTS BY CITY

USER STORY: As a user I should be able to “filter events by city”, so that I can see the list of events that take place in that city.

SCENARIO 1: WHEN USER HASN’T SEARCHED FOR A CITY, SHOW UPCOMING EVENTS FROM ALL CITIES.

Given the user hasn’t searched for any city

When the user opens the app

Then the user should see a list of all upcoming events

SCENARIO 2: USER SHOULD SEE A LIST OF SUGGESTIONS WHEN THEY SEARCH FOR A CITY.

Given the main page is open

When user starts typing in the city textbox

Then the user should see a list of cities (suggestions) that match what they’ve typed

SCENARIO 3: USER CAN SELECT A CITY FROM THE SUGGESTED LIST.

Given the user was typing “Berlin” in the city textbox

And the list of suggested cities is showing

And the list of suggested cities is showing

When the user selects a city (e.g., “Berlin, Germany”) from the list

Then their city should be changed to that city (i.e., “Berlin, Germany”)

And the user should receive a list of upcoming events in that city

▪️ FEATURE 2: SHOW/HIDE AN EVENT'S DETAILS

USER STORY: As a user I should be able to “show/hide an events details”, so that I can only see the list of events I need to at that moment.

SCENARIO 1: WHEN A USER HASN’T CHOSEN AN EVENT YET, DON’T SHOW ANY.

Given the users hasn’t chosen an event yet

When the user opens the app

Then the user should only see event names, but not their details

SCENARIO 2: USER SHOULD SEE DETAILS OF EVENTS WHEN THEY HAVE SELECTED ONE.

Given the user has chosen an event

When the user clicks on the 'show details' button

Then the user should see details about that event

SCENARIO 3: USER NO LONGER WANTS TO SEE DETAILS ABOUT AN EVENT

Given the user has decided to finish reading an event

When the user clicks on the ‘hide details’ button

Then the event details should disappear and only the event names are displayed

▪️ FEATURE 3: SPECIFY NUMBER OF EVENTS

USER STORY: As a user I should be able to “automatically see a reasonable amount of events which I can choose to adjust”, so that I see the optimum number of events that leads to a satisfying user experience.

SCENARIO 1: WHEN A USER HASN’T CHOSEN HOW MANY EVENTS, 32 IS THE DEFAULT NUMBER.

Given the user hasn't specified the number of events yet

When the user opens the app

Then the user will see 32 possible events

SCENARIO 2: USER CAN CHANGE THE NUMBER OF EVENTS THEY WANT TO SEE

Given the user would like to see more/less events

When the user types a new number

Then the user should see the same number of events

▪️ FEATURE 4: USE THE APP WHEN OFFLINE

USER STORY: As a user I should be able to “use the app when offline”, so that I can have maximum access to the app.

SCENARIO 1: SHOW CACHED DATA WHEN THERE’S NO INTERNET CONNECTION

Given the user wants to use the app

When the user is offline

Then the user should be able to see cached data without internet coverage

SCENARIO 2: SHOW ERROR WHEN USER CHANGES THE SETTING (CITY, TIME RANGE)

Given the user is offline

When the user tries to change settings

Then the user should see an error message

▪️ FEATURE 5: DATA VISUALIZATION

USER STORY: As a user I should be able to “have visual representations of data (ie charts)”, so that I can get an instant impression of what’s going on.

SCENARIO 1: SHOW A CHART WITH THE NUMBER OF UPCOMING EVENTS IN EACH CITY

Given the user hasn’t chosen an event

When the user is on the events page for a particular city

Then the user will see a chart with the upcoming events in that city