This is a demo of an online grocery website application, including both frontend developed using HTML, CSS, JavaScript and React and backend developed using Node.js, express and mongoDB. A suggestion algorithm is also applied, which is based on the order history of the user and suggest the items with similar nutrition facts to the user.
Home page before logging in, user can check prices but need to get logged in to add items into the shopping cart.
User has logged in to get the cart button on the navigation bar and "add to cart" buttons for all items. Since this is a new user with no previous orders, no items are suggested to the user.
After adding items to the cart, user can check the cart and modify the items and their quantities, and then checkout.
After user decide to checkout, he need to confirm or complete the delivery address. The address used last time will be auto filled if possible.
User will be redirected to stripe.com to finish the payment.
After payment, user will be redirected to orders page, where user can see their order history.
When at least one order was made, the homepage will show suggests for the user based on the order history.
