Twitter Clone

The objetive is to replicated the Social Media Twitter with some upgrades for the user experience.

:vhs: Video representation

:scroll:Table of Contents

• Phase 0
  • Team Members
  • Requirements
    • Entities
    • Type of User
    • User Permissions
    • Use Cases
    • Non Functional Requirements
    • Advanced algorithms
• Phase 1
  • Screens
  • Navigation Map
• Phase 2
  • Start-up of the application
    • Sample User
  • DataBase
  • Diagrams
  • Members Participation
• Phase 3
  • API REST documentation
  • Dockerized application execution instructions
  • Documentation for building the docker image
  • Members Participation
• Phase 4
  • Start-up of the application
  • Angular Component Diagrams & Templates
  • Members Participation

---

:hotsprings: Phase 0 - Team formation and features

:hammer: Team Members

Name	Email	Nickname
Sergio de Oro Fernández	s.deoro.2021@alumnos.urjc.es	@keyland71
Laura María Camino Yuste	lm.camino.2020@alumnos.urjc.es	@Camyus027
Antonio José Alanís Bernal	aj.alanis.2020@alumnos.urjc.es	@antonioalanxs
Ikár Martínez de Lizarduy Kostornichenko	iv.martinez.2021@alumnos.urjc.es	@KandV008
Miguel Ángel Sánchez Miranda	ma.sanchezm.2021@alumnos.urjc.es	@MiguelAngelSM

To organize the team, we are using Trello

:bookmark_tabs: Requirements

:house: Entities

• Tweets
• Hashtags
• User
• Notifications

:bust_in_silhouette: Type of User

• Anonymous → User which has not signed up in the application but still has access to a few functionalities.
• Registered → User who has already signed up in the application and has a wide variety of available functionalities.
• Admin → User who has the overall control of the platform, having the strongest set of permissions

:orange_book: User Permissions

User	Tweets	People	Hashtags	Notifications
Anonymous	Read	Read(See their profile)	Read (can search them and read the impressions)	Nothing
Admin	Read, write (their own), detele (every tweet)	Read, delete, write (their own profile)	Read, write	Read
Registered	Read, write (their own), delete (their Own)	Read, write (their own profile)	Read, write	Read

Permissions	Affects to
Images	All registered users can upload images
Graphics	Admin users can consult graphics with the statistics of the web (Number of new registered users)

Complementary Technologies
Mail Sender

:performing_arts: Use Cases

:white_check_mark: User Requirements

Requirements	Anonymous User	Registered User	Admin User
Sign up	:heavy_check_mark:
Log in		:heavy_check_mark:	:heavy_check_mark:
See the preview	:heavy_check_mark:
Search (using filters)	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
See tweet information	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Interact with a tweet (retweet, like and comment)		:heavy_check_mark:	:heavy_check_mark:
Reply to a tweet		:heavy_check_mark:	:heavy_check_mark:
Save a tweet		:heavy_check_mark:	:heavy_check_mark:
Write a tweet		:heavy_check_mark:	:heavy_check_mark:
Delete a tweet		:heavy_check_mark:	:heavy_check_mark:
Visualize recommend users	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Receive notifications		:heavy_check_mark:	:heavy_check_mark:
Receive email notifications	:heavy_check_mark:
Visualize statistics			:heavy_check_mark:
Edit profile		:heavy_check_mark:	:heavy_check_mark:
Visualize profile	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Follow a profile		:heavy_check_mark:	:heavy_check_mark:
Visualize tendencies	:heavy_check_mark:	:heavy_check_mark:	:heavy_check_mark:
Ban users			:heavy_check_mark:
Unbanned users			:heavy_check_mark:
Delete tweets			:heavy_check_mark:
Verificate users			:heavy_check_mark:
Unverificate user			:heavy_check_mark:

:triangular_flag_on_post: Non Functional Requirements

• Must abide by the law (Of each continent/country in which is it used)
• Supports tweets comprising text and pictures
• Generating the timeline should be fast within half a second (at most)
• Systems must be available at all times (scalability and availability)
• Data should be durable
• Security must be ensured at all phases
• The size of a tweet is 240 characters at most

:dart: Advanced algorithms

• Recommended Systems

  • We will create a SQL query to recommend new profiles to our registered users using collaborative filtering techniques.

• Search

  • We will create a strong search algorithm able to adapt to the filters that users select to provide an accurate and fast result.

---

:triangular_ruler: Phase 1 - Layout

:computer: Screens

:airplane: Navigation Map

---

:satellite: Phase 2 - Web with server-generated HTML and AJAX

:black_nib: Start-up of the aplication

:feet: Steps

1. Check Requirements
2. Clone the repository

git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
cd webapp8

3. Configure DataBase
4. Configure IDE
5. Run Application

cd ProjectBackEnd\src\main\java\com\TwitterClone\ProjectBackend
javac ProjectBackendApplication

6. Go to localhost URL
7. Use the default users to navigate or create a new user

DataBase Configuration

• Download MySQL v.8.0.32

Section	Value
Port	3306
User name	Admin
Password	password

• Create a user with name Admin and password "password" with DB admin as user role
• Configure MySQL Server as Windows Service
• Grant full access to the user
• Create a new Schema named twitter in the server using MySQL Workbench

Note: If you have selected to not let the server to run when the system starts you can run the server with Windows R and execute the command "services.msc". In the list you can find MySQL server and run it.

IDE Configuration

• We recommend IntelliJ IDEA but you can use other IDE's
• Install Maven and Spring for your IDE

Enviroment Variable
SPRING_MAIL_PASSWORD=APasswordForTheMail
JWT_SECRET=secret

Requirements

Requirements
MySQL v.8.0.32
JDK 17
Spring Boot 2.7.4
IDE

:closed_lock_with_key: Sample users

User	Username	Password
@admin	admin	*adminpass*
@user	user	*pass*
@antonioalanxs	antonioalanxs	*examplePassword3*
@Keyland71	Keyland71	*examplePassword2*
@ibai	ibai	*ibai*
@Rubiu5	Rubiu5	*rubius*

:card_index: DataBase

Figure 26 - DataBase

:flower_playing_cards: Diagrams

Figure 27 - Class Diagram

:busts_in_silhouette: Members Participation - Phase 2

Sergio De Oro Fernández

• Creator and controller of all notifications, his great creativity has allowed logical and ingenious solutions.

#	Commit		#	File
1º	Fix tweet's buttons visual		1º	NavigationController.java
2º	Create and Delete Like notifications		2º	NotificationController.java
3º	Add create and delete notification system		3º	NotificationService.java
4º	Show all user-type svg		4º	TweetController.java
5º	Add showing notifications		5º	LoadNotificationsAssets.js

Laura María Camino Yuste

• Our security scientist has prepared all the security of our application, together with all the user and session management logic.

#	Commit		#	File
1º	Add Signup Logic		1º	WebSecurityConfiguration.java
2º	Fix Login Bug		2º	UserDetailsService.java
3º	Add verify account through email		3º	SingUpController.java
4º	Add Change Password functionality		4º	UserService.java
5º	Fix CSRF management		5º	ResetPasswordController.java

Antonio José Alanís Bernal

• Main designer artist, he has created the entire visual section of the web application, together with all the logic referring to the profiles of the different users.

#	Commit		#	File
1º	Add AJAX to profile page		1º	Ajax.js
2º	Add AJAX to follow page		2º	NavigationController.java
3º	Add user's tweets to profile		3º	ProfileController.java
4º	Add edit profile logic and refactor template		4º	UserRepository.java
5º	Show user profile		5º	Profile.html

Ikár Vladislav Martínez de Lizarduy Kostornichenko

• Worker of the bridge between the front and the backend of the web application, together with the documentation of our website.

#	Commit		#	File
1º	Conect Front and Back end for trends		1º	InformationManager.java
2º	Add Navigation with Spring		2º	Ajax.js
3º	Add tweet creation		3º	NavigationController.java
4º	Add to be able to see tweets associated with a hashtag		4º	ImageController.java
5º	Fix problem with AJAX		5º	HashtagController.java

Miguel Ángel Sánchez Miranda

• Manager of everything related to the Database, being the one who most dominates this aspect with his great ability to perform queries.

#	Commit		#	File
1º	Data Base migration to MySQL		1º	DatabaseInitializer.java
2º	Add Admin dashboard mustache and statics		2º	TweetRepository.java
3º	Rework DataBase to fix circular references		3º	AdminDashboard.html
4º	Add new queries to Tweet		4º	Tweet.java
5º	Update Hashtag		5º	TweetService.java

---

:whale2: Phase 3 - Add a REST API to the web application and package with Docker

:postbox: API REST documentation

URLs	api-docs.yaml	In Production	For Developers

:calling: Dockerized application execution instructions

1. Clone this repository

   git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
   

2. Go to docker folder

   cd webapp8/docker
   

3. Install Docker
4. Run Docker
5. Execute run_image.sh file

   ./run_image.sh
   

6. Open your favorite Internet browser
7. The application will be at https://localhost:8443 👌

:whale: Documentation for building the docker image

1. Create an account on Dockerhub
2. Clone this repository

   git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
   

3. Go to docker folder

   cd webapp8/docker
   

4. Install Docker
5. Run Docker
6. Connect your account to Docker
7. Execute build_and_push_image.sh file

   ./build_and_push_image.sh accountName/imageName:version
   

:busts_in_silhouette: Members Participation - Phase 3

Sergio De Oro Fernández

• One of those in charge of Dockerizar, has standardized and formatted the documents associated with the practice thanks to his temperance, allowing to have a uniform work.

#	Commit		#	File
1º	Reformat AJAX from notifications and hashtags		1º	DBInitializer.java
2º	Fix followers and followed page		2º	Dockerfile
3º	Fix DBInitializer for Docker		3º	docker-compose.yml
4º	Add docker-compose file		4º	ajax.js
5º	Add Dockerfile		5º	ProfileService.java

Laura María Camino Yuste

• User protector and member of the REST API creation team, her security management has allowed our future clients not to suffer any data leakage.

#	Commit		#	File
1º	Finish Rest Security Configuration		1º	SecurityRestConfig.java
2º	Add UserSignUpRestController		2º	UserSignUpRestController.java
3º	Add SearchRestController		3º	SearchRestController.java
4º	Add AdminDashBoardRestController		4º	AdminDashboardRestController.java
5º	Add ResetPasswordRestController		5º	ResetPasswordRestController.java

Antonio José Alanís Bernal

• Member of the application dockerization team, he has refactored the code to adapt it and allow the permanence of our database.

#	Commit		#	File
1º	Add Dockerfile		1º	DBInitializer.java
2º	Add docker-compose file		2º	Dockerfile
3º	Fix DBInitializer for Docker		3º	docker-compose.yml
4º	Update build_and_push_image.sh		4º	build_and_push.sh
5º	Update README.md with Docker documentation		5º	run_image.sh

Ikár Vladislav Martínez de Lizarduy Kostornichenko

• Phase leader and documenter, and member of the REST API team. The extensive knowledge of him has allowed a calm phase and without unforeseen events.

#	Commit		#	File
1º	Add RestNotificationController		1º	HashtagRestController.java
2º	Add RestHashtagController		2º	ImageRestController.java
3º	Add RestImageController		3º	NotificationRestController.java
4º	Add API REST documentation		4º	UserInformation.java
5º	Add all API REST petitions from PostMan		5º	Twitter's Clone.postman_collection.json

Miguel Ángel Sánchez Miranda

• Database analyst and one of the creators of the Twitter clone REST API, his extensive knowledge in information management has allowed there to be no problems when creating the files that are sent by the API.

#	Commit		#	File
1º	Add Profile Methods for API		1º	TweetRestController.java
2º	Add Post methods to RestTweetController		2º	ProfileRestController.java
3º	Add GET methods to RestTweetController		3º	AdminDashboardRestController.java
4º	Add PUT methods to RestTweetController		4º	Tweet.java
5º	Create JsonViews		5º	TweetController.java

---

:city_sunset: Phase 4 - Implementation of the web with SPA architecture

:factory: Start-up of the application with Angular

:seedling: Technical Requirements

Is Needed
Node.js
Angular

:traffic_light: Steps

Before to execute Angular, is needed to execute the API REST. To do that, is necessary to follow the indication of execution of the backend.

With that configurated, now we can start with Angular:

Zero, you need to download Angular to execute this web application.

npm install -g @angular/cli

First, you need to clone the project and redirect to the ProjectFrontEnd directory.

git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
cd webapp8/ProjectFrontEnd

Second, you need to install all the necessary modules.

npm install

Third, you need to execute angular with the proxy

npm start

:bridge_at_night: Angular component diagrams and templates

:feet: Deployment Steps

1. Connect to the virtual machine using the command:

   ssh -i appWeb-08 [email protected]
   

2. Clone the repository in the virtual machine with the following command:

   git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
   

3. Go to the docker folder inside the repository tha you just clone:

   cd webapp8/docker/
   

4. Execute the following command to run the docker-compose file:

   docker-compose up -d
   

5. The application will be accesible in the following URLs: https://10.100.139.97:8443/new (SPA) https://10.100.139.97:8443 (Mustache)

6. To stop the deployment, run the following command:

   docker-compose down
   

:busts_in_silhouette: Members Participation - Phase 4

Sergio De Oro Fernández

• Notifier par excellence. His art of notifying different users allows no account to be left without knowing the latest news related to it.

#	Commit		#	File
1º	Add Right-Bar component fixed		1º	notification.component.ts
2º	Fix notification component		2º	right-bar.component.ts
3º	Add notification service		3º	notification-list.component.ts
4º	Add notification-list component		4º	notifications.component.ts
5º	Add getRecommendedUsers to API REST		5º	searcher.component.ts

Laura María Camino Yuste

• Manager of everything related to login and user creation. It also handles everything related to the emails that are sent to the different registered accounts.

#	Commit		#	File
1º	Add Login Component and Service		1º	explorer.component.ts
2º	Update search Screen		2º	search.component.ts
3º	Update Explorer Screen		3º	hashtag.component.ts
4º	Add Reset-password Component		4º	ogin.component.ts
5º	Update SignUp component and service		5º	login.service.ts

Antonio José Alanís Bernal

• Web application routing artist. Her extensive knowledge in this field has allowed a pleasant experience when browsing our website.

#	Commit		#	File
1º	Fix Tweet list component error		1º	left-bar.component.ts
2º	Refactor		2º	bookmarks.component.ts
3º	Refactor some components		3º	router.ts
4º	Upgrade Left bar component		4º	app.component.ts
5º	Fix bars components		5º	index.component.ts

Ikár Vladislav Martínez de Lizarduy Kostornichenko

• Illustrator of the profiles, has outlined the User entity and has allowed the connection between all Twitter users. He has also managed user editing.

#	Commit		#	File
1º	Add Profile Component		1º	dashboard.component.ts
2º	Add statistics to Dashboard Component		2º	profile.component.ts
3º	Add Dashboard Component		3º	edit-profile.component.ts
4º	Add edit profile component		4º	theme-switcher.component.ts
5º	Add followers/followed users screen		5º	user.component.ts

Miguel Ángel Sánchez Miranda

• A master in everything related to the Tweet entity, he has created the entire Tweet publication system together with the entire Tweet interaction system, from comments to likes and retweets.

#	Commit		#	File
1º	Create write-tweet page		1º	tweet-list.component.ts
2º	Update tweet-list component		2º	tweet-service.ts
3º	Make interactions work in tweet component		3º	tweet.component.ts
4º	4 Add show-tweet page		4º	write-tweet.component.ts
5º	Create tweet service		5º	show-tweet.component.ts

---