smallbusinesshero / storefront Goto Github PK

The background image for both search result and store profile screen has too high contrast and is too far zoomed in. This might be related to the resolution of the screen, maybe some responsiveness issue?

Acceptance Criteria

• Background image has standard resolution at all times, even if only a part of it is visible.

When searching for stores in a neighborhood, the title of the store is in very low contrast.

Please adjust the theming or contrast of the title

Fix "Simply" name to "small business hero" in the header and increase the contrast so it's readable

We want to see the current sonarcloud report on the README page. Please add the following badge with the correct Sonarcloud project URL for the frontend and backend repo like this:

[![Sonarcloud Status](https://sonarcloud.io/api/project_badges/measure?project=com.lapots.breed.judge:judge-rule-engine&metric=alert_status)](https://sonarcloud.io/dashboard?id=com.lapots.breed.judge:judge-rule-engine)

Acceptance Criteria

• Dead shopping cart button on top right corner is gone.

Background

• It is not functional and therefore confusing for users. We can add it again once we actually support a shopping cart.

When I enter the website
I want to see a welcome screen and a search for a store based on the Kiez I live in
So I don't have to look through a list and find the store I care about

Acceptance Criteria

• Welcome page that is the root of the website with a Headline, and some text
• Search field with a headline "Finde den Laden in Deinem Kiez"
• Help text in the search field: Kiez
• Search button "Suchen"
• A list of stores is displayed as cards
• Upon selection of a store the site routes to the store page

Technical Suggestions

• Route for welcome: / (root)
• Route for store site: /store?id=1

Wireframe
https://drive.google.com/file/d/1fsMsL3sfRohywVW9LqMYAddd9JawaBje/view?usp=sharing

Open for discussion

I think it would be good if we structured the front end more sustainably.

• Differentiation of sites and components
• Everything is decoupled in a component (menu, footer, etc.)
• Material UI with JSS
• State with redux and inject stat through containers

I'd be open to take care of that, just give me green light for individual issues

Acceptance Criteria

• Search box has label 'Nachbarschaft', instead of 'Ort'.
• Placeholder text inside the search box is 'z.B. Körtekiez', instead of 'Wähle einen Ort'.

Info

We want to prevent users from entering their zip code by mistake.

On a mobile viewport, the store detail page extends horizontally past the screen. This results in horizontal scrolling.

On the store page in the articles you can see the white background in the color, howevery this should be transparent.

The label on the search has a white background which does not look appropriate anymore if the background of the panel has transparency

Add prettier as a pre-commit hook to ensure that every file has the same style and identions

When searching for stores in a neighborhood, the cards are not centered

I tried to run both production and dev builds and both times I got the following error from Firefox:

An error occurred during a connection to localhost:3000. SSL received a record that exceeded the maximum permissible length.
Error code: SSL_ERROR_RX_RECORD_TOO_LONG

I get similar from Chrome.

This isn't a complete issue yet, I have some questions on the current behavior. Please help me out on how it currently works in the backend @PapaBravo @cnasenberg

How does the search currently work, based on the backend? Is it a geolocation search with a radius?

I think we should strive for the following (can be implemented in multiple features along the way):

• Remove the current suggestions based on the hard coded list in frontend
• Implement an auto-suggestion based on fuzzy search (similar to Google Maps or AirBnb)
• Implement a radius? That way the customer can increase the search radius in case he can't find anything where he lives

When you hover your cursor over a store in the search view, it blackens. It's almost not readable.

Happens on mobile (Firefox, Chrome) and desktop (Safari). See screenshot: https://slack-imgs.com/?c=1&o1=ro&url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FEUVZXG6WoAA9DwH.jpg

Add Analytics to storefront.

Blocked by Impressum + Privacy

When a search contains no results, it just says "No results" and rendered not pretty. It should be centered and say something like "Leider haben wir keine Läden in deiner Nachbarschaft gefunden"

The website icon is way too small. It's too hard to touch it on mobile.

We need a footer for showing privacy policies + imprint.
Additionally we could add add social media links.

Story
As a customer
I want to have more information about the products a small business offers
so I can buy the products when I contact the business owner

Acceptance Criteria

• A map of are products (as card elements) is shown to the customer
• A product tile should be the image of the product with the title of the product and price
• Nice to have: if you click / tap on the tile, it expands and shows the description

Technical hints

• The route should for this page is: /store?id=1
• See https://docs.google.com/document/d/1v9D8XToGbJJ3emQhzN3zmIBLR67XFM6mi1h2_yaorO4/edit#heading=h.o5rkwua83gl9 for API endpoint / data model for the products

Story
As a customer
I want to have more information about the store I found in my Kiez
so I can establish an emotional bond and support it

Acceptance Criteria

• The store profile is being shown similar to the mock up (image, video, description, address, ways of contact) with the following content:
  • Profile picture (image) of the shop
  • Name of the shop
  • Video of the shop (introduction)
  • Description of the shop
  • Address of the shop (+ neighborhood)
  • Ways of contact

Technical hints

• The route should for this page is: /store?id=1
• See https://docs.google.com/document/d/1v9D8XToGbJJ3emQhzN3zmIBLR67XFM6mi1h2_yaorO4/edit#heading=h.o5rkwua83gl9 for API endpoint / data model for the store

Move the burger menu and mini cart to the edges of the header in Desktop

This text appears as soon as you start typing.

It should only appear when a search has been submitted and no results were found.

When I search for "Neu" and click on "Neukölln" nothing happens. It should instead fill "Neukölln" into the search bar and start searching (without having to click on "search"

Depending on the colour of the background images and on the browser (Safari is problematic), it can happen that the button in/at the profile image is barely recognizable.

Acceptance Criteria

• Phone button has a user-friendly size.
• Phone button can be easily distinguished from background.
• (new) Phone button is displayed as the first button with all other buttons (like website or email).

Additional Info

• It's okay but not mandatory that we have the phone button twice, once in/at the profile image and once with the other buttons.

Each CSS should use colors from material ui theme. Currently color values are duplicated.
Also p tags, or h* tags should be replaced by Typography components from material ui. Goal is that the theming works in a right way.

Acceptance Criteria

• /stores endpoint is available in deployed backend.
• Returns mock data.

Excludes

• Connection to commerce tools.

The contact icons on the store detail pages are too small to be properly used.

Their size should be increased so that they are easily touchable (i.e. the touch target area should be at least 9mm, see Google's web a11y guidelines).

Add react helmet to implement basic SEO

For quick solution we need:

• Title(s)
• Assets like social images, etc.
• Meta description
• Meta description for individual sites
• Image alt tags

The search currently says 'Ort' and 'Wähle einen Ort...'. It is not clear what the user should enter.

Acceptance Criteria

• The search field label says 'Adresse oder Stadtviertel'.
• The hint inside the search field says 'z.B. Donaustraße, Berlin'

As we're using npm now, we have to add the package-lock.json

Have the search use URL parameters.

Once the customer inputs a search item and clicks search, the URL should contain the following path & parameters: /search?q=

This way we will be stateless and the search can be more dynamic

The website is currently running on plain HTTP. We should add a TLS certificate to it and redirect all requests to HTTPS.

A possible, low-cost solution is switching to a provider that provides TLS certificates automatically.

Whatever

Right now the frontend has a hard configuration to talk to the prod backend:

baseUrl = 'https://dds-wvv-backend.herokuapp.com/';

let's make it configurable, so the baseURL is set via an env variable from Heroku

As a customer
When I enter the website
I want to see a welcome screen and a search for a store based on my zip code
So I don't have to look through a list and find a merchant close to me

Acceptance Criteria

• Welcome page that is the root of the website with a Headline, and some text
• Search field with a headline "Finde deinen Laden um die Ecke"
• Help text in the search field: Postleitzahlsuche
• Search button "Suchen"
• A list of merchants is displayed
• Upon selection of a store the site routes to the merchants page

Technical Suggestions

• Route for welcome: / (root)
• Route for store site: /store?id=1

Check which License matches this project requirements and add a license then to the source code.

Story
As a customer
I want to support the small business I found in my Kiez
so the business won't go bankrupt

Acceptance criteria

• An area is shown with a donate button from PayPal
• The button can be a click dummy for now

https://www.figma.com/file/laA8ixWOGbkELaBrwDMOO9/SBH-Shop-Registration-Form?node-id=0%3A1

Implement Form with Material UI, Formik and Yup for the registration of shop owners.