Skip to content

NASA image library project

Carlos Matheu edited this page Dec 2, 2022 · 11 revisions

NASA Image Library Analysis

User cases

  • As a user, I should be able to see a list of images.
  • As a user, I should be able to filter the list of images by a search key.
  • As a user, I should be able to filter the list by init and end dates.
  • As a user, I should be able to see pagination buttons with prev & next buttons and from & to record numbers.
  • As a user, I should be able to see total pagination records.

  • As a user, I should be able to see the details of a picture (a unique URL or a dialog, or a panel on the same table).

  • As a user, I should be able to see the reason why this app as a F.A.Q.
  • As a user, I should be able to see the personal info about me page.
  • As a user, I should be able to have external links to related repository in Github.

Site map

https://www.gloomaps.com/9isVRss2mp

sitemap

Pages

Search

Elements

  • title: Search Pictures
  • filtering
    • text
    • from to dates
    • reset button
  • view selector
    • a selector to switch from table to cards view

Table View

search table page

  • if filters are applied:
    • with results:
      • table
        • fields
          • image (preview of image): html img tag
          • title: text
          • date: Date
          • location: text
          • author: text
        • pagination:
          • previous button
          • next button
          • 1 to 100 of total records count label

Cards View

search cards page

  • if filters are applied:
    • with results:
      • cards list
        • fields
          • image (preview of image): html img tag
          • title: text
          • date: Date
          • location: text
          • author: text
        • pagination: no pagination, load on scroll

No results

search no results page

  • if no filters are applied:
    • message "Please use the filters to find something"
  • if filters are applied:
    • with no results:
      • message "Please use the filters to find something"
      • some icon to represent no results

Image detail

detail page

Dialog with big image and background overflow.

Elements
  • dialog
    • close Button
    • title
    • image
    • back 6 forward icon buttons
    • date
    • author
    • description (brief)

FAQ

faq page

Elements

External links

links page

A list of external links with:

  • icon
  • name & link
  • brief description (one line)

Elements

  • Plastikspace repository

    • link
    • link to wiki
    • link to github project
  • Carlos Matheu Armengol

    • brief description of me
    • link web
    • link CV
    • link linkedin
    • link github
    • link gitlab
    • email

Libraries & technologies

  • Angular 15
  • Nx 15
  • @ngrx 15
  • angular material 15
  • tailwind 3
  • ngx-formly

Content sources