Twitter Clone
The objetive is to replicated the Social Media Twitter with some upgrades for the user experience.
📼 Video representation
📜 Table of Contents
♨️ Phase 0 - Team formation and features
🔨 Team Members
| Name | 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
📑 Requirements
🏠 Entities
- Tweets
- Hashtags
- User
- Notifications
👤 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
📙 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 |
🎭 Use Cases
Figure 1 - Sign Up and Log In
Figure 2 - Admin permissions
Figure 3 - General permissions
Figure 4 - Registered permissions
Figure 5 - User Actions
✅ User Requirements
| Requirements | Anonymous User | Registered User | Admin User |
|---|---|---|---|
| Sign up | |||
| Log in | |||
| See the preview | |||
| Search (using filters) | ✔️ | ✔️ | |
| See tweet information | ✔️ | ||
| Interact with a tweet (retweet, like and comment) | ✔️ | ||
| Reply to a tweet | |||
| Save a tweet | |||
| Write a tweet | ✔️ | ||
| Delete a tweet | |||
| Visualize recommend users | |||
| Receive notifications | ✔️ | ||
| Receive email notifications | |||
| Visualize statistics | |||
| Edit profile | |||
| Visualize profile | ✔️ | ||
| Follow a profile | ✔️ | ✔️ | |
| Visualize tendencies | ✔️ | ||
| Ban users | |||
| Unbanned users | |||
| Delete tweets | |||
| Verificate users | ✔️ | ||
| Unverificate user |
🚩 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
🎯 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.
📐 Phase 1 - Layout
💻 Screens
Figure 6 - index.html
Figure 7 - login.html
Figure 8 - signup.html
Figure 9 - home.html
Figure 10 - explore.html
Figure 11 - explore-anonymous.html
Figure 12 - explore-anonymous-tweets.html
Figure 13 - bookmarks.html
Figure 14 - notifications.html
Figure 15 - profile.html
Figure 16 - edit-profile.html
Figure 17 - dashboard.html
Figure 18 - stats.html
Figure 19 - write-tweet.html
Figure 20 - reply-tweet.html
Figure 21 - error.html
✈️ Navigation Map
| Color | User Movement |
|---|---|
| All users | |
| 🟢 | Registered Users |
| Admin Users |
Main Navigation Map
Figure 22 - Navigation Map 1
Navigation Map of the Anonymous User
Figure 23 - Navigation Map 2
Navigation Map of the Admin User
Figure 24 - Navigation Map 3
New user registration and password recovery Navigation Map
Figure 25 - Navigation Map 4
📡 Phase 2 - Web with server-generated HTML and AJAX
✒️ Start-up of the aplication
🐾 Steps
- Check Requirements
- Clone the repository
git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
cd webapp8
cd ProjectBackEnd\src\main\java\com\TwitterClone\ProjectBackend
javac ProjectBackendApplication
- Go to localhost URL
- 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 |
🔐 Sample users
| User | Username | Password |
|---|---|---|
| @admin | admin | *adminpass* |
| @user | user | *pass* |
| @antonioalanxs | antonioalanxs | *examplePassword3* |
| @Keyland71 | Keyland71 | *examplePassword2* |
| @ibai | ibai | *ibai* |
| @Rubiu5 | Rubiu5 | *rubius* |
📇 DataBase
Figure 26 - DataBase
🎴 Diagrams
Figure 27 - Class Diagram
👥 Members Participation - Phase 2
Sergio De Oro Fernández
- Creator and controller of all notifications, his great creativity has allowed logical and ingenious solutions.
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.
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.
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.
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.
🐋 Phase 3 - Add a REST API to the web application and package with Docker
📮 API REST documentation
| URLs | api-docs.yaml | In Production | For Developers |
|---|
📲 Dockerized application execution instructions
- Clone this repository
git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
- Go to docker folder
cd webapp8/docker
- Install Docker
- Run Docker
- Execute run_image.sh file
./run_image.sh
- Open your favorite Internet browser
- The application will be at https://localhost:8443
👌
🐳 Documentation for building the docker image
- Create an account on Dockerhub
- Clone this repository
git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
- Go to docker folder
cd webapp8/docker
- Install Docker
- Run Docker
- Connect your account to Docker
- Execute build_and_push_image.sh file
./build_and_push_image.sh accountName/imageName:version
👥 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.
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.
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.
🌆 Phase 4 - Implementation of the web with SPA architecture
🏭 Start-up of the application with Angular
🌱 Technical Requirements
| Is Needed |
|---|
| Node.js |
| Angular |
🚥 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
🌉 Angular component diagrams and templates
🐾 Deployment Steps
- Connect to the virtual machine using the command:
ssh -i appWeb-08 vmuser@10.100.139.97
- Clone the repository in the virtual machine with the following command:
git clone https://github.com/CodeURJC-DAW-2022-23/webapp8.git
- Go to the docker folder inside the repository tha you just clone:
cd webapp8/docker/
- Execute the following command to run the docker-compose file:
docker-compose up -d
-
The application will be accesible in the following URLs: https://10.100.139.97:8443/new (SPA) https://10.100.139.97:8443 (Mustache)
-
To stop the deployment, run the following command:
docker-compose down
👥 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.
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.
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.
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.