• About the App
• Live Demo
• Project Features & Scenarios
  • Feature 1
  • Feature 2
  • Feature 3
  • Feature 4
  • Feature 5
  • Feature 6
  • Serverless function
  • Bonus Diagram
• API

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

User stories and scenarios 1-6

As a user, I should be able to filter events by city. So that I can see a list of events taking place in that city.

• Scenario 1: When the user hasn’t searched for a specific city, show upcoming events from all cities.
  • Given the main page with the search option has been opened;
  • When the user enters a city;
  • Then they should be shown upcoming events for that city.
• Scenario 2: Users should see a list of suggestions when they search for a city.
  • Given the main page with the search option has been opened;
  • When the user opens the app;
  • Then they should be shown a list of all events for all the cities available.
• Scenario 3: The user can select a city from the suggested list.
  • Given user was typing "Berlin" in the city textbox 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.

As a User, I should be able to Show/Hide Event Details. So that I can learn more about the Event.

• Scenario 1: An event element is collapsed by default.
  • Given the user has found an event
  • When the user views an event element
  • Then the event details should be collapsed by default
• Scenario 2: The user can expand an event to see details.
  • Given the user has found an event
  • When the user clicks an event details
  • Then the event details should be expanded
• Scenario 3: The user can collapse an event to hide details.
  • Given the user has expanded the event details, and wants to close it
  • When the user clicks the hide details
  • Then the event details should collapse

As a User, I should be able to Specify the Number of Events. So that viewing events is better.

• Scenario 1: When the user hasn’t specified a number, 32 events are shown by default.
  • Given the user wants to see all events without specifying a number
  • When the user views the event shown on the search
  • Then the number of events shown will be 32
• Scenario 2: The user can change the number of events displayed.
  • Given the user wants to see all events but 5 at a time
  • When the user specifies 5 in the search field
  • Then the events will show only 5

As a User, I should be able to use the App When Offline. So that when there's no connection I can still view my Event history.

• Scenario 1: Show cached data when there’s no internet connection.
  • Given the user has no internet access and is in offline mode
  • When the user opens the events from last time
  • Then it will show the last loaded events
• Scenario 2: Show error when the user changes search settings (city, number of events).
  • Given the user changes search settings in offline mode
  • When the user attempts to change the search
  • Then the page will not load and show an error message indicating that changes will not load offline

As a User, I should be able to Add an App Shortcut to the Home Screen. So that it is easy to access.

• Scenario 1: User can install the Meet app as a shortcut on their device home screen
  • Given the user wants to add the app as a shortcut
  • When the user adds it to their device's home screen
  • Then they will have easy access from their device's home screen to the events app

As a User, I should be able to Display Charts Visualizing Event Details. So that I am aware of how many events are available and where.

• Scenario 1: Show a chart with the number of upcoming events in each city.
  • Given the user wants to view the number of events upcoming based on the city
  • When the user selects the option to view a chart of upcoming events
  • Then the events should display a chart of upcoming events in a city and how many

Serverless functions can be used to enhance the functionality of the app. It can provide Real-time updates, Personalized experiences as event recommendations, Event data processing, Notifications, Geolocation and Location-Based services for events, Handle API requests to Google Cloud, and be able to automatically scale based on demand!

Google Cloud API https://console.cloud.google.com/welcome/new?authuser=1&project=unique-badge-410116&supportedpurview=project