Skip to content

Instantly share code, notes, and snippets.

@rachael-t
Last active May 28, 2020 04:08
Show Gist options
  • Save rachael-t/e6d6b67c3e1a48d17a75991cb687cb10 to your computer and use it in GitHub Desktop.
Save rachael-t/e6d6b67c3e1a48d17a75991cb687cb10 to your computer and use it in GitHub Desktop.

Iteration 1 (Landing Component: ‘/’ route)

  • As a user, when I get the landing page, I should see a welcome banner
  • This landing page should have a button to move forward into the app

Memories Wireframe (1)

Iteration 2 (Destinations Component: ‘/destinations’ route)

  • As a user, I should a header once I’m in the app with the app’s name and a button to view my memo-ries (note: this should persist on page change)
  • As a user, I should see a list destination names that when clicked on, routes to ‘/destinations/{name}’

Memories Wireframe (2)

Iteration 3 (DestinationContainer Component: ‘/destinations/{name}’ route)

  • Nav bar should persist on page change
  • There should be a breadcrumb navigation at the top under the nav bar so as a user I know where I am at, and can easily navigate backwards
  • As a user, I should see:
    • The destination’s name
    • A slideshow of that destination’s images.
    • A button to start the recording
    • A button to stop the recording
    • A container for previous recordings, with a title that displays the recordings count i.e. ‘Recordings (2)’

Memories Wireframe (3)

Iteration 4 (Memories Component: /memories’ route)

  • CHECK IN: nav bar persists and breadcrumb navigation present
  • As a user, when I click on ‘View my memo-ries’ I should be taken to the memories page
  • The memories page should display all destinations with recordings
  • After the destinations there should be an arrow to bring a user back to the top of the memories page

Memories Wireframe (4)

Extensions:

  • Local/Session Storage for data to persist
  • Bringing in Google Maps API for geo-tagging
  • Allow users to upload their own images for each destination
  • Allow users to create/add their own destination
  • Users should be able to delete a recording

Components:

  • App
  • Landing
  • Destinations
  • DestinationContainer
    • DestinationDetails Note: this will render a singular component for the destination name pass through as a prop via event (i.e. Denver)
  • Memories
    • DestinationDetails Note: this will render DestinationDetails based on the array of destinations with recordings that will be passed through as props
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment