Milestone Report 2

1. Executive Summary:

Summary of the project and its current status

This app is like an online hangout place for people who love books. It's similar to Letterboxd, but instead of movies,it's about books. Here’s what you can do on the app:

Write About Books: You can write about the books you've read. It’s a great way to share what you think about the story and characters. Whether you liked the book or not, you can tell everyone what you think. Bookmark Books: If you find something really interesting or important in a book, you can bookmark the book. This way, you can easily find it again and even show it to your friends on the app. Follow Other Readers: You can follow other people on the app to see what they’re reading and what they are saying about different books. You can like their posts, comment on them, or share them. It’s all about making friends who likes similar books as you. You can explore interesting books that you may like. Search for New Books: The app lets you look up books by their title, author and more advanced filters. This is really handy if you’re looking for something new to read. You can even filter your search to find exactly what you’re interested in. Imagine logging into the app and seeing a feed full of book posts from people you follow. It's filled with bookmarks and reviews. Every post is like a little chat about books, full of comments and thoughts from other readers. And if you want to find new books, just use the search bar and pick your favorite type or author.

This app turns reading into something fun and social. It lets you keep track of your books, share your thoughts, and connect with others who like reading just as much as you do.

Description	Link
GitHub Repository URL	GitHub Repository
Release Tag	Group3-Practice-App-Release-v0.1
Deployed Application URL using Docker	Deployed Application

Instructions for building and deploying the application using Docker

There are 4 Docker containers:

PostgreSQL DB: Used for storing and serving user data, we used a ready-to-deploy Postgres image. Nginx proxy: To serve the frontend and the backend from the same server. If there is “api” in the requested URL, the request is forwarded to the backend container, if not, the request is forwarded to the backend container. Under docker-compose/proxy/ we have a custom nginx configuration for our forwarding rule. Frontend server: Installs dependencies, builds and runs the React development server. The container is based on a ready-to-deploy node image. Backend server: Installs dependencies, makes migrations on the database and runs the Django API server. The container is based on a ready-to-deploy python image.

We handle the build and deployment of these containers using Docker Compose.

To build and run the containers, simply navigate to the docker-compose/ directory by running

cd docker-compose

And then run

docker-compose HOST_URL='0.0.0.0' docker-compose up --build -d

to build and run our project.

After the build of containers is finished, the website can be accessed through: http://0.0.0.0/

We also provide a deployed version of our project on: http://207.154.246.225/

Document	Link
Class Diagram	Class Diagram
Use Case Diagram	Use Case Diagram
Sequence Diagram	Sequence Diagram
Project Plan	Project Plan
Responsibility Assignment Matrix	Responsibility Matrix
Division of Development Workload	Development Team Members
Meeting Notes (Practice Application)	Meeting Notes 7
Meeting Notes (Practice Application)	Meeting Notes 8

Lessons learned from the evaluation of tools and processes used for team management Calendar It made it quite easy to know when the meeting was, and we didn’t need to constantly send each other meeting links, as we had a single link that was sent to us in an email. Whatsapp We used it to communicate if anything urgent happened. Since everyone uses WhatsApp in their day-to-day life for communication, it was easy to contact each other through WhatsApp. Meet It was quite fast and easy to share screens if necessary. We didn’t have any connection problems while using it as well. Discord Screen sharing was troublesome. It was very pixelated.

Challenges encountered and strategies you used to address them While using Discord, when we shared screens, it was very pixelated, and we couldn’t see what the other person was sharing clearly. So, we used Google Meet when we needed to share any screens.

We splitted the section about the challenges we encountered into three parts on the basis of teams.

Front End Team The biggest challenge was using CSRF tokens, since we need to store it in cache. We first tried to give the token in headers, but then realized it should be also in the cookies and axios(the library we use to make queries) blocks cookies. This took us nearly 6 hours until late hours. Also, it took us some time to run install the backend in our local to test the frontend. In general, we gather in our meeting link with other teams if we encounter a problem. By this way we could easily solve our problems. Back End Team We have encountered problems accessing the WikiData, as the SPARQL was hard to grasp, and we had to optimize the query since each query was taking too long CSRF… Mobile Team It was quite troublesome to run the projects locally. We needed to download large files to run the app on emulators such as Android SDK. Additionally, we encountered problems connecting the endpoints with CSRF tokens. It was our first time connecting to an endpoint with a token, so we didn’t really know what it was. After doing a quick search and talking with our frontend members we managed to implement it.
We also had some difficulty deploying the release apps because of the security controls on our mobile phones. In the end, we found that we had some missing parts in our AndroidManifest file, but after adding them, the release went smoothly. We didn’t need to run the backend on our local machines since our backend team had deployed it before we started implementing our endpoint connections. Thanks to them, we had an easier time. Another struggle in mobile team was releasing our app on IOS, we kept getting network errors probably because of the security policy of the IOS and request format we implemented for Android. We did not have it in our requirements so we could leave this issue to solve later.

2. Contributions by Team Members:

Abdurrahman Arslan

I fixed the Glossary page for the missing definitions and updated it according to feedbacks. https://github.com/bounswe/bounswe2024group3/issues/89 I redrew the use case diagram. https://github.com/bounswe/bounswe2024group3/issues/88 I updated the RAM. https://github.com/bounswe/bounswe2024group3/issues/138 Reviewed issues.

Esad Yusuf Atik

Contribution	Details
Scenarios	I fixed scenarios according to updated requirements.
Backend Initialize Django API	I set up the Django project.
Backend: Create DB models	I created some of the DB ORM models for that we would need for our project.
Backend: Handle CORS	I set up CORS for our backend.
Backend: Dockerize the application	I dockerized the backend and frontend servers.
Backend: Deploy the application	I deployed the application to DigitalOcean
Backend: Review	I reviewed every backend pull request in the repo.

I didn’t face any problems in the design phase nor the implementation phase. Though, I was writing Dockerfile’s and docker-compose.yml’s for the first time so it was a bit hard to grasp.

Ekrem BAL

Contribution	Details
Organization: Decide on Teams	Coordination and decision on team formation.
Wiki: Draw Sequence Diagrams	Collaborated in the creation of sequence diagrams for project documentation.
Wiki: Draw Class Diagrams	Participated in drawing class diagrams to outline the software structure.
Doc Fix: Miscellaneous Errors	Fixed mistakes in milestone 1 deliverables
Frontend: Skeleton Code for React	Developed initial skeleton code for the React frontend framework. This includes adding tailwindcss, daisyui, initializing navbar and footer components a layout component where it automatically adds navbar and footer to every page.
Wiki: Sequence Diagram	Created a single sequence diagram
Web: Global State for Logged-in Users	Implemented a global storage for storing usernames for the logged in users. I used useContext and react hooks for this.
Web: CSRF Token Management	Saved CSRF tokens in cookies, spent hours on this issue. It turned out axios has a setting for storing tokens in cookie.
Feature Request: Implement Book Search	Added search functionality to search textbox in the navbar
Web: Create Web Release	Save the react build as release

Enes Sait Besler

Contribution	Details
[Milestone Report]	I wrote the summary of the project together with Batuhan Solmaz and was with the team during the writing process of the Milestone report.
Backend	I coded and gave the login section in the django code to Batuhan and some parts I was with the team, reviewed some code.
Wiki	I wrote the meeting notes 8 and 9 and added to the wiki.
Doc Fix	I reviewed the non functional requirements update.
Wiki	Contributed to drawing class diagrams.

Onur Dilsiz

Contribution	Details
Organization: Decide on Teams Coordination and decision on team formation.
[Wiki]: Draw Class diagrams I prepared a class diagram using mermaid then, we gathered and fixed it together as a group.
[Doc Fix]: Nonfunctional Requirements I added a compatibility part, I have decided the constraints in nonfunctional requirements. Then, I have added some requirements that I found necessary
[Frontend]: Skeleton code for React We have prepared the base of the our front end code
[Web]: Simple SVG Manager I have written a simple component to manage SVG Icons easily.
[Web]: Implement Form input component I have written a input form component for all our inputs.
[Wiki]: Draw sequence diagram for editing profile I drew a sequence diagram for editing profile by using mermaid.
Web: CSRF Token Management Researched on the CSRF errors, spent hours on this problem.
I have contributed to the milestone report by writing the links.
I have encountered a problem while installing postgresql, I have spent hours to find the solution. However, I could not fix the problem even though I tried many solutions on my Windows computer. As a temporary solution, We have written the code with Ekrem on Ekrem's computer, when it is necessary to interact with backend. Also, CSRF was a challenge for us, the system returned an error which says that cookie is not set. Then, we solved the issue after a research taking long hours.

Abdullah Enes Güleş

Fixed requirement types that were wrong in our first milestone here: https://github.com/bounswe/bounswe2024group3/wiki/Functional-Requirements Rewrite communication plan here: https://github.com/bounswe/bounswe2024group3/wiki/Communication-Plan Creating user authentication sequence diagrams here: https://github.com/bounswe/bounswe2024group3/wiki/Sequence-Diagrams I refactored the initial code that Yusuf Suat created for easier readability, bug fixing and better naming conventions on this commit: https://github.com/bounswe/bounswe2024group3/commit/8a49df5c84e0e5bb13fac34229167327e755b0d4 Connected the mobile app screens that Yusuf Suat created with the backend endpoint on this branch: https://github.com/bounswe/bounswe2024group3/tree/abdullah/mobile-endpoints Implemented displaying search results on this branch: https://github.com/bounswe/bounswe2024group3/tree/abdullah/mobile-endpoints Created a pull request to merge with main here: https://github.com/bounswe/bounswe2024group3/pull/132 Created a working release of the app described in this issue: https://github.com/bounswe/bounswe2024group3/issues/135 Contributed to creating the milestone report. Reviewed issues.

Batuhan Solmaz

Contribution	Details
Report: Take the meeting notes I wrote the meeting note and added to the wiki
Report: Contributed to creating the milestone report. I wrote the summary of the project and personal effort
Backend: Contributed to Backend. learned django framework
I wrote the login, signup and authentication in the backend branch of the project.
Fixed the reviews of functions.
Reviewed the code in the backend branch that mt friends wrote.

                                                                                           	|

| [Diagrams: (https://github.com/bounswe/bounswe2024group3/wiki/Use-Case-Diagram) Creating first model of the use case diagrams then reviewed the use case diagram that my friends made | | [Requirements: (https://github.com/bounswe/bounswe2024group3/issues/92) Fixed requirement format that were wrong in our first milestone here:|

Ahmet Burkay Kınık

Contribution	Details
Milestone Report	I contributed to the milestone report by writing part of the tools and processes used for the team, challenges encountered by the backend team, and my personal efforts.
Backend: Contributed to the backend	I learnt Django Framework and SPARQL. I wrote the book/search endpoint using this two.
Docker	I helped Esad dockerize the application by learning the concepts myself and
Requirements	I fixed the Content Interaction part of the functional requirements based on the feedback.
Sequence Diagram	I created a sequence diagram showing how bookmarking a book page will work.
Development Teams	I created a document showing each member’s development team.

Yusuf Suat Polat

Contribution	Details
Milestone Report	I contributed to the milestone report by writing the part about challenges we met in the mobile team especially in IOS, and my personal efforts.
Mobile	I wrote the code for Version 0.1, which involves the main structure of the pages, their designs and the logic.
Feedbacks	I organized and attended the meeting with TA as the communicator of the team. And then I interpreted, and splitted the workload of fixing the problems among my teammates, documented in issues.
Requirements’ Format	I fixed the issues related to the formats of requirements. Details can be seen in the issue.