Skip to content

CodeURJC-DAW-2023-24/webapp07

BranchesTags

Repository files navigation

🌱 SeedVentures

Seed Change, Grow Dreams: Your Investment, Their Revolution.

Phase 0 · Phase 1 · Phase 2 · Phase 3 · Phase 4

💡 Phase 0

🤓 Team members

Name Email Github
Marcos Hernangil Prats [email protected] mhernangilp
Pablo Requejo Postlbauer [email protected] pablorpost
Diego Isaac Fernández Conde [email protected] Diego-G19
Fernando Alonso Calderon [email protected] fernandoalonsoo
Miguel Ángel García Martínez [email protected] magarciam2003

📋 Team coordination

To coordinate the team, we will use trello.

🎯 Main aspects

👤 Entities

  • User
  • Investment
  • Project
  • Comment
  • Review

👥 Relations

  • A user makes an investment into a project
  • A user leaves a comment on a project

🔐 User permissions

  • User: Can invest in projects or upload/delete theirs. They can post comments on any project available.
  • Guest: Can log in, sign up or see the projects available to invest.
  • Admin: Unlimited access, is the owner of all the entities.

🖼️ Images

  • Project pictures: A gallery of pictures which allows the Project Owner to show information about his/her project.
  • User profile picture: A picture which identifies each user.

📊 Graphics

  • Progress bar: Monitorize the status of the objective.
  • Pie chart: Shows the percentage of money invested by each investor.

🤖 Complementary technology

  • Email: Email notifications for users.
  • PDF: Generates a PDF summarizing the user´s transactions.

⚙️ Advanced algorithm or query

  • Recommendation: Users will be recommended projects which they are likely to donate to. This will be made using a greedy algorithm, that allows a 1% less likeliness between users' previous donations in each iteration, until a sufficient numbers of users are encountered to make the suggestions.

📏 Phase 1

📸 Screenshots

screenshot

Main page: On this screen, you can see the options to log in and register, as well as access information about the page such as collaborators, the team, contact, and others.

screenshot

Trending projects: By scrolling the main page, the user will see the most popular projects at the time, which can be opened to see more information about it. If the user is logged, the page will show personalised reccomendations.

screenshot

Sign in: This page allows new users to create an account. In order to create it, the user will have to fill in all the neccessary information.

screenshot

Log in: This page will allow both users and administrators to log in in order to access the web's functionalities. If the user doesn´t have an account, he will be able to create one.

screenshot

Project: This page shows more information about a project, besides its graphics and statistics.

screenshot

Recommended projects: When the user is logged in the projects shown according to users preferences.

screenshot

My projects: This page allows logged users to see their own projects.

screenshot

Upload project: This page allows a logged user to upload a new project, filling in the different information needed for the project, as well as the image gallery.

screenshot

Edit project: This page allows a logged user to edit their projects.

screenshot

Profile photo: By clicking in the photo, logged users can both see and edit their personal information and log out, which would send them back to the guest page.

screenshot

Edit profile: This page shows a logged user his/her account information in order to change their information.

screenshot

Ranking: This page shows a ranking of the top investors and allso the current top projects.

screenshot

screenshot

Error page: This pages show an error in case something goes wrong.

🚢 Navigation diagram

screenshot

🛠️ Phase 2

⚙️ Execution instructions

You'll have to download the code from the repository and unzip it, open the code with an ide preferably IntelliJ Idea, we used the Ultimate version 2023.3.4
The following software is required to run the application:

  • Java 21.0.2

Installing Java 21

  • Linux:
    Write in the terminal:
sudo apt install openjdk-21
  • Windows: Go to the Oracle website and download the installer jdk-21_windows-x64_bin, then follow the instructions.
  • Apache Maven 4.0.0
  • Linux:

Go to the Apache Maven website and download the binary tar.gz file apache-maven-4.0.0-alpha-12-src.tar.gz. Then open the terminal and go to the folder where the file was downloaded and write the following command:

sudo tar xf apache-maven-*.tar.gz -C /opt
sudo ln -s /opt/apache-maven-3.8.4 /opt/maven
sudo nano /etc/profile.d/maven.sh

Then write in the file:

export JAVA_HOME=/usr/lib/jvm/default-java
export M2_HOME=/opt/maven
export MAVEN_HOME=/opt/maven
export PATH=${M2_HOME}/bin:${PATH}
  • Windows:
    Go to the Apache Maven website and download the binary zip file apache-maven-4.0.0-alpha-12-bin.zip, then follow the instructions.
  • MySQL Server 8.0
  • Linux: Write in the terminal:
sudo apt install mysql-server=8.0.36
  • Windows: Go to the MySQL website and download the installer in the linked associated with the text "MySQL Installer for Windows", then follow the instructions, it's important to select full installation if you want workbench as well.

In the installation process, it's important to select the following options:

  • Port: 3306
  • User: root
  • Password: sqlsql

You'll have to create a database in MySQL with the following command in the MySQL terminal or in a MySQL client, like MySQL Workbench:

CREATE SCHEMA seedventures;

The run the main class src/main/java/com/daw/webapp07/Webapp07Application.java
After that you should be able to use the web at https://https://localhost:8443/

🛢️ Database diagram

screenshot

📊 Classes and templates diagram

screenshot

👥 Participation

Pablo

Tasks:

  • I created mustache templates from the previous phase HTMLs.
  • I made a recomendation algorithm in Java.
  • I made exactly the same recomendation algorithm but now in SQL.
  • I assisted in providing examples for the data initializer. And used them to test the database and algorithms.
  • I helped in the creation of various controllers.
  • I converted all the models to JPA entities.
  • I contributed to resolving errors with pagination and bbdd.
  • I changed from h2 to SQL, and helped my teammates in doing so in their devices.

Top 5 commits:

Top 5 files:

Diego

Tasks:

  • I created mustache templates from the previous phase HTMLs.
  • I developed the Image class along with its functionality, enabling the management of multiple photos in the database. Additionally, I implemented the necessary controllers to display photos from the database.
  • I implemented web security measures, including the functionality for the login and signup pages.
  • I designed a controller that runs universally, inserting data required in the header for each controller.
  • I assisted in providing examples for the data initializer.
  • I introduced the functionality for editing profiles, as well as the ability to change the template style.
  • I contributed to resolving errors related to photos during the editing and creation of projects. Moreover, I revamped the associated templates.
  • I integrated an email service, allowing our application to send emails to users when signing up or when their project reaches its goal.
  • I developed controllers to handle general errors and created templates for login errors and general errors.
  • I optimized the codebase by removing redundant code and templates. This involved redesigning some functions and templates to perform differently when necessary while retaining shared functionality.

Top 5 commits:

Top 5 files:

Fernando

Tasks:

  • I developed the Pageable in order to load more projects, implementing depending on which type of user is trying to load more.
  • If a logged user loads more projects, it will see some more recommeded projects.
  • I created mustache new templates for errors and previous phase HTMLs.
  • I created a responsive grid using a portfolio template that it also varies depending of the user.
  • I designed a controller which makes requests to the service to get some projects from repository.
  • I assisted in providing examples for the data initializer.
  • I designed ajax functions and organised the mustache functions.

Top 5 commits:

Top 5 files:

Miguel Angel

Tasks:

  • I created some mustache templates from the previous phase HTMLs.
  • I created example projects.
  • I made the create project functionality and security.
  • I made the donations functionality and security.
  • I made the comments entity, functionality and security.
  • I made the delete projects functionality and security.
  • I participated in solving some errors regarding the login, edit project, and general security access.

Top 5 commits:

Top 5 files:

Marcos Hernangil

Tasks:

  • I made My Projects section, where users can see their projects.
  • I made the functionality to edit projects.
  • I made the pdf conversion functionality where users can download the stats from their projects into .pdf format.
  • I made the ranking part.
  • I created some mustache templates from the previous phase HTMLs and new ones.
  • I added new investments and projects in database for testing graphics.
  • Some minor adjustments like project deletion protection.

Top 5 commits:

Top 5 files:

🐳 Phase 3

📝 Documentation

📡 API REST

All the API documentation is located in the 'api-docs' folder, with the following being the most important files:

Additionally, you can update the API documentation using this command:

mvn verify

🔧 Execution instructions for the dockerized app

1.- In order to execute the application, you will need to install docker

2.- Then, you will have to clone this repository:

 git clone https://github.com/CodeURJC-DAW-2023-24/webapp07

3.- Then, run docker.

4.- Finally, open a git bash (Use git bash in case that you're using windows, the terminal will do the work in linux) in the folder where you cloned the repository.

5.- Then change directory:

 cd docker/

6.- Then execute the following command:

 docker-compose up -d

5.- Lasltly, open https://localhost:8443/

⚙️ Intructions to deploy the app in the Virtual Machine

1.- In order to access the VM, you have to be either connected to eduroam or to the URJC's VPN. To access the VPN, you must download the paloalto VPN. Then connect to vpn.urjc.es

2.- Once you are connected, you have to download the .key file. You'll perhaps have to change the key's permissions: If you're using linux, executing chmod 600 will be enough. In case you're using windows, you'll have to set your user as the owner of the .key file.

3.- Then, you have to open a git bash in the key's directory and write the following command

 ssh -i prAppWeb07.key [email protected]

4.- Then, you will have to clone this repository:

 git clone https://github.com/CodeURJC-DAW-2023-24/webapp07

5.- And execute the followiing command to change to the app's directory:

 cd webapp07/docker

6.- Finally, deploy the app:

 docker-compose up -d

🛠️ Docker Image Construction

For building and publishing the docker image follow these steps:

1.- Install docker if not installed

2.- Run docker

3.- Clone application repository:

 git clone https://github.com/CodeURJC-DAW-2023-24/webapp07

4.- Move to de docker directory:

 cd webapp07/docker

5.- Give respective permissions:

 chmod +x create_image.sh

6.- Execute the script:

./create_image.sh

🐳 Docker Image

You can access the docker image of our app at Dockerhub at this link:

https://hub.docker.com/r/rphydra/seedventures

This image contains the latest stable version, ready for deployment.

📡 Virtual Machine Application URL and Example Users

The application can be accessed at the following URL: https://10.100.139.153:8443/

👤 Example Users

Admin

  • username: admin
  • password: 1234

User1

  • username: User1
  • password: 1234

User2

  • username: User2
  • password: 1234

User3

  • username: User3
  • password: 1234

User4

  • username: User4
  • password: 1234

MarkiIndustries

  • username: MarkiIndustries
  • password: 1234

EcoWorld

  • username: EcoWorld
  • password: 1234

proglearn

  • username: proglearn
  • password: 1234

Trustbusiness

  • username: Trustbusiness
  • password: 1234

Bewater

  • username: Bewater
  • password: 1234

MortezLab

  • username: MortezLab
  • password: 1234

PixelStudios

  • username: PixelStudios
  • password: 1234

MindCare

  • username: MindCare
  • password: 1234

LingoTech

  • username: LingoTech
  • password: 1234

GreenHarbor

  • username: Trustbusiness
  • password: 1234

CosmicTech

  • username: CosmicTech
  • password: 1234

👥 Participation

Marcos

Tasks:

  • I created some DTOs needed for the API's requests
  • I implemented the GET functions in the Rest controllers
  • I documented the Rest controllers using Swagger
  • I helped with the docker images problems
  • I changed some controllers to service so it could have the Rest functionality
  • I implemented de ranking Rest functionality
  • I created different Postman requests
  • I wrote de instructions for building and publishing the docker image

Top 5 commits:

Top 5 files:

Pablo

Tasks:

  • I fixed the priblem when trying to delete projects with relations
  • I implemented the Project CUD Rest Functions
  • I implemented the Project Graphic Get Rest Functions
  • I implemented the Inversion CR Rest Functions
  • I created the Dockerfile
  • I created the DockerCompose
  • I solved multiple problems that arised during the dockerization
  • I deployed the app in the VM via ssh for the first time
  • I created and push de dockerhub image
  • I solved problems created by hardcoded references to localhost

Top 5 commits:

Top 5 files:

Diego

Tasks:

  • I created some DTOs needed to show the elements on the API's requests
  • I implemented the Project CRUD Rest functions
  • I implemented the Images CRUD Rest functions
  • I implemented the Comments CRUD Rest functions
  • I inserted the option of getting elements such us projects or comments using Pageable
  • I helped fixing errors related to Images once launched
  • I created some Postman requests
  • I implemented the security of the Rest Controllers

Top 5 commits:

Top 5 files:

Fernando

Tasks:

  • I implemented pageable in comments and Rest Controller
  • I documentated the Rest controllers using Swagger
  • I helped with docker images problems
  • I fixed some projects not working in the database
  • I created some Postman requests
  • I generated dynamically the api-docs documentation

Top 5 commits:

Top 5 files:

Miguel Angel

Tasks:

  • I encapsulated the access to the different repositories through the services
  • I implemented the User CRUD Rest functions
  • I implemented the User Images Rest functions
  • I made the Rest POST methods return a location instead of an object
  • I helped fixing the different problems that occured after dockerizing the app, such as the ranking page or fixing the image problems
  • I did different Postman requests and then finished the collection.
  • I then wrote the different instructions to execute the webapp.

Top 5 commits:

Top 5 files:

🅰️ Phase 4

⚙️ Environment setup

To compile and run the SPA , follow these steps to set up your development environment:

  1. Install Node.js and npm:

    • Download and install Node.js from its official website.
    • npm (Node Package Manager) will be installed alongside Node.js.

  2. Install Angular CLI:

    • Open a terminal or command prompt.
    • Execute the following command to install Angular CLI globally: 
      npm install -g @angular/cli

  3. Verify the installation:

    • To ensure that Angular CLI was installed correctly, run the following command in the terminal: 
      ng --version
    • You should see the installed version of Angular CLI.

  4. Clone this repository:

    • Clone the repository. 
      git clone https://github.com/CodeURJC-DAW-2023-24/webapp07

  5. In order to execute the application, you will need to install docker

  6. Then, run docker.

  7. Finally, open a git bash (Use git bash in case that you're using windows, the terminal will do the work in linux) in the folder where you cloned the repository.

  8. Then change directory:

    cd docker/

  9. Then execute the following command:

     docker-compose up -d

  10. Lasltly, open https://localhost:8443/new

📊 Diagram

screenshot

👥 Participation

Pablo

Tasks:

  • I implemented create-project component and functionality
  • I implemented edit-project component and functionality
  • I implemented the pie chart using chart.js and typescrypt instead of javascript
  • I implemented the area chart using chart.js and typescrypt instead of javascript
  • I created functions in project service
  • I added angular to dockerfile and dockercompose
  • I created the SPAcontroller
  • I wrote in the readme the instructions to deploy and access the aplication
  • I uploaded the docker image

Top 5 commits:

Top 5 files:

Diego

Tasks:

  • I fixed the DTOs to return the information lost of the Pageable (actual page, size...)
  • I created the myProjects section
  • I implemented the functionallity of deleting and posting comments
  • I implemented the error management (error page and login error page)
  • I created and implemented the create/edit project

Top 5 commits:

Top 5 files:

Marcos

Tasks:

  • I set up the angular proyect and configured all included the proxy for CORS for development.
  • I implemented the login functionality.
  • I implemented the logout functionality.
  • I added header, footer and user detection functionality.
  • I implemented editProfile functionality.
  • I implemented the managing of privileges.

Top 5 commits:

Top 5 files:

Fernando

Tasks:

  • I implemented inner-page component and functionality
  • I implemented project-detais component and some of its functionality
  • I implemented pageable in projects
  • I implemented pageable in comments
  • I implemented download PDF
  • I implemented many services

Top 5 commits:

Top 5 files:

Miguel Ángel

Tasks:

  • I implemented signup component and functionality
  • I implemented ranking component and functionality
  • I implemented donation functionality
  • I implemented the picture carousel inside project details
  • I implemented the spinner loading sign
  • I fixed some problems we faced when reloading the page
  • I deployed docker into university's VM

Top 5 commits:

Top 5 files:

🎬 Video

Seedventures Demo | Youtube

About

No description, website, or topics provided.

Resources

Readme

License

Apache-2.0 license
Activity
Custom properties

Stars

2 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases 3

Phase-4 Latest
Apr 28, 2024
+ 2 releases

Packages

No packages published

Contributors 6

Languages