Third Customer Milestone - bounswe/bounswe2024group8 GitHub Wiki

Table of Contents

1 Executive Summary

1.1 Summary of Project Status

As of the final milestone, we were able to successfully implement and test all the planned features in backend and frontend with mobile still lacking several minor ones. Overall, we are satisfied with the number and the diversity of our features and ideas. We also think that we have managed to process the feedbacks we have received into valuable outcomes, especially after the second milestone. As a result, our efforts culminated in a functional app, which we believe serves well to its' target audience.

1.2 Status of Deliverables

Deliverable Status
Project Repository Completed & Maintained
Issues Completed & Maintained
Weekly Meeting and Lab Notes Completed
RAM Completed
Third Customer Milestone Report Completed
Deployed Backend Completed
Deployed Frontend Completed
Mobile Apk Completed
Release Version Completed
Project Requirements Completed
Mockups Completed
User Scenarios Completed
Sequence Diagrams Completed
Class Diagrams Completed
Use-Case Diagrams Completed

1.3 Final Release Notes

Our final release notes can be found under our latest release, here.

1.4 Changes since last milestone

As far as our development process is concerned, we have taken several decisions after the last milestone. Organizing more meetings between Frontend and Mobile teams was the most significant change we have applied. With this change, we aimed to maintain the design consistency across these two platforms. Furthermore, since Frontend team was ahead of the Mobile team in terms of number of implemented features, they guided Mobile team on the details of the implementation. Another approach we have changed was the task prioritization. Especially for the Backend team, we have thoroughly discussed which features to rule out and which ones to implement based on the feedback from the second customer milestone. As a result of these changes, we were able to bring new features in a more complete state and also further improve the existing ones.

1.5 Final Milestone Demo Reflections

1.5.1 Challenged Posts

Current Issue:

Users cannot easily view comments for both the original and challenging posts on the same screen, making it difficult to compare feedback.

Suggested Improvements:

  • Enable a feature to display comments for both posts in a challenged post scenario on the same screen for better clarity and engagement.

1.5.2 Most Interaction Section

Current Issue:

There is no dedicated space to highlight posts with the highest engagement, making it harder for users to discover popular content.

Suggested Improvements:

  • Add a section for posts that receive the most interaction to showcase trending designs and encourage user participation.

1.5.3 Achievements for Tournaments

Current Issue:

Tournament winners and participants do not receive visible recognition for their achievements, which may reduce motivation.

Suggested Improvements:

  • Introduce achievements for tournament winners, including first, second, and third places, to reward their success and encourage competitiveness.

1.5.4 Tournament History

Current Issue:

Users cannot access information about past tournaments, limiting their ability to review and reflect on previous events.

Suggested Improvements:

  • Create a visible tournament history section to allow users to explore past events and results.

1.5.5 My Annotations Section

Current Issue:

There is no dedicated section for users to view and manage their personal annotations, making it harder to organize feedback.

Suggested Improvements:

  • Add a "My Annotations" section where users can store, view, and manage their notes and feedback for better usability.

1.6 What could have been done differently

Going back to the start, we could have done several things differently. First of all, some of the key features that we have implemented have been planned during the semester, which loaded a weight onto Frontend and Mobile teams. Instead of this, we could have planned our app in a more detailed manner so that teams can individually distribute the workload better. Furthermore, although Backend team was able to implement all the planned functionalities, they were late at structuring api input and outputs, which became a bottleneck in development phase, as Frontend and Mobile teams could not start developing their corresponding components and they wasted time while trying to run the backend on their local computers. Finally, we were late at communicating Frontend and Mobile teams, which caused several design decisions to differ across these platforms.

2 Progress Based On Teamwork

2.1 Work performed by each member

To track our individual efforts, we have kept using our RAM. Details can be found there in a tabular format.

2.2 Status of Requirements

Our Requirements are fully completed with deletions:

  • 1.1.2.1.5 Delete their account.
  • 1.1.2.1.5 Delete their account.

and with additions of these specific requirements:

  • 1.1.7.2 Users shall be able to search other posts which have the same tag added to their bodies by tag search.
  • 1.1.7.3 Users shall be able to search other users by their usernames.
  • 1.1.4.1.5 Users shall be able to delete their post including Tournament posts.
  • 1.1.4.1.6 Users shall be not be able to edit Tournament posts.
  • 1.1.4.1.7 Users shall be able to edit non-Tournament posts.
  • 1.1.4.2.3 Users shall be able to edit Text-only Posts.
  • 1.1.4.2.4 Users shall be able to delete Text-only Posts.

2.3 API Endpoints

2.3.1 API Documentation

We are using Swagger UI for API documentation purposes. It can be accessed here.

2.3.2 Link to the API

Same with the documentation link, our API can be tested here.

2.3.3 Example API Calls

const fetchPostData = async () =>{
        try{
            const postRes = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/posts/new/${id}`,
                {
                    headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
                }
            );
            const annotationRes = await axios.get(`${process.env.REACT_APP_API_URL}/api/v1/annotations/get?postId=${id}`,
                {
                    headers: {Authorization: `Bearer ${localStorage.getItem("jwt_token")}`}
                }
            );
            setPublishedAnnotations(annotationRes.data);
            setPostData(postRes.data);
        }
        catch(e){
            setPostData(getPostFromId(id)); 
        }
}

Here is a frontend function that calls two endpoints to fetch post and annotation data. The responses look like this.
Post Response:

{
    "postId": 34,
    "text": "I've never caught a Red Spotted Trout and I want to examine them closer. Since they are so rare, I couldn't find any models online. Can anyone provide me their model?",
    "user": {
        "id": 2,
        "nickName": "Deniz62",
        "profilePictureUrl": "https://storage.googleapis.com/three-design-prod-bucket/profile-pictures/CamRoll.jpg",
        "role": "USER",
        "experience": 70,
        "enabled": true,
        "username": "[email protected]",
        "authorities": [
            {
                "authority": "USER"
            }
        ],
        "accountNonExpired": true,
        "accountNonLocked": true,
        "credentialsNonExpired": true
    },
    "title": "Looking For A Red Spotted Trout Model",
    "likes": 1,
    "dislikes": 1,
    "comments": 1,
    "categoryId": 2,
    "isVisualPost": false,
    "fileUrl": null,
    "challengedPostId": null,
    "tags": [
        "Trout",
        "Fish",
        "Fishing"
    ],
    "createdAt": "2024-12-17T08:02:38.223+00:00",
    "reactionId": -1,
    "reactionType": "NONE",
    "bookmark": false
}

Annotation Response:

[
    {
        "id": "http://34.32.78.191:8080/api/v1/annotations/4",
        "type": "Annotation",
        "bodyValue": "Spotted seatrout (Cynoscion nebulosus), also known as speckled trout, is a common estuarine fish found in the southern United States along coasts of Gulf of Mexico and the coastal Atlantic Ocean from Maryland to Florida.",
        "creator": {
            "id": "http://34.32.78.191:8080/api/v1/users/4",
            "type": "Person",
            "nickname": "yektaercul"
        },
        "created": "2024-12-17T08:57:36.092+00:00",
        "target": {
            "source": "http://34.32.78.191:8080/api/v1/posts/34",
            "selector": {
                "type": "TextPositionSelector",
                "start": 20,
                "end": 37
            }
        },
        "@context": "http://www.w3.org/ns/anno.jsonld"
    }
]

2.4 User Interface and Experience

2.4.1 Link to UI designs

Frontend

The UI design components in the web app can be found in the following link: https://github.com/bounswe/bounswe2024group8/tree/main/3Design/frontend/src/components

Mobile

The UI designs for the screens in the mobile app can be found in the following directory: https://github.com/bounswe/bounswe2024group8/tree/main/3Design/mobile/app/screens

2.4.2 Screenshot of interfaces

Frontend

You can see our web screenshots from here.

Mobile

3 Standard

We have implemented an annotation feature that complies with the W3C Web Annotation Data Model standard. Users can post annotations in post body texts using the web application, and can view annotations posted by other users in both the web and the mobile applications. Annotated text in post bodies is highlighted/underlined to make it easier for users to notice. Users can click/tap on annotated text to read the respective annotation.

4 Scenarios

We have created a comprehensive user scenario, encompassing all the core functionalities of our app.

5 Individual Contributions

Yekta Ercul, Group8-Backend

  • Responsibilities:

I was primarily responsible for improving our backend testing framework, refactoring the GCP bucket file system, and maintaining backend integrity through reviews and feedback on new features. Additionally, I contributed to finalizing project features and the milestone presentation outline.

  • Main Contributions:

I focused on strengthening the backend by addressing critical improvements and fixing important possible bugs. I started by refactoring the GCP bucket file system to use public URLs and configured GCP bucket CORS to ensure frontend and mobile compatibility #465. This was implemented as a hot-fix and deployed immediately. Next, I wrote an integration test to verify the entire flow, including signup, login, category follow, and post creation. This involved creating a mock HTTP server using TestRestTemplate provided by Spring and a separate PostgreSQL test database to maintain production integrity #399, #406, PR. I collaborated with Oğuz to identify and define the remaining features needed for the milestone, contributing to issue tracking and solution development #402. For the presentation, I provided bullet points, suggested a basic outline, and helped refine the final structure, #461. I also supported the live presentation by navigating through web and mobile interfaces while Oğuz presented Lab 9 Report, #444. And finally I have updated the Requirements and provided the report with the final status part, #467. And I have updated our Class Diagram UML regarding the given feedbacks, #467.

  • Code-related significant issues:
Summary Issue PR
Refactor GCP bucket file URLs and bucket CORS #465 Commit
Write integration test #406, #399 #447
Review New User Endpoints PR And Merge #414
Review New Achievements PR And Merge #418
Review Tag Inclusion In Post Search PR And Merge #416
Review Post Search With Tags PR And Merge #446
Review Post Update,Delete Endpoints PR Gave Feedback And Merge #446
  • Management-related significant issues:
Summary Issue
Define and track milestone features #402
Help preparing presentation outline #444
Contribute to Lab 9 Report Report
  • Pull Requests:

As part of my contributions, I reviewed and merged PRs for critical backend features. Directly merged:

  • #414 - Implement user search and get user response endpoints.
  • #416 - Include tags for post search.
  • #418 - Create 6 new achievements.
  • #446 - Implement post search with tags.

Reviewed and provided feedback:

#441 - Implement post update and delete features.

  • Unit Tests: For this milestone, I focused on integration tests, ensuring end-to-end functionality for user signup, login, category follow, and post creation in a single integration test #399. This complemented my previous work on TournamentService unit tests.

  • Additional Information: I actively participated in all meetings, provided consistent feedback on backend features, and supported the live presentation by ensuring smooth navigation through the web and mobile interfaces.

Eren Donmez, Group8-Mobile

  • Responsibilities: As a member of the mobile team, my responsibilities included implementing the necessary enhancements after the second customer milestone in accordance with the requirements and the customer feedback, as well as keeping track of and reviewing the work of my teammates.

  • Main Contributions: In the time period between the second and third customer milestones, I was mainly occupied with implementing annotations for the mobile app (#410). Other than that, I updated post creation and viewing in the mobile app in accordance with the form feature, which was implemented after the second customer milestone in accordance with customer feedback (#438).

  • Code-related significant issues:

Summary Issue PR
Implement annotations #410 #440
Implement updated post creation/viewing #438 #439
  • Pull Requests: As mentioned above, I participated as an author in the following pull requests: #439, #440. Furthermore, I was a reviewer in the following PR: #425.

Ersel Çanakçılı, Group8-Frontend

  • Responsibilities:

We have almost covered all the requirements on Milestone 2. In this milestone, the entire frontend team gathered to complete the remaining requirements. In summary, we worked together to implement and finalize the remaining parts.

  • Main Contributions:

We implemented pagination on the profile page and made some improvements such as changing passwords and editing profile pictures #430. We also implemented pagination on the search page and added a new tab to display users #427. Additionally, we refactored the create post dialog by adding design properties to enable users to include more details about their designs #435. We then implemented pagination on the feed page #436. Furthermore, we added new features such as the ability to edit posts #451 and delete posts #452. We also allowed users to search by tag by simply clicking on a tag in a post #453. Finally, we improved the UI for annotations #454.

  • Code-related significant issues:
Summary Issue PR
Search Page Improvements (#427) PR428
Profile Page Improvements (#430) PR432
Post Form Structure Implementation (#435) PR435
Feed pagination (#436) PR437
Edit Post Implementation (#451) Directly Commited to our Branch
Delete Post Implementation (#452) Directly Commited to our Branch
Tag Search Implementation (#453) Directly Commited to our Branch
Annotation Improvements (#454) PR448
  • Management-related significant issues:

Since we worked collaboratively as a team, all decisions were made collectively, and we supported each other throughout the process. As a result, we did not encounter any significant management-related issues.

Summary Issue
Update RAM #466
  • Pull Requests:

Since we worked closely as a team, we were aware of what everyone was doing and the code that needed to be merged. This allowed us to merge changes smoothly. I approved #432 and #437, and I created #448.

  • Unit Tests:

In the second milestone, we wrote tests to verify the core functionalities. In this milestone, we reused those tests to ensure consistency and reliability.

  • Additional Information:

Oğuz Kağnıcı, Group8-Backend

  • Responsibilities: I was mainly working on improving and finalizing existing features and making small additions based on the feedback from the second customer milestone. I have also tracked the progress of Frontend and Mobile teams.

  • Main Contributions: I have spent most of my time deciding which improvements we need to make for the final milestone. Initially, I have conducted a research on design specification of 3D models, as it was one of the features that were requested after the second milestone. #429 Then, based on the current situations of Backend, Frontend and Mobile; I have created a list that includes the remaining work for each team and I have written it to the Lab 9 Report. #420 For the implementation part, I have started by integrating post tags into the semantic search flow. #415 Additionally, I have designed a new endpoint, which allows users to search posts just by tags. #446 Next, I have designed several other achievements to enhance user experience. #417 Concluding the implementation phase, I have implemented user search feature, which allows users to find other users with the search bar. #404 I have also implemented post update and delete features. #419 Following that, I have written several unit tests mainly for the Wikidata service and several other services. #443 Next, I have prepared the outline for our presentation. #444 Finally, I have written Executive Summary and Status of Requirements sections in this report. #442

  • Code-related significant issues:

Summary Issue PR
Add tags for semantic search #415 #416
Implement search posts by tags #445 #446
Create new achievements #417 #418
Implement User Search #404 #414
Implement Post Update&Delete #419 #441
Write Unit Tests #443
Review Swagger Descriptions PR #433
Review Integration test PR #447
  • Management-related significant issues:
Summary Issue
Design Specification Research For Post Forms #429
Creating&Maintaining branches for Lab 9 and Writing the Report #420
Preparing scenarios for customer milestone 3 presentation #444
Writing the report for customer milestone 3 #442

  • Pull Requests: As mentioned above, I have reviewed pull requests regarding swagger documentations and integrations tests #443, #447 Then, I have implemented semantic search tag integration, search with tags, search users, delete&update posts, new achievements and created a pull requests. #416, #446, #418, #414, #441.

  • Unit Tests: During the time between second and third customer milestones, I have written unit tests for WikidataService and PostService. For WikidataService, my test were overall checking whether the retrieved sibling and parent instances were accurate. For PostService, I have focused more on post deletion and tried to cover edge cases, such as preventing deletion of not owned posts. Further details can be found here.

  • Additional Information: I have tracked the progress and design consistencies of Frontend and Mobile. I also participated in all meetings. Finally, I have refactored sequence diagrams and mockups.

Onur Çerli, Group8-Mobile

  • Responsibilities: As a member of the mobile team, I was responsible for bringing minor app updates for consistency with the frontend like changing the default gallery-discussion post selection to gallery, changing icons for reaction buttons. There were some bugs with reactions. So I was also responsible for updating them. Another responsibility I had was implementing the achievements feature in the profile screen and making the backend integration. My last responsibility was taking the apk build of the application before the milestone.

  • Main Contributions: After the second customer milestone, I changed the default selection as gallery for gallery-discussion selection for both category posts and generic feed posts (#422). Then, I worked on fixing reactions; like and dislike (#424). I updated their icons for similarity with frontend. I changed their event handlers so that they work as intended. Then, I implemented the achievements feature in mobile (#426), integrated it with backend and tested it. Additional to these, I have participated in discussions, meetings and tested the application, reviewed and provided feedback for other features to the other members. Lastly, before the third customer milestone I have taken the apk build of the application.

  • API Contributions:

    Summary Issue   PR
    Improvement on Backend Integration for Like and Dislike Features  #424  #425
    Backend Integration for Achievement Feature of Mobile App  #426  #431

  • Code-related significant issues:

    Summary Issue   PR
    UI Update for mobile app to increase similarity with frontend  #422  #423
    Fix like and dislike buttons for posts and comments in mobile app  #424  #425
    Implement achievement feature for mobile app  #426  #431

  • Pull Requests:

    • I have participated in the following pull requests: #423, #425, #431.
    • I have reviewed the following pull requests: #450.

Deniz Ulaş Poyraz, Group8-Frontend

  • Responsibilities: The frontend team already completed all requirements on Milestone 2. For this milestone we decided to meet in person and complete the frontend app via several improvements. All contributions for this milestone is done by the whole frontend team.

  • Main Contributions: As a team we implemented several improvements to the web app such as Search Page Improvements (#427), Profile Page Improvements (#430), Post Form Structure Implementation (#435), Feed pagination (#436), Edit Post Implementation (#451), Delete Post Implementation (#452), Tag Search Implementation (#453), Annotation Improvements (#454)

  • Code-related significant issues:

Summary Issue PR
Search Page Improvements (#427) PR428
Profile Page Improvements (#430) PR432
Post Form Structure Implementation (#435) PR435
Feed pagination (#436) PR437
Edit Post Implementation (#451) Directly Commited to our Branch
Delete Post Implementation (#452) Directly Commited to our Branch
Tag Search Implementation (#453) Directly Commited to our Branch
Annotation Improvements (#454) PR448
  • Management-related significant issues: Since we worked as a team to implement/improve everything after milestone 2, we decided everything as a group. Therefore there aren't any management related issues.
Summary Result
Take meeting notes Meeting Notes
  • Pull Requests:
    Since we saw all the code together, we knew there weren't any conflicts/ bugs while creating pull requests. We just approved all of them.
    I approved these pull requests: PR428, PR432, PR448
    I created these pull requests: PR437, PR435

Unit Tests: We created several unit tests for milestone 2. Since we only improved the app and we didn't create any significent components, we didn't create any unit tests for this milestone. This is because the app was already almost finished in milestone 2.

Ali Alperen Sönmez, Group8-Mobile

  • Responsibilities: For Milestone 3, I was responsible for enhancing the semantic search interface, implementing user search functionality, and improving the leaderboard screen by adding user profile photos, links to user profiles, and links to tournament posts.

  • Main Contributions: My main contributions include enhancing semantic search UI, implementing user search functionality, and improving leaderboard screen by implementing additional functionalities such as user profile photos, links to user profiles, and links to tournament posts. I also contributed to creating Milestone 3 presentation outline.

  • Code-related significant issues:

Summary Issue PR/Commit
Implementing User Search #459 PR450
Preparing Profile Screen For Leaderboard #460 Commit
Search Screen Improvements #459 Commit PR412 PR413
Enhancing Leaderboard #460 PR456

  • Management-related significant issues: As mobile team, we collectively participated in task planning, task distribution, and team meetings.

  • Pull Requests:

Mehmet Tuluyhan Sözen, Group8-Backend

Responsibilities:

In this milestone, my focus shifted toward improving documentation, creating test data, developing user scenarios, and ensuring our final milestone was well-prepared for the third customer meeting. While the core backend coding was largely completed in the second milestone, I contributed to refining our system, enhancing integration, and documenting processes. My responsibilities included:

  • Configuring Swagger to improve API documentation with endpoint descriptions and examples.
  • Participating in decisions regarding the new format for the "Create Post" page based on customer feedback.
  • Creating test data, including users, comments, and posts, for the third customer meeting.
  • Developing user scenarios for functionality exhibition.
  • Reporting reflections on the Final Milestone Demo and reviewing backend integration test scenarios.
  • Actively engaging in team communication and attending meetings, except one due to health issues.
  • Supporting documentation efforts and ensuring alignment with customer feedback.

Main Contributions:

During this milestone, I prioritized tasks related to team coordination, documentation, test data creation, and customer feedback integration. Specific contributions included:

  • Improved API Documentation: Configured Swagger to enhance endpoint descriptions, return statuses, and examples (#401).
  • Decision on New Create Post Format: Collaborated with the team to redesign the "Create Post" page based on feedback from Customer Meeting 2, adding new fields for enhanced functionality (#429).
  • Created Test Data: Developed test data including users, comments, and posts to prepare for the third customer meeting demonstration (#463).
  • Created Scenario for Functionality Exhibition: Authored user scenarios to showcase platform functionalities during the customer meeting (#464).
  • Reflections on Final Demo: Authored the report summarizing the Final Milestone Demo reflections, ensuring lessons learned were documented for future improvements (#462).
  • Review of Integration Test Scenarios: Reviewed and provided feedback on integration test scenarios for backend services to ensure quality and reliability (#406).
  • Attended all labs and meetings except one due to health issues, where I read the report to ensure continued communication.

API Contributions:

Summary Issue PR
Configure Swagger with Examples #401 #402
Decide New Create Post Format #429 #430

Code-Related Significant Issues:

Summary Issue PR
Review Integration Test Scenarios #406 #407
Create Test Data for Customer Meeting #463 N/A

Management and Documentation-Related Significant Issues:

Summary Issue
Reporting Final Milestone Demo Reflections #462
Deciding New Create Post Format #429
Creating Scenario for Functionality Exhibition #464

Additional Information:

I have contributed to documentation, communication, and process improvement during this milestone, focusing on finalizing details and refining user-facing functionalities. While the backend development was largely completed in previous milestones, I remained engaged in quality assurance and team alignment tasks. I participated in all labs and team meetings except for one due to health issues, for which I provided a report to ensure continuity.

Huseyin Turker Erdem, Group8-Frontend/Devops

Responsibilities:

In this milestone, I focused on deployment and developing remaining features in frontend. As frontend was mostly completed on second customer milestone, new features after the feedback needed to be done, such as showing technical details of gallery posts.

  • Code-related significant issues:
Summary Issue PR
Search Page Improvements (#427) PR428
Profile Page Improvements (#430) PR432
Post Form Structure Implementation (#435) PR435
Feed pagination (#436) PR437
Edit Post Implementation (#451) Directly Commited to our Branch
Delete Post Implementation (#452) Directly Commited to our Branch
Tag Search Implementation (#453) Directly Commited to our Branch
Annotation Improvements (#454) PR448
  • Pull Requests:
    We developed all remaining frontend features together after customer milestone 2, so all the frontend codes were implemented and checked together.
    I approved these pull requests: #400, #402
    I created these pull requests: #428

Unit Tests: We created several unit tests for milestone 2. Since we only improved the app and we didn't create any significent components, we didn't create any unit tests for this milestone. This is because the app was already almost finished in milestone 2.

6 Other Artifacts

  • Project Plan: We have been using GitHub Roadmap for planning and tracking our project. Details can be seen here in a timeline format.

  • Unit Tests: All test related codes for Backend, Frontend and Mobile can be seen in corresponding directories under our repository

  • Remaining Artifacts: All the remaining artifacts can be viewed in the Wiki sidebar, under the "Final Milestone Project Artifacts" tab.