Jorge Andrés Echevarría j.andres.2022@alumnos.urjc.es jae9104
Arturo Enrique Gutierrez Mirandona ae.gutierrez.2022@alumnos.urjc.es arturox2500
Iván Gutiérrez González i.gutierrez.2022@alumnos.urjc.es IvanGutierrrez
Víctor Bartolomé Letosa v.bartolome.2022@alumnos.urjc.es victorino2324
Miguel Pradillo Bartolomé m.pradillo.2020@alumnos.urjc.es MikePradiBart
The User entity represents a person registered in the auction application. It includes attributes such as ID, name, visible name, email, description, encoded password, profile picture, postal code, reputation, and active status.
The Product entity represents an item listed for auction in the system. It includes attributes such as ID, name, description, initial value, seller ID, start time, end time, status, and image.
The offer entity represents a user's offer for a product in an auction. It includes attributes such as ID, cost, time, product ID, and user ID.
The transaction entity represents the final transaction in which a user buys a product from a seller in an auction. It includes attributes such as ID, cost, buyer ID, product ID, and seller ID.
The rating entity represents the ratings given to sellers for their auctioned products. It includes attributes such as ID, score, product ID, and seller ID.
Can:
- Have access to auctions that are still ongoing.
- View auctioned products.
- Browse user profiles.
- View a product's bidding history.
Can:
- Have access to auctions that are still ongoing.
- Access their personal data.
- View their listed products.
- List products for auction.
- Place bids on auctions.
- Complete transactions as a buyer or seller.
- View the products they have bid on and won.
- Rate other users.
Can:
- Have access to all listed products.
- Ban or unban users and products.
- Users can upload images for the products they list.
- Users may have their own profile picture.
- Users can view line charts displaying the bidding history for each listed product.
- The web application was supposed to use Auth0 for authentication and authorization management. However, due to issues with the implementation it was decided to take the safer route and implement the map API that shows a postal code area.
- When viewing listed products, they will be displayed in order based on the rating of the seller.
All users, including unregistered ones, can browse available products. These products are displayed in order based on the ratings of the sellers. Users can navigate to individual product pages to view more details.
Only available to unregistered users. This page allows them to provide the necessary information to create an account.
Accessible to all users. It allows registered users to enter their credentials and access the application.
Accessible to registered users. Users can:
- Edit their profile information.
- View a list of products they have posted.
- Access a personal section displaying auctions where they have placed the highest bid.
When viewing another user's profile, these personal sections will not be visible.
When an Admin accesses another user's profile they can ban the user.
This page is available to registered users. It displays a list of auctions where the user placed the highest bid, meaning they have won the item.
Available to registered users. It shows a list of auctions created by the user, whether they are ongoing or finished.
Users can access this page to update their personal details such as their description/Bio, profile picture, and other relevant information. It is an extension to the regular Account Details Page
Only available to registered users. This page allows them to create new product listings for auction.
All users can view:
- The product's title, initial price, description, and current status (ongoing or finished).
- The seller’s profile page.
- A bidding history line chart.
- An approximate location of the product using the postal code.
Registered users can place bids on the product.
Admins have the ability to remove product listings to ensure compliance with platform rules.
As a summary we show the updated navigation diagram.
- VSCode (or any preferred IDE like IntelliJ IDEA or Eclipse)
- Java 21
- Maven 4.0.0 or higher
- Spring Boot 3.4.3
- MySQL Installer 8.0.33 or higher
- MySQL Workbench 8.0.33 or higher
- Docker
- Docker Compose
- Angular Lenguage Service extensions (Available in VSCode)
- Download the ZIP from this GitHub repository
- Extract it
- Run it with your IDE
- Configure the MySQL database with the password Password0] (specified in application.properties)
- Run the application
- Open your browser
- Go to
https://localhost:8443- If you encounter security warnings, select Advanced options and then Proceed to the website
- Install Docker
- Install Docker Compose
- Run Docker
- Clone or download the repository
- Go to "backend" folder
- Execute Pujahoy with Docker Compose: "docker compose up"
- Open your browser
- Go to
https://localhost:8443- If you encounter security warnings, select Advanced options and then Proceed to the website
- Install Docker
- Run Docker
- Clone or download the repository
- Go to "backend" folder
- Execute:
chmod +x create_image.sh && ./create_image.shchmod +x publish_image.sh && ./publish_image.sh- (NOTE:There's a chance you might encounter an unauthorized error. If this happens, run the "docker login" command and follow the process to log in, as Docker has rate limits for anonymous users. After logging in, simply rerun the above code.)
It is required to be connected to URJC network to be able to access VM
- Open terminal
- Execute:
ssh -i ssh-keys/appWeb08.key vmuser@10.100.139.202or
ssh -i ssh-keys/appWeb08.key vmuser@appWeb08.dawgis.etsii.urjc.es- Clone or download the repository
- Go to "backend" folder
- Build the app with: Docker compose up
- GO to
https://10.100.139.202:443- Ultimately dont forget to execute this command after finished using to save energy :) : Docker compose down
Follow the nexts commands:
cd ./frontend
npm install -g @angular/cli@17.3.14
npm install
ng serveAnd go to this URL in your browser
localhost:4200
| Commit | Description |
|---|---|
| 1º | In this commit full functionality of edit profile was added. Specifically to try new things, the form that sends the data to be replaced in the DB is created dynamically with JS. |
| 2º | In this commit functionality for register was finished. Backend checks for certain details when registering such as Postal Code. Further checks to these fields were added on commit 1º |
| 3º | In this commit functionality for the Map that locates a seller was implemented. Notice no GoogleMaps was used since a bank account was needed. So we decided to take the free approach. How it works is: Map is loaded with OpenStreetMap (Leaflet.js), the location is obtained with an API, then location is used to pin point in the map |
| 4º | In this commit as stated before we tryed to use as external technology the Auth0 login workflow, but due to implementing issues and lack of time idea was depleted and we reversed to an easier approach. |
| 5º | In this commit logout methods and a first instance of a user session was created. Later on this instance was changed into a more usefull use. Since only 'Authenticated' was sent when a user was logged in accross all views. |
| File | Description |
|---|---|
| 1º | I was mostly in charge of security. As stated before all of my time during this weeks was invested into implementing Auth0 but due to a big difficulty when implementing it, because of outdated documentation and lack of information we decided to take the path explained during the theorical classes |
| 2º | In this Controller i was in charge of making sure editing a profile was possible and all attributes were up to date and as they are intended |
| 3º | In the login controller i was in charge of creating the login and register functionalities, despite some help from Iván with the login. |
| 4º | The login html was made by me too. Interesting to highlight register and login go throw the same view and are dynamicaly swapped between them with JS. Backend checks are done to secure reliable data. |
| 5º | Although i wasnt in charge of creating the profile view, i had to add edit a profile. As a challenge i decided to use the same view to be able to edit a user with a button. A hidden form is created dynamically and data is sent in it. Backend checks are done to secure reliable data. |
| Commit | Description |
|---|---|
| 1º | This is my largest commit so far. Due to significant changes in the codebase since my previous commit, I had to restructure all my work to ensure compatibility with the updated codebase. |
| 2º | The purpose of this commit is to implement a user's view of their own listings. Additionally, I set up the New Product Form. |
| 3º | In this commit, I implemented AJAX functionality to preload products without requiring a page reload. This update also includes a spinner animation. |
| 4º | Implemented the bid history line chart using Chart.js. |
| 5º | Since our template did not include a dedicated profile page, I created one from scratch using Bootstrap and custom CSS. |
| File | Description |
|---|---|
| 1º | I implemented the functionality for creating new auctions and displaying users' listings, as well as the products they have won. |
| 2º | I developed the AJAX functionality using JavaScript. |
| 3º | I designed and implemented the HTML structure for the auction creation page, ensuring support for image uploads so that they can later be displayed on product pages. |
| 4º | I wrote the necessary query to retrieve and display users' winning bids. |
| 5º | At the start of the project, I built the profile page entirely from scratch. |
| Commit | Description |
|---|---|
| 1º | Create the server and create, relate, and initialize the initial H2 database. |
| 2º | Functionality to view the profile of the user and the seller and complete the login functionality that Jorge started. |
| 3º | Functionality to rate the seller, create the form, save the rating, and update the seller's overall rating. |
| 4º | Functionality for the administrator to ban a registered user and improve the error page structure. |
| 5º | Create user roles and verify route permissions for each user type. |
| File | Description |
|---|---|
| 1º | Functionalities to view the user's own profile, view the seller's profile, ban users, and rate the seller. |
| 2º | Configure roles, role-specific URLs, login, and cookies to keep the session saved for one day. |
| 3º | Display certain parts using Mustache based on the user type: unregistered user, registered user accessing their own profile, registered user accessing the seller's profile, and administrator. |
| 4º | Create the class, create and modify the attributes, and implement the constructors, setters, and getters. |
| 5º | Create database queries for users. |
| Commit | Description |
|---|---|
| 1º | First product functionalities highlighting displaying a product and an initial feature for deleting a product. |
| 2º | I add the functionality to create a transaction when a product has ended. I add validations to correctly display the products. |
| 3º | I complete and fix all product functionalities, enable bidding by entering the desired amount, display more product information, and correctly add navigation to error pages. |
| 4º | I load the elements in the index using AJAX without the advanced algorithm. |
| 5º | We update the display of products on the index using the advanced algorithm based on the type of user entering the index. |
| File | Description |
|---|---|
| 1º | Product template where I perform various checks to display information using Mustache according to the user accessing it. |
| 2º | Index page where I have the template and the checks to ensure it displays correctly. |
| 3º | The file I have worked on the most, the controller, manages all the operations performed on the product. |
| 4º | The file that supports the product controller service. |
| 5º | Repository file with the product entity database, highlighting the queries of the advanced algorithm. |
| Commit | Description |
|---|---|
| 1º | There was a problem with the auctions were the seller could also bid up on his own product so it was chandged. |
| 2º | Added implementation for CSRFHandlerConfiguration.java and full funtionality on this commit for this file. |
| 3º | The security for the H2 database was implemented in these commit. |
| 4º | CSRF was added to every form from every file and the name of the backend folder was changed to that name. |
| 5º | Model atributes were added to ProductoController and UsuarioController. |
| File | Description |
|---|---|
| 1º | Product template where I worked on the initial structure of the file. |
| 2º | The controller, which is the file I've spent the most time working on, handles all the operations related to the product. |
| 3º | Added implementation and full funtionality on this file as part of the security configuration of the PujaHoy web application. It is responsible for integrating CSRF protection into the application. |
| 4º | Set up roles, role-specific URLs, login functionality, and cookies to maintain the session for one day. It's where the security for HD database was implemented. |
| 5º | Model atributes added to this file. |
| Commit | Description |
|---|---|
| 1º | Creation of files required for this phase such a product mapper and DTO classes. Also essential methods were written |
| 2º | Main logic for post and put methods for products and their respective images created |
| 3º | Added better responses for requests in the user and product rest controllers |
| 4º | Added a particular type of post request for when a auction is finished and a transaction occurs |
| 5º | Added pagination functionality to product listings |
| File | Description |
|---|---|
| 1º | Added functionality for creating and editing auctions, including the necessary verifications for edge cases with appropriate error responses. |
| 2º | Added GET methods for retrieving all products and specific products, as well as GET, POST, and PUT methods for product images, including their respective error responses. |
| 3º | Added pagination functionality for all product listings, including bought products, the user's products, and the general product list. |
| 4º | Created the necessary ProductDTO class and added all the required attributes, along with their getters and setters. |
| 5º | Created the ProductMapper class with the necessary attributes and mappings. |
| Commit | Description |
|---|---|
| 1º | Added EditProfileImage and EditProfile with all its respective requiremets. |
| 2º | Added the register functionality to the loginRestControler which allows users to POST to create a profile. |
| 3º | Added basic functionalities related to docker file and docker compose |
| 4º | Added basic schema for product rest controller |
| 5º | Added basic schema for user rest controller |
| File | Description |
|---|---|
| 1º | Added the docker compose file and made sure it worked. |
| 2º | In charge of making sure all funcionality related to login and register was on point and working. |
| 3º | In charge of editing a user and its profile pic via the API |
| 4º | In charge of editing a user and its profile pic via the API |
| 5º | Added the dockerfile and made sure it worked. |
| Commit | Description |
|---|---|
| 1º | Add the basic functionality to rate a product. |
| 2º | Add the NoSuchElementExceptionCA, the PublicUserDTO, its corresponding mapper, and the basic GET user data function. |
| 3º | Add the basic function for banning and unbanning users by the administrator. |
| 4º | Once security with JWT is added, update the created methods to verify who is making the request. |
| 5º | Add security to each URL, differentiating them based on the type of request and who can access them. |
| File | Description |
|---|---|
| 1º | Add GET own data for the user, GET user data by ID, PUT to ban and unban users, and POST for rating. |
| 2º | Add the methods to ban and unban users, and remove the duplicated code between the web and REST. |
| 3º | Add the DTO to view the visible fields of the user. |
| 4º | Specify the toDTO and toDomain methods between UserModel and PublicUserDTO, specifying attributes and the image URL. |
| 5º | Controller that handles the 404 Not Found exception. |
| Commit | Description |
|---|---|
| 1º | Add application security through cookies. |
| 2º | Add queries for all products and for an individual product, performing the necessary checks. |
| 3º | Add the method to create a bid for a specific product. |
| 4º | Add a GET method to view the offers for a specific product. |
| 5º | All the business logic from the controller is moved to the service. |
| File | Description |
|---|---|
| 1º | The file I've worked on the most contains the API logic for our application's products. |
| 2º | It contains the product business logic. |
| 3º | File containing the web's filters and security measures |
| 4º | Controller for system login, logout, and cookie refresh. |
| 5º | Model with product information, I added methods and used it to configure the DTOs. |
| Commit | Description |
|---|---|
| 1º | Added and implemented first full version of GetTransaction for ProductRestController. |
| 2º | Added AeleteProduct to ProductRestController. |
| 3º | In this commit the file TransactionDTO was completely updated to its final and functional version. |
| 4º | Added TransactionMapper file. |
| 5º | Added createTransaction method to TransactionService. |
| File | Description |
|---|---|
| 1º | This file defines a Spring REST controller to handle requests related to products in the application |
| 2º | This file defines an immutable data transfer object (DTO) named TransactionDTO for representing a transaction's basic details. |
| 3º | This file defines a MapStruct mapper interface TransactionMapper for converting between Transaction entities and their corresponding TransactionDTO objects. |
| 4º | This file defines a Spring service TransactionService to manage transactions, including finding, saving, deleting, and creating transactions, as well as converting them to DTOs using the TransactionMapper. |
| 5º | Comments about the functionality of the methods added to this file which defines a Spring MVC controller to manage product-related operations in the web application. |
| Commit | Description |
|---|---|
| 1º | Added styles for the form component and the product list component, also implemented form validation |
| 2º | Added the functionality to edit an auction |
| 3º | Implemented the Bid progression chart that was previously implemented in phase 1 |
| 4º | Added the functionality to create a new auction |
| 5º | This was my initial commit in which I created the necessary files and basic logic so that I could start working on the lisitngs and form components |
| File | Description |
|---|---|
| 1º | I recreated the original "create product" page as close as possible |
| 2º | I created the functionality for creating and editing auctions, and made it possible to reuse the component for both functionalities |
| 3º | I recreated the listings design from Phase 1 |
| 4º | Made the code modular so that adding different listings was simple. Ajax functionality was also done here |
| 5º | I implemented all the necessary methods to interact with the backend and retrieve product information. |
| Commit | Description |
|---|---|
| 1º | Added login and register to Angular and tested it. |
| 2º | Added the map to the product details page. |
| 3º | Added the possibility to edit user information. Later on was added to be able to edit the profile picture too. |
| 4º | Added funtionality and style to header and footer. |
| 5º | Updated the dockerfile to be able to use the Angular program. It was later needed to change some minor details to make it work as intended. |
| File | Description |
|---|---|
| 1º | I added the visual map from Google Maps. Despite beeing just a few lines, job took a long time since old map used in the spring app was not working as intended and had to search for alternatives. |
| 2º | In users component i made all edit related code. From editing user information to edit his profile picture. |
| 3º | My job was to make sure all login and register related functionalities were working as intended. |
| 4º | I was also in charge of login and register workflows on the service. |
| 5º | As stated before I was in charge to make sure app was able to be deployed with Docker. |
(NOTE: Despite only linking the components, it is straight forward to understand the html components related were done by me too)
| Commit | Description |
|---|---|
| 1º | Feature to view the seller's profile, ban and unban users. |
| 2º | Feature to view the seller's profile, rate product and proceed to checkout from the products page. |
| 3º | Make the proxy to connect frontend with backend and the feature to view user's own profile with an initial error handler. |
| 4º | Added initial header and footer, and included Boostrap libreries for Angular. |
| 5º | Added css into users.component.html and fixed feature to view user's own profile. |
| File | Description |
|---|---|
| 1º | I added the handler error, and the request to get user's own profile, get seller's profile and ban/unban users. |
| 2º | I added the structure and the ngOnInit, getOwnProfile, getSellerProfile and bannedUser methods. |
| 3º | I added the submitRating and checkout methods. |
| 4º | I added the HTML and CSS structure for all the odds betwween the profile requested and the one who made the request. |
| 5º | I added the handler error, and the request to rate a product and checkout a product. |
| Commit | Description |
|---|---|
| 1º | Move the product page template to Angular and add initial functionalities. |
| 2º | Add the functionality to place bids and control the visibility of buttons depending on the user accessing the screen. |
| 3º | Add functionality to delete a product. |
| 4º | Add star rating design based on the seller's reputation for the main page of the application. |
| 5º | We fixed issues with product deletion and added styling to the buttons to match the old design. |
| File | Description |
|---|---|
| 1º | HTML template for Angular. |
| 2º | File with all the logic for the product page. |
| 3º | CSS file with the styling for the product page. |
| 4º | File with the logic for the main page. |
| 5º | Product service used to communicate with the API and perform specific functionalities for the products. |
| Commit | Description |
|---|---|
| 1º | I added the getProductIndex function which fetches a paginated list of all public products from the backend for a given page number, handling any potential errors. |
| 2º | I added the indexProduct which loads and appends a paginated public list of products to the current list. |
| 3º | I worked on the method loadMoreProducts which loads and appends the next page of products based on the current route. |
| 4º | I worked on the method ngOnInit which initializes the component by fetching user data and loading the appropriate product list based on the route. |
| 5º | Fixes were made for the app.component.html and the products-list.component.ts files so that they could work correctly. |
| File | Description |
|---|---|
| 1º | It is the Angular service for managing products via HTTP requests with centralized error handling were I added the getProductIndex method. |
| 2º | This is an Angular component for displaying and paginating product lists based on the route and user session where I worked on the indexProduct, loadMoreProducts and ngOnInit methods |
| 3º | It is the main layout template that displays a header, footer, dynamic routed content, and the product list on the homepage. |
| 4º | This template is used to display a message when no products are available. It is shown when the products array is empty or undefined |
| 5º | This is the Angular json file. I added Angular so the project could be worked on this framework. |