During my undergrad at the University of Utah, I took a Web Application development class. The course taught entry-level development using PHP, HTML/CSS, pure JS, and jQuery. SellOut was the application my group built as our term projet. It was designed to fill a need for classified sales specifically in the higher education market. It allows students to buy and sell anything from textbooks to open dorm/housing spots.
SellOut Classifieds
Technology
Front End:
Back End:
Database:
Authentication:
State Management:
jQuery
PHP
MySQL
Local
N/A
Database Architecture
Authentication
SellOut implements local, home-grown authentication. When the user originally signs up and creates an account, the password is salted and then hashed. This encrypted value is then stored in the database. When a user initiates a login attempt, their password is passed through the same salting and hashing process to compare the encrypted value with what's stored in the database.
SellOut also contains authorization and role management, which allows only certain users to access certain pages (such as their personal profile). The login page features a custom SVG animation adapted from this Codepen.
SellOut also contains authorization and role management, which allows only certain users to access certain pages (such as their personal profile). The login page features a custom SVG animation adapted from this Codepen.
The listings page begins with a
This page also includes search and filter by category features as well, which retrieves results similar to the query. This page is accessible to all users, authenticated or not.
SELECT SQL statement to retrieve all listings from the database. Each object is then displayed in a flexbox grid.This page also includes search and filter by category features as well, which retrieves results similar to the query. This page is accessible to all users, authenticated or not.
View Listings
Listing View
The listing view is a simple and clean display of all pertinent details of the classified ad. It displays the image (which is uploaded to an S3 bucket on AWS), the title, pricing information, location of the post, and additional descriptive info.
This also provides an option to contact the seller of the listing, which generates an email form that is sent to the original poster of the advertisement. Lastly, there is also a link which allows you to see other postings from the specific user.
This also provides an option to contact the seller of the listing, which generates an email form that is sent to the original poster of the advertisement. Lastly, there is also a link which allows you to see other postings from the specific user.
Every user has a personal profile page available upon login. This page incorporates multiple features. All active listings by the user are displayed, each with a link to view the ad as well as the ability to edit or delete the listing.
In addition, the user also has the ability to edit their own profile information (including passwords) as well as create a new listing. This page is also the "View User" page when viewing all listings by a certain user. Role authorization determines what features and options are available to the profile and individual listings.
In addition, the user also has the ability to edit their own profile information (including passwords) as well as create a new listing. This page is also the "View User" page when viewing all listings by a certain user. Role authorization determines what features and options are available to the profile and individual listings.
Profile
