davidjfigueroa / meet-app

Meet App

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.

Key Features:

• 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.
• Display Charts Visualizing Event Details.

Features, User Stories & Scenarios

1. Filter Events by City.

As a user, I would like to be able to filter events by city so that I can see a list of events that take place in that city.

Scenario 1

User selects 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;

Scenario 2

User doesnt select a city from the suggested list.

• Given user was not selecting a city;
• When the user opens the app;
• Then it should show a list of all events in all cities;

Scenario 3

User has not select a city

• Given main page was opened;
• When the user has not selected a city;
• Then it should suggest a list of cities;

2. Show/Hide Event Details.

As a user, I would like to be able to show/hide event details so that I can see more/less information about an event.

Scenario 1

An event element is collapsed by default.

• Given the user first opens the app;
• When the user recieves the full list of events (specific for the city or all events)
• Then all events will colapse by default.

Scenario 2

User can select details from a listed event

• Given user was searching for events and a list of events is showing;
• When the user selects "show details" on a specific event;
• Then the event details should fold out on click;

Scenario 3

User can colapse details from a listed event

• Given user was clicking on show details for an event;
• When the user selects "hide details" on a specific event;
• Then the event details should collapse on click;

3. Specify Number of Events.

As a user, I would like to be able to specify the number of events I want to view in the app so that I can see more or fewer events in the events list at once.

Scenario 1

User selects how many events they want to be shown

• Given the user has searched for events in a city;
• When the user selects how many event will be shown;
• Then the number of listed events should change to what the user will choose;

Scenario 2

User does not select how many events they want to be shown

• Given the user is on the home page with a list of events;
• When the user does not select how many events will be shown;
• Then the page should display 32 upcoming events;

4. Use the App When Offline

As a user, I would like to be able to use the app when offline so that I can see the events I viewed the last time I was online.

Scenario 1

User looses internet connection

• Given the user is on the home page with a list of events
• When the user loses internet connection
• Then the application should display a message indicating that it is currently offline

Scenario 2

User goes offline

Given the user is on the home page with a list of events *When** the user goes offline and then clicks on an event to see its details *Then** the application should display the event details from the cached data

Scenario 3

User goes offline and accesses app from different service

• *Given** the user is on the home page with a list of events
• *When** the user goes offline and then tries to access the application from a different device
• Then the application should still work with the cached data from the previous session

5. Add an App Shortcut to the Home Screen.

As a user, I would like to be able to add the app shortcut to my home screen so that I can open the app faster.

Scenario 1

• Given the user is on the home page of the application
• When the user clicks on the "Add to Home Screen" button
• Then the browser should prompt the user to add the application shortcut to the home screen

Scenario 2

• Given the user has already added the application shortcut to the home screen
• When the user clicks on the shortcut from the home screen
• Then the application should open and the user should land on the home page

6. Display Charts Visualizing Event Details

As a user, I would like to be able to see a chart showing the upcoming events in each city so that I know what events are organized in which city.

Scenario 1

• Given the user is on the home page with a list of events
• When the user clicks on an event to view its details
• Then the page should display a chart visualizing relevant event details, such as attendance or location data

Scenario 2

• Given the user is on the home page with a list of events
• When the user filters events by a specific city
• Then the page should update the charts to visualize event details relevant to the selected city

Scenario 3

• Given the user is on the home page with a list of events
• When the user specifies a number of events to be displayed
• Then the page should update the charts to visualize event details based on the specified number of events

Serverless functions

The Meet App utilizes serverless functions to enhance its functionality and architecture. The serverless functions, implemented through AWS Lambda, are an integral part of the app's backend, providing various services and benefits.

• 1. Authorization and Authentication: The serverless functions handle OAuth2 authentication via the Google Calendar API. This means that user authentication and authorization processes are offloaded to these serverless functions, ensuring secure access to user data without the need for traditional server maintenance.

• 2. API Endpoints: Serverless functions serve as API endpoints for the frontend React app. These functions enable communication between the app and external services, such as fetching upcoming event data from the Google Calendar API. As serverless functions scale automatically, the app remains responsive even under high user loads.

• 3. Offline Support: Serverless functions enable the app to work seamlessly offline. Cached data can be retrieved from these functions, providing a smooth user experience even when an internet connection is unavailable. This aligns with the app's goal of being a Progressive Web App (PWA) with offline capabilities.

• 4. Backend Scalability: The app leverages serverless architecture to ensure easy scalability. As more users access the app, the serverless functions dynamically scale up to handle the increased load, without requiring manual intervention or backend adjustments.

• 5. Cost Efficiency: With serverless functions, the app benefits from a cost-effective model. The app only incurs charges based on actual usage, avoiding costs associated with idle resources. This aligns with the serverless principle of paying only for what is consumed.

• 6. Deployment and Availability: By utilizing serverless functions and hosting the app on GitHub Pages, the app remains readily available and easily deployable. Users can access the app from various devices, and it remains operational even in low network conditions.

• 7. Interaction with Data Visualization: Serverless functions can facilitate data processing and manipulation required for data visualization features. For example, when generating charts showcasing upcoming events in different cities, the serverless functions may aggregate and format data to be presented effectively.

In summary, the Meet App integrates serverless functions into its architecture to enhance authentication, API communication, offline support, scalability, cost efficiency, and deployment. This approach aligns with the app's emphasis on providing a seamless user experience, leveraging the benefits of serverless technology and PWAs to create a powerful and user-friendly application.