Final Milestone Review - bounswe/bounswe2023group3 GitHub Wiki

CmpE 451: Project Development in Software Engineering - Final Milestone Review

Fall 2023 - Group 3 Prediction Polls

Contributors

Table of Contents

  1. Executive Summary
  1. Progress Based on Teamwork
  1. API Endpoints
  2. User Interface / User Experience
  3. Annotations
  4. Scenarios and Video
  5. Project Artifacts
  1. Software
  2. Individual Contribution Reports

1. Executive Summary

1.1 Introduction

Our project is about a platform where users open “polls” for the other users (and themselves) to make predictions about the properties of events that will be settled in the future. Predictions are evaluated for their accuracy once the property they guess is settled, which then counts towards the rating of its user. Events are to be tagged/categorized, and consequently, users’ scores will also be tagged/categorized. Users may or may not be able to control the public availability of the collective estimate of the properties before they are settled, which is one of the many design decisions the team should make. Profile badges, achievements, and other social features are some others to be considered alongside the scores to hook the users in.

1.2 Project Status

As Group 3, we are delighted to announce that we have reached the final stage of our project with a commendable product. We have successfully completed many of the required features and key functionalities. Our website has been deployed at the following public IP address: Poll'up. Additionally, we have effectively launched our application (APK) and ensured that our project operates smoothly on mobile devices. While we faced challenges in seamlessly integrating the frontend, mobile, and backend components, we are proud to have implemented most of the essential functionalities.

In the sections below, we provide a detailed explanation of the functionalities we have implemented, broken down by the different core teams involved.

Mobile:

  • We implemented a welcome/landing page
  • We implemented a login page for both users and moderators.
  • We implemented a sign-up page for users.
  • We implemented a moderator application page for future moderators.
  • We implemented a e-mail verification page for the sign-up event of users.
  • We implemented forget password pages(series of two pages) for the users.
  • We implemented a home page(series of two pages) for the users where they can see active/settled polls from who they follow.
  • We implemented a moderator home page where moderators can see pending poll creation requests, and settle requests
  • We implemented a moderator poll review page, in which moderator can check and read the poll request specifications, and approve or disapprove this poll creation request accordingly.
  • We implemented a profile page, a user can see their or some other's created/liked/voted polls
  • We implemented comment (partially functioning) and like functionalities.
  • We implemented search page with profile searching functionality.
  • We implemented a poll settle request page, in which a user can send a settle request consisting of a result (correct option) and a reference to confirm the result.
  • We implemented vote functionalities, so that users can vote polls, see the current vote distributions after voting, or see the correct answer and vote distributions after settling of the poll.
  • We implemented a leaderboard page in which users can view their global ranking or ranking according to the given tag.
  • We implemented follow/unfollow functionality for users.
  • We implemented a settings page, in which users can close their account or reset their password.

Frontend:

  • We implemented a welcome/landing page that explains about out project clearly to be able to give newcomers an idea about our platform, Poll'up.
  • We have implemented a login page for users and moderators.
  • We have implemented a sign-up page for users.
  • We have implemented an e-mail verification page for users.
  • We have implemented reset password and forget password pages for users.
  • We have implemented an apply page for moderators.
  • We have implemented a moderator home page where moderators can see pending poll creation and settle requests.
  • We have implemented a moderator detailed poll review page, in which moderator can approve or disapprove a the corresponding poll creation/settle outcome request.
  • We have implemented a user profile page, in which a user can see his/her created, liked, and voted polls, following and followers, ranks and badges.
  • We have implemented a other's profile page, in which a user can see another user's created, liked, and voted polls, following and followers and badges.
  • We have implemented a user home page, in which polls can be filtered by settled/outgoing polls and trending/following polls.
  • We have vote, comment and like functionalities on polls.
  • We have implemented semantic search on homepage.
  • We have implemented tag pages in which users can view polls according to the given tag.
  • We have implemented leaderboard functionality in which users can view their ranking according to the given tag. In homepage, the scores/ranks for general are shown.
  • We have implemented a poll settle request page, in which a user can send a settle request consisting of a result (correct option) and a reference to confirm the result.
  • We have follow functionality among users.

Backend:

  • We implemented poll entity and necessary endpoints such as fetching all polls, fetching polls user has liked, user has voted and polls from users that the user is following. We also provided them as a query parameter in the get /poll endpoint, which can be customized to implement more complicated fetching mechanism. For example, user can fetch polls which s/he liked, are created by user X and are settled.
  • We implemented user entity and necessary endpoints such as creating, deleting, getting users, updating user settings, following/unfollowing users and like/unlike polls.
  • We implemented moderator entity and necessary endpoints such as approving/disapproving poll creation/settle requests, getting polls which are pending and simple CRUD endpoints.
  • We implemented option entity and simple CRUD endpoints.
  • We added CI/CD pipeline utilizing github actions for deployment process.
  • We implemented like entity and simple CRUD endpoints.
  • We implemented comment entity and simple CRUD endpoints.
  • We added authentication functionality and create auth middleware.
  • We implemented badge entity and simple CRUD endpoints.
  • We implemented tag entity and simple CRUD endpoints.
  • We implemented 12 different unit tests.
  • We implemented annotation server.
  • We implemented semantic search functionality using pinecone vector database.

1.3 Final Release Notes

Release Notes - [0.9.0]

New Features:
  • [Poll voting]: Users now able to vote and see the vote distribution after they vote.
  • [Leaderboard]: Users can see the rank and scores on the leaderboard. In tag pages, leaderboard is tag specific.
General Improvements:
  • [Side bar is now fixed]: Website navigation has become much more easier for both moderators and users.
  • [Scroll to top button]: Users can now easily navigate to the top of the page with the new "Scroll to Top" button.
Known Issues:
  • [Annotation placement]: Annotations are not shown in the correct place after created.
  • [Report requests]: Report requests could not be approved/disapproved.

(We have taken another release because the backend url in front and mobile was hardcoded.)

1.4 Management

1.4.1 Changes Implemented Based on Previous Milestones

  • FAQ Section Redesign: We redesigned the FAQ section to make it simpler for new users. The content is now organized in collapsible sections, making it easier to navigate. This change aims to create a more user-friendly experience and help new users find information more easily.

Impact: By making the content collapsible, the information is now more accessible and less overwhelming for new users. This change is expected to enhance the usability of the FAQ section and improve the onboarding process.

  • Showing Deadline on Polls: After listening to feedback, we decided to show the deadline for polls. This improvement provides users with clear information about when each poll ends. By displaying deadlines, users can better plan their participation, making the platform more user-friendly.

Impact: This modification provides users with important information about the timeframe for participating in polls, improving transparency and user awareness.

  • Users Pending Request Page: Our implementation already had a moderator pending requests page in which moderators can view the poll creation and outcome settle requests. Since there was not any way for users to view the status of their requests, we decided to add user pending requests page according to the milestone 2 feedback.

Impact: This addition enhances user engagement and transparency, allowing users to track the progress of their poll creation and outcome settlement requests.

  • Changing Sidebar Positioning: Following Milestone 2 feedback, we made the sidebar and header fixed on all pages. This means they stay in the same place, making the layout consistent. The fixed sidebar and header create a stable design, making it easier for users to navigate and find what they need on every page.

Impact: This change ensures a consistent layout across the platform, providing users with a stable and predictable interface. The fixed sidebar and header enhance navigation by keeping important elements readily accessible, resulting in an improved overall user experience.

  • Changing Button Colors on Mobile App: Following Milestone 2 feedback, we changed the color of some buttons from red to other colors such as green/blue. Red color was catching a lot of attention and was wrongly indicating a dangerous status of the corresponding action.

Impact: This change provides users with a stable and predictable interface. Colors no longer indicate an erronous or dangerous actions and misguide users. Overall, this change improved UI and UX of the application.

1.4.2 Final Milestone Demo Reflection

  • Lessons Learned: We are pleased to report that we successfully implemented most of the functionalities, and our demonstration made a significant impact on the audience. We fulfilled the majority of the requirements. However, we encountered some challenges due to communication issues, notably within the mobile and front-end teams, where certain components, though developed in the backend, were not fully integrated. These shortcomings were partly due to timing discrepancies between the backend and other teams, and partly due to poor planning and miscommunication. From this experience, we've learned that effective communication and thorough planning are crucial elements of teamwork. In hindsight, a more collaborative approach in task planning involving all teams, especially after Milestone 2, would have been beneficial.

1.5 Status of Deliverables

Name Status Notes
Project Artifacts Completed -
Final Software Release Completed In this release backend url is hardcoded on both frontend and mobile. Since backend url has changed, we have taken another release with adding the updates for the url
Final Software Release 2 Completed
Individual Contribution Reports Completed -
Final Milestone Team Report Completed -

2. Progress Based on Teamwork

2.1. Summary of work performed by each team member

Backend Team
Alp Tuna: I was responsible for maintenance of our infrastructure, took care of deployment and CI/CD pipeline utilizing GitHub Actions. Implemented most of the poll related functionalities such as fetching polls, retrieving polls based on user's likes, votes and followings both as separate endpoints and optional query parameters and pagination options. I implemented the annotation server from scratch while obeying W3C standards. I implemented unit tests for our backend ensuring the correct functioning. There are many other contributions from my side but these are the most important ones as a summary.
Muhammet Batuhan İlhan: I was mainly responsible for the maintenance and development of the backend application. I also took part in the deployment processes. I implemented most of like and comment related functionalities. I implemented most moderator related functionalities. I implemented most of the voting and ranking functionalities. This encapsulates the essence of my contributions. In addition to these, I tackled numerous bug fixes beyond these accomplishments.
Batuhan Çetin: I implemented all the user authentication, verification and authorization flow of our application. I created most of the one-to-many, many-to-one and many-to-many relations between entities in order to provide functionality. I also mainly contributed to moderator functionalities like moderator login, authorization and fetch poll endpoints. I implemented the whole poll settlement flow of our application (sending poll settle request and approving-disapproving this request). I created Swagger request and response objects for all endpoints to improve our documentation. I implemented semantic search and keyword search for our application.
Frontend Team
Beyza Akçınar: I was mainly responsible for the design of our application and I played a huge role in choosing the design palette and app logo. The mockups (in which I had a huge role) from the last semester were really useful while forming a solid base for our design. I implemented the welcome page of our application as a landing page and provided all of its content including the promoting picture. I implemented the user login, user register, reset password, forget password, change password, user pending requests, poll view, moderator login, moderator apply, and moderator requests pages. I also came up with the idea to create a contrast with the moderator design palette by swapping the colors. After I complete each of my tasks, I made additional overall design adjustments. I also made the user manual for the web application.
Berk Turgut: I was mainly responsible for ensuring the code quality and the data request handling of our application with backend services. To that end, I implemented the Prettier formatter, created user-service with functions to service calls such as authentication, get poll, like, vote, etc. I implemented user follow, poll like, vote, progress bar, and semantic search functions. I also extensively tested and cross-referenced our applications with the requirements to fix the functional and practical issues, which can be seen in my contribution reports.
Ali Üçer: I focused on elevating user engagement and functionality. My contributions included developing interactive polls with integrated images, implementing a badge system for user recognition, and refining the app based on peer feedback. Additionally, I was responsible for setting up pages for moderator reviews and new user verification, and updating the project plan. These efforts, highlighted in my pull requests, significantly enhanced the user experience and streamlined registration and poll approval processes.
Mobile Team
Simar Achmet Kechagia: I was responsible for building widgets for various screens of the mobile application. I was also responsible with making the calls to the backend for fetching/sending data to our backend server. You can find the details of my contribution in the following reports Milestone 1, Milestone 2, Final Milestone
Taha Baturhan Akbulut: Throughout the software engineering project, I played a key role in shaping and advancing the application. My responsibilities encompassed designing and implementing critical features, including the moderator application page for aspiring moderators, the email verification page to secure signups, forget password pages for account recovery, and a poll settle request page for user control. I was integral to the development of the entire voting system, ensuring a seamless user experience in polls. Additionally, I crafted the leaderboard functionality, showcasing user rankings, and implemented the pettings page for user customization. Besides, I created the moderator poll review Page for efficient poll management. You can find the details of my contribution in the following reports Milestone 1, Milestone 2, Final Milestone

2.2. Software Requirements Status

ID Name Status Notes
1.1 Authentication Completed
1.1.1 Authentication shall be available on the main page. Completed
1.1.2 Users shall be able to authenticate with the username and password they've provided upon registering. Completed Users authenticate with provided username and password
1.1.3 Users must verify their e-mail after registration. Completed
1.1.4 Users shall be treated as guests before authenticating. Completed
1.1.5 Users shall be able to do user actions after authenticating. Completed
1.1.6 Users shall stay authenticated for a certain time once they are authenticated. Users must be re-authenticated after this period ends. Completed Users re-authenticate after the specified time period
1.1.7 Users shall be able to reset the password by clicking the forgot password button. Completed
1.2 Guest Actions Completed
1.3 User Actions
1.3.1 Users shall be able to vote in prediction polls. Completed
1.3.2 Users should be able to comment on a prediction poll. Completed
1.3.3 Users should be able to like a prediction poll. Completed
1.3.4 Users should be able to comment on a comment on a poll. Not Done
1.3.5 Users should be able to like a comment on a poll. Not Done
1.3.6 Users should be able to report a poll to the moderators if they find the content of the poll to be inappropriate or if they think there is an error with the reported event outcome. Completed Report inappropriate content or errors
1.3.7 Users shall be able to create a poll request or vote in polls either with their user attached or anonymously. Completed Can vote anonymously or with user attached
1.3.8 Users shall be able to insert images when creating a poll request. Completed
1.3.9 Users shall be able to create an annotation for images and the text body of the poll request. Completed
1.3.10 Users should be able to follow other users. Completed
1.3.11 Users shall be able to send prediction poll creation requests to moderator users. They shall provide a deadline for the prediction poll voting. They shall provide the prediction poll creation request with at least one tag. Completed Provide deadline and at least one tag
1.3.12 Users shall be able to send the outcome verification request of a poll they created to the moderators. This outcome verification request should consist of the outcome and the reference of the outcome so that a moderator can check and verify the result of the poll. Completed Include outcome and reference for verification
1.3.13 Users shall be able to log out from the system. Completed
1.3.14 Users shall be able to change their passwords. Completed
1.4 Moderator Actions
1.4.1 Moderators shall be able to inspect the prediction poll creation requests of the users. Completed
1.4.2 Moderators shall approve/disapprove the prediction poll creation requests of the users. Completed
1.4.3 Moderators shall be able to check and approve/disapprove the outcome result requests of the users. Completed
1.4.4 Moderators shall be able to modify the tags of a prediction poll creation request. Not Done
1.4.5 Moderators shall provide their reasons for disapproval of a poll creation request to the user who has sent the request. Completed
1.4.6 Moderators should be able to ban users who misbehave/get reported. Completed
1.4.7 Moderators shall be able to log out. Completed
2.1 Rating
2.1.1 The system shall calculate the weight of the event and add/subtract it to/from the rating of the user after the event's outcome is settled. Completed Add/subtract to/from user rating after event outcome
2.2 Categorization
2.2.1 Every poll and rating of the users shall be categorized using tags. Completed
2.3 User Roles Completed Different roles: moderators and regular users
2.4 Collective Estimate Of The Result Of The Predictions Made Not Done Algorithm to calculate the contribution of the users to the collective estimate according to their rating.
2.5 Ranking System Completed Based on general and tag-specific ratings
2.6 Trending Section Completed The platform should have a section called "trending" which includes the most popular polls in the platform.
3.1 Portability
3.1.1 People should be able to access the platform's webpage from commonly used browsers such as Chrome, Safari, Firefox, and Internet Explorer. UI, UX, and performance should not be affected much from browser to browser. Completed
3.1.2 The mobile App should be supported on all Android versions later than Android 13 without any UI, UX, or performance issues. Completed No UI, UX, or performance issues on Android 13+
3.2 Privacy
3.2.1 The platform shall comply with the rules specified by KVKK and GDPR. Completed Complies with KVKK and GDPR
3.2.2 Users shall agree to the Privacy Policy and Terms of Service before signing up. Not Done
3.2.3 If the Privacy Policy changes, users must be notified about the changes. Not Done
3.3 Security
3.3.1 The platform shall use HTTPS protocol. Not Done
3.3.2 The platform shall have an SSL certificate. Not Done
3.3.3 All sensitive user data, such as passwords, shall be encrypted using a salted hashing algorithm(such as SHA-256). Completed Encrypted using a salted hashing algorithm (e.g., SHA-256)
3.3.4 The platform should be robust against Cross-Site Scripting and SQL Injection. Completed
3.3.5 Users shall be notified in the event of a password change. Not Done
3.4 Performance and Reliability
3.4.1 Load time of any page in the platform shall be a maximum of 6 seconds. Completed 6 seconds maximum
3.4.2 Load time of any page in the platform shall be under 3 seconds on average. Completed 3 seconds average
3.4.3 The platform shall be able to handle at least 10,000 users and 500 user actions simultaneously. Completed 500 user actions simultaneously
3.4.4 The platform shall respond to any request in at most 3 seconds excluding network-based delay. Completed 3 seconds maximum excluding network-based delay
3.4.5 The platform's average time for responding requests shall be less than 2 seconds excluding network-based delay. Completed Less than 2 seconds excluding network-based delay

3. API Endpoints

You can find the documentation of our backend API in the following swagger link.

Backend Swagger Link

You can find all the documentation of our Annotations server API in the following swagger link.

Annotation Server Swagger Link

You can find the example api calls of our main endpoints in the backend server as a postman collection below.

Backend Postman Collection

You can find the example api calls of our main endpoints in the annotation server as a postman collection below.

Annotation Server Postman Collection

4. User Interface / User Experience

Welcome/Landing page:

Web:

User Welcome Page Web

View Web Code

Mobile:

View Mobile Code

User Homepage:

Web:

User Homepage Web

View Web Code

Mobile:

View Mobile Code

User Profile:

Web:

User Welcome Page Web

View Web Code

Mobile:

View Mobile Code

User Tag Page:

Web:

User Tag Page Web

View Web Code

Mobile:

View Mobile Code

Moderator Homepage:

Web:

Moderator Homepage Web

View Web Code

Mobile:

View Mobile Code

5. Annotations

Mobile: In mobile side, you can annotate the question of your poll when you are creating it.

  • When the poll is in the main feed i.e. home page, the annotated parts looks clickable, in blue and underlined. (since there is no mouse in mobile, detecting "hover" action is impossible, therefor we had to make it such that users understand the annotated parts are clickable)
  • When a user clicks on the annotated part, the annotation attached to that parts shows up in a pop-up.
  • We didn't let users add/edit/remove annotations after a poll is created, this will create uncontrollable behavior.
  • We didn't implement annotating images or poll options.

Backend:

  • In backend, we implemented the core functionalities of the W3C annotation interface.
  • You can reach to the swagger documentation of the annotations server here
  • Server does not require authentication, therefore anyone can create and fetch annotations.
  • We implemented only TextQuoteSelector and TextPositionSelector options since frontend and mobile teams utilize only those selectors in our app.

Frontend: In the frontend side, everyone can annotate the question of any user's polls.

  • The user selects the "annotate" button next to the question, enters an explanatory text to the input box, selects the corresponding text and selects the submit button to create the annotation.
  • The corresponding annotation is shown when the user hovers on the annotated part of the question (The index seeing algorithm does not work correctly every time, so it is faulty).
  • The annotations are not editable.
  • User can't annotate images or poll options.

6. Scenarios and Video

The final showcase scenario can be seen here and you can find the video of our app through this link.

7. Project Artifacts

7.1 User Manual

You can see the web user and moderator manual from this link.

7.2 System Manual

7.2.1 Mobile App Emulation

7.2.2 Run backend application

  • // Install docker and start the docker daemon
* docker run --name postgres-container -e POSTGRES_PASSWORD=password -p 5432:5432 -v postgres-data:/var/lib/postgresql/data -d postgres
* git clone https://github.com/bounswe/bounswe2023group3.git
* cd bounswe2023group3/app/backend
* // Copy .env file to this location
* db_ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' postgres-container)
* echo "\nDB_HOST=$db_ip" >> .env
* docker build -t pollup:backend .
* docker run --name app -p 1923:3000 -d pollup:backend

7.2.3 Deploy frontend application

* git clone https://github.com/bounswe/bounswe2023group3.git
* cd bounswe2023group3/app/frontend
* docker build --tag angular_app:1.0 .
* docker run --detach -p 8000:8000 angular_app:1.0 
* docker login
* docker push username/angular_app:1.0

Connect to an EC2 instance

* sudo yum search docker
* sudo yum install docker
* sudo service docker start
* sudo docker pull username/angular_app:1.0
* docker run --detach -p 8000:8000 username/angular_app:1.0

7.3 Software Requirements Specification

You can reach our software requirements specification from this link.

7.4 Software Design Documents

You can reach our use case diagram from this link. You can reach our sequence diagram from this link. You can reach our class diagram from this link.

7.5 User Scenarios and Mockups

You can reach our user scenarios from this link. You can reach our mockups from this link.

7.6 Research

You can reach our research from this link.

7.7 Project Plan

You can reach our project plan from this link.

7.8 Unit Tests Reports

We have written 12 different tests for our backend endpoints.

  • It takes 7-8 seconds on average to complete tests.
  • We get one error in the tests, and it is due to type mismatch between the result and the expected type of the returned value. It does not imply an actual error, so we can simply ignore it.
  • We covered relatively large set of use cases including poll, user and moderator actions and their endpoints.

8. Software

You can view the web application from this link. (Since backend url was hardcoded it has lost the connection with the backend. In our new release, this isn't the case.)

You can find the documentation of our backend API in the following swagger link.

Backend Swagger Link

You can find all the documentation of our Annotations server API in the following swagger link.

Annotation Server Swagger Link

You can see the database status dump from this link.

You can view the final release from this link.

9. Individual Contribution Reports