A serverless, progressive web application (PWA) with React using a test-driven development

by React

meetME

meetME is 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.
Main view:
After Login, here users can search events from different cities, users can define the number of search results and show or hide a chart which shows the number of events in each citiy.

Modal is open:
If users clicks on 'More details' button a modal is opening and shows more details about the event.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Features and Requirements

  • 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

Technical Requirements

  • The app must be a React application.
  • The app must be built using the TDD technique.
  • The app must use the Google Calendar API and OAuth2 authentication flow.
  • The app must use serverless functions (AWS lambda is preferred) for the authorization server
    • instead of using a traditional server.
  • The app’s code must be hosted in a Git repository on GitHub.
  • The app must work on the latest versions of Chrome, Firefox, Safari, Edge, and Opera, as well as on IE11.
  • The app must display well on all screen sizes (including mobile and tablet) widths of 1920px and 320px.
  • The app must pass Lighthouse’s PWA checklist.
  • The app must work offline or in slow network conditions with the help of a service worker.
  • Users may be able to install the app on desktop and add the app to their home screen on mobile.
  • The app must be deployed on GitHub Pages.
  • The API call must use React axios and async/await.
  • The app must implement an alert system using an OOP approach to show information to the user.
  • The app must make use of data visualization (recharts preferred).
  • The app must be covered by tests with a coverage rate >= 90%.
  • The app must be monitored using an online monitoring tool.

Dependencies

testing-library/jest-dom - testing-library/react - testing-library/user-event - atatus-spa - axios - moment - nprogress - react - react-dom - react-scripts - recharts - web-vitals - workbox-background-sync - workbox-broadcast-update - workbox-cacheable-response - workbox-core - workbox-expiration - workbox-google-analytics - workbox-navigation-preload - workbox-precaching - workbox-range-requests - workbox-routing - workbox-strategies - workbox-streams

DevDependencies

@wojtekmaj/enzyme-adapter-react-17 - enzyme - jest-cucumber - puppeteer

Project Brief

Gherkin syntax

1. Filter events by city

As a user I should be able to filter events by city So that I can see the list of events that take place in that city

SCENARIO 1:

- When user hasn't searched for a city, show upcoming events from all cities.

Given user hasn’t searched for any city

When the user opens the app

Then the user should see a list of all upcoming events

SCENARIO 2:

- User should see a list of suggestions when they seach for a city.

Given the main page is open

When user starts typing in the city textbox

Then the user should see a list of cities (suggestions) that match what they’ve typed

SCENARIO 3:

- 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 (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

2. Show / Hide event details

As a user I should be able to expand event details So that I can view more information about a specific event

SCENARIO 1:

- An event element is collapsed by default

Given that an event is present

When the user selects "view details" or "view more"

Then the element will expand and display the event details

SCENARIO 2:

- User can expand an event to see its details

Given the event list has loaded

When a user selects the event, either link or "view event details"

Then the event page will load, displaying all the event details

SCENARIO 3:

- User can collapse an event to hide its details

Given the user has expanded an events details

When the user selects "collaps" or "close"

Then the expanded element will collapse, hiding the details of the element

3. Specify Number of Events

As a user I should be able to view a specific number of events per page So that I can adjust my page for screen size and load time

SCENARIO 1:

- When user hasn’t specified a number, 32 is the default number

Given the events list has loaded and the user has not specified the number of events to load

When the user opens the event list

Then 32 events should load on the screen (assuming there is at least 32 events)

SCENARIO 2:

- User can change the number of events they want to see

Given the events have loaded

When a user has specified a number (i.e. 5) for the amount of events to view

Then only the specified number (5) of events should load

4. Use the App Offline

As a user I should be able to use the app offline So that I can view event information without having to connect to the internet/use data

SCENARIO 1:

- Show cached data when there’s no internet connection

Given the app has been openned previously with an internet connection

When a user opens the app

Then the previously cached data should be persistent within the app

SCENARIO 2:

- Show error when user changes the settings (city, time range)

Given the app has cached data

When a user changes settings

Then an error should inform them that it requires an internet connection to load new data

5. Data Visualization

As a user I should be able to view the number of events by city So that I can visualize data about where events are taking place

SCENARIO 1:

- Show a chart with the number of upcoming events in each city

Given that there are events loaded

When a user goes to the data page

Then a chart with visualized data showing how many events per city should load.

GitHub

https://github.com/mihocsaszilard/meet