meetJS

A progressive web app created with test-driven development, the Google Calendar API, and Amazon Web Services.

Project Description

The Meet app is a progressive web application with a serverless backend, offering offline access to upcoming events in specific cities. Its responsive design ensures seamless display across devices, delivering an optimized user experience. Developed via Test-driven development, it prioritizes code quality and test coverage for increased app performance.

About Serverless Function Usage

This app uses serverless functions to handle backend operations without the need for maintaining server infrastructure. For example, when a user requests upcoming events or chooses to filter events by city, the serverless backend can respond to these requests by retrieving and processing any data from the database.

With the use of serverless architecture, the app maintains scalability, and cost-effectiveness--while giving any user seamless access to the event information. Using serverless functions is an efficient option for a modern web app.

Run this project locally

• Clone this repository

• Go to the project directory

  cd project-folder
  

• Install project dependencies

  npm install
  

• Start the server at localhost:3000 in the default web browser

  npm run start
  

User Features

Feature 1: Filter Events By City

User Story

• 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.

Possible Scenarios

• Scenario: When the user hasn't searched for a city, show upcoming events from all cities

  • Given I have navigated to the main page but have not specified a city
  • When I look at the events list
  • Then I should see events from all cities

• Scenario: User should see a list of suggestions when they search for a city

  • Given I have navigated to the main page
  • When I start typing in the search box to search for a city
  • Then I should see a list of city names that match my input as suggestions

• Scenario: User can select a city from the suggested list

  • Given the list of suggested cities is displayed
  • When I click on a city name from the suggestions
  • Then I should only see events happening in the selected city

Feature 2: Show/Hide Event Details

User Story

• As a user, I should be able to expand an event to see more details and collapse it to hide those details, So that I can switch my focus between the event list and a single event.

Possible Scenarios

• Scenario: An event element is collapsed by default

  • Given I have navigated to the main page
  • When I look at the list of events
  • Then the list should be minimized with each event showing only the summary

• Scenario: User can expand an event to see details

  • Given an event is collapsed
  • When I click on an event's "SHOW DETAILS" button
  • Then the container should expand to show all event information

• Scenario: User can collapse an event to hide details

  • Given an event is expanded
  • When I click on the event's "hide details" button
  • Then the event should collapse by hiding the event details

Feature 3: Specify Number of Events to Display

User Story

• As a user, I should be able to specify the number of events I want to view at a time, So that I can limit the amount of information displayed in the app based on preference.

Possible Scenarios

• Scenario: When user hasn’t specified a number, 32 events are shown by default

  • Given I have navigated to the main page
  • When I have not specified a number of events to view
  • Then 32 events should be displayed as the default

• Scenario: User can change the number of events displayed

  • Given I have navigated to the main page
  • When I can specify thea number of events to be displayed in the app
  • Then see the desired result on the page

Feature 4: Use the App While Offline

User Story

• As a user, I should be able to view events and use the app even when I'm offline, So that I can access event information without an internet connection, ensuring I have the information I need at any time.

Possible Scenarios

• Scenario: Show cached data when there’s no internet connection

  • Given I have previously visited the page and loaded event data
  • When I access the app without an internet connection
  • Then I should see the previously cached event data

• Scenario: Show error when user changes search settings (city, number of events)

  • Given I am accessing the app without an internet connection
  • When I try to change the search settings like city or number of events
  • Then I should see an error message indicating the action cannot be completed offline

Feature 5: Add App Shortcut to Device Home Screen

User Story

• As a user, I should be able to add a shortcut of the app to my device's home screen, So that I can quickly access the app without having to navigate through my browser, making it feel more like a native app.

Possible Scenarios

• Scenario: User can install the meet app as a shortcut on their device home screen
  • Given I am using a compatible browser on my device
  • When I choose to add the app to my home screen
  • Then the app should be added as a shortcut on my home screen for easier access

Feature 6: Display Charts Visualizing Event Data

User Story

• As a user, I should be able to see charts describing the data about selected events, such as the number of upcoming events in each city, So that I can see the frequency of events in different locations to learn about the culture in selected cities.

Possible Scenarios

• Scenario: Show a chart with the number of upcoming events in each city
  • Given I am on the main page
  • When I navigate to the chart section
  • Then I should see a chart displaying the number of upcoming events in each city