This project consists of an online auction platform for users to buy and sell all kinds of digital products, such as Games, Series & Movies, Software and others, through a bidding system.
Currently, most websites that provide auction services focus on physical items that must be transported from the seller to the buyer, which entails various complications such as creating false addresses to bypass shipping costs and using built-in or third-party messaging applications to transfer the item bought. Therefore we seek to explore this untapped market by creating a web platform to auction exclusively digital products.
Our platform provides a wide array of useful features for both users and administrators. We have implemented systems and workflows to facilitate tracking, saving, planning and creating auctions. User can intuitively rate and review each other to build their reputation on the website and allow other users to feel more safe in the platform. If a user has any doubts about an auction they can directly contact the seller through our platform using our live messaging service.
To facilitate the maintenance of the platform, we offer the tools required for a moderation team to manage user's permissions and to terminate any auctions that go against the terms of service users previously agreed upon.
The design developed is fluid and responsive, with usability in mind to prioritize the ease of use and the user experience in our website, be it through a smartphone, a tablet or a laptop.
Source code of the final version of the project: https://git.fe.up.pt/lbaw/lbaw2021/lbaw2112/-/tree/PA
docker-compose up && docker run -it -p 8000:80 -e DB_DATABASE="postgres" -e DB_USERNAME="postgres" -e DB_PASSWORD="pg!lol!2021" lbaw2112/lbaw2112URL to the product: http://lbaw2112.lbaw-prod.fe.up.pt
Important: Administration login is hidden by default, accessed through this link: http://lbaw2112.lbaw-prod.fe.up.pt/admin/login
| Username | Password |
|---|---|
| iargo | mosco |
| oivo | saav |
| skelo | gizzard |
| toilmo | gacha |
The password to all the user accounts in the population is 'zawarudo'.
| Type | Username | Password | |
|---|---|---|---|
| Basic account | Jonathan_Joestar | [email protected] | zawarudo |
| Banned account | Jesus | [email protected] | zawarudo |
We have tooltips around the website to help users understand better what the element means, for example, in the auction page we can hover on the colored circle to see the tooltip explaining the status of the auction.
That can be checked on the page of an auction.
There's also visual feedback on actions to help the user understand the status of the action, for example, in the settings page, there will be alerts to inform the server response to the user, that can be checked in the settings page given that you're logged in.
Check the following link to go to your profile page, you must be logged in.
We also implemented a FAQ page where the most general questions can be answered.
We also have an About page where more information about our site and its developers is provided.
- Used "required" tag on every input field that was obligatory in each form.
- Data types for form input fields.
Eg.: login.blade.php
<label for="inputEmail" class="sr-only float-start">Email/Username</label>
<input type="text" id="inputEmail" class="form-control" name="email" value="{{ old('email') }}" required>
<label for="inputPassword" class="sr-only float-start">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" required>- Integer limits and step values for integer input fields.
- Converting all applicable characters to HTML entities using Blade's autoescape
{{ }}.
- Created custom requests and constructed validation rules so as to validate all user input.
public function rules() {
return [
'title' => 'required|min:5|max:50',
'description' => 'required|min:10|max:255',
'start_date' => ['required', 'date', new AfterToday],
'end_date' => 'required|date|after:start_date',
'starting_bid' => 'required|integer',
'increment_percent' => 'required_without:increment_fixed|numeric|integer|min:1|max:50',
'increment_fixed' => 'required_without:increment_percent|numeric|integer|min:1',
'category' => ['required', 'string', Rule::in(Auction::CATEGORY)],
'nsfw' => 'nullable',
'image' => 'required',
'image.*' => 'required|image|mimes:jpeg,jpg,png'
];
}- Used Laravel's query builder as it doesn't allow SQL injections.
- Avoided using user input data on "raw" queries as they don't have any native protection.
- Added constraints to the database to prevent invalid operations.
- Added default values to the database, wherever needed.
- Used policies to check whether a user may perform an action or not.
Eg.: AuctionPolicy.php
public function bid(Member $member, Auction $auction) {
return $member->sell_permission
&& !$member->banned
&& $auction->open
&& $member->id != $auction->seller_id
&& !$auction->holdsLatestBid($member->id);
}- Used middleware groups in routes to prevent unauthorized users to access certain parts of the website.
Some reports on pages that have paginators have an aria-label warning, which falls out of our control because it is handled by Laravel.
- Home
- Message Inbox
- User Profile
- Account Settings
- Privacy Settings
- Security Settings
- Signin
- Signup
- Search Auctions
- Search Users
- Create Auction
- User Dashboard Followed
- User Dashboard Bidded
- User Dashboard Bookmarked
- Auction page
- Admin Dashboard Auction Management
- Admin Dashboard Reported Auctions
- Admin Dashboard User Management
- Admin Dashboard Reported Users
This validator does not support variables or any of the primary webkits, resulting is several warnings relative to valid CSS code.
- Replaced top auctions with site banner
- Introduced a real time messaging system
- Merged auction details page and auction page into one
Throughout our application, 4 extra libraries were used:
-
AnchorJS - JavaScript utility for adding deep anchor links
- Used in FAQ page
-
Pusher - Hosted API service which makes adding real-time data and functionality to web and mobile applications seamless
- Used to make realtime messaging possible
-
Chart.js - JavaScript charting
- Used to display bid history of an auction
-
noUiSlider - JavaScript Range Slider
- Used in search results to improve the UX of controlling the price range and user rating
| US Identifier | Name | Module | Priority | Team Members | State |
|---|---|---|---|---|---|
| US001 | See Home | Other | Mandatory | TS, EC, TB, IS | 100% |
| US102 | Sign-in | Authentication and Individual Profile | Mandatory | IS, EC, TS | 100% |
| US101 | Sign-up | Authentication and Individual Profile | Mandatory | IS, EC, TS | 100% |
| US207 | Sign-out | Authentication and Individual Profile | Mandatory | IS, EC, TS | 100% |
| US506 | Sign-out (Admin) | Administration | Mandatory | IS, EC, TS | 100% |
| US005 | View auction | Auctions | Mandatory | TS, EC, IS | 100% |
| US401 | Create an auction | Auctions | Mandatory | IS | 100% |
| US404 | Schedule auctions | Auctions | Mandatory | IS | 100% |
| US402 | Set base price for auction | Auctions | Mandatory | IS | 100% |
| US301 | Bid | Auctions | Mandatory | TS | 100% |
| US201 | See Dashboard | Authentication and Individual Profile | Mandatory | EC, TS | 95% |
| US202 | Edit profile | Authentication and Individual Profile | Mandatory | TB | 100% |
| US208 | Consult bookmarked auctions | Auctions | Mandatory | EC | 100% |
| US209 | Consult bidding history | Auctions | Mandatory | EC | 100% |
| US210 | Consult auctions history | Auctions | Mandatory | EC, IS | 100% |
| US006 | View user profile | Users | Mandatory | TB, TS | 100% |
| US205 | Rate user | Users | Mandatory | EC | 100% |
| US002 | Search by keywords | Users and Auctions | Mandatory | IS, TS | 100% |
| US003 | Filter search results | Users and Auctions | Mandatory | IS, TS | 100% |
| US004 | Sort search results | Users and Auctions | Important | IS, TS | 100% |
| US203 | Report user | Users | Mandatory | TB | 90% |
| US204 | Report auction | Auctions | Mandatory | EC, TS | 100% |
| US012 | View auction bidding history | Auctions | Mandatory | TS, EC | 100% |
| US303 | Bookmark add | Auctions | Important | TS | 100% |
| US304 | Bookmark remove | Auctions | Important | TS | 100% |
| US403 | Cancel auction | Auctions | Mandatory | IS, EC | 0% |
| US213 | Follow User | Users | Important | TS | 100% |
| US214 | Unfollow User | Users | Important | TS | 100% |
| US013 | Send message | Users | Important | TS, EC | 100% |
| US014 | Receive message | Users | Important | TS, EC | 100% |
| US215 | Consult notifications | Authentication and Individual Profile | Important | EC, IS, TS | 100% |
| US302 | Notify outbid | Auctions | Important | EC, TS | 100% |
| US305 | Notify auction opening | Auctions | Important | EC, TS | 100% |
| US406 | Edit auction | Authentication and Individual Profile | Important | EC, IS, TS | 100% |
| US206 | Delete account | Authentication and Individual Profile | Mandatory | TB | 100% |
| US011 | View top auctions | Other | - | - | - |
| US405 | Get notification about the auctions I created | Auctions | Important | EC, TS | 0% |
| US501 | Restrict user | Administration | Mandatory | IS | 100% |
| US502 | Unrestrict user | Administration | Mandatory | IS | 100% |
| US503 | Ban user | Administration | Mandatory | IS | 100% |
| US504 | Unban user | Administration | Mandatory | IS | 100% |
| US507 | Check reported auctions | Administration | Important | IS | 100% |
| US508 | Check reported users | Administration | Important | IS | 100% |
| US505 | Terminate auction | Administration | Mandatory | IS | 100% |
| US216 | Filter inappropriate auctions | Auctions | Important | TS, IS | 100% |
| US007 | See About | Other | Important | TS | 100% |
| US008 | See Contact | Other | Important | TS | 100% |
| US010 | See FAQ | Other | Important | TS | 100% |
| US211 | Consult personal statistics | Authentication and Individual Profile | Optional | TS, TB | 0% |
| US212 | Consult recently visited auctions | Auctions | Optional | TB | 0% |
| US103 | OAuth Sign-up | Authentication and Individual Profile | Optional | EC | 100% |
| US104 | OAuth Sign-in | Authentication and Individual Profile | Optional | EC | 100% |
| US009 | See statistics | Other | Optional | TS | 0% |
| US217 | Consult today's auctions | Auctions | Optional | TS | 100% |
Note: US0013, US0014 and US217 are new User stories.
This artefact (A10) provides a presentation of our product and its main features.
The purpose of this project was to develop a web application for an online auction system, called Trade-a-Bid.
Some our main features include creating and bidding on auctions, bookmarking them, checking relevant information about them, search for users and auctions, consult a user's profile, follow them, contact them through a messaging system and consult our notifications.
URL to the product: http://lbaw2112.lbaw-prod.fe.up.pt
URL to the video: https://drive.google.com/file/d/1Kgi2tDyDU2JAhm6ZieTUtu2zNeh3yfcs
- Real time messages only work locally as we couldn't configure the Pusher in the production server.
- Email verification and password recovery only work locally because the openssl module requires secure connections which the production server does not provide.
- On user registration a server error is shown because of the afformentioned problem. The registration works though and the user can then login after signing up.
- We forgot to specify one route in the homepage's frontend.
- We forgot to check for terminated status when displaying an auction. In the cases where an administrator forces the closing of an auction.
Changes made to the first submission:
- We only added/changed 3 lines after the final deadline because our production image wasn't working due to minor errors. After having fixed this problems we pushed the new image which worked as intended.
GROUP2112, 09/06/2021
- Eduardo Correia, [email protected]
- Ivo Saavedra, [email protected]
- Telmo Baptista, [email protected]
- Tiago Silva, [email protected] (Editor)