Value Proposition

As a user
I need to see my entries on the map
to be able to see where the flea markets and shops are located.

Description

Acceptance Criteria

• On the map there are markers for each entry
• When clicking on a marker a popup with the name and the category is shown
• The popup can be closed by clicking on a "x" in the top right corner

Tasks

• Create a component for the entry markers
• Inside the marker implement a popup that renders the respective name when clicking on the marker
• Implement the marker inside the map component
• Use an API to convert the addresses into longitude and latitude
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a user
I need to have an edit function
to be able to keep the list of flea markets/shops up to date.

Description

Acceptance Criteria

• A button to edit the entry is displayed on the unfolded card, labeled "Ändern"
• When the button is clicked, the entry can be edited and the button toggels, labeled "Speichern"
• After clicking the save button changes are updated

Tasks

• Create a button component
• Add an onClick event to the button to edit an entry
• Add styled-components
• Add to Storybook
• Write test to check if the button is there
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

L

Value Proposition

As a user
I need a map
to be able to to see where the flea markets and shops are located.

Description

Acceptance Criteria

• There is an extra page where the map is displayed
• The page is linked in the footer with a map icon
• The map can be zoomed and moved
• When the map is rendered, it shows the current location of the user
• The user is asked if location-data is permitted to be shared
• The map should be centered in the middle of Germany, if the location of the user is not available/shared

Tasks

• Create the map page
• Add a map icon to the footer and link it to the map page
• Create a map component to render the map using Leaflet
• Create the function LocationMarker
• Add component to map page
• Add to Storybook
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a user
I need to delete an entry
to be able to keep the list of flea markets and secondhand stores up to date.

Description

Acceptance Criteria

• A button to delete the entry is displayed on the unfolded card, labeled "Löschen"
• After clicking the button the entry disappears and is not in the list anymore

Tasks

• Create a button component
• Add an onClick event to the button to delete an entry
• Add zustand for cleaner code
• Add styled-components
• Add to Storybook
• Write test to check if the button is there
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a user
I need a nicely designed application
to be able to have a good experience while using it.

Description

/

Acceptance Criteria

• The map is displayed in the correct size
• The markers on the map are in the right position
• The pop-ups on the map are easy to read
• The modals and errors are easy to recognize
• The texts in the form have the same font in all input fields
• The form has a nice styling
• The buttons "Ändern" und "Löschen" on the cards are side by side
• Header and footer have the same size
• It should be recognisable that the buttons are clickable

Tasks

• Change 100vh to 100vw on the card
• Adjust the iconAnchor
• Rework the styling of the pop-ups (font-size)
• Rework the styling of the modals and errors (color, font, position)
• Create a :root in the GlobalStyles and set the colors there
• Change the font
• Put a div around the buttons
• Adjust the size of the header and footer
• Add a cursor pointer to the buttons
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

XL

Value Proposition

As a user
I need to see an flea market/shop
to be able to get the information about the flea market/shop I am interested in.

Description

Scribble / design or text

Acceptance Criteria

• The entry's category is displayed
• The flea market's/shop's name is displayed
• The flea market's/shop's location is displayed

Tasks

• Create the data structure to hold the entry details
• Create a new component to render the data in a <h2> and <p> tag
• The component receives entry details via props
• Add component to the app
• Add styled-components
• Add to Storybook
• Add test to check if data is rendered
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a developer
I need to have a clean and working code
to be able to get along well with my code.

Description

Everything works as it should.
Another person understands the code quickly and finds his way around easily.

Acceptance Criteria

• The code is clean and well structured
• There are no unnecessary styling features
• The styled-components are well structured
• All tests work
• When entries are changed, the map continues to function
• The bookmark button is always in the same place

Tasks

• Restructuring the styled-components with variants (e.g. Button.styled.js)
• Remove unnecessary styling features
• Change Footer.spec and remove CardList.spec
• Rewrite if(entryToUpdate) of the submit function
• Use only position top and right for the placement of the icon
• Add a title element to each page
• Add more static data and remove services folder

Complexity

M

Value Proposition

As a user
I need to have a well functioning form and more information about my actions
to be able to have a good user experience.

Description

Adding an entry must be possible again and there shall be more modals.

Acceptance Criteria

• The products category should no longer be there
• After editing an entry there should be a message "Änderungen wurden gespeichert"
• After deleting an entry there should be a message "Dein Eintrag wurde gelöscht"
• After the entry is created, the user is directed to the home page
• The "Weitere Informationen" field should be larger than the other input fields
• The input fields cannot be sent with only blank characters

Tasks

• Remove the products category
• Add a hidden input field for positions
• Add a modal "Deine Änderungen wurden gespeichert" after an entry was revised
• Add a modal "Dein Eintrag wurde gelöscht" after an entry was deleted
• Add push/router to the onSubmit function
• Change the field "Weitere Informationen" from input to textarea
• Add "pattern: /\S(.*\S)?/" to the input fields

Complexity

L

Value Proposition

As a user
I need to have seperate pages and a footer with clickable icons
to be able to have a better overview in the app.

Description

Acceptance Criteria

• The form and the entries are on seperate pages
• Inside the footer is a navbar with two icons (home and new entry)
• When you click on one icon, you are directed to the connected page and the color of the icon changes

Tasks

• Split the existing page in two pages
• Add a footer component
• Add the two icons and link them to the associated page (navbar)
• Add component to the app
• Add styled-components
• Add to Storybook
• Write test
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a user
I need to see a list of flea markets and shops
to be able to to get a better overview of all the flea markets and shops.

Description

Acceptance Criteria

• Each entry should be visually separated
• Each entry should be displayed with the important details (see #1)
• All entries should be displayed

Tasks

• Create a data structure to hold an array of multiple entries
• Create a component to render the list of entries
• The component receives the array via props
• The list component contains the card component defined in #1
• Remove single card from the app and add the list component instead
• Add styled-components
• Add to Storybook
• Add a test to check if all given entries are rendered
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

S

Value Proposition

As a user
I need to have a bookmark function
to be able to to add the flea markets/shops I like to a seperate page.

Description

Acceptance Criteria

• Each entry on the list will show a button (a heart) to mark the entry
• When clicking on the button the respective entry is added to the bookmark page and the heart is filled
• When clicking on the button again the entry is removed from the bookmark page and the heart is not filled
• The navigation shows a button for the bookmark page
• All bookmarked entries are shown on the bookmark page

Tasks

• Create a button component
• Create the bookmark page
• Add a heart icon to the footer and link it to the bookmark page
• Add an onClick event to the button to add and remove the entry from the bookmark page
• Add styled-components
• Write test
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a user
I need a way to search for specific entries
to be able to find what I want more quickly.

Description

Acceptance Criteria

• The searchbar with a "Suchen" button is displayed at the top of the home page
• After clicking the button the entries that match are displayed
• If the searchbar is emptied all entries are shown

Tasks

• Create a search bar
• Create a function in CardList
• Add component with props to index page
• Add styled-components
• Add to Storybook
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

L

Value Proposition

As a user
I need to have detailed information about the entry when clicking on the button
to be able to have a better overview of the entries in the list.

Description

Acceptance Criteria

• When closed, only the category, name and address are displayed
• By clicking on the button the missing information is shown (products, additional information, already visited, rating)
• By clicking on the button on an expanded entry the entry collapses again

Tasks

• Add the missing information in the array of multiple entries (see #3)
• Add them in the props and functions
• Create the accordion button
• Add styled-components
• Add to Storybook
• Update test to check if data and button are rendered
• Add test to check if button functionality works
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

M

Value Proposition

As a user
I need to add a new entry to my list
to be able to add my own flea markets and shops to the list.

Description

Acceptance Criteria

• The name field is mandatory. There is an error message if no value is entered.
• An input field for the name is displayed, labeled "Name", text, max. 50 characters
• An input field for the address is displayed, labeled "Adresse", text, max. 150 characters
• Radio buttons for the categories of products are displayed, labeled "Kleidung", "Deko", "Haushaltswaren", "Medien", "Antiquitäten", "Spielsachen"
• An input field for more information is displayed, labeled "Weitere Infos", text, max. 300 characters
• Radio buttons are displayed, labeled "Ich war schon da", "Ich war noch nicht da", in front "Schon besucht?"
• Radio buttons are displayed, labeled "Mag ich!, "Nicht mein Fall!, in front "Bewertung"
• A button to save the entry is displayed, labeled "Eintrag hinzufügen"
• After saving the new entry will appear in the list of all products (see #3 )
• After saving there is a pop up with a confirmation message "Eintrag wurde hinzugefügt"
• After saving the input fields are cleared

Tasks

• Create a form component with React Hook Form
• Create radio buttons
• Create button component
• Create input component
• Add form fields with their labels
• Mark "Name" field as required
• Add text length validation (for fields "Name", "Adresse" and "Weitere Infos"
• Add the entry to the list of existing entries in the data structure after submitting the form with valid data
• Install nanoid
• Add form component to app
• Add styled-components
• Add to Storybook: Input, Button, Form
• Write tests to check if all required elements are in the form
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

XL

Value Proposition

As a user
I need to see where I am in the app
to be able to have a good user experience.

Description

Acceptance Criteria

• The header consists of a logo on the left and the name of the respective page: "Home", "Eintrag erstellen", "Favoriten", "Karte" in the middle
• The header is visible on all pages at the same position

Tasks

• Create a header
• Add the logo to the header
• Add the header to the different pages
• Add styled-components
• Check accessibility
• Deploy for usability and UX testing
• Check on mobile phone

Complexity

S