# PA: Product and Presentation
LINK UP, a web application to link together UP students.

## A9: Product
LINK UP is the result of the implementation of the information system by students of the L.EIC course using many tools, such as PHP with the Laravel Framework for dynamic pages and PostgreSQL for database manipulation. Additionally, technologies like Javascript and AJAX were used to enhance the user experience.

Our innovative social network designed for the University of Porto community aims to revolutionize the university experience by fostering a strong sense of community among students and staff. The main goal is to create a unified hub that not only enhances social interactions but also connects students and teachers within the University of Porto. With its user-centric design, intuitive features, and adaptive interface, LINK UP aims to become an integral part of campus life, offering a seamless blend of social and professional networking for this community.

This artifact contains information related to the development of the product.

### 1. Installation
You can find the final version of the source code [here](https://git.fe.up.pt/lbaw/lbaw2324/lbaw2351/-/tags).

To launch the Docker image available in GitLab, use the following command:

docker run -it -p 8000:80 -e DB_DATABASE="lbaw2351" -e DB_USERNAME="lbaw2351" -e DB_PASSWORD="RuUkOYNh"

### 2. Usage

The final product is available online at https://lbaw2351.lbaw.fe.up.pt

#### 2.1. Administration Credentials
Administration URL:
- Login: https://lbaw2351.lbaw.fe.up.pt/login

The administration login is in the same URL as logging in to a normal user account.

| Email | Password |
|-------|----------|
|[e-mail] | 12345678 |

#### 2.2. User Credentials
We provide 3 example accounts so that you can simulate interactions between users in real-time. You can test with them, or simply create a new account.

| Username | Password |
|-------|----------|
|miguelalves | 12345678 |
|inespinto | 12345678 |
|josemartins | 12345678 |

### 3. Application Help
We implemented help features across the website to guide the user.
An example from the user settings page:


We also present two static pages that may be helpful to the user: the 'About us' page and the 'Features' page.

On the 'About Us' page the user can learn about the product vision and the creators of the platform. There, they can also find support and feedback contacts.


In the 'Features' page the user can see a detailed list of all the features in the platform. Here are some of them:


Additionally, confirmation messages prevent unwanted actions from the user caused by accidental clicks.

Here is an example for leaving a group:



Finally, feedback messages inform the user that his actions were successful:



### 4. Input Validation

For back-end input validation, we used `Illuminate\Http\Request` to access the `validate` function. This helps validate inputs from the user, for example when editing posts, users, or group forms, and log in or register forms.

For front-end input validation, we made use of the HTML `required` attribute.
The images below exemplify the use of this function. The first example corresponds to an user trying to post an empty comment, while the second example portrays an user removing all the content from their post.
Finally, the third example appears when editing a profile where the name was left empty.




Besides, we also enforce that both email and password are filled and the inputs match our expectations (the password shall have at least 8 characters and the email should be a valid email address).



### 5. Check Accessibility and Usability
In this section, we present the results of the accessibility and usability tests using the "Sapo" checklists.

- Accessibility checklist: 15/18
- Usability checklist: 23/28

Note that minification is automatically done when running `npm run build`, as required by Tailwind CSS.

### 6. HTML & CSS Validation
#### 6.1 HTML Validation

Here, we present HTML Validations of the most important pages:

- Home page


- Profile Page


- Post page


The only presented error is the attribute `src` which is not present in some `img` elements.
We opted not to introduce this attribute, since these images are only used as preview for uploaded images and do not correspond to images provided by our website.

#### 6.2 CSS Validation

The CSS report can be consulted [here](TODO EMPTY LINK).

When looking at the report, some errors can be observed.
However, all of those stem from the use of Tailwind CSS or `npm run build`.
Therefore, they are independent from us as they were not manually produced by our team.

### 7. Revisions to the Project

Many corrections were made to the project since the first stage.
The following subsections group them into categories and enumerate them.

#### 7.1 User Stories
We added a few user stories that we believe are positive for the product. These user stories are included in the actor "Authenticated User".

|Identifier | Name|Priority|Description|
|:-:|:-:|:-:|:-:|
| US 243 | Feedback messages | medium | As an Authenticated user, I want to receive short feedback messages to know that my actions succeeded or not. |
| US 244 | Manage follow request notifications | low |As an Authenticated user, I want to manage my follow request notifications, so that I can easily accept or reject follow requests |
| US 245 | Change group ownership | low | As an Authenticated user, I want to transfer ownership of a group I own, so that I can relinquish my ownership role. |
| US 246 | View friends and group suggestions | low | As an Authenticated user, I want to view suggestions of friends and groups, so that I can easily discover and connect with new contacts and join relevant groups based on my interests.|
| US 247 | Real-time notifications | low | As an Authenticated user, I want to receive real-time notifications, so that I can interact with my friends in real-time. |

#### 7.2 Database

##### 7.2.1 Schema
In our database, we also felt the need to alter the schema to better fit our application. For that, the following modifications were applied:

- Altered table `admin`: removed unnecessary attributes `name` and `id_created_by`.
- Altered table `users`: removed unnecessary attribute `photo`, renamed `description` to `bio`, and added some additional attributes like `faculty`, `course`, `is_banned`, `is_deleted`, and `remember_token`. This last attribute (`remember_token`) was needed for Laravel's "Remember Me" functionality.
- Altered table `follows`: removed `since` attribute.
- Altered table `groups`: removed unnecessary attribute `photo`.
- Removed unused tables `theme`, `group_theme`, and `tag_notification`.
- Added an `id` attribute (not as the primary key) in the tables that didn't have an id, so that Laravel Eloquent ORM to be able to manage (update/delete) tuples.

##### 7.2.2 Seeding

We created a Python script (which can be found in the Annex section) to produce a decently sized dataset to work with, while also making the data realistic.
We wrote some names for fictional people and created fictional groups. We then simulate follows and follow requests. We also generated, with the help of ChatGPT and GitHub Copilot, a large group of generic posts and generic comments.
After this we simulate posting, commenting, and likes.
The notifications are automatically added by the triggers.

##### 7.2.3 Triggers

- Removed trigger `TRIGGER03` regarding tag notifications, since these were removed from the project's final version;
- Created a trigger `unlike_trigger` to deal with unlike events (the removal of a like from a post or comment by the user);
- Created a trigger `check_user_can_insert_post_on_group_trigger` to verify if the user can insert a post on a group. It ensures that users that do not belong to the group cannot post on it;
- Renamed `comment_trigger` (`TRIGGER02`) to `comment_notification_trigger`, to avoid confusion with another newly created trigger (`comment_trigger`);
- Created a trigger `comment_trigger` to ensure that comments belong to the same group as the commented post;
- Create a trigger `follow_request_trigger` to check that the user is not trying to follow someone that he is already following.

##### 7.2.4 Full-text search

###### 7.2.4.1 User FTS (IDX 11)

We fixed a problem where the `tsvectors` would be `null` in case the user had an empty (`null`) description.

###### 7.2.4.2 Group FTS (IDX 12)

Since we removed the `group_theme` and `theme` tables, we also had to adjust the group full-text search, which previously made use of those tables.
This was adjusted to only consider the group name and description (still with different weights).

### 8. Implementation Details

In this section, we showcase some of the implementation details for our project, specifically the libraries we used and the state of each user story.

#### 8.1. Libraries Used

We used several libraries for our project. The complete list is presented below.

- [Tailwind CSS](https://tailwindcss.com)
- streamlined CSS development through HTML classes
- [FontAwesome](https://fontawesome.com)
- a collection of icons to enhance visual elements
- [SweetAlert2](https://sweetalert2.github.io)
- improved alert and popup box functionality, enhancing user feedback
- [CropperJS](https://fengyuanchen.github.io/cropperjs/)
- client-side image cropping capabilities
- [intervention/image](https://image.intervention.io/v3)
- server-side image resizing and cropping
- [Pusher](https://pusher.com)
- implemented for real-time notification functionality
- [Mailtrap.io](https://mailtrap.io)
- utilized for sending emails, providing a reliable email testing and debugging environment

All of these were authorized in the discussion forum.

Note: `CropperJS` is missing from the overall list, but it was accepted on the [forum](https://moodle2324.up.pt/mod/forum/discuss.php?d=4908#p9347).

#### 8.2. User Stories

These are all the user stories identified for the project in the A2, including new ones raised during the development of later artifacts. All high and medium-priority user stories were implemented, as well as some low-priority ones.

Here, we also identify the team members who were involved in the development of each user story, specifying the module where it belongs.

The modules were specified in the A7 artifact [Web resources specification](https://git.fe.up.pt/lbaw/lbaw2324/lbaw2351/-/wikis/eap). They are also presented here:
- M01: Authentication and Individual profile
- M02: Groups and group profiles
- M03: Posts
- M04: Notifications
- M05: Search
- M06: User administration and static pages

The user story numbers are aligned with what we previously identified in A2, along with the newly identified requirements.

| US Identifier | Name | Module | Priority | Team Members | State |
|---------------|------|--------|----------|--------------|-------|
| US 001 | Sign-in to the system | M01 | high | **Duarte**, Marco | 100% |
| US 002 | Sign-up to the system | M01 | high | **Duarte**, Marco | 100% |
| US 101 | View public timeline | M03 | high | **Marco** | 100% |
| US 102 | View public profiles | M01 | high | **Domingos**, Duarte | 100% |
| US 200 | Log-out | M01 | high | **Duarte**, Marco |100%|
| US 201 | Edit user profile | M01 | high | **Duarte**, Domingos |100%|
| US 202 | View Personalized timeline| M03 | high | **Marco**, Domingos | 100% |
| US 204 | Search for posts | M05 | high | **Félix** |100%|
| US 206 | Create a post | M03 | high | **Félix**| 100%|
| US 213 | Comment on posts | M03 | high | **Félix** | 100% |
| US 219 | Edit posts | M03 | high | **Félix** | 100% |
| US 220 | Delete posts | M03 | high | **Félix** | 100% |
| US 221 | Edit comments | M03 | high | **Félix** | 100% |
| US 222 | Delete comments | M03 | high | **Félix** | 100% |
| US 301 | Manage user accounts | M06 | high | **Duarte** | 100% |
| US 302 | Create admin accounts | M06 | high | **Duarte** | 100% |
| US 306 | View all users| M06 | high | **Duarte**, Félix | 100% |
| US 307 | View a log of all recent posts| M06 | high | **Duarte**, Félix | 100%|
| US 207 | Search by filters | M05 | medium | **Félix**, Marco|100%|
| US 242 | Search for content | M05 | medium | **Félix**|100%|
| US 208 | Send follow requests | M04 | medium | **Félix**|100%|
| US 209 | Manage received follow requests| M04 | medium | **Félix**, Marco |100%|
| US 210 | Manage and view followers list | M04 | medium | **Félix**|100%|
| US 211 | View Personal Notifications | M04 | medium | **Marco** |100%|
| US 212 | Manage and view following list| M01 | medium | **Félix**|100%|
| US 214 | Like posts | M03 | medium | **Domingos**, Marco |100%|
| US 215 | Like comments | M03 | medium | **Domingos**, Marco |100%|
| US 216 | Create a group | M02 | medium | **Duarte** |100%|
| US 217 | Manage group invitations | M02 | medium | **Marco** |100%|
| US 218 | Delete a group | M02 | medium | **Marco** |100%|
| US 223 | Post on group | M02 | medium | **Félix** |100%|
| US 224 | Leave a group | M02 | medium | **Marco** |100%|
| US 225 | View group information| M02 | medium | **Marco** |100%|
| US 226 | Edit group information| M02 | medium | **Marco** |100%|
| US 228 | Remove group member| M02 | medium | **Marco** |100%|
| US 229 | Invite to group| M02 | medium | **Domingos**, Felix |100%|
| US 227 | Recover password | M01 | medium | **Duarte** |100%|
| US 230 | Delete account| M01 | medium | **Duarte** |100%|
| US 231 | Update profile picture| M01 | medium | **Félix** |100%|
| US 241 | Interact with personal notifications| M04 | medium | **Marco** |100%|
| US 303 | Ban and Unban accounts | M06 | medium | **Duarte** | 100% |
| US 304 | Delete user account | M06 | medium | **Duarte** | 100% |
| US 305 | Search for all users/posts/comments/groups| M06 | medium | **Félix** | 100% |
| US 104 | See about page | M06 | medium | **Domingos**, Duarte | 100% |
| US 105 | View a list of the website's main features| M06 | medium|**Duarte**|100%|
| US 106 | View contacts | M06| medium | **Duarte**, Domingos |100%|
| US 232 | Remove post from owned group | M02 | low | **Félix** |100%|
| US 234 | Manage group join requests| M02 | low | **Marco** |100%|
| US 236 | View another account's feed| M01 | low | **Domingos** |100%|
| US 238 | Request to join public group | M02 | low | **Marco** | 100%|
| US 240 | Manage posts visilbility| M03 | low | **Domingos**, Félix | 100%|
| US 243 | Feedback messages | No specific module | medium | **Marco** | 100% |
| US 244 | Manage follow request notifications | M04 | low | **Marco** | 100%|
| US 245 | Change group ownership | M02 | low | **Duarte** | 100%|
| US 246 | View friends and group suggestions | M02 | low | **Marco** | 100%|
| US 247 | Real-time notifications | M04 | low | **Marco**, Félix | 100% |
| US 235 | Appeal for unban | M01 | low | **Duarte** | 50% |
| US 003 | OAuth API Sign up | M01 | low | | 0% |
| US 004 | OAuth API Sign up | M01 | low | | 0% |
| US 233 | Change group visibility | M02 | low | | 0%|
| US 237 | Tag accounts in post| M03 | low | | 0%|
| US 239 | Ordering search results| M05 | low | | 0%|
| US 308 | Reports section | M06 | low | |0%|
| US 309 | Verify company accounts | M06 | low ||0%|

---

## A10: Presentation

This artifact corresponds to the presentation of the product. It contains a brief product presentation, along with the product URL, as well as a link to the video presentation.

### 1. Product presentation

Link UP is the ultimate social media for the University of Porto's community. This app is meant for students to interact with each other and share their thoughts and ideas. Among many functionalities, it allows users to create posts, comment on them, and create groups for specific purposes.

With distinct "for you" and "following" feeds, users seamlessly engage with tailored content. The intuitive search feature expedites content discovery, while profile management and notifications enhance user control and engagement.

You can find our product here: https://lbaw2351.lbaw.fe.up.pt

### 2. Video presentation

Here is a screenshot of the video presentation:

And the complete video can be found [here](https://youtu.be/ofJ3dSYnG4Q)


## Revision history

Changes made to the first submission:
1. First release on 21/12/2023

***
GROUP2351, 21/12/2023

* Domingos Santos, [[e-mail]](mailto:[e-mail])
* Duarte Gonçalves, [[e-mail]](mailto:[e-mail])
* Félix Martins, [[e-mail]](mailto:[e-mail]) (Editor)
* Marco Vilas Boas, [[e-mail]](mailto:[e-mail])