Code Monkey home page Code Monkey logo

capstone-project's People

Contributors

sacidcelik avatar

Stargazers

 avatar

Watchers

 avatar

capstone-project's Issues

Render Bookshelves

Value Statement

As a user I want to be able to see all my bookshelves on the /myshelves page in order to be able to view and open them.

Description

CleanShot 2021-06-18 at 22 10 12

Acceptance Criteria

  • Saved bookshelves render on /myshelves
  • If there are multiple shelves, there are multiple pages of shelves
  • Clicking on the arrow moves between pages

Complexity

M

Tasks

  • Create new feature branch 'feat-shelvesPage'
  • Create Shelf component
  • Style MyShelves page
  • Tests
  • Styleguidist

Log Out

Value Statement

As a user I want to be able to log out in order to be able to sign in as a different user

Description

Logout button

Acceptance Criteria

  • Clicking button redirects user to /
  • Clicking button logs user out

Complexity

S

Tasks

  • Create branch 'feat-logout'
  • Implement button
  • Implement routing and state logic

Header

Value Statement

As a user, I would like to see a consistent header on the page in order to know which great app I am using and always be able to get back to the home page.

Description

CleanShot 2021-06-14 at 16 02 39

Acceptance Critera

  • Header appears on all pages
  • Header includes Logo
  • Click on Logo redirects to /home

Complexity

S

Tasks

  • Create feature branch 'feat-header'
  • Add header component
  • Import Icon
  • Implement Routing
  • Implement it on all pages
  • Add to styleguidist

Display book library

Value Statement

As a user I want to be able to see all my books on one page in order to get an overview of my library.

Description

CleanShot 2021-06-11 at 17 16 16

Acceptance Criteria

  • Adding a new book adds it to this page
  • Book Cover and Title are shown

Complexity

S

Tasks

  • Create feature branch 'library-view'
  • Create component for library
  • Implement function to map books array in the component
  • Implement styleguidist for component
  • Add tests

Search in book library

Value Description

As a user I want to be able to search in my library to find the book I am looking for

Acceptance Criteria

  • Searching in library returns correct books based on commonly used search criteria such as author, title, release year

Complexity

M

Tasks

  • Create feature branch
  • Add search bar to /mybooks
  • Add search functionality

Add notes to books

Value Statement

As a user I want to be able to add notes to my books in order to memorise important information

Acceptance Criteria

  • Added notes are saved to the database and retrieved every time the book details are opened.

Complexity

M

Tasks

  • Create feature branch
  • Add controlled inputs
  • Add save functionality

Edit Book Location

Value Statement

As a user I want to be able to edit a book's location to either store unstored books or move already stored books.

Description

Acceptance criteria

  • Clicking on pencil icon on bookdetails opens shelfselector
  • Selecting a new location updates book location

Complexity

M

Tasks

  • Create branch 'feat-shelfLocationEdit'
  • Add icon to bookdetails
  • Add logic to edit shelfLocation

Add book to bookshelf

Value Statement

As a user I want to be able to add a book that's part of my library to one of my bookshelves, in a specific compartment in order to be able to depict my real-life bookshelf.

Description

CleanShot 2021-06-03 at 19 20 35

Acceptance Criteria

  • User can select bookshelf from a dropdown menu
  • User can select specific compartment from a second dropdown that is dynamically filled based on first
  • Saving the selection will add / move the book to that compartment but still keep it in the general library

Complexity

L

Tasks

  • New feature branch 'shelf-selector'
  • Create Shelf-Selector component
  • Implement logic to put book into correct array
  • Add styleguidist component for shelf-selector

Show shelf compartment content

Value Statement

As a user I want to be able to click on a shelf compartment in order to be able to see the stored books inside it on one page.

Description

CleanShot 2021-06-23 at 12 05 40

Acceptance Criteria

  • Clicking on a compartment opens a new page for that compartment
  • Compartment page shows name, books and a back button
  • back button returns back to shelf page

Complexity

M

Tasks

  • Create feature branch 'feat-compartmentPage'
  • Add compartment component
  • Add routing to shelves in order to render correct compartment
  • Add styleguidist
  • Potentially add tests

Save new bookshelf

Value Statement

As a user I want to be able to save my created bookshelf in order for me to view it later and store books in it.

Description

CleanShot 2021-06-18 at 09 39 17

Acceptance Criteria

  • Clicking Save button saves shelf in shelves array

Complexity

S

Tasks

  • Create feature branch 'feat-saveShelf'
  • Implement save button
  • Implement save logic
  • Implement notifications
  • Add styleguidist

Mark books as lent

Value Statement

As a user I want to be able to mark my books as lent and if yes, add the person I lent the book to with a date.

Acceptance Criteria

  • Lent status, person and date are stored in the database and retrieved every time.

Complexity

M

Tasks

  • Create feature branch
  • Add controlled inputs
  • Add save functionality

Show book details

Value Statement

As a user I want to be able to see details for a book after clicking on it in order to get a better overview of the book.

Description

CleanShot 2021-06-16 at 18 26 17

Acceptance Criteria

  • Click on a book opens details for that book
  • Major details such as title, author, releasedate, ISBN# etc are shown
  • Rating, Lent Status and Compartment are shown

Complexity

M

Tasks

  • Create feature branch 'feat-bookDetails'
  • Set up bookdetails component
  • Implement functionality and render logic
  • Add tests
  • Add styleguidist for component

Scan books to add them to library

Value Statement

As a user I want to be able to scan my books' barcodes in order to find them easily and add them quicker

Acceptance Criteria

  • Clicking on camera button opens scanner
  • Scanner locates barcode and detects code
  • Upon detection, scanner closes automatically and pastes the result in the search bar
  • Search is initiated automatically after detection

Complexity

L

Tasks

  • Create feature branch 'feat-barcodeScanner'
  • Find matching barcode scanner to implement
  • Implement barcode scanner and adjust it to fit app

Button to remove searchinput

Value Statement

As a user I want to be able to remove my search input easily and quickly to make sure the search results disappear

Acceptance Criteria

  • Pressing Escape deletes search bar input
  • Clicking the X icon deletes search bar input

Complexity

S

Tasks

  • Create feature branch
  • Add functionality to search bar
  • Make sure it works on every instance where search is implemented

Search for books

Value proposition

As a user, I want to search for books based on name, author or ISBN in order to find exactly the book that I want.

Description

CleanShot 2021-06-03 at 15 59 25

Acceptance criteria

  • Entering search term (book title, author, ISBN) returns search results
  • Search results are displayed as boxes with image, title and author shown to make selection process easy for user
  • 'Add' Button is already included in the box

Complexity

L

Tasks

  • New feature branch 'search'
  • Add search bar component
  • Set up backend
  • Implement controller, routers and server.js logic
  • Use backend to fetch Google Books API
  • Fetch Google Books API
  • Implement search logic
  • POST Search Query to backend and use response to display search results
  • Add tests
  • Add styleguidist component for search bar

Mark books as read / unread

Value Statement

As a user I want to be able to mark books as read or unread.

Acceptance Criteria

  • Button toggles if book is read or unread.
  • Saves status to database
  • Saves date (if switched to read) to library (for later use)

Complexity

M

Tasks

  • Create feature branch
  • Implement toggle functionality
  • Save to database

Filter book library

Value Statement

As a user I want to be able to filter my books for certain criteria such as unread status, favorites or lent status in order to get a quick overview over my library.

Description

CleanShot 2021-07-05 at 22 19 39@2x

Acceptance Criteria

  • Clicking on button filters for that criteria
  • Active button is highlighted as such
  • Clicking again toggles the filter off
  • Clicking another button or searching also toggles the filter off

Complexity

S

Tasks

  • Create feature branch 'feat-filterLibrary'
  • Add buttons to /mybooks page
  • Add functions to buttons
  • Add styling to buttons

Navigation

Value Statement

As a user, I want to be able to navigate between the pages so that I can access different parts of the page easily.

Description

CleanShot 2021-06-09 at 11 26 35

Acceptance Criteria

  • Navigation is pinned to bottom of page
  • Clicking on a navigation item redirects to that page
  • Active page icon is highlighted

Complexity

M

Tasks

  • New feature branch 'navigation'
  • Set up components, pages and images folders
  • Add navbar component
  • Import icons
  • Implement react router logic
  • Add tests
  • Add styleguidist component for nav bar

Login and Registration

Value Statement

As a user I want to be able to log in or register on the app in order for the app to remember me and load my data.

Description

no image.

Acceptance Criteria

  • User can create new user or sign in as existing one
  • Creating a new user redirects user to /firstShelf page to create a new shelf.
  • Signing in redirects to /home
  • If user already exists, it's not possible to create a new one with the same name
  • If user does not exist, it's not possible to sign in as that user

Complexity

M

Tasks

  • Create feature branch feat-startLogin
  • Create Start Page with buttons to sign in or start
  • Create Access Page where the user enters their (desired) user name
  • Create logic for adding new users, checking if user exists, checking if user is new, selecting active user
  • Create "firstShelf" page for new users.

Persisting books and shelves

Value Statement

As a user I want to be able store my created shelves and added books in order for my library and shelves to persist when re-open or reload the app.

Description

CleanShot 2021-06-03 at 17 08 44
CleanShot 2021-06-03 at 17 08 55

Acceptance criteria

  • Books are still exactly as they were before reloading / restarting the app.
  • Shelves are still exactly as they were before reloading / restarting the app.

Complexity

L

Tasks

  • Create backend api with Express and Mongoose
  • Create routes, controllers for GET, POST, PUT operations
  • Connect frontend to backend
  • Store to and load from local storage

Create bookshelf

Value Statement

As a user, I want to be able to recreate my real bookshelf as an empty bookshelf in the app in order to be able to place books into it later on.

Description

CleanShot 2021-06-03 at 16 21 56

Acceptance Criteria

  • Entering / selecting number of shelves draws number of shelves in box below
  • Selecting number of compartments for each shelf draws the compartments in each shelf
  • Selecting a color from the color picker will change the color of the shelves.

Complexity

L

Tasks

  • New feature branch 'shelf-creator'
  • Create component for shelf attributes selector
  • Create component for shelf preview area
  • Implement drawing logic
  • Add tests
  • Add styleguidist components for both components

Add books to library

Value Statement

As a user I want to add a book from the search results (or after scanning) to my library in order to be able to add them to bookshelves later.

Description

CleanShot 2021-06-03 at 19 07 07

Acceptance criteria

  • Click on "Add" button adds book to library
  • "Add" button changes to another state, such as "Remove"
  • Clicking "Remove" button removes book from library

Complexity

M

Tasks

  • New feature branch 'add-books'
  • Create Add Button component
  • Implement Adding/removing logic
  • Implement button toggle
  • Add tests
  • Add styleguidist component for add button

Display bookshelf with books

Value Statement

As a user I want to be able to see (a portion) of the books I have stored in a compartment when viewing my shelf.

Description

CleanShot 2021-06-24 at 16 43 30

Acceptance Criteria

  • Book Cover Images are rendered when rendering shelf
  • Correct covers are displayed in the correct compartment
  • If there are more than 4 books, the first four covers are shown and a bubble display the number of additional books

Complexity

L

Tasks

  • Create feature branch 'feat-renderBooksInShelf'
  • Get BookImageURLs based on storedBooks-Array
  • Style covers so that they do not overflow or overlap or are too large
  • Implement logic for book count bubble
  • Add Tests
  • Add to Styleguidist

Home Dashboard

Value Statement

As a user, I want to see my shelves and my recently added books on the home screen in order to get an overview of my catalogue.

Description

CleanShot 2021-06-26 at 12 38 41

Acceptance Criteria

  • /home includes dashboard including search bar, collection of shelves and recently added books
  • Using the search bar still renders search results
  • Clicking on shelfs section leads you to /myshelves
  • Clicking on books section leads to library
  • Clicking on single book opens details for that book

Complexity

M

Tasks

  • Create feature branch 'feat-dashboard'
  • Create dashboard components
  • Include them on Home.js
  • Create function to determine number of books in shelf
  • Create date function
  • Create routing
  • Add styleguidist

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.