Code Monkey home page Code Monkey logo

shopping-wishlist's Introduction

Shopping Wishlist

Overview.

The web app is designed to display a shopping wishlist of a user

Features:

  • CRUD Functionality
  • Total up the prices of all products
  • Change the quantity of each product
  • Filter by name, min price, max price
  • Sort alphabetically, priority or price

Setup.

An example of this webapp is available on https://kuhaneko.github.io/shopping-wishlist/

If you want to test it out locally, then you need to clone this code. Then you need to type in the following commands inside of the folder that you have cloned the code into:

npm install

npm start

Data Model Design.

. . . Briefly explain any non-trivial aspects of the model . . . . . The product has structured details of the product, such as the generated ID with UUID, the name of the product and the price. An example is provided below

{
    id: "sfwml1",
    priority: 1,
    name: "Steam Controller",
    price: 54.99,
    link: "https://store.steampowered.com/app/353370/",
    quantity: 1
}

UI Design.

The table lists each product in the datastore. This product list can be filtered by name, minimum price and maximum price. A product can be edited by clicking on the name of the product or deleted by clicking the trash icon.

![][detail]

The edit view allows the user to update an already existing product.

Routing.

  • / (public) - Displays all existing products and allows the user to submit a new product
  • /item/:id (public) - Detailed view of a particular product. Allows the user to update the product.

Storybook.

The following are the available components available in storybook

![][stories] [detail]: ./readme_resources/detail.png [stories]: ./readme_resources/stories.png

shopping-wishlist's People

Contributors

kuhaneko avatar dependabot[bot] avatar

Watchers

 avatar

shopping-wishlist's Issues

Feedback

I have reviewed your assignment 1 submission. Based on the published marking scheme I am provisionally awarding a mark of 56%. This mark is subject to you being able todem onstrate the app and clearly answering any question about its implementation (Demos will be scheduled in week 13).

Based on the grading scheme published, the breakdown of the overall mark is:

       Good         53
       Excellent     3
       Outstanding   0

To improve this mark, you should consider:

  • Be able to select an item as bought
  • Bought items are listen in a new view, including the date of purchase -
    they are not removed from
  • Use JSON server/API to store the list.

You may discuss these with us in the lab classes. Please do not respond post a comment on this issue thread

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.