Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
Modern Technologies on World Wide Web Assignment
In this assignment, we are going to develop a single-page online shopping web app iShop using the MERN stack (MongoDB, Express.JS, ReactJS and Node.js). The main work flow of iShop is as follows.
➢ Upon loading, the sketch of the page is shown in Fig. 1. The user can click a category on the top to view products in the category.
Fig. 1
➢ The user can search products by entering search string in the search box and clicking on the dropdown list (initially displaying “All”) to narrow down the search within a specific category, as follows:
Fig. 2
Modern Technologies on World Wide Web
Assignment 2➢ When the user clicks on a product (the area containing the item image, name and price), the page displays the detailed information of the product, as follows:
Fig. 3
The user can adjust the quantity and click “Add to Cart” to add the item(s) to its shopping cart.
After clicking “go back”, the page returns to the last page that the user is viewing.
➢ After the user clicks the “Sign in” link in one of the page views as shown above, or clicks the “Add to Cart” button on a page view as in Fig. 3 (without user signed-in before), a sign-in page is displayed:
Fig. 4
User can enter its username and password and click the “Sign in” button to sign in. An error message should be prompted on top of the form in Fig. 4’s view, if the sign-in fails.
➢ If the sign-in page was brought up when the user was adding some item(s) to the cart, after successfully signing-in, the page view goes to the following (suppose the user name is Jack), where xx indicates the actual number of items in the user’s shopping cart.Fig. 5
After clicking “continue browsing”, the page goes back to the initial display of the web app.
➢ If the sign-in page was brought up by clicking “Sign in” on a page view as in Figures 1-3, after successful signing-in, the page view of Fig. 1 becomes the following, and the page views of Figures 2, 3 change similarly, i.e., the shopping cart icon/information and “Hello, xx (Sign out)” are displayed on the top-right corner of the page, instead of the “Sign in” link.
Fig. 6
➢ When the user clicks the area containing the shopping cart icon and “xx in Cart” on the top-right corner of a page, the shopping cart content is displayed, as shown in Fig.
Fig. 7
Whenever the total item quantity is changed, “xx in Cart” at the top of the page should be updated accordingly.
➢ When the user clicks the “Proceed to check out” button, the page is as shown in Fig.
Fig. 8
When the “continue browsing>” link is clicked, the page goes back to a view as in Fig.6, with the initial page of the web app displayed (the top-right corner shows the after-sign-in contents).
➢ When the user clicks the “Sign out” link in the page views as in Figures 5-8, the page displays a “Sign in” link in the top-right corner of the page replacing the shopping cart information and “Hello xxx (Sign out)” if the previous page view is Fig. 6, or goes back to the initial page of the web app if the previous page view is Fig. 5, 7 or 8.
We are going to achieve this application by implementing code in a back-end Express app and a front-end React app.
app.js
./routes/products.js
./src/App.js
./src/index.js
./src/App.css
Task 1. Back-end Web Service
We implement the back-end web service using Express.js. The web service is accessed at http://localhost:3001/xx.
Preparations
(1) Insert a number of records to a productCollection collection in the database in the format as follows, each corresponding to one product.
db.productCollection.insert({name: ‘iPhone 13’, ‘category’: ‘Phones’, ‘price’: 8000,manufacturer: ‘Apple Inc.’, ‘productImage’: ‘images/iPhone13.jpg’, ‘description’: ‘Most advanced dual‑camera system ever.’})
For implementation simplicity, we do not store images in MongoDB. Instead, we store them in the hard disk under the ./public/images/ folder, and store the path of an image in the productCollection collection only, using which we can identify a product’s image in the images folder. Copy some product images to the images folder under ./public in your project directory.
You should insert information of at least 8 products under each category, for app testing purpose.
(2) Insert a few user records to a userCollection collection in the database in the format as follows. Here productId should be the value of _id generated by MongoDB for the respective product document in the productCollection collection, which you can find out using db.productCollection.find().