CMPE 352 ‐ Milestone 2 Report

1 Executive Summary

1.1 Summary of project and current status

1.1.1 Summary

Our project is to create a vibrant and interactive discussion forum dedicated to the Turkish Football League, "Süper Lig." By integrating features like team based communities, personalized user profiles, and content-sharing capabilities, our platform caters specifically to football fans. Utilizing the Wikidata API and semantic browsing, we aim to significantly enhance the search functionality within the app, allowing users to find information and content more efficiently and intuitively. Users can register and personalize their accounts, engage with others by creating or interacting with posts and comments within their favorite team's community, and enjoy a rich social experience around their football passion. Key functionalities include account management, community subscriptions, and interactive posting with options for images, tags, and emotional reactions. Our aim is to enhance the social media landscape for Süper Lig enthusiasts, offering a web and mobile application that centralizes fan discussions, fosters community spirit, and keeps fans connected with the latest in football, all within a team focused environment.

1.1.2 Status

Currently, the design and initial implementation phases of the project have been completed. The class, use-case, and sequence diagrams have been prepared. Both the backend and the frontend have been deployed (at the URLs found in section 1.3). The web app has the login, registration, post creation, and semantic search features implemented. The mobile app has the login and registration features implemented. For our most updated and recent branch we use dev branch. Main branch is not in use until we resolve the merge issues regarding that branch.

1.2 URL to the GitHub code repository and the specific release tag

The GitHub repo of the project can be found here: https://github.com/bounswe/bounswe2024group8/tree/dev

The release for the second customer milestone is tagged with the tag Group8-Practice-App-Release-v0.1 and can be found here: https://github.com/bounswe/bounswe2024group8/releases/tag/Group8-Practice-App-Release-v0.1

1.3 URL to the deployed application using Docker

The backend is deployed at https://fanatic-backend-bjbpof6jaq-oa.a.run.app/, and the frontend is accessible at https://frontend-bjbpof6jaq-oa.a.run.app/.

1.3.1 Instructions for building and deploying the application using Docker

We have created a README file as a guide for building and deploying the application that can be seen here.

1.4 Internal links to the design diagrams

1.5 Internal links to the updated project plan

The GitHub Project Board can be found here. The responsibility assignment matrix can be found here.

1.6 Links to meeting notes specifically pertaining to the practice application

Meeting Notes 7 (Apr 12)
Meeting Notes 8 (Apr 21)
Meeting Notes 9 (Apr 25)

1.7 Lessons learned from the evaluation of tools and processes used for team management

1.7.1 GitHub

GitHub remains as our main platform for the development of this project. Unlike the First Milestone, we are utilizing the platform a lot more, as we started implementation of our app. It was crucial in tracking our coding process. Important lessons that we have learned leading to the Second Milestone is to pay lot more attention to our commits and merge operations, as it is possible to damage the work done in case of an erroneous operation.

1.7.2 Discord

We are still utilizing Discord as our main visual and auditory communication. Screen share and file sharing properties drastically enhance the communication efficiency and makes it lot easier to truly express ourselves regarding critical topics.

1.7.3 WhatsApp

WhatsApp was used for spontaneous communication purposes. We informed each other with important/urgent information regarding the project. We have also created polls to determine several important topics such as meeting dates. We were dividing tasks on WhatsApp to prevent conflicts.

1.7.4 Mermaid

Mermaid was our choice for creating diagrams of various types. It being fairly intuitive and easy to write made it lot easier for us to create these diagrams.

1.7.5 Docker

We have used docker to run and build our app as containers. It made us possible to run our app regardless of the system without concerning about dependencies. Docker has also made the deployment process much simpler.

1.7.6 Postman

Postman was used during the implementation process to test and observe backend endpoint behaviors. It also allowed Frontend and Mobile teams to observe backend request and response structures to adjust their design while creating interfaces.

Overall we are satisfied with our practices and choices of apps and it is safe to say that we have gained valuable experiences regarding these tools and team management methods.

1.8 Challenges encountered and strategies used to address them

1.8.1 Front-end

At first glance, we thought that creating few pages with React can't be hard even if we don't have a significant experience in the web development. Our troubles mainly sourced from not familiar with frontend development paradigms.

Dynamic structure of React was very hard to get used to and use effectively. We always found ourselves doing bad practiced implementations and we needed to go back and do updates on our previous codes. This frequent revisiting of code not only slowed our progress but also made it difficult to maintain consistency across different components.
We had trouble understanding some "weird" behavior of CSS because of lack of experience. When we started implementing our login, sign up, and home pages, we realized that our CSS files can affect other pages even if we don't import them in that page. This issue was particularly perplexing and led to unexpected styling conflicts that took time to debug and resolve.
Another challenge we faced was synchronization. Since we develop our pages concurrently, changes in the other pages were not known until they're reflected in our repository. So we tackled that issue by constantly communicating. This approach, while helpful, required us to invest extra effort in coordination and occasionally led to delays when merging our work.

1.8.2 Back-end

In the development of our backend using Spring Boot, our team faced several significant challenges due to varying levels of experience with the framework and backend development in general and lack of communication.

Learning Curve with Spring Boot: Given that most team members were new to Spring Boot, initially progressing with the framework's complexities was difficult. To handle this, Yekta, who had substantial experience with Spring Boot, took the lead in preparing the basic code structure and skeleton. This approach not only accelerate our initial development phase but also created a reference framework that enabled other team members to learn and contribute more effectively by example.
Inadequate Initial .gitignore Configuration: We initially overlooked the proper configuration of the .gitignore file for our backend environment. This oversight led to issues with repository management, as unnecessary files were being tracked and updated. The team had to revert commits and restructure our repository management strategy to ensure a cleaner and more efficient workflow.
Implementation of Security Features: Another significant challenge was implementing mandatory features such as Authorization and Global Exception Handling. The complexity of Spring Security requires these elements to be in place for the application to function. Yekta handled the basic integration of these components early in the development process, which was crucial for building a secure and robust application.
CORS Configuration Issues: During deployment, we encountered Cross-Origin Resource Sharing (CORS) errors, which were critical as they prevented the frontend from interacting properly with the backend. To address this, we adjusted our CORS policy to handle OPTIONS requests and let all of the header types to be sent, which resolved the immediate blocking issue. However, this solution resulted in a less secure backend. This security will be reinforced in the future.

1.8.3 Mobile

None of us were too familiar with React Native and getting used to it took some time for our mobile team. At first we didn't really distribute the tasks and this lead to multiple people working on the same tasks. We solved this by arranging multiple meetings. On some parts our code was buggy we couldn't figure out what the issue was in our code, we decided to get help from other team members. While they were helping us with these bugs, we helped them with their bugs in exchange.

1.8.4 Deployment

Dockerization and deployment process was a challenging part of our implementation journey, as almost no one in our group had significant experience regarding those. We initially had difficulty in dividing the app in containers, since we were running Postgres database server client directly on our computers instead of an individual container. Then, after forming the container structure, we have encountered several problems during the deployment phase. We had a lot of trouble while trying to sign up to DigitalOcean due to credit card errors. Finally, after switching to GCP, we had minor problems regarding the request addresses. We solved these aforementioned problems by patiently learning about deployment practices and trying them.

1.8.5 Overall Difficulties

By far, the most challenging difficulty we have faced is to synchronize and communicate. This problem created major inefficiencies during our implementation period, as all teams had to revise their implementations after facing inconsistencies between different layers and timing problems. We also had to modify our previous designs and ideas due to lack of detail, since it became quickly noticeable during the implementation. We have addressed these problems by arranging more meetings and communicating more instead of trying to overcome problems by ourselves. The other critical difficulty we had to overcome was to use git properly. Due to some erroneous commits and pull requests, we had to rollback 19 commits and do some of our work once again. We have also wasted time by trying to properly construct gitignore file, since we have accidentally uploaded unexpected files to our codebase. We again overcame this problem by increasing our communication when committing or merging our work.

2 Contributions by Team Members

Member	Contribution
Ersel Çanakçılı	After the first milestone, since we completed requirement analysis phase we have moved to the design phase. Together with @yektaercul and @daghanerdonmez, we created class diagram of our project using draw.io(#67). After we are done with the design phase we splitted into team as frontend,mobile and backend. I took part in the frontend team together with @daghanerdonmez. Since I had not previous experience in the web development, I started learning React using their tutorial in their website. After some time I decided to start developing our web page and started to implement our login and sign up pages(#79). When I’m done with those pages, I pushed my code to our repository and resolved conflicts with the current files(#97). Simultaneously, our backend team were implementing an API for communication between frontend and backend. After they are done with that, I implemented login and sign up pages in a way that they interact with the backend to store and fetch users instead of mock data which we used to test our frontend(#105). At the same time @daghanerdonmez was implementing our home page and I helped him by updating the create post feature(#128). Then we together pushed our code to our repo and concluded development of frontent for the 2nd Milestone. Then, I updated our RAM by adding latest tasks and meeting to the table(#133). At the end, I reported challenges in the frontend development and my contributions to the Milestone2 Report(#140).
Onur Çerli	Since the first milestone, I have attended the weekly meetings and participated in the decision-making process. After the team formation, as a member of the mobile team I started learning react native, watching tutorials on Youtube, reading react native guide and also getting information about components. I started the implementation of the mobile app with initialization of the expo project. Then, I went on with the implementation of the login and registration page (Corresponding issue: #74). After that, I started with the backend integration. Firstly, I tried to get familiarize on how to use our backend by reading our backend code, comminucating with backend team and using postman to make some example requests. Later, I made some research on how to make api calls on react native projects and decided to use axios for api calls to backend. Then, I wrote the code for login and signup operations. (Corresponding issue: #109). Later on, I decided to add the feed screen which lets users to view posts and make searchs. For this purpose, I first created a post component which we used in feed screen to show post content and other post related infos. Then, I created the feed screen adding the applogo and a search bar at the top of the screen. Then, I added flatlist component to show posts by scrolling up and down. Then, added some dummy static information and tried the design and the components. Additional to that, I tried building apk for the app and tried the app with the deployed backend. I was also responsible for presenting the mobile app in the demo explaining the current features and the situation of the mobile part.
Sezer Çot	I initialized the backend using Spring Boot, connecting it to a PostgreSQL database. This setup included developing a user controller, repository, and service to manage the application's data and user interactions efficiently(#72). For the deployment task, I collaborated with my teammate to dockerize our application. During this process, I encountered some frontend issues which were resolved before deploying to AWS EC2. However, my colleagues opted to deploy the application on Google Cloud Platform (GCP) instead. I was actively involved in team meetings and worked closely with team members to ensure a unified and strong development process.
Eren Donmez	After the first milestone, firstly, I prepared a wiki page about useful Git commands and functionalities, which was advised by our TA (#69). In the design phase, I prepared the use-case diagram in accordance with the project requirements that were written before the first milestone (#68). Afterwards, I was assigned to the mobile team in our group. As I had no experience using React Native before, I followed the official React Native tutorial before I started coding (#76). In the implementation phase, I implemented the main menu for our mobile app (#94). I also implemented a dropdown picker in the registration screen on our mobile app that lets users choose their supported team (#118). In addition to all this, I attended all of the scheduled online meetings with my team. Personally, the only big challenge I faced during the design and initial implementation phases was regarding the usage of React Native. As I had no experience using React Native before (and very little experince with Javascript in general), the coding environment was somewhat foreign to me. However, I was able to overcome this problem by utilizing online resources such as StackOverflow and the official React Native documentation.
Yekta Ercul	After the Milestone 1 until today I have attented all of the meetings held. In Week 9, I led and participated in the creation of Class Diagrams with Dağhan Erdönmez and Ersel Çanakçılı, establishing a solid foundation for our application's architecture, detailed on our wiki page addressing issue #67. By Week 10, I refactored our project requirements based on received feedback, on requirements page addressing issue #71.During Week 11, my focus shifted to enhancing the backend, where I integrated authorization and authentication mechanisms, detailed in the config files addressing issue #99, restructured the backend folder to incorporate new features #100, and implemented dependency injection to improve modularity #101. I also developed Post and User Models with Oğuz Kağnıcı, complete with service, controller, and repository layers, accessible via User Model and Post Model and their corresponding service and controller layers addressing links #102, and introduced global exception handling to manage errors gracefully, as shown in the exception handling configs #114.By Week 12, I had created Docker configurations for our backend, frontend, and database with Oğuz Kağnıcı, crucial for consistent deployments across our development team, outlined in our docker-compose and Dockerfiles Backend, Frontend configurations addressing the issue #135. The result of these efforts was the successful deployment of our entire system to Google Cloud Platform, demonstrated through our frontend deployment and backend deployment addressing issue #136. I have helped Oğuz Kağnıcı to write the documentation about deployment and dockerization by explaining how I did them. Additionally, I documented the challenges and solutions encountered in the backend during this phase in our Milestone 2 Report, added to our Report page #142, providing a detailed account of our backend's evolution. In addition to all of these I have helped our Frontend and Backend team on how to use Postman, Github Desktop and how to connect database to our backend in local machines in order for them to integrate the backend to their local frontends for testing purposes.
Dağhan Erdönmez	After the first milestone, I started watching tutorials on Web Development. I was mainly on the frontend side but I watched some additional videos about backend to understand what we are doing as a team and to be able to communicate with the backend team better. #53. I have also created a UML Class Diagram compatible with our requirements with @yektaercul and @erselcanakcili #67. On the development phase, I setup our frontend project and made the initial commit to start the development #78. I first designed and created a roughcast of our static homepage which includes a feed section #80, navigation bar and a search bar to create a frame/skeleton to start building and adding features on. #81. Although backend was not ready at that point. I had built the feed capable of getting dynamic data so I have created a mock data input for the frontend #85. Then I have updated the navigation bar to give it its final form considering the changes I decided to do during the development process #91. I have done detailed design to the post component in the feed where I have added interactive, animated icons and did the styling. I have also designed and wrote the handling of backend-frontend interaction when a user interacts with a post, so that it is ready when the backend is ready to handle such information #92. I have done the styling for the signup and login pages of the website #93. I have also designed the navigation structure of the website considering the user authentication structure of the backend. I have implemented the Wikidata search feature to the frontend. Which includes getting search queries from the search bar and sending requests to backend and handling the response #126. I have also created the page showing the search results in accordance to the response data received and handled dynamically #127. I have planned and lead the frontend development. I have also done the merges and resolved the conflicts in frontend-frontend merges with the help of @erselcanakcili and done the same together with the backend team in backend-frontend branch merges #93 #124 #132. I have done the communication and discussion with backend team to develop the endpoints on the frontend side. I have assisted the backend team on the deployment process where I could help in terms of frontend code.
Oğuz Kağnıcı	Throughout the period between First and Second Milestone, I initially started by updating Mockups and adding Mobile ones based on the TA feedback. I also matched mockups with scenarios, which was also mentioned in the TA feedback (Corresponding Issue: #65). Then, I created Sequence Diagrams, while maintaining the correspondence between other diagrams and our design decisions(Corresponding Issue: #70). Afterwards, I was assigned to backend team for the implementation of the project. Therefore I have started learning more about Wikidata, SPARQL and Spring Boot (Corresponding Issue: #75). We have then started implementing the backend of the project with Yekta (Corresponding Issue: #72). I have written Wikidata and Post service classes and created Feed, Create Post and Search endpoints (Corresponding Issue: #98). I have than written a README about how to build and deploy our app (Corresponding Issue: #137). I was also among the presentation team during the demo session. I have provided an overview of our app and I have briefly explained our backend and container structure for the current version. I finally created the tagged release and filled out the remaining tasks in our Responsibility Assignment Matrix. I have attended all 9 scheduled meetings and many other spontaneous online and offline meetings during the implementation process.
Deniz Ulaş Poyraz	During our project, I actively participated in meetings, stating my expertise in various areas to our team members. After deliberation, the team assigned me to focus on mobile development, leveraging my skills in this domain. While I wasn't directly involved in creating the project diagrams, I provided valuable insights and feedback upon reviewing them. After we determined all team member roles I created initiator issues to start our project. In my role, I initiated the coding process alongside the team, following the distribution of tasks. Notably, I took the lead in designing the post screen layout (#130), crafting interactive buttons for user engagement (#112), developing a comprehensive profile management interface (#113), and designing the post publishing functionality (#115). I also connected the post publishing page to our backend server but we haven't tested it yet. Currently, I am engaged in integrating the rest our application with the backend system. Once this milestone is achieved, we will be on track to successfully conclude our project.
Ceylanberk Tola	During the period between the First and Second Milestone. My contributions are outlined as follows:I undertook the review of Sequence Diagrams to ensure they accurately reflected our design intentions and met the project specifications.In Web side I developed a 'Create Post' utility in the frontend. This utility is crucial for simplifying the post creation process, enhancing user interaction and functionality. For deployment task I collaborated with my teammate, Sezer, to dockerize our application. This task was pivotal in streamlining our deployment process and enhancing the scalability and portability of our application. Throughout this phase, I actively participated in team meetings and collaborated closely with team members to ensure a cohesive and robust development process.