PA - dmfrodrigues/feup-lbaw-proj GitHub Wiki

PA: Product and Presentation

A9: Product

This artifact includes:

  • Instructions for installation and use
  • Access credentials.
  • The type of assistance supported by the web application (context-sensitive help, notifications, help pages, etc.)
  • Input validation
  • Accessibility and usability checklists
  • HTML and CSS validation
  • Description and brief justification of the revisions introduced to the initially defined requirements and architecture and identification of the development status of each of the requirements (user Stories) initially set in A2.

1. Installation

Product Release URL

docker run -it -p 8000:80 -e DB_DATABASE=lbaw2174 -e DB_USERNAME=lbaw2174 -e DB_PASSWORD=BT578725 lbaw2174/lbaw2174

2. Usage

Product URL

2.1. Administration Credentials

Administration URL: http://lbaw2174.lbaw-prod.fe.up.pt/moderator

Username Password
[email protected] 1234

2.2. User Credentials

Type Username Password
auction mod [email protected] 1234
buyer [email protected] 1234
banned user [email protected] 1234
global mod [email protected] 1234
seller [email protected] 1234

3. Application Help

Since users don't usually read long instructions or explanations, the best way to lead a user in the right direction is through hints, for example, in text boxes. In the creation of an auction, text boxes are labelled instead of being empty, which intuitively helps users fill in the blanks.

image

4. Input Validation

Inputs are validated using HTML and PHP validators as shown in examples below:

login email input (HTML validation)

<input type="email" name="email" class="form-control" id="floatingInput" placeholder="[email protected]" value="{{ old('email') }}" required autofocus>

Create auction form validator (Server validation)

$validator = Validator::make($request->all(),
            [
                'auctionName'   => 'required|max:50',
                'brand'         => 'required|max:50',
                'model'         => 'required|max:50',
                'year'          => 'required|numeric',
                'condition'     => 'required|in:Mint,Clean,Average,Rough',
                'horsepower'    => 'required|numeric',
            ]);
        if( $validator->fails() ) {
            return redirect()->back()->withErrors($validator);
        }
// date / time validator
        $validator = Validator::make($request->all(), [
            'startingdate' => 'required|date',
            'endingdate'   => 'required|date|after:startingdate',
        ]);
        if( $validator->fails() ) { // Dates are the same or wrong; checking time
            $validator = Validator::make($request->all(), [
               'startingdate'    => 'required|date',
               'endingdate'      => 'required|date|date_equals:startingdate',
               'startingtime'    => 'required|date_format:H:i:s',
               'endingtime'    => 'required|date_format:H:i:s|after_or_equal:startingtime',
            ]);
            if( $validator->fails() ) {
               return redirect()->back()->withErrors(['End Date must be later than Start Date']);
            }
        }

5. Check Accessibility and Usability

Accessibility results: 14/18 Usability results: 23/28

Usability.pdf

Accessibility.pdf

6. HTML & CSS Validation

There were some errors in the main pages' HTML and CSS validations. Results are in the PDF files included.

HTMLHomepage.pdf

HTMLProfile.pdf

CSSAuction.pdf

CSSHomepage.pdf

7. Revisions to the Project

The only changes made were related to UI/UX of the website.

8. Implementation Details

8.1. Libraries Used

We used the following libraries and frameworks:

  • Bootstrap: an open source toolkit for developing with HTML, CSS, and JS.
  • Laravel: a PHP Framework For Web Artisans.
  • Font Awesome: icon set and toolkit.

8.2 User Stories

US Identifier Name Module Priority Team Members State
US01 See Home --- high João 100%
US02 See About M05 high João 100%
US03 See Contacts M05 high João 100%
US04 See ToS M05 high João 100%
US05 Public auction info M02 high Rafael 100%
US06 Search M02 high João, Diogo, Rafael 100%
US11 Sign-up M01 high Leonor, João 100%
US12 Sign-in M01 high João, Leonor 100%
US21 Profile M01 high Diogo, Rafael 100%
US22 Others' profiles M01 high Rafael, Diogo 100%
US23 Comment M03 high Diogo, João 100%
US24 Logout M01 high João 100%
US25 Favorite M03 high Leonor 100%
US31 Bid M03 high Diogo, Rafael 100%
US41 Create auction M02 high Leonor 100%
US51 Edit auction M02 high João, Rafael 100%
US52 Delete auction M02 high Leonor 100%
US61 Delete comment M03 high Leonor, Diogo 100%
US62 Ban user from auction M04 high Rafael, Leonor 100%
US71 Delete any comment M04 high Leonor, Diogo 100%
US72 Ban user from any auction M04 high Leonor, Rafael 100%
US73 Ban user from website M04 high Diogo, João 100%
US81 Create Account M01 high João, Leonor 100%
US82 Delete Account M04 high Diogo, Leonor 100%
US83 Change Account Type M04 high Rafael, Leonor 100%
US26 Become seller M04 medium 0%
US29 Reset password M01 medium Diogo 100%
US63 Deactivate auction M04 medium 0%
US84 Change Pages M05 medium 0%

A10: Presentation

This artefact includes the promotion, a presentation, and the demonstration of the product and a discussion of the developed features. The promotion alsi includes a short video of 2 minutes showcasing the main features of the product.

1. Product presentation

The purpose of the project was to develop a functional web application for an online auction house, namely a car auction house, named Tokyo Drift Auction House. The site allows for the creation of auctions of various types of cars, the interaction with other users through comments, and good search functionality, to ensure everyone can find the car of their dreams.

The site is based on HTML5, JavaScript, and CSS. The Bootstrap3 framework was used for the frontend and the PHP framework Laravel was used for the backend.

The platform has an intuitive design and a detailed navigation system by arranging the cars by brand, condition and other details. In order to provide a reliable service, each auction has a comment section, which allows users to not only review the cars after they were purchased but also to view other people's opinions during the auction. Besides, users have the ability to save favorite auctions in a wishlist and view the history of all previous purchases, of their own as well as of other users. For the more refined users, private auctions can be created, which are accessed by invite only.

Product URL

2. Video presentation

image

Revision history

Changes made to the first submission:

  1. ...

GROUP2174, 10/06/2021

Diogo Miguel Ferreira Rodrigues, [email protected]

João António Cardoso Vieira e Basto de Sousa, [email protected]

Leonor Martins de Sousa, [email protected] (Editor)

Rafael Soares Ribeiro, [email protected]