This app will provide access to a list of events for searchable cities. The info provided will include time, location as well as a chart for info on all events in a specific city.
This 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.
App is hosted here: https://carnivalgoblin.github.io/meet/
- React
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' 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 search 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
As a user, I should be able to expand an event element by clicking on it, So that I can see further details of the event.
-
Scenario 1: Collapsed by Default
Given the event list is loaded
When the user hasn’t clicked anything yet
Then the event will be collapsed -
Scenario 2: Expanding the details
Given the event element is collapsed
When the user clicks an event
Then the event will expand, revealing further info -
Scenario 3: Collapse the details
Given the event element is expanded
When the user again clicks the event
Then the event will collapse again, hiding further info on the event
As a user, I should be able to type in a number to specify the number of events shown, So that I can only see as many events as I have specified.
-
Scenario 1: No Number is specified
Given the no number of events to be shown has been specified
When the user starts a search
Then the default amount (32) of events will be listed -
Scenario 2: User has specified event count preference
Given the event list is loaded
When the user specifies a number of events shown
Then the list of events will be as long as the user specified (or less, if less events are available)
As a user, I should be able use basic app functions offline, So that I can still use the app's basic features (i.e. showing events), despite having a live internet connection.
-
Scenario 1: Show cached data when offline
Given the connection to the internet has been lost
When the user uses the app
Then the app will use a cached version of the information to be shown -
Scenario 2: Show error if user tried to change location
Given the connection to the internet has been lost
When the user changes settings (i.e. city or time range)
Then the app will show an error message
As a user, I should be able to select a specific city to open up data visualization about its upcoming events, So that I can see organized statistics about the events in that specific city.
- Scenario 1: Show chart with number of events
Given the a search for a city has been started
When the user clicks on a city’s name
Then the more info on upcoming events for that city will be displayed
To get started with the meet App follow these steps.
Your system should have a NPM.
-
npm
npm install npm@latest -g
Required installation to get started with the App, follow these steps.
Clone the repo
git clone https://github.com/carnivalgoblin/meet.git
Install NPM packages
npm install
Start the app
npm run start
To push changes to github pages
npm run deploy