User Story 4 - Event Filter

Value proposition

As a user
I want to be able to filter the event list
So that I can focus on events I find interesting

Description

• A filter bar lets the user filter for genre or custom tags or remove the filter

Acceptance criteria

• Setting a genre filter should only display events of the selected genre 🖼️
• Setting a custom tag should only display events with the selected tag in its description or info 🖼️
• Setting a genre filter and a custom tag should only display events of the selected genre that include the tag in the description or info 🖼️
• Unsetting the filter should display all events 🖼️

Tasks

• Create an EventFilter component and pass it the props genre and tags
• Create states for genre and tags
• Create a select element for setting the genre state
• Create an input element for setting the tags state
• Create a button for resetting the genre and tags states
• Create a genres variable for the genre select options
• Create an onSetFilter function that sets the filteredEvents array
• Replace the events prop in the EventList component with filteredEvents
• Acceptance criteria with 🖼️ requires component testing

Complexity: XL

User Story 19 - Profile Page

Value proposition

As a user
I want to see a profile page
So that I can access my upcoming events, venues and reviews faster

Description

• A profile page with user infos and upcoming events

Acceptance criteria

• The ProfilePage renders a filtered EventsList, username, saved items and reviews count 🧪
• The ProfilePage renders a username and savedEvents count, savedVenues count, userReviews count 🧪

Tasks

• Create and connect MongoDB collections for users
• Acceptance criteria with 🧪 requires component testing

Complexity: XL

User Story 9 - Fetch API

Value proposition

As a user
I want to see events from the Ticketmaster API
So that I can pick an event from a list of real events

Description

• Dummy data is replaced by data from the Ticketmaster API

Acceptance criteria

• Events from the Ticketmaster API are shown instead of events from data.js
• Error handling is implemented

Tasks

• Setup fetching logic in the /api folder
• Include the API key in .env
• Acceptance criteria with 🧪 requires component testing

Complexity: XL

User Story 17 - Favorite Venues Page

Value proposition

**As a user
I want to be able to see favorite venues
So that I can edit my favorite venues

Description

• A list of saved events

Acceptance criteria

• The SavedVenuesList component renders a name and FavoriteButton for all venues from the passed venues prop 🧪
• Unsaving venues from the SavedVenuesList removes the unsaved venue from the list

Tasks

• Create a SavedEventsList component and pass it an events prop
• Acceptance criteria with 🧪 requires component testing

Complexity: M

User Story 11 - Spotlight Page

Value proposition

As a user
I want to land on a spotlight page
So that see suggested events from venues

Description

• A list of suggested venues with corresponding events is displayed

Acceptance criteria

• A list of events is rendered with a event title and venue name 🧪

Tasks

• Fetch a suggested events list with corresponding events
• Acceptance criteria with 🧪 requires component testing

Complexity: L

User Story 1 - Event List

Value proposition

As a user
I want a to see a list of events
So that I can inform myself about my options on each day

Description

• A list of all events that are present in the data

Acceptance criteria

• All events from the data should be displayed on the EventListPage 🖼️
• Each event should display an event name and date 🖼️

Tasks

• Create a dummy data file events.json
• Create an EventListPage component and pass it an events prop
• Create an EventPreview component and pass it an event prop
• Display the event.title and event.date in the EventPreview component
• Acceptance criteria with 🖼️ requires component testing

Complexity: S

inSpot is only available in english
The app currently only supports events in Germany but the app language is english.

Add a german version of the app
Translate pages, buttons and instruction text to the german language.

Translator plugins and translation apps
Automatic translations can translate the app into requests languages.

User Story 16 - Favorite Button

Value proposition

As a user
I want to be able to mark venues as favorite
So that I can save venues I'm interested in

Description

• A Favorite Button is available for Venues

Acceptance criteria

• The VenuePreview component renders a favorite button 🧪
• The VenueDetail component renders a favorite button 🧪
• Clicking the favorite button toggles the favorite property for the venue in the local state store

Tasks

• Create a FavoriteButton that accepts a venue id
• Acceptance criteria with 🧪 requires component testing

Complexity: L

User Story 18 - Review Venue

Value proposition

As a user
I want to be able to write a review for a venue
So that I can share my experience with other users

Description

• A review section with a form and review list is visible.

Acceptance criteria

• The VenueDetail component renders a form ReviewSection 🧪
• The VenueDetail component renders a rating (1-5) based on ratings in reviews 🧪
• The VenueDetail component renders the number of reviews 🧪
• The ReviewSection component renders a form ReviewForm and a list of reviews ReviewList 🧪
• Submitting a review with the ReviewForm adds a review to the ReviewList 🧪

Tasks

• Create and connect MongoDB collections for venues and reviews respectively
• Acceptance criteria with 🧪 requires component testing

Complexity: XL

User Story 10 - Venues List

Value proposition

As a user
I want a to see a list of venues
So that I see which venues are available

Description

• A list of venues is shown

Acceptance criteria

• All venues passed to the VenuesList are rendered 🧪
• A heading is rendered for each venue in the list 🧪

Tasks

• Create a VenuesList component and pass it a prop venues
• Acceptance criteria with 🧪 requires component testing

Complexity: M

User Story 20 - User Login

Value proposition

As a user
I want to be able to log in with popular services
So that I can have my data stored securely in a database

Acceptance criteria

• Log in with GitHub, Google etc is possible
• Privacy policy and terms and conditions are available in the footer of the ProfilePage

Tasks

• Implement next/auth

Complexity: XL

User Story 3 - Event Details

Value proposition

As a user
I want a see details about the event
So that I can read a description of the event

Description

• Precise, no unnecessary information

Acceptance criteria

• The event title, startDate, endDate, startTime, endTime, address should be displayed 🖼️
• A description and link of the event should be displayed if available 🖼️

Tasks

• Create an EventDetailPage component and pass it an event prop
• Render all event information available in the page
• Acceptance criteria with 🖼️ requires component testing

Complexity: S

User Story 2 - Location Page

Value proposition

As a user
I want to be able to see a list of cities
So that I can filter events by location

Description

• List of cities to set a location from

Acceptance criteria

• Cities which are present in the data should be displayed 🖼️
• Each city should display a city name 🖼️

Tasks

• Create an array of cities from all event locations in events.json
• Create a LocationPage component and pass it a cities array as a prop
• Map through cities and render each city as a list item with a city name
• Acceptance criteria with 🖼️ requires component testing

Complexity: S

User Story 14 - Save Button

Value proposition

As a user
I want to be able to mark events as saved
So that I can save events I'm interested in

Description

• A Save Button is available for Events

Acceptance criteria

• The EventPreview component renders a save button 🧪
• The EventDetail component renders a save button 🧪
• Clicking the save button toggles the save property for the event in the local state store

Tasks

• Create a SaveEventButton that accepts an event id
• Acceptance criteria with 🧪 requires component testing

Complexity: L

User Story 6 - Current Location

Value proposition

As a user
I want a to be able to use my current device location
So that I can get the exact distance to events

Description

• An additional choice called Current Location is available on the LocationPage

Acceptance criteria

• The LocationPage renders an additional item with the value of userLocation 🖼️
• Clicking the Current Location entry should ask the user for permission to access the device location
• The EventListPage should render events with the same city as the user

Tasks

• Add an additional local storage state userLocation and let it default to false
• If userLocation true, use userLocation as default location, else set to false
• Acceptance criteria with 🖼️ requires component testing

Complexity: L

User Story 5 - Location Navigation

Value proposition

As a user
I want to be able to navigate between the pages
So that I can adjust the location and move back to the previous page

Description

• A navigation header with a location button and a back button

Acceptance criteria

• The EventListPage component renders link to the LocationPage 🖼️
• The LocationPage and EventDetailsPage components render a link back to the EventListPage 🖼️

Tasks

• Add a Link to the EventListPage that has the href attribute /pages/location
• Add a Link to the LocationPage and EventDetailPage that has the href attribute /
• Acceptance criteria with 🖼️ requires component testing

Complexity: S

User Story 7 - Event Distance

Value proposition

As a user
I want to see the distance to events in the EventListPage and EventDetailPage
So that I can decide on an event based on distance

Description

• The distance to the event from the user's location is shown

Acceptance criteria

• Setting the userLocation to true should display the distance to events in the EventListPage
• Setting the userLocation to true should display the distance to events in the EventDetailPage
• Moving towards an event should decrease the displayed distance
• Moving away from an event should increase the displayed distance

Tasks

• Implement an API for resolving Geolocations and calculate the distance using the Haversine formula.
• Acceptance criteria with 🖼️ requires component testing

Complexity: M

User Story 8 - Time Until Event

Value proposition

As a user
I want to see the time left until an event starts
So that I can plan my time better

Description

• The time left until the start of the event is displayed

Acceptance criteria

• All events on the EventListPage display the timeLeft 🖼️
• An event on the EventDetailPage display the timeLeft 🖼️
• If an event is in the past, it is not displayed on the EventListPage 🖼️
• The timeLeft value is refreshed every minute

Tasks

• Set a useEffect() on the EventListPage with an interval of 1 min
• Acceptance criteria with 🖼️ requires component testing

Complexity: XL

User Story 12 - Navigation Bar

Value proposition

As a user
I want to see a navigation bar
So that I can navigate between the Venues and Explore pages

Description

• A navigation bar with Explore and Venues links

Acceptance criteria

• The NavigationBar component renders two links 🧪

Tasks

• Create the NavigationBar component and link to the respective pages
• Acceptance criteria with 🧪 requires component testing

Complexity: S

User Story 15 - Saved Events Page

Value proposition

As a user
I want to be able to see saved events
So that I can find saved events easily

Description

• A list of saved events

Acceptance criteria

• The SavedEventsList component renders a headline, date, SaveButton for all events from the passed events prop 🧪
• Unsaving events from the SavedEventsList removes the unsaved event from the list
• A Saved Link is displayed in the header on all pages 🧪

Tasks

• Create a SavedEventsList component and pass it an events prop
• Create and add a SavedEvents Link to the global header
• Acceptance criteria with 🧪 requires component testing

Complexity: M

User Story 13 - Venue Details

Value proposition

As a user
I want to see a venue details page
So that I can see important information about the chosen venue

Description

• A venue details page with information like address and upcoming events

Acceptance criteria

• The VenueDetailsPage renders the name, address and a picture of the venue if available
• A list of previews of upcoming events of the chosen venue are rendered

Tasks

• Create a VenueDetailsPage component and pass it a venue prop
• Fetch events for the passed venue prop
• Acceptance criteria with 🧪 requires component testing

Complexity: M