Giter VIP home page Giter VIP logo

online-grocerystore-webapp's Introduction

31748 Programming on the Internet - Autumn 2023 Assignment 1

　　　　　　

Online Grocery Store App

This Online Grocery Store App stands for quick and reliable online grocery shopping for customers. Simple and highly-user-centered UI design boosts UX during the shopping.

🚀 Run Locally

Before you run the project locally, you must meet the prerequisites.

Prerequisites

  • Install Docker Desktop
  • Install Git CLI
  • All the secrets (-> Database and SMTP server secrets)
    • Prepare .env in Laravel (If you're authorized person, I personally provided you with .env file via restricted-access link. You just download and place the .env file under online-grocerystore-webapp> backend> src directory.)
    • In .env, you're required to replace SMTP screats to activate sending email functionality as well as Database secrets to access MySQL server.
    • For more information, have a look at How to Use the Gmail SMTP Server to Send Emails for Free

Once you got all requirements, clone the project

  git clone https://github.com/saku-1101/Online-GroceryStore-WebApp.git

Go to the project directory

  cd Online-GroceryStore-WebApp

Boot up Docker Desktop

Check if port 80, 9000, 3306, and 8000 are not used

  sudo lsof -i:<port number>

if it's used, kill it.

  sudo kill <PID>

Start up containers (Note: Please check again if you got .env file as it described in Prerequisites)

  docker-compose up --build

Install all the required Laravel Libraries

First, checkout to the backend container

  docker compose exec backend sh

Then, install the libraries with composer

  composer install

Please hold tight until your composer finishes installing all the required Laravel libraries. Once all the libraries are installed successfully, you'll see the outputs, like demonstrated below.

image

If you can observe the output from docker as shown below, image

access to http://localhost:8000 😍

Demo

Insert

Screen.Recording.2023-04-26.at.14.53.20.mov

Features

  • Search Box
  • Online Order Form with email address checker
  • Order Confirmation Email
  • Category Hierarchy
  • Customers can edit the number of each item in the shopping cart
  • Shopping cart can be easily moved around using the mouse

Tech Stack

🌼Client: React, TypeScript, Vite, Axios, Redux, React Router, TailwindCSS, DaisyUI

🦄Server: Laravel8

🐬Database: MySQL

🐳Infrastructure: Docker, Docker Compose, Nginx

Others: Prettier, ESLint, Postman, Figma

API Reference

Get all products

  GET /api/product/category
Parameter Type Description
null null

Get second category in a particular top category

  GET /api/product/category/{category}
Parameter Type Description
category string Required. Id of category to fetch

Get products in a particular second category

  GET /api/product/category/{category}/sub_category/{sub_category}
Parameter Type Description
category string Required. Id of category to fetch
sub_category string Required. Id of second category to fetch

Display products that match with the provided keyword

  GET /api/product/search
Parameter Type Description
query string Required. Keyword to search

Insert the added products into the order table and Update the order details.

  POST /api/order/add
Parameter Type Description
request Request Required. POST request must contain order_id, product_id, quantity as parameters

Remove an order and its corresponding details from the database

  DELETE /api/order/delete/all
Parameter Type Description
order_id int Required. Order ID that you want to delete

Remove a product and update its corresponding orders and products in the database.

  DELETE /api/order/delete/{order_id}/{product_id}
Parameter Type Description
order_id int Required. Order ID that you want to delete
product_id int Required. Product ID that you want to delete

Send an email of the order completion.

  POST /api/checkout
Parameter Type Description
request Request Required. POST request must contain email, name, orderId as parameters

Lessons Learned

  • How to develop a full-stack application
  • Component Oriented, Atomic Design - They are to be obtained to boost frontend development productivity. It also serves consistency and simplicity of UI/UX.
  • How to use Redux - It took a rather long time to grasp the entire lifecycle of Redux.
  • Tailwind is just an amazing one.
  • The first DB scheme design is very crucial - Well design first with ER Diagram.
  • Laravel was not for this application - Too heavy but fewer things to do with it. As I wanted to use React and completely separate frontend and backend, selecting Laravel (and maybe PHP even) was one of the biggest failures.
  • Big capture in Laravel
  • CORS issues robbed the biggest time from me. - It basically happens when an Origin wants to access the other without an appropriate header. Adding a proper header on app.php and NGINX solved all.
  • CSRF issue - Without proper authentication, this problem will explode. Excluding API route from CSRF guard in VerifyCsrfToken.php activated API in public.
  • How to design APIs
  • If the project is too big, it's difficult to deploy. - Tried to deploy on Azure, as the project size exceeds the free range, couldn't deploy it. Regarding any other platforms, I already used up free range.

online-grocerystore-webapp's People

Contributors

saku-1101 avatar

Watchers

avatar

online-grocerystore-webapp's Issues

App Specification

Assignment 1: Marking Scheme

1.Overall Layout [4 marks]

  • The browser window is divided into two or more frames.
  • No frame borders are visible. One exception is the use of scrollbar (e.g., when the shopping cart contains so many products that you don’t wish to show a long list of items all at once).
  • Website logo appears at the top of the webpage.
  • A navigation bar appears on the left-hand side or at the top of the webpage.
  • A search box appears all the time on the page.
  • The shopping cart appears at the bottom-right corner or as a pop-up window and can be easily moved around using the mouse.

2.Category Hierarchy [7 marks]

  • The navigation bar shows all the top-level categories (at least five) of items in the shop.
  • Upon clicking or mouseover, the top-level category expands to show the corresponding second-level categories. The navigation bar should also be a drop-down menu.
  • When a second-level category is clicked, the items in this sub-category should be shown in the main information area.
  • At any time, only the second-level categories of no more than one top-level category can be visible to the customer.
  • The second-level categories (or sub-categories) should cover a total of at least 32 items.
  • Each second-level category shows the number of items in this category as part of the category hierarchy.
  • A second-level category should be inactive (not clickable) if there is no item under this second-level category.
  • At any time, no node appears beyond the scope/frame of the navigation bar.

3.Search Box [3 marks]

  • Customers can input or select a price range to filter the items shown in the main information area.
  • Customers can input one or more keywords to search for items by name.
  • The search results show in the main information area.

4.Item Presentation [6 marks]

  • Items shown in the main information area show in a grid/table or other better layouts rather than in a simple list.
  • Each item shows the name, image, quantity, and price correctly. The images are not too large or too small.
  • Each item has an "in stock" status showing whether the item is available in stock and can be added to the shopping cart.
  • Each item has an "Add" button beside it, which can be used to add the item to the shopping cart.
  • Customers can click the "Add" button multiple times to increase the number of items in the shopping cart.
  • Clicking a particular item will trigger a new page or pop-up window showing more details of the item, where customers can also "Add" the item to the shopping cart.

5.Shopping Cart [7 marks]

  • The shopping cart correctly shows the number and total price of items added by the customer.
  • Each item occupies exactly one row in the shopping cart. Different orders (selections) of the same product are amalgamated on the one row.
  • The shopping cart provides buttons to remove an item, empty the cart, and check out.
  • Customers can edit the number of each item in the shopping cart.
  • Customers cannot submit orders with unrealistic amounts (e.g., 1,000,000 boxes of fish fingers). A reasonable limit (say 20) should be set.
  • After the "Checkout" button is clicked, no more items can be added into the shopping cart. The customers need to complete the order before being able to add items to the shopping cart again.
  • The "Checkout" button should be inactive (not clickable) when the cart is empty.

6.Online Order Form [4 marks]

  • The online order form displays either in the main information area overriding the existing content of the frame, or in a new popup window.
  • The online order form requests the customer to fill in their delivery details (including name, address, suburb, state, country) and email address. The form should have a table-like layout.
  • All the fields in the online order form must be completed (marked by red asterisks) and the email address input by the customer should follow the correct format before the order can be submitted successfully. A simple message is displayed if any field is not filled out or the input does not meet the requirements for a field.

7.Order Confirmation [4 marks]

  • The customer completes the transaction by clicking on a button labelled ‘Place Order”.
  • A message (confirmation with details) of the order is sent via email to the customer’s email address.
  • The confirmation email includes the shopping details, including the date and time of the order, the "single item cost", and the "total cost" for the order.

8.Overall Presentation [6 marks]

  • The webpages can dynamically switch (or change) views without losing any category, sub-category, or item.
  • The category and sub-category of an item are shown correctly on the item details page.
  • All parent-child relations between categories are shown correctly and clearly.
  • Text fonts used on the webpages are contemporary and of appropriate font sizes.
  • Everything on the page has the appropriate font colors and background colors.
  • All texts and labels are easy to read.
  • Data presented in tables is nicely formatted.
  • No unnecessary borders in tables.
  • No borders around images.

9. User Experience [4 marks]

  • Tutors will test using your website in person and make their evaluations on the user experience on the following aspects: soundness of design, smoothness of operation, overall usability, and reliability.

10. Bonus Points:

Your website retrieves item information by (sub-)category from a database.
Search results are retrieved by (a combination of) conditions from a database.
The items in the shopping cart are remembered and automatically appear when the customer revisits the website.

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.