Noir & Blanc is an online clothing store where users can purchase products and leave reviews. Additionally, administrators can manage the catalog and analyze sales
| Name and surname | URJC mail | GitHub user |
|---|---|---|
| Ikram El Jauhari Al Jaouhari | i.eljauhari.2022@alumnos.urjc.es | ikramej |
| Alberto Mayoral Gómez | a.mayoral.2022@alumnos.urjc.es | Albermg27 |
| Icíar Moreno López | i.morenolo.2022@alumnos.urjc.es | IciarML |
| Jorge Ramírez Gayo | j.ramirezg.2017@alumnos.urjc.es | jorgeramirezgayo |
- User: There are three types of users: Registered users, unregistered users and administrators
- Product: Represents the items available in the store
- Order: An order purchased by the user
- Review with score: Allows registered users to leave a review about a product
- Registered users: They can place orders, access their order history and leave reviews
- Unregistered users: They can view products but they can't place orders
- Administrators: They can add, edit, and delete products, as well as remove reviews and ban users
- Products: Each product will have an image
- Users: Each user will have a profile picture
- The administrator will be able to view a bar graph with the most purchased products
- The administrator will be able to view a line graph that displays the sales of the last month
An email will be sent when a purchase is made and a pdf will be generated with the order details
A set of suggested products is displayed based on the categories of products previously purchased by the user
| Screen name | Screen image | Screen description |
|---|---|---|
 |
Login | This screen is used by users and administrators to login using their email and password |
 |
Register | This screen is used to register users. Users must indicate their name and surname, their email and create a password |
 |
Admin profile | Screen where the administrator can see their personal data |
 |
Admin edit profile | Screen where the administrator can edit their personal data (name and surname, email and password) |
 |
Admin charts | Screen where the administrator will be able to view a bar graph with the most purchased products and a line graph displaying the sales of the last month |
 |
Admin users | Screen in which the administrator can see the users of the website, he/she can also see the reports that have been made and the users that are banned |
 |
Admin orders | Screen where the administrator can see the orders that all users have made, their details and delete them |
 |
Admin products | Screen where the administrator can see all the products, their details, edit and delete them. The administrator can also observe the products that are or are not available |
 |
Users profile | Screen where registered users can edit certain attributes |
 |
Index | Main screen of the website where users can view the different product categories |
 |
Category | Screen where users can view products belonging to a specific category |
 |
Elem detail | Screen where the information of a specific product is displayed |
 |
Cart | Screen where the products added to the cart by a user are displayed |
 |
Orders | Screen where the previous orders made by a user are displayed |
 |
Orders detail | Screen where the details of the products belonging to a specific order are displayed |
 |
Access error | The screen displays an access error, indicating that the user does not have permission to view the content |
 |
No page error | The screen indicates that the requested page does not exist or is not available |
-
Download the repository:
- Clone or download this repository to your local machine.
-
Install Java 21:
- If you don't have Java 21 installed, you can download it from the following link:
Download Java 21.
- If you don't have Java 21 installed, you can download it from the following link:
-
Set up the database:
- We are using XAMPP for the database, but you can use any SQL editor you prefer.
- Create a database named
shopand set the passwordadminfor therootuser.
In the SQL Shell, run the following commands:
CREATE DATABASE shop; ALTER USER 'root'@'localhost' IDENTIFIED BY 'admin';
- Then, go to the
config.inc.phpfile (located inxampp/phpMyAdmin) and set therootuser password toadmin.
-
Run the project:
-
Recommended: Use Visual Studio Code and install the Java Extension Pack, Spring Boot Extension Pack and Maven for Java extensions. After that, simply click the "Run" button.
-
Alternatively, you can install Maven manually to run the project. Navigate to the backend folder and run the following command:
mvn spring-boot:run
-
-
Access the project:
- Once the project is running, open your browser and go to:
https://localhost:8443/index
- Once the project is running, open your browser and go to:
I have been mostly responsible for developing the functions related to the index screen for both non registered users and registered users including a variety of "load more" buttons with AJAX, the element detail screen, the edit user profile screen and the category screen in which I had to show specific products based on the category. Also, I have been responsible for the functions of creating and editing reviews on the element detail screen. In addition, I have participated in the developing of the security integration with the web. Last but not least, I have developed the advanced algorithm which consisted in showing more products based on the categories of the user last order
I have been responsible for developing the functions related to the creation and edition of products by the administrator, as well as user management and the control of reviews reported by customers. On the other hand, I have implemented the shopping cart logic on the website, taking into account the addition, removal, and processing of items, considering the available stock and possible concurrency issues, as well as the product search bar on the main page. Additionally, I have collaborated on the security aspect regarding access to certain pages, providing error and authentication pages. Finally, I have also contributed to correcting and improving the website in general
I have developed the login and registration screens, managing user authentication and storage. I have also implemented the admin profile management so he/she can update his/her information easily. In addition, I have developed the order management screen, working on the logic of its creation and making sure only paid orders are shown and allowing their status to be updated. I have also implemented the generation of PDFs with order details and the automatic sending of emails to users after making a purchase. Finally, I have corrected errors and improved general aspects of the website
I was responsible for implementing the entities, primarily the relationships, as well as the admin dashboard graphs, which include the top-selling products and orders from the last month, and the users' order history. Additionally, I worked on smaller details such as fixing the responsiveness of the admin panel and data initializing.
- Docker has to be installed
-
Clone the repository:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp14 -
Go to the directory where the docker-compose.yml file is located:
cd webapp14/backend/docker -
Start the application using Docker Compose with the following command:
docker compose up -d -
You can access the application at the following URL:
-
To stop the deployment execute the following command:
docker compose down
- Docker has to be installed
- Clone the repository:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp14 - Go to the directory where the create_image.sh file is located:
cd webapp14/backend/docker - Build the Docker image using using these commands:
chmod +x create_image.sh./create_image.sh
- You must be connected to the university network. If you access from outside, you must use the Windows or Ubuntu development desktop in MyApps
- You need to make sure you have the private key downloaded to your local computer
-
Open a terminal on your system and run one of the following commands to connect to the virtual machine:
ssh -i ssh-keys/appWeb14.key vmuser@10.100.139.173ssh -i ssh-keys/appWeb14.key vmuser@appWeb14.dawgis.etsii.urjc.es -
Clone the repository to the virtual machine using the following command:
git clone https://github.com/CodeURJC-DAW-2024-25/webapp14 -
Go to the directory where the docker-compose.yml file is located:
cd webapp14/backend/docker -
Start the application using Docker Compose with the following command:
docker compose up -d -
You can access the application at the following URL:
http://appweb14.dawgis.etsii.urjc.es:8443/index
You can also test the application using the following accounts:
Admin:
- username: laura1@gmail.com
- password: Laura.53
User:
- username: pacoG@gmail.com
- password: 12345
-
To stop the deployment execute the following command:
docker compose down
Here you can find the API REST documentation, generated with OpenAPI and available in the following formats:
🔹 OpenAPI Specification (YAML):
📄 View api-docs.yaml
🔹 Interactive HTML Documentation:
🌐 View api-docs.html
I have been responsible for adapting the Product and Admin controllers in the web part so that they only work with DTOs and bringing the logic to the corresponding files in service. In addition, I've been responsible for adapting the Review entity to work in the Rest API, including creating ReviewDTO, NewReviewRequestDTO, and BasicReviewDTO, and adapting ReviewRepository and ReviewService for entity-DTO transformations. On the other hand, I have also been in charge of creating the endpoints for the Rest controllers: Category, ProductDetails and AdminUsers. Finally, I have participated in the objective of maintaining security in the API Rest part by setting the permissions of each path
I have been responsible for adapting the files related to the Product entity when developing the REST API. This included creating the corresponding DTOs, adapting the ProductService, and modifying the involved Controllers. I also created the endpoints for these requests in the RestController files. Additionally, I took care of part of the security for the REST API and ensured the correct use of response codes. Lastly, I generated a Postman file to verify the correct implementation of the endpoints and the corresponding documentation (apidoc)
I have been responsible for the user logic in the backend of the application. This included creating the respective DTOs and a mapper, adapting the controllers and services, and creating the REST controllers to manage user operations. I have also configured the application for deployment using Docker, which involved creating the Dockerfile, docker-compose.yml, create_image.sh, and publish_image.sh files
I have worked on adapting some services and repositories for the REST API and creating their corresponding DTOs and mappers. I have also implemented the endpoints for graphs, index, searches, and images. Finally, I have also helped deploy the application in Docker with environment variables
Execution instructions:
- Ensure that Node.js is installed
- Open a terminal and execute the following commands:
npm installcd frontendng serve --proxy-config proxy.conf.json - Set up the database (phase 1) and run the application with SpringBoot
To access the new Angular application, please use the following URLs:
-
Local URL:
https://localhost:8443/new/index -
Deployed URL:
https://appweb14.dawgis.etsii.urjc.es:8443/new/index
https://www.youtube.com/watch?v=_029pgyLAbU
During this phase of the project, I was responsible for migrating the index, category, and profile editing views to Angular components. I configured the backend to generate secure, HttpOnly cookies with SameSite=None to ensure session persistence after page reloads. I updated some Angular HTTP requests to use { withCredentials: true } so cookies are automatically sent. I also implemented the logic to update the user data in localStorage after profile edits. As a result, the application now manages secure sessions, loads dynamic user data, and maintains an updated user state across page navigations
During this phase, I was responsible for developing the TypeScript and HTML components related to the admin-exclusive functionalities for managing products and users, as well as the cart and orders for registered users and the product detail page. Additionally, I collaborated on the security aspect, ensuring proper redirection to the appropriate page based on the error encountered, and handling the storage of the current user
In this part of the project I have been responsible for developing the login and registration screens for users, ensuring their correct functionality. Additionally, I have implemented the order management section for the admin, as well as the functionality to edit the administrator’s profile. I have also contributed by fixing bugs to improve the overall quality of the application
I was responsible for implementing the views for the search functionality and the graphs displayed in the admin panel. Additionally, I handled all tasks related to the deployment of the application, including adapting routes and fixing minor bugs to ensure a smooth and functional user experience