Customer Milestone 2 Report - bounswe/bounswe2024group4 GitHub Wiki
Executive Summary
Summary of project and overall status
Our NBA Forum project is a platform where basketball enthusiasts can connect and discuss their favorite teams and players. Users can sign up with an email and password, create unique usernames, and log in securely. They can customize their profiles, control privacy settings, follow other users and interact with posts by liking, bookmarking, commenting, and sharing. Guests who do not have an account on the platform can also display posts, team and player pages. The platform's main page displays the latest posts to view personalized feeds and has options to view popular content for the day. Team and player pages provide detailed information fetched from Wikidata API. Users can search for these team and player pages, profiles, posts or similar contents using advanced filters. Posts support text, images, and videos, with automatic redirection to relevant information pages. Each user has a profile page displaying their information and posts. The platform supports both web and Android interfaces with compatibility across browsers and devices.
From the first milestone deadline until now, we updated requirements for project according to feedback, added diagrams to describe the basic structure of implementation and connections of the applications with users and implemented project partially to achieve some features. Currently, no guest services are provided but users can sign up with authentication and their registration data can be inserted into database. So, users can sign in and display a simple main page that will be developed later. In addition to registration, login and demo feed features, users can search team and player pages that contain information retrieved from Wikidata with a search bar on the navigation bar above the web page or an another search page in the mobile application. Finally we dockerized frontend, backend and mobile parts of the project and deployed the application.
List the status of deliverables
Deliverable | Status | Due Date | Related Link |
---|---|---|---|
Class Diagram | Delivered on time | 30 Apr 2024 at 22:00 | Class Diagram |
Use Case Diagrams | Delivered on time | 30 Apr 2024 at 22:00 | Use Case Diagrams |
Sequence Diagrams | Delivered on time | 30 Apr 2024 at 22:00 | Sequence Diagrams |
Updated Project Plan | Delivered on time | 30 Apr 2024 at 22:00 | Github Roadmap |
Responsibility Assignment Matrix | Delivered on time | 30 Apr 2024 at 22:00 | RAM |
MVP Implementation | Delivered on time | 30 Apr 2024 at 22:00 | Release 0.1 |
Customer Milestone 2 Report | On progress | 3 May 2024 at 22:00 | Milestone Report |
URLs
- Github code repository
- NBA Forum v.0.1
- Webpage
- You can find the instructions about building and deploying the application under the files general README, backend README, frontend README and mobile README. You have to check the files under bounswe2024group4, backend first. Then check frontend for webpage and mobile for mobile application.
- Use Case Diagrams
- Class Diagrams
- Sequence Diagrams
- Project Plan
- RAM
- Meeting 6 Notes
- Meeting 7 Notes
- Meeting 8 Notes
- Meeting 9 Notes
- Meeting 10 Notes
- Backend Meeting 1 Notes
- Frontend Meeting 1 Notes
- Mobile Meeting 1 Notes
Lessons learned from the evaluation of tools and Processes used for team management
Django
In terms of backend, Django was very useful for us. Its helper properties helped us so much while implementing the signup and login functions and connections to the database. However, learning the file structure from scratch was challenging because there were too many files and the naming convention was not very intuitive. We learned that most of the time, we do not have to implement everything, especially for complicated thing there is always a library
Zoom, Discord and Whatsapp
In the implementation part of this milestone, we had to be strictly synced we our team members. Therefore, we had to be able to communicate to others instantly. WhatsApp groups were very useful in this manner. We created groups for each team and also added representatives from other teams to ensure the communication between teams. WhatsApp was sufficient for most of the communication about implementation since we were not making decisions just implementing them. Zoom and Discord were used for team meeting like the previous milestone. Also, Discord was helpful when more than on people had to work on the same thing together.
Github
Some people in our team were not very used to using Github in projects. In this implementation, we had to chance to learn how to maintain a project on Github in a comprehensive project. We sometimes had to learn new properties to not disrupt the code of others. We also used Github Roadmap to create our project plan, so we had to learn some specifications about it. In addition, we made use of issues to learn about where is our team in other parts of the project and what problems do our team have, we even solved a bug just thanks to a nicely documented issue and other people checking the issues page. As a result, we spent so much time on Github to keep our project on line and got very used to it.
Challenges encountered and strategies
- Planning the Database: Figuring out how to set up the database and draw diagrams showing how data is connected was tricky.
- Setting Up Software: We needed to pick and install the right software so everything would work well together, especially the database.
- Linking Frontend and Backend: Making sure frontend and the backend part talk to each other smoothly was important.
- Designing Process Flows: We spent time deciding how to visually show the steps that data takes through our system using sequence diagrams.
- Launching the Website: Getting our project onto a server so people could actually use it involved several steps and was quite a process.
- Writing Docker Files: We had to write Docker files to make sure our project could run both on our computers and in the cloud without problems.
- Creating the APK: There were lots of problems which made us struggle a lot. We weren't able to test the APK on a physical device since we are not using Android phones. We used emulators but they acted different in terms of the OS. For example sometimes IOS simulator was working while Android was crashing. It isn't the best practice, but we tried and failed and tried and failed 😄
Contributions by Team Members
Zeynep Buse Aydın
- I created the sequence diagrams related to account (viewing own profile and editing profile). They can be found here. #75(https://github.com/bounswe/bounswe2024group4/issues/75)
- I researched React Native for the mobile application and initialized the mobile part of the repo. #82(https://github.com/bounswe/bounswe2024group4/issues/82) #89(https://github.com/bounswe/bounswe2024group4/pull/89)
- I implemented the overall page navigation of the application. #126(https://github.com/bounswe/bounswe2024group4/pull/126), #146(https://github.com/bounswe/bounswe2024group4/pull/146), #158(https://github.com/bounswe/bounswe2024group4/pull/158), #163(https://github.com/bounswe/bounswe2024group4/pull/163)
- I implemented the functionality of sign up, login and log out in mobile. I connected backend with mobile and handled authentication, and implemented a log out endpoint in backend. #116(https://github.com/bounswe/bounswe2024group4/issues/116), #118(https://github.com/bounswe/bounswe2024group4/pull/118), #133(https://github.com/bounswe/bounswe2024group4/issues/133), #145(https://github.com/bounswe/bounswe2024group4/pull/145)
- I implemented the search page including fetching the data from backend with Nurullah Uçan. #163(https://github.com/bounswe/bounswe2024group4/pull/163)
- I implemented the team and player pages with Nurullah Uçan. #162(https://github.com/bounswe/bounswe2024group4/issues/162), #167(https://github.com/bounswe/bounswe2024group4/pull/167)
Challenges I Encountered
The design process was smooth in my opinion. However, during the initial implementation I struggled and put so much effort. Nobody in our mobile team was familiar with React Native, and it was my first time implementing a mobile application. I spent lots of time trying to figure out the basics of mobile. At the end of the day, I managed to implement the things we planned, but it took days. It was nice to have a similar part of the project (frontend) so that we were able to work common things out together like the user authentication. We -as the mobile team- also struggled with the creation of the APK. I believe the next milestone will be easier because now most of us have an idea of what we are doing. But I also plan and wish to communicate more, and try to assign the tasks more equally so that everyone will have a similar amount of effort they put into the project.
Ahmet Batuhan Canlı
- I created Use case diagrams of our project and later edited them for bookmarking #87(https://github.com/bounswe/bounswe2024group4/issues/87) #113(https://github.com/bounswe/bounswe2024group4/issues/113)
- I fix the user requirements of our project according to given feedback. #95(https://github.com/bounswe/bounswe2024group4/issues/95)
- I enchanced navbar functionality #106(https://github.com/bounswe/bounswe2024group4/issues/106)
- I created demo feed for the demo #109(https://github.com/bounswe/bounswe2024group4/issues/109)
- I dockerized the frontend part of our project #136(https://github.com/bounswe/bounswe2024group4/issues/136)
- I created seperated searchbar page for navbar and added functionality to it pr #161(https://github.com/bounswe/bounswe2024group4/pull/161)
Challenges I Encountered
Designing use case diagrams was a smooth experience because we had learned how to create these diagrams. However, when it came to implementation, it was challenging because we had no prior frontend development experience in our team. We even lost one member from our team. We had to learn frontend development and its tools. Thanks to Berat, he sent us good sources to learn Tailwind CSS. He also taught us by showing and explaining the initialization part. Then I learned React by examining his project setup. I started by adding some functionality to the navbar, and finally, I was able to create a search feature for our frontend. Although it was challenging, it was a great experience to learn something new and collaborate as a team. It felt great to achieve our goals in the end. We also had some “fun” moments, like when I forgot to include a “/” in a URL request, resulting in a CORS error. We spent about 5 hours trying to solve the problem, and finally, Kaan realized the missing slash. It was bittersweet, but I believe moments like this are part of the learning process
Fatih Demir
- I created the sequence diagrams related to posts (creating a post and deleting a post) and bookmarking. They can be found here. #76(https://github.com/bounswe/bounswe2024group4/issues/76), #115(https://github.com/bounswe/bounswe2024group4/issues/115)
- I researched Django API with Murat Can Kocakulak and Bilge Kaan Güneyli and initialized the backend part of the project, which can be seen at the backend part of the repo. #84(https://github.com/bounswe/bounswe2024group4/issues/84)
- I set up the sign-up part of backend. #98(https://github.com/bounswe/bounswe2024group4/issues/98)
- I created the dockerfiles of backend, database and the dockercompose file of the application. #123(https://github.com/bounswe/bounswe2024group4/issues/123), #138(https://github.com/bounswe/bounswe2024group4/issues/138), #173(https://github.com/bounswe/bounswe2024group4/issues/173)
- I helped Berat Yılmaz in making the deployment. #176(https://github.com/bounswe/bounswe2024group4/issues/176)
Challenges I Encountered
In the design part, I encountered challenges with designing the infrastructure due to my limited experience in creating project diagrams. Besides that, despite my prior web application development knowledge, establishing a structured framework posed some difficulties initially. Nonetheless, as I familiarized myself with the framework, my efficiency improved significantly. In summary, the problems I faced primarily stemmed from my limited experience and knowledge in certain areas.
Bilge Kaan Güneyli
- I updated the requirements related to searching according to updates on our project.#79 #153
- I created the sequence diagram for searching players/teams/entries using Wikidata API. It can be be found under the related page #154
- I created a draft implementation of api endpoint for creating posts #111
- I implemented the api endpoint for searching teams and players using Wikidata API #122
- I implemented the api endpoint for team and player pages using Wikidata API #140 #141
- I created the updated project plan #117#155
- I ran tests some test on code and fixed the bugs that appeared #170
Challenges I Encountered
In the design part, I had small problems because I had never done project diagrams before, so it was not so easy to foresee how the implementation would go and create the diagram. Then, in implementation thing were slow for me at first since I had no Django experience before, therefore I had to check many resources to write a small snippet of code. However, after I got used to it things got faster. Closer to the end, we had to figure out some things about connecting our codes with frontend/mobile teams and this took longer than I expected in some cases. Overall, the struggles I had were mostly about experience.
Murat Can Kocakulak
- I have created the class diagram to the project depending on what type of datas and classes we are going to use on our database #86
- I have created the login part of the project
- I have created the RAM in order to estimate the work done for each team member and give a comprehensive view #130
- I have created the ReadMe part on how to function the backend part of the project #160
- I have worked with Bilge Kaan and Fatih Demir on initializing the backend part #84
Challenges I Encountered
This was the first time I used Django and a web framework so I firs needed some time to learn the general file structure. Making the initial installations and deciding on the way how the backend part will execute was a challenge at first because I also didn’t know what env file, docker file and database connections were. But after the project, I had the chance to become used to them.
Talha Ordukaya
- I created the sequence diagrams related to feed. #80
- I reviewed initializing the mobile part. #82
- I designed sign-up and login pages for mobile. #99
- I implemented sign-up and login pages in the application. #127
- I dockerized the mobile part of the project. #147
Challenges I Encountered
In the design part, it was not too much challenging for me. I really enjoy making UI elements, so I enjoyed in the design journey. The hard part was using react native to develop the app. I am familiar with mobile application development, but I did not have experience with react native. It was nice to learn a new mobile application development language but it was not too similar to what I know. So, It took time to learn. The most difficult part was dockerization. It was the first time I used docker. I heard about it but did not research it. Firstly I researched what docker is. It was a little complicated to learn. Then, I dockered the mobile part of the project. This milestone was harder than the previous one, but I learnt more things.
Nurullah Uçan
- I fixed some deficiencies regarding non-functional requirements. #97(https://github.com/bounswe/bounswe2024group4/issues/97)
- I created the sequence diagrams related to comments(deleting a comment and liking a comment). They can be found here. #77(https://github.com/bounswe/bounswe2024group4/issues/77)
- I created the initial version of the sign-up page, incorporating user interface elements. #102(https://github.com/bounswe/bounswe2024group4/pull/102)
- I created the team and player pages, involving the design and implementation of user interface elements. #120(https://github.com/bounswe/bounswe2024group4/issues/120) #131(https://github.com/bounswe/bounswe2024group4/pull/131) #144(https://github.com/bounswe/bounswe2024group4/pull/144)
- I implemented the search page including fetching the data from backend with Zeynep Buse Aydın. #163(https://github.com/bounswe/bounswe2024group4/pull/163)
Challenges I Encountered
At times, I struggled to comprehend certain aspects due to being in a project environment that was unfamiliar to me. The necessity of quickly acquiring both general and specific information about the project presented significant challenges. I can say that we encountered challenges in planning and progress due to not knowing the exact nature of the process we were facing. I especially struggled with understanding and ensuring the connectivity between the mobile application and the backend.
Throughout this process, I must especially highlight the invaluable contributions of my teammate, Zeynep Buse Aydın. Her dedication and insightful contributions not only supported me personally but also enhanced the team's overall performance.
Ceyhun Sonyürek
- I updated the requirements and my scenario according to given feedback. #72, #73
- I created sequence diagrams related to posts, user activities and Wikidata API. #76, #81, #114
- I implemented player page and team page in frontend part. #128, #165
- I wrote summary of project and overall status part in the Customer Milestone 2. #182
Challenges I Encountered
Design part was unfamiliar for me since I had no idea what it is and how designs can be created. However, I came through this part quickly. Then, implementation part started and any member of the my frontend does not have any experience in frontend before. So, all of us started to learn using React, Javascript, CSS, HTML to initialize a frontend part of project and develop it effectively. We researched useful tools and learned how to use them. For me, learning something new and use them to write a project from scratch were very challenging. In addition to that, preparing all necessary things in a short period made the process much harder. I sometimes encountered some bugs and problems that slowing me down and make it more difficult to meet my tasks to deadlines. These challenges and responsibilities that come with teamwork made the process more stressful. To sum up, learning many new things and applying them in a group project at the same time is a very challenging process.
Berat Yılmaz
- Created sequence diagrams for comments with Nurullah Uçan. #77
- Initialized the frontend part of the repo with
create-react-app
. #85 - Created the flows for sign-in, sign-up, and sign-out in the frontend, including page redirections, API calls, and page designs based on mockups. #91 #108 #125 #134 #151
- Prepared the routing and redirections for team and player pages, and did the search bar to team/player pages redirection. #166
- Deployed the project in DigitalOcean with the help of Fatih Demir. #176
Challenges I Encountered
I didn't have any frontend development experience before like my teammates, so I had to learn React and how CSS functioned. Constructing a mental model of how these work took quite some time. I found the usual way of handling CSS tedious and decided to learn Tailwind CSS, and adapted that while initializing the frontend part of the project. Understanding it was also not easy but this didn't take much time. Then, my biggest blocker was that I couldn't wrap my mind around how the user authentication was going to function as I was not aware that Django was handling some crucial functions itself, which took some time for me to realize and got me stressed. But after I figured it out with the help of the backend team, I inspected the code of the mobile team and quickly adapted it into the frontend, and the rest of the development was smooth. Then with the deployment I struggled a bit with Fatih, as we couldn't manage to make the SQL and backend talk to each other in the DigitalOcean VM, but we also solved these issues by doing some changes on our docker compose file and fixing some IP hardcoding related bugs in both backend and frontend.