- About the App
- Live Demo
- Project Features & Scenarios
- 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.
Meet App Live Demo
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