jamarob / jotter Goto Github PK

Value statement

As a user
I want pages with a heading
so I know at which page I am

Description

• heading with a title
• main content
  

Acceptance criteria

• heading is visually separated from main content
• main content fills the rest of the page
• main content is scrollable

Tasks

• create components
• styling
• test in mobile view

Value statement

I as a user
want a better search experience
so I can find notes more quickly

Description

• icons
• fuzzy search

Acceptance criteria

• good looking icons in the buttons
• search is fuzzy
• clicking on a tag scrolls up to the search bar

Tasks

• replace emojis for icons
• use a ref of the search field to scroll there on tag click
• decide on a fuzzy search package
• update searchNotes in useNotes hook
• styling
• test in mobile view

Value statement

I as a user
want to ** not navigate between screens to add and edit notes**
so that I have a more streamlined workflow

Description

• a form in a note card
  

Acceptance critera

• clicking add note inserts a new note with an inline form at the top
  • while the new note is edited, the add note button is not shown
  • clicking ok in the form replaces the form with a normal note
  • clicking cancel in the form hides the complete form
• clicking edit on a note opens that note in an inline form
  • clicking ok in the form replaces the form with a normal note with updated text
  • clicking cancel in the form replaces the form with a normal note without changing it
• if the user has inline forms with unsaved changes open, this is visually indicated to her in the top right corner
• freshly updated notes are highlighted with a short background transition from yellow to normal

Task

• remove /edit:id and /add routes
• create EditNote component
• switch between Note and EditNote component on edit click
• keep a list of "open" notes
• create indicator for unsaved changes
• create background transition animation
• styling
• test in mobile view

Value statement

I as a user
want to add a new note
so that I can save it for later

Description

• floating button in the bottom right corner of the notes list
  
• page with form
  

Acceptance criteria

• there is a fab on the notes pages
• user can scroll past the last note, so that the fab doesn't overlay it
• click on fab takes the user to a new page /add
• at /addthere is a form with a textarea and and a cancel and save button
• the user can input text into the form
• click on cancel takes the user back to /notes without any changes
• click on save takes the user back to /notes with the new note prepended into the list of notes

Tasks

• create the route /add
• create components
• styling
• test in mobile view

Value statement

As a user
I want to save my notes and search across sessions
so that I don't lose my data

Description

nothing visual

Acceptance criteria

• notes are loaded on startup
• notes are saved when they change (add, delete, edit)

Tasks

• install localForage
• create service.js to encapsulate storage logic
• create getNotes() function
• create saveNotes() function
• update useNotes hook

Value statement

I as a user
want to search my notes
so that I can quickly find the information I am looking for

Description

• an input field with a search button
• when the input field is not empty a clear button should be display

Acceptance criteria

• the user can input her search
• when there is input, a clear button is shown
• when there is no input, the clear button is hidden
• clicking the search button shows only the notes which include the search term
• clicking the clear button empties the search field and shows all notes
• searching for a tag by clicking on it, shows the tag in the search field

Tasks

• create the component
• modify the useState hook to search for the notes and pass the search term to the search input
• styling
• test

Value statement

As a user
I want to click on a tag and get a list of all other notes with that tag
so that I can quickly find related notes

Description

• tags are words beginning with @
  
• a list of notes with the same tag

Acceptance Criteria

• a tag is highlighted
• a tag is clickable
• clicking on a tag filters the list for notes with that tag

Tasks

• create Tag component
• write a function to replace simple tag text with Tag component
• test in mobile view

Size

medium

Value statement

As a user
I want to delete and edit my notes
so that I can enhance my knowledge base

Description

• a note with dates and buttons
  
• a confirmation dialog
  
• an edit form
  

Acceptance criteria

• a note shows its creation and modification date, if they are the same only the creation date is shown
• a note has buttons to delete and edit it
• clicking the delete button asks for confirmation before the note is deleted
  • clicking the ok button deletes the note and leads back to /notes
  • clicking the cancel button leads back to /notes
• clicking the edit button opens the note in an editor form
  • clicking cancel doesn't change the note and leads back to /notes
  • clicking save changes the note and leads back to /notes

Tasks

• update the note component
• create the confirmation dialog
• modify the add note form to be used for edits as well
• modify the useNotes hook for delete action
• modifiy the useNotes hook for edit action
• style
• test in mobile view

Value statement

I as a user
want to undo my last operation
so that I can correct my mistakes

Description

• a small message at the bottom of the screen with a descriptive text and a button/link for undoing
  

Acceptance criteria

• the undo message is displayed at the top of /notes after an add, edit or delete operation
• the message disapears after a 5 seconds by itself
• the message disapears when the user takes another action
• clicking the close icon makes the message dissapear immediately
• the undo link is visually separated from the rest of the message
• clicking the undo link undoes the operation

Tasks

• create the undo message component
• display the undo message after an edit, add or delete
• store the last state of the application
• restore the last application state on undo click
• styling
• test in mobile view

Value Statement

As a user
I need a list of my notes
so that I can browse my notes to recall my knowledge

Description

• a note with date and text
  

• a list of notes
  

Acceptance Criteria

• notes are found at route /notes
• notes are sorted by creation date (newest to oldest)
• notes are visually separated
• notes are scrollable in vertical direction
• a note is simple text with easy to read font size
• a note shows it's creation date

Tasks

• compile a list of notes as json

  {
      id: String,
      created: Number,
      text: String
  }

• create NoteList component
• create Note component
• create route and make it the default for now
• styling
• test in mobile view

Size

medium