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.
- Filter events by city.
- Show/hide event details.
- Specify number of events.
- Use the app when offline.
- Add an app shortcut to the home screen.
- View a chart showing the number of upcoming events by city.
As a user I should be able to filter events by city so that I can attend events near me.
When a user hasn’t searched for a city, show upcoming events from all cities
- Given: the user has not searched for a city
- When; the user opens the app
- Then: the user should see a list of all upcoming events in order by date
User should see a list of suggestions when they search for a city
- Given: the main page is open
- When: the user starts typing
- Then: the user should see a list of all all events in cities that match what is typed
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
- When: the user selects a city from search results list
- Then: the user’s location should be changed to show events from that city
As a user I should be able to show/hide event details so that I can organize all events.
An event element is collapsed by default
- Given: the app/page is loaded
- When: the user opens the app
- Then: the user should see an icon indicating the event is collapsed
User can expand an event to see its details
- Given: the user interacts clicks on an event
- When: the user expands the event item
- Then: the user should see details
User can collapse an event to hide its details
- Given: the user has finished looking at a specific event item
- When: the user looks for the close icon
- Then: the user will see all events collapsed with an open icon
As a user I should be able to view a specific number of events so I can view their details.
When user hasn’t specified a number, 32 is the default number
- Given: the user has not entered anything in the number of events field
- When: the user is looking for all events in a given location
- Then: the user will see up to 32 events in the given location
User can change the number of events they want to see
- Given: the user is searching for a specific event
- When: the user enters a numeric value in the number of events field
- Then: the user will see the specified number of events (if they exist)
As a user I should be able to view events when I’m not connected to the internet, so I can keep appointments wherever I am.
Show cached data when there’s no internet connection
- Given: the user has lost internet connection
- When: the user enters buildings where connecting to their wifi is not an option
- Then: the app should use it’s cached storage to show event details
Show error when user changes the settings (city, time range)
- Given: the user is not connected to the internet and tries to change event details
- When: the user enters a location with bad cell reception
- Then: the user will see a prompt to connect to the internet before making changes
As a user I should be able to glance at graph and see the number of events taking place in a location so I can plan to attend to join more meet ups.
Show a chart with the number of upcoming events in each city
- Given: the user has just downloaded the app and wants to see how many events he/she can search through
- When: the user first opens the app
- Then: the user will see onboarding screens leading to the data visuals