The app is designed for event management, using React and a test-driven development approach. It is a serverless and progressive web app, that fetches upcoming events through the Google Calendar API. Users will be able to view the events by city and choose how many events they want to see at once, along with accessing event details.
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.
-
Given user hasn’t searched for any city; When the user opens the app; Then the user should see a list of upcoming events.
-
Given the main page is open; When user starts typing in the city textbox; Then the user should receive a list of cities (suggestions) that match what they’ve typed.
-
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 maintain a clean and focused view of events.
-
Given the user opens the application; When they navigate to the events section; Then they should observe that event elements are collapsed by default.
-
Given the user is viewing the events section; When they choose to expand a specific event; Then they should be able to see the details of the selected event.
-
Given the user has expanded an event to view details; When they decide to hide the event; Then they should observe that the event details are collapsed again.
As a user, I should be able to specify the number of events to be displayed, So that I can adjust and manage the information on my screen.
-
Given the user opens the application; When they navigate to the events section without specifying the number of events; Then they should observe that 32 events are displayed by default.
-
Given the user is viewing the events section; When they choose to specify a different number of events to be displayed; Then they should be able to observe the updated number of events according to their selection.
As a mobile user, I should be able to use the app when offline, So that I can uninterrupted access and manage event information without an internet connection.
-
Given the user has previously accessed the application with an internet connection; When the user loses internet connectivity; Then they should observe that the application displays cached data instead of new data.
-
Given the user is interacting with the application; When the user attempts to change search settings, such as city or the number of events; Then they should be presented with an error message indicating that the changes cannot be applied at the moment.
- Given the user is accessing the meet app through a web browser on their device; When they choose to install the app on their home screen; Then they should be able to see a shortcut for the meet app on their device's home screen.
As an insight-seeking user, I should be able to view charts visualizing event details, So that I can quickly grasp patterns, trends, and statistics of the events.
- Given the user is viewing the events section in the app; When they navigate to the chart section; Then they should see a chart displaying the number of upcoming events categorized by each city.
When users open the app, they will be redirected to enter their credentials via OAuth at Google; the event of the serverless function will be triggered, which will then fetch the token from the Authorization Server.
This OAuth2 token will be presented by the serverless function to the Google Calendar API, granting the user access to the listed events.
In this case, the serverless function from AWS Lambda will be used. In general, a serverless function automatically scales based on the number of requests received, and charges are incurred only for the actual execution of each function, making it a cost-efficient option. The use of OAuth is a quite secure method for authenticating.
- React : JavaScript library for building user interfaces, developed and maintained by Facebook.
- Google Calendar API : Provides developers with endpoints to integrate Google Calendar functionality into their applications.
- AWS Lambda : Serverless computing service that enables developers to run code in response to events without managing servers.
- Jest (Unit and Integration Testing) : JavaScript testing framework, offering snapshot testing, mocking, and code coverage analysis capabilities.
- Jest Cucumber (User Acceptance Testing) : Integrates Cucumber with Jest for behavior-driven development and acceptance testing with tests written in Gherkin syntax.
- Puppeteer (End-to-End Testing) : Node.js library for automating browser actions and controlling headless Chrome or Chromium browsers.
- Atatus (Performance Monitoring) : Performancemonitoring platform, providing real-time insights into application performance, error tracking, and resource utilization.
https://alinalein.github.io/meet/
