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.
As a user, I should be able to show or hide event details, so that I can easily access or minimize event information as needed.
Scenario: Event element is collapsed by default. Given the user is on the events page, Then the event element should be collapsed by default.
Scenario: User can expand an event to see details. Given the user is on the events page, when the user clicks on an event, then the event details should be expanded
Scenario: User can collapse an event to hide details. Given the user has expanded an event to see details, when the user clicks on the event again, then the event details should be collapsed.
As a user, I should be able to specify the number of events displayed, so that I can control how many events I see at once and manage my event list more efficiently.
Scenario: Default number of events displayed. Given the user is on the events page, when the user has not specified a number of events, then 32 events should be shown by default.
Scenario: User changes the number of events displayed. Given the user is on the events page, when the user specifies a number of events to display, then the specified number of events should be shown.
As a user, I should be able to use the app when offline, so that I can access important features and information even without an internet connection.
Scenario: Show cached data when there’s no internet connection Given the user is on the events page And there is no internet connection Then the app should show cached data
Scenario: Show error when user changes search settings Given the user is on the events page And there is no internet connection When the user changes the search settings (city, number of events) Then the app should show an error message
As a user, I should be able to add an app shortcut to the home screen, so that I can quickly and conveniently access the app directly from my home screen without navigating through menus.
Scenario: User can install the meet app as a shortcut on their device home screen Given the user is on the meet app page When the user opts to install the app as a shortcut Then the app should provide an option to add the shortcut to the device home screen And the shortcut should be added to the user's home screen
As a user, I should be able to view charts visualizing event details, so that I can easily understand and analyze event data through visual representations.
Scenario: Show a chart with the number of upcoming events in each city Given the user is on the events page When the user views event details Then the app should display a chart with the number of upcoming events in each city
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh