Dev Events

Meet App - Serverless Progressive Web Application with React

The primary goal of this project is to provide users with a seamless experience in discovering upcoming events in various cities and showcase the ability to build a serverless, progressive web application (PWA) developed using a test-driven development (TDD) technique.

PWA's features contribute to instant loading, offline support, and cross-platform compatibility and leveraging serverless architecture ensures scalability, availability, and cost-effectiveness. For the app, serverless functions hosted on the cloud provider AWS Lambda are employed to interact with the Google Calendar API and fetch upcoming events.

Technologies used

React

HTML / JSX

CSS / SCSS

PWA for offline support and native-like installation

AWS Lambda for Google OAuth

Google Calendar API / Open AI API

Jest-Cucumber / RTL / Puppeteer for testing

Recharts

React Bootstrap / NProgress for styling

Features, user stories and scenarios

1. Filter Events by City.

As an event attendee, I should be able to filter events by city, so that I can easily find and attend events in a specific location without scrolling through irrelevant listings.

Scenario 1:

Given the user has not searched for a city

When the user views the upcoming events

Then the app should display events from all cities

Scenario 2:

Given the user is on the search page

When the user starts typing in the city search field

Then the app should display a list of suggested cities

Scenario 3:

Given the user has a list of suggested cities

When the user selects a city from the list

Then the app should filter events based on the selected city

2. Show/Hide Event Details.

As a user, I should be able to show/hide event details, so that I can control the amount of information displayed and focus on the relevant aspects of an event.

Scenario 1:

Given the user is viewing a list of events

When the user accesses event details

Then the event details should be initially collapsed

Scenario 2:

Given the user is viewing a collapsed event

When the user chooses to expand the event

Then the app should display the details of the expanded event

Scenario 3:

Given the user is viewing an expanded event

When the user chooses to collapse the event

Then the app should hide the details of the collapsed event

3. Specify Number of Events.

As a user, I should be able to specify the number of events to be displayed, so that I can customize my viewing experience based on my preferences and easily manage the information presented.

Scenario 1:

Given the user has not specified the number of events

When the user views the upcoming events

Then the app should display 32 events by default

Scenario 2:

Given the user is on the settings page

When the user specifies a different number of events to be displayed

Then the app should update and show the specified number of events

4. Use the App When Offline.

As a user on the go, I should be able to use the app when offline, so that I can access event information and plan my schedule even in areas with limited or no internet connectivity.

Scenario 1:

Given the user has previously accessed the app with an internet connection When the user tries to access the app without an internet connection Then the app should display cached data from the previous session

Scenario 2:

Given the user is on the settings page When the user changes the search settings (city, number of events) Then the app should show an error message indicating the need for an internet connection to update settings

5. Display Charts Visualizing Event Details.

As a user, I should be able to view charts visualizing event details, so that I can gain insights and make informed decisions about which events to attend based on visual representations of relevant data.

Scenario 1:

Given the user is viewing the event visualization page

When the user accesses the chart displaying the number of upcoming events in each city

Then the app should show a chart providing a visual representation of event distribution across cities