Git Product home page Git Product logo

simulation-shelfie's Introduction

Project Summary

This project is designed to replicate what you might receive on the job. There won't be any guided instruction on what you'll need to do. We will only provide you with design specifications and technical requirements. Your mentors have also been asked to provide only minimal guidance. They can point you in the right direction, but cannot help you code. This project is a chance for you to combine and showcase the skills you've learned so far.

With this specification/requirement only structure, we believe this project will showcase what you can do as an individual and how you can work with a team at this point of the program. Because of this, we feel this project will be worth putting in your portfolio.

Good luck and work hard!

Color Palette & Font

Google Font - Open Sans

Application Design

Homepage

Shelf - Bin List

Bin - Inventory Details / Edit Bin


Add to Bin

Technical Requirements - Front-end

Homepage

  • User can select Shelf A - D.
  • When a user selects a shelf they should be navigated to a view that displays the bins in that shelf.

Shelf - Bin List

  • The header at the top should act as a breadcrumb. Clicking on the div that contains the company's logo should navigate the user back to the homepage.
  • The front-end should call the back-end for the bins's data.
  • All five bins should be listed.
    • If a bin is empty it should display + Add inventory.
      • A user should be able to click on this div and be navigated to the Add to Bin view.
    • If a bin is not empty empty it should display Bin # with # being the number of the bin.
      • A user should be able to click on this div and be navigated to the Bin - Inventory Details view.

Bin - Inventory Details / Edit Bin

  • The header at the top should act as a breadcrumb.
    • The div for the company logo should navigate to the homepage.
    • The div for the Shelf should navigate back to the Bin List for that shelf.
      • Example: Shelf A should navigate to the Bin List for shelf A.
  • The input fields should not be editable on load of the view.
  • A user should be able to click on the EDIT button.
    • The input fields should become editable.
    • The edit button should become a save button.
  • A user should be able to click on the SAVE button to save changes made to the inventory.
    • The input fields should become un-editable.
    • The save button should become an edit button.
    • This should update the inventory for that bin in the database.
  • A user should be able to click on the DELETE button to delete inventory from a bin.
    • This should remove the inventory from the bin in the database.
    • This should navigate the user back to the Bin List for the shelf.

Add to Bin

  • A user should be able to add a name and price for the inventory.
  • If you want to use custom images, add a field to add an image.
    • However, you can use this website to generate placeholder images: http://lorempixel.com/200/200/business/
  • A user should be able to click on + Add Inventory.
    • This should add inventory to the bin in the database.
    • This should navigate the user back to the Bin List for the shelf.

Technical Requirements - Back-end

  • The back-end should be created using express.
  • Massive should be used to establish a connection to your database.
  • Express.static should be used to server your front-end files.
    • HINT: Use npm build to get production ready front-end files.

Endpoints

  • Shelves
    • GET - /api/shelf/:id - Returns an array of bin objects. If there is no bin, returns null.
      • Example: [ {}, {}, null, null, {} ].
      • :id is the shelf id. Which can be 'A', 'B', 'C', or 'D'.
  • Bins
    • GET - /api/bin/:id - Returns a bin object. If there is no bin, returns null.
      • :id is the shelf and bin id combined. Examples: 'A2', 'C4', 'B2'.
    • PUT - /api/bin/:id - Updates and returns a bin object.
      • This endpoint should only be accessible if there is a bin object.
      • :id is the shelf and bin id combined. Examples: 'A5', 'B1', 'C3'.
    • DELETE - /api/bin/:id - Deletes a bin object. Returns nothing.
      • :id is the shelf and bin id combined. Examples: 'A2', 'C4', 'B2'.
    • POST /api/bin/:id - Creates a new bin object. Returns nothing.
      • This endpoint should only be accessible if there is not a bin object already.
      • :id is the shelf and bin id combined. Examples: 'A2', 'C4', 'B2'.

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.

simulation-shelfie's People

Contributors

bryansmith33 avatar devlemire avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

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.