Skip to content

Latest commit

 

History

History
120 lines (68 loc) · 7.38 KB

README.md

File metadata and controls

120 lines (68 loc) · 7.38 KB
Raw

Meet app: A Serverless Progressive Web Application with React

Objective

Meet App is a serverless, progressive web application (PWA) developed using React with a focus on test-driven development (TDD) techniques. The application uses the Google Calendar API to fetch upcoming events.

Screenshot 3 from appScreenshot 4 from app

Context

The idea behind this project lies in creating an app along serverless and PWA paradigms.

  • Serverless: No backend maintenance, ensures scalability, always available, no cost for idle time.
  • PWAs: Offers instant loading, offline support, push notifications, “add to home screen” prompt,responsive design, and cross-platform compatibility.

Approach

  • Test-Driven Development TDD: Prioritizing test-writing before code implementation to ensure robustness and reliability.
  • Visual Context Through Graphs: Utilizing graphical representations to present various data and output formats. The app allows users to search for events in a city and visualize event data through intuitive charts

To access the hosted App, click here.

Screenshot 1 from app

Project requirements and features

Features:

  • Filter Events by City: Users can filter events based on city.
  • Show/Hide Event Details: Event details can be expanded or collapsed.
  • Specify Number of Events: Users can customize the number of events displayed.
  • Use the App When Offline: Cached data is accessible without an internet connection.
  • Add an App Shortcut to the Home Screen: Installable as a shortcut on device home screens.
  • Display Charts Visualizing Event Details: Visual representation of event data, including the number of upcoming events in each city.

Technical facts:

  • Built with React: Leveraging TDD principles, OAuth2 authentication and the Google Calendar API.
  • Serverless Functions (AWS Lambda): Empowering authorization server functionality without traditional backend infrastructure.
  • Full Compatibility: Ensuring compatibility with IE11 and responsiveness across all screen sizes.
  • Passes Lighthouse's PWA Checklist: Compliant with PWA standards for optimal user experience.
  • Offline Functionality: Service workers enable offline access.
  • User Installation: Users can add the app to their home screen on mobile and desktop devices.
  • Object-Oriented Programming (OOP): Utilized for handling alerts and enhancing user interactions.
  • Test Coverage: Comprehensive test coverage with a rate of >= 90%.
  • Performance Monitoring: Monitored using online performance monitoring tools for continuous optimization.

Screenshot 5 from app

User Stories:

Feature 1: Filter Events By City

1.Scenario: When user hasn’t searched for a specific 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 upcoming events.
2.Scenario: User should see a list of suggestions when they search for a city.
  • 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.
3.Scenario: User can select 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.

Feature 2: Show/Hide Event Details

1.Scenario: Event element is collapsed by default.
  • Given the user is browsing events in a city. When the user views the events page, then the details of a specific event should be hidden by default.
2.Scenario: User can expand event details.
  • Given the user is viewing the eventspage. When the user clicks on the detail button of an event, then the event details should be displayed around the button.
3.Scenario: User can collapse event details.
  • Given the user is viewing the events page and some event details are expanded. When the user clicks on "Hide details" for that event, then the event details should be collapsed and hidden.

Feature 3: Specify Number of Events

1.Scenario: When user hasn't specified a number, 32 events are shown by default.
  • Given the user has not specified a limit in the number of the events shown. When the user browses through the events page, then the page limits the amount of events visible to 32 events.
2.Scenario: User can change the number of events displayed.
  • Given the user wants to change the number of events displayed. When the user enters a specific number in a text box, then the number of displayed events gets updated.

Feature 4: Use the App When Offline

1.Scenario: Show cached data when there's no internet connection.
  • Given the user wants to access the app, but has no internet connection. When the user browses through the events page, then he can still access the details of the events that were last cached.
2.Scenario: Show error when user changes search settings (city, number of events).
  • Given the user wants to access the app, but has no internet connection. When the user wants to change the search settings, then an error message pops up.

Feature 5: Add an App Shortcut to the Home Screen

1.Scenario: User can install the meet app as a shortcut on their device home screen.
  • Given the user wants to access the app from outside the web. When the user selects to install the app locally, then a shortcut is created on their device home screen.

Feature 6: Display Charts Visualizing Event Details

1.Scenario: Show a chart with the number of upcoming events in each city.
  • Given the user is on the eventpage. When the user scrolls down, then a a chart with the number of upcoming events in each city is visible.

Usage of serverless functions

In the Meet app, serverless functions play a pivotal role in handling the backend business logic. Initially, I developed serverless functions to facilitate navigation between the OAuth Server and the app. This enabled the app to request the Google OAuth consent modal and manage the redirection between Google and the app. In subsequent stages, these serverless functions will be responsible for managing the exchange of authorization codes and, upon successful authentication by the OAuth Provider, obtaining the final access token necessary for users to utilize the Google Calendar App. Additionally, AWS Lambda functions will be employed to ensure the successful retrieval and rendering of events to users within the app.