This is the second milestone report for our group project, group bounswe2024group5. We are a group of enthusiastic students of the CmpE352 Introduction to Software Engineering course, committed to building a semantic information browser on the domain of Music that features posting about music, discovering others' contents, and interacting with other music enthusiasts. Our team members who have contributed to the project:

• ABDULLAH UMUT HAMZAOĞULLARI
• ARINÇ DEMİR
• ASUDE EBRAR KIZILOĞLU
• GÜNEY YÜKSEL
• HALİL UTKU ÇELİK
• ÖZGÜR DENİZ DEMİR
• RAMAZAN ONUR ACAR
• SEMİH YILMAZ
• SÜLEYMAN EMİR TAŞAN

Our project is a music-specific semantic information browser. Our platform, Melodify, allows users to share their posts related to music and semantically search for others' content. We utilize the Wikidata API to support our semantic browsing.

The objective is to utilize semantic search to provide a more enhanced search experience to the users in the domain of music. Such an approach not only improves the well-known social media experience but also provides a music-specific platform for music enthusiasts to enjoy without getting exposed to any unrelated/unwanted content.

Users can register to Melodify, set up a profile, and post using one of the various post templates given. Users can choose to post about a concert they attended, a musical instrument they are playing, or their favorite song. Through the usage of predetermined tags, users can enrich their posts and also look for similar content under a tag they like. Such tags are provided for music-related topics, such as genres, albums, popular bands, and more.

To sum up, we build a music-specific semantic information browser, on both the web and mobile, for music enthusiasts to socialize and share their music taste. Currently, the registration and login functionalities of the app are implemented. You can read more on the status of the project in the next section.

Since the submission of the previous milestone, we made progress on our project on several different points. We initially worked on the design diagrams. Upon learning and researching UML diagrams, we distributed the class and use-case diagrams among the team members. Corresponding assignees of the diagrams worked together to create them. We also asked for feedback from the TA and improved our design accordingly. Then, we distributed the sequence diagrams among us. Every team member worked on one or more such diagrams.

Next, we determined the name of our music-specific platform via voting. Then, we split the back-end, front-end, and mobile teams and pursued the implementation of MVP accordingly.

Currently, the login and registration functionalities of our platform are ready for use. We deployed this first version of our app, about which we further elaborated in the next section. Moreover, a basic search functionality for mobile is available. Users can search for a music-related query and we provide the most related results that we fetch from the Wikidata API.

In terms of organization, we fill a responsibility assignment matrix for individual contributions. Also, we utilize the Roadmap view of Github to visually keep track of our progress. Moreover, we continued to use several tools such as Discord, Whatsapp, and Github to ensure constant communication among us. We held weekly meetings, distributed the tasks among us, and took detailed meeting notes for good quality documentation. Especially after splitting into mobile, front, and back-end groups, we held several meetings to discuss the implementation details. Sometimes, we did pair programming during these meetings to maximize our productivity. Jump here for more on our team management process.

Our implementation code resides in our Github repository.

We deployed our application for this milestone. The specific release tag can be found at release Group5-Practice-App-Release-v0.1.

URL: http://34.118.44.165/

Our application is running on port 80, it does not support HTTPS yet.

To build and deploy the application, run the following command in the main directory of the GitHub repository:

docker-compose up --build

To run the mobile app:

• follow the instructions in our repo.
• make sure to downgrade to the proper node version 20.5.1 if you encounter the DeprecationWarning.

The class diagram is available on the wiki page. Deniz, Semih, and Güney worked on it. Süleyman reviewed it and contributed to the improvement. See the issue discussion.

The use-case diagram is available on the wiki page. Arınç, Ramazan, and Süleyman worked on it. Ebrar reviewed it and contributed to the improvement. See the issue discussion.

The sequence diagrams are available on the wiki page. Everyone worked on one or more sequence diagrams. See the issue discussion.

We utilize Github's Roadmap feature for project planning and progress tracking. We revised our project plan, as well as the tentative plan for the future weeks. You can observe our project plan here. We also utilize a responsibility assignment matrix to split the workload among the team members and visually keep track of the work done. You can view our RAM on the wiki page.

After splitting into back-end, front-end, and mobile teams, we held several meetings to discuss the details of our implementation. We gathered the meeting notes in the wiki.

• Back-end Team meeting notes can be viewed here.
• Front-end Team meeting notes can be viewed here.
• Mobile Team meeting notes can be viewed here.

Throughout the process of implementing the MVP of our project, we learned:

• how to contribute to a project using Git and Github. We had to use branches and commits effectively to keep consistency between the versions of the code and to work collaboratively with the team members.
• how to create UML diagrams before getting our hands dirty with coding. This helps us organize our code effectively and communicate the way we want our program to function.
• how to create mobile apps using the React Native framework.
• how to use Expo Go, AndroidStudio, and xCode to simulate mobile environments.
• how to connect our front-end code with the back-ends and APIs.
• how to apply the designs we had made through the UML diagrams into implementation. For instance, we applied the content of the class diagram to implement different types in the mobile.
• how to create a Spring Boot application from zero.
• how to prepare an API Documentation using Swagger.
• what is Bearer token, how it works, how we can use it in our backend, frontend, and mobile app.
• when to use dockerized frontend and when to not in the development phase.
• when to use abstraction when designing the interfaces in React.
• how to work in sync with the backend as the frontend team.

We kept constant communication among the team via WhatsApp and Discord. We held regular weekly team meetings according to the communication plan we established. After forming the sub-teams for implementation, we also held smaller team meetings for mobile, back-end and front-end separately. Whenever we needed to have a discussion between the teams, if it is not something we can handle with immediate communication through messaging, we organized additional meetings.

Also, we made use of a Responsibility Assignment Matrix that can be viewed from the wiki page. Thanks to RAM, we kept track of individual progress as well.

Frontend Team: One of the challenges we faced at the beginning of our frontend implementation was that we had to come up with a lot of names to serve as CSS classes so that we could effectively style our components. To solve this issue we decided to go with an inline styling option and we particularly opted for TailwindCSS. It provided a much easier and enjoyable developer experience in terms of styling our page. Another challenge we faced upon completing the layout of our page occurred when we tried to connect to our backend services to make HTTP requests. First, we got errors because we were sending the requests to the wrong URL. After troubleshooting that we got CORS errors. After discussing this issue with the backend team and adjusting the backend code to give the necessary permissions, we successfully connected our endpoints. Last but not least we realized there was an issue with the backend container because it was abruptly stopping. Later on, we realized that this was due to a race condition between containers. When our backend team revised the compose file, this issue was also resolved.

Mobile Team:The biggest challenge was that each three of us was inexperienced with mobile development. We didn't even know where to start in order to learn the skill. However, after each of us did some research into the area on our own, we were able to come to the point where we could build a simple mobile app. After that, we researched features that we needed specifically, like Login, Registration, Feed, and Profile pages, and implemented them. Moreover, we encountered some difficulty working around the node versions. For the most updated version of npm, we encountered a DeprecationWarning warning: The punycode module is deprecated error. We resolved this issue by downgrading the node version to 20.5.1. In addition, we had a hard time running mobile simulators on our computer in the beginning. We addressed the issue by Arınç being able to make it work on his computer and then helping others reproduce the steps necessary. Also, we initially could not connect mobile to the Backend properly. To resolve this, we received help from the back-end team and we held a joint meeting (see Mobile Team Meeting Notes #3 with the Back-End Support for more details). We worked together to deploy docker containers properly and also utilized Postman to confirm the authentication for registration and logins work fine in the mobile part.

Backend Team: As the backend team, all tasks were challenging for us. The first challenge involved connecting to the database running in a container, not from the backend but from our local terminals. After a couple of hours, we discovered that the database should be bound to the 0.0.0.0 address. From that point on, we could successfully connect to the database. The second challenge also related to the database. When we started the database container, the "melodify" database was created, but the tables were not. After a few hours, we identified the problem as the Docker volume used for database files. When this volume contained data, MySQL assumed it should not run the initialization scripts and skipped those steps. Deleting the volume resolved this issue, allowing us to see our tables in the database. The third challenge was connecting the backend to the database. The backend could not establish a connection, resulting in the container exiting with status 1. Upon investigation, we realized that the backend was attempting to connect before the database container was ready. We added a dependency for the backend container to wait for the database. The final challenge involved using the latest versions of Spring Boot. Since we had no prior experience with Spring Boot, we looked for examples on GitHub and other resources, but all were for older versions and were incompatible with our version. Eventually, we found a guide for JWT authentication and adapted it for our implementation. When we overcome those challenges, all tasks in this milestone were finished.

Initially, I collaborated with other team members to update and finalize the Use Case diagrams, incorporating valuable feedback and reviews, as outlined in issue #104. I engaged in planning activities by learning and initiating the Sequence Diagram, dedicating time to understand its intricacies and implications, as documented in issue #117. Additionally, I played a pivotal role in enhancing our project's mobile application, where I initialized the application using Expo and introduced initial pages to enhance its functionality, as detailed in issues #126 and #127. As our project progressed, I continued to contribute by finalizing the Sequence Diagram, ensuring its completeness and accuracy per issue #117. Moreover, I extended the project's functionality by creating a Feed Page and incorporating various types, addressing issues #134 and #135. Furthermore, I collaborated with the backend team to establish connections and integrate the Create Post Page functionality, tackling issues #152 and #153. Finally, I dedicated time to address minor bugs in the mobile application, ensuring its smooth operation and user experience, as captured in issue #158. Through these concerted efforts, we advanced our project closer to its objectives, contributing to its overall success even though we faced a network error in our apks.

In this milestone, I started by creating a sequence diagram for the follow-unfollow user operations #124. Then, Semih and I began the API design #122. We defined API paths, request bodies, parameters, and responses. We learned how to use Swagger and used it for API documentation. After the login and register endpoint designs were finalized, I began dockerizing the project #125. I created a Dockerfile for the backend and wrote a docker-compose.yml, which also includes a database container, for deployment. Concurrently with the dockerization process, I also began initializing the backend #141. After completing these two tasks, we had our backend application template ready, with the ease of implementing endpoints, and a database that starts with docker-compose up and can be connected to by the backend. I conducted research on authentication processes and we decided to use JWT authentication with the use of Bearer tokens. Following this decision, I implemented the authentication logic, which affects all current and future endpoints #163. Throughout this period, I also reviewed several pull requests and assisted the mobile and frontend teams with backend connections. When we completed the implementation for this milestone, I began working on the deployment #164. I created an Nginx configuration file and added it to a new Nginx Docker container. I created a VM instance on Google Cloud and configured it for HTTP/HTTPS traffic. I replaced hard-coded IP addresses in the mobile and frontend code with our Google Cloud VM's IP address. Then, I built the project, uploaded it, and ran it. Before the demo presentation, I tested whether our deployed application was working from both mobile and web frontends.

I worked on creating the use-case diagram with Ramazan and Süleyman #104. Then, I created the sequence diagram for "Seeing Search History" #120. In addition to those tasks, I worked on the mobile app with Ramazan and Ebrar. First I did research on JavaScript, React and React native. I learned how to use those tools in order to help my teammates. I attended 2/3 meetings that we held with the mobile team. I contributed to the project in implementing the create post page #153. In addition, I implemented the semantic search functionality of the mobile app #154. Before the demo session, I was the only one who was able to run a simulator in their computer, so I did a lot of testing with my teammates. I also did some minor bug fixing before us submitting the release #158. Other than that, I wrote 1.8 and 1.10 of the Milestone Report. I submitted the release and wrote the instructions for running the mobile app.

For me, the first challenging thing was getting used to the JavaScript syntax. I expected to learn it very fast since I had experience with many programming languages, but it has many weird functionalities. How I solved the issue was I asked the things that were bugging me to chatgpt and asked it to create examples. I think that it is a great tool nowadays to learn something. The other challenging thing was to understand how frontend and backend communicate. I had no idea how validation, authentication worked beforehand. However, it turns out that the frameworks that we are using make that task very convenient, so a few youtube videos and google searches helped me get it.

For this milestone, I first worked on drawing class diagrams with my fellow teammates Güney and Semih. After that, I created the sequence diagram for creating a post.(#131). But most of my efforts for this milestone were put into the implementation of the front-end part of our MVP. I initialized our front-end project and redesigned our login and registration pages. After that, I implemented those pages in React with my front-end teammates Umut and Güney. (#144). We held a meeting as front-end team. I also dockerized(#145) our front-end project so that it could work seamlessly with the rest of our project and could be deployed easily.

For this milestone, I first worked on drawing sequence diagram for refresh page. Mostly, my part was in the frontend team. I added crucial features to frontend. Some of them are: Password hiding, redesigning routers for login and registration pages, putting a (non-functional) search bar in the feed page, creating a log out button, and providing general feedback to the general design. My teammates were Deniz and Güney. (#144). I attended the front end meeting. I've also contributed to front-end parts of the Customer Milestone 2 Report.

For this milestone, I initially worked on the use-case diagram as a reviewer. After my teammates created the first draft, I did an exhaustive review and held a meeting with Suleyman. to further improve the diagram. Then, I took the initiative in my group to ask for feedback from the teaching staff for the class and use-case diagrams. Then, I determined which sequence diagrams we would design and assigned them to the team members, see issue 111. I worked on the sequence diagrams Load Feed Page, Like a Post, and Comment to a Post. I also initialized the first draft of this milestone report. I wrote the sections 1.1, 1.2, 1.5, 1.6, 1.7, and 1.9. I also contributed to 1.8 and 1.10 in terms of mobile implementation.

In terms of implementation, I was a part of the mobile team. Not having any prior mobile experience, I started by getting familiar with React Native, and TypeScript. With supportive guidance from my teammate Ramazan, I implemented the personal profile page, #136. Then, I worked on some design details to make personal and feed pages look similar to each other, and to the web design. I worked together with Ramazan to resolve the node version issue we encountered and took notes of the solution in our repo. I attended and took notes during all the mobile team meetings. I worked with Ramazan on a connection with the back end, #152. I also worked on resolving minor bugs, #158 we encountered in mobile at the last minute, alongside my teammates. For the demo of our project, I organized the flow of our demo and presented it with Suleyman and Abdullah Umut. I actively took part in almost all group organizations (to the extent of my technical knowledge).

For me, the most challenging part was to comprehend the scope of the implementation, and how mobile front-end and back-end come together to deploy an application. I have not had any prior experience with such development and almost all of the technologies we have used were new to me. Although I initially struggled a bit, I did research and asked lots of questions to more experienced teammates to get familiar with the work and I tried my best to contribute to the mobile development of the application. Now that I have more insight into the scope of app development, I am eager to contribute more in the next chapter of our project.

In our journey, I collaborated closely with Arınç and Ramazan in crafting detailed use-case diagrams, laying the groundwork for our project. As a meticulous reviewer of our Class diagrams, I provided insightful feedback, enhancing their clarity and utility. Similarly, I meticulously did two sequence diagrams, also I was the reviewer of the remaining sequence diagrams. Transitioning to the challenging terrain of backend development, I immersed myself in API design, providing crucial feedback to elevate our backend architecture. Grappling with the intricacies of backend fundamentals, I swiftly acquired essential skills, bolstering our team's capabilities. Throughout our journey, I provided some feedbacks to Utku as I took on the role of a reviewer across multiple stages of back-end development. Engaging directly in endpoint testing, I ensured the robustness and reliability of our codebase. In a collaborative effort with Semih, I spearheaded the integration of the Wikidata API, enhancing our project's data capabilities. Additionally, I helped with Utku to streamline the Mobile team's processes through effective dockerization. Lastly, I took charge of preparing and delivering our team's demo presentation, representing the backend team with confidence and clarity, showcasing our collective achievements. I also took back-end meeting notes and wrote them into wiki. During the implementation process, I did huge changes in RAM.

The most challenging phase for me was the implementation phase. I learned a lot of new things and it was very difficult to put them into practice. I received help in many places and followed the lead of my friends. However, I can say that I have reached a stage where I can contribute sufficiently to my team in the following stages.

I collaborated with Güney and Deniz on the initial version of the class diagram. Subsequently, I revised it based on feedback from the TA #106. Additionally, I developed a sequence diagram for modifying profile details #128 and reviewed several other sequence diagrams. I conducted research on best practices for RESTful API design #109 and collaborated with Utku on the API design #122. I organized API paths and familiarized myself with Swagger for documenting APIs. I structured a relational database that covers requirements and wrote MySQL create table queries for it #132 . As a beginner, I dedicated myself to learning backend development with the Java Spring Framework. Later, I integrated a wiki data API call feature into the backend and established corresponding APIs for our mobile and web applications with assistance from Süleyman #155. Finally, I reviewed backend meeting notes and added missing action items.

Wrote the majority of the first version of Class Diagram alongside two of my teammates. Learned React on a basic level. Wrote the small part of the frontend part, one of the routers, to be precise. Wrote the Filter Posts and Filter Events parts of the sequence diagrams.

Ebrar, Utku, Arınç, Abdullah Umut, Deniz.