foodoasisla / frontend Goto Github PK

• Convert JSON data into a displayable list of 10 items, sorted by distance to the map-center
• At the bottom of the list, display number of results (ie. 1 - 10 / 500)
• At the bottom of the list, display pagination controls (< / >)

Desktop View

• Display entire list component docked to left-side of screen (scrollable, if necessary)
• Mouse hover on a business/location will highlight the card, changing the background to a darker gray
• Mouse un-hover from a business/location will deselect it, changing the background back to default color

Mobile View

• Accessible via LIST link/tab on mobile view

• Implement Mapbox map display
• Map displays JSON data from API Call, each point is a marker on map
• Display map controls in upper-right corner (ie. zoom, current location)
• Selecting a map marker enlarges the marker
• Panning the map displays a button docked to the bottom of the screen "Redo Search in this Area"

• Details to display in card component:
  • Icon of type of business
  • Business Name/Title
  • Street address
  • Type of business
  • Open Now status
  • Distance from searched location

Desktop View

• Selecting a map marker highlights the business in the list, changing the background to a darker gray
• Deselecting a map marker changing the background to default

Mobile View

• Selecting a map marker displays the business card docked to the bottom of the screen
• Deselecting a map marker hides the business card

test test

• Accessible via LIST link/tab on mobile view
• Displays full-screen list with JSON data received from backend
• At the bottom of the list, display number of results (ie. 1 - 10 / 500)
• At the bottom of the list, display pagination controls (< / >)

The header will continue to look/function as it currently exists. It will point us to the static search-page or filter-page modules that pass parameters and values through the URL.

Fixed HTML Headers

• Search-bar / Search button -> static search module
• Filter button -> static filter module
• On mobile, a LIST button will display the list component (fullscreen)

What endpoints do we need that we are currently missing? Can we identify what data we need returned from the backend API?