Skip to content

451 Customer Milestone 1 Report

Fahreddin Özcan edited this page Nov 28, 2024 · 48 revisions

Introduction

This is the first milestone report for our group project, group bounswe2024group5. We are a group of enthusiastic students of CmpE451, committed to building an English Learning app that features posting and solving quizzes, interacting with other language learners in the forums.

Our team members that have contributed to the project:


Table of Contents

1. Executive Summary

1.1 Project Description

Quizzard is a language learning platform for Turkish speakers. It helps users acquire new vocabulary words by letting them solve quizzes. Those quizzes contain questions that are designed to help users commit new words to their long-term memory by matching words to their translations or meanings.

Users can either solve quizzes that they themselves have created or quizzes created by other users. This enables a community of language learners help each other through their learning journey. But quiz sharing isn't the only mechanism through which users can help each other. They can also answer questions related to specific words that are asked by other users on the forum.

On the whole, Quizzard's quiz and forum features are the main drivers of language advancement for Turkish speaking individuals in our project.

1.2 Project Status

We were able to implement the user interfaces for web and mobile platforms of our application. On the web, users can create quizzes as well as solve them. On the mobile devices, users can not only create and solve quizzes, but they can also ask questions on the forum page and get answers.

Those initial implementations are, of course, visual demonstrations of what the end product will look like. So they might lack session persistency and data sharing between different users, as our backend infrastructure hasn't been fully developed yet.


2. Customer Feedback and Reflections

Our customer feedback was really helpful and motivating for us, beacuse we were mostly positively received, but were also given insightful feedback.

Our quiz creation and solving interface was liked in general by the customer, however there was a comment about not having any pictures on the UI. We are going to be implementing cover picture for quizzes feature soon. Other than that, we were also acclaimed for using high-quality mock data for this demo session, because it allowed the customer to really imagine what the end product will look like.

We were also told that not showing the correct answer right away when the user chooses the wrong answer and allowing multiple attempts might be a good idea. We will consider that.

However the most significant feedback we got, pertaining to the functionality of the app, was that it should focus not only on translations and sense matching, but also on helping the user to pick up on how to actually use the word. Because being able to match a word to its meaning doesn't necessarily mean that word can be effectively used in a sentence by the language learner. For this, we might consider showing the user posts from the forum related to the question they are solving when the user is solving a quiz. This way they can see how this word is used in sentences in posts or in post comments. Serving posts and comments from forum when solving a quiz might be implemented in the quiz solving page UI in various ways. We might also consider/explore other ways of helping user pick up usages of words.


3. List and Status of Deliverables

Deliverable Status Related Link
Project Repository Delivered repo
Software Requirement Specification Completed & Documented jump
Software Design (UML diagrams) Completed & Delivered jump
Scenarios Completed & Delivered jump
Mockups Completed & Delivered jump
Project plan Completed & Delivered jump
Communication plan Completed & Delivered jump
RAM (Responsibility Assignment Matrix) Completed & Delivered jump
Weekly Lab reports Completed & Documented jump
Meeting notes Completed & Documented jump
Pre-release Version of our Software Implemented & Released jump
Individual Contributions (see section below) Completed & Documented jump
Milestone Report Completed & Delivered this report

3.1 Evaluation of the status of Deliverables

  • Software Requirement Specification: We initiated this project with a comprehensive brainstorming session around the software requirements. This collaborative process allowed us to establish clear expectations for our project and to effectively plan our timeline for implementation. Our discussions regarding the use of linked data, particularly WordNet, were particularly significant. We gathered a list of questions concerning these requirements and sought clarification from our TA. Overall, this deliverable was effective in enhancing our understanding of project expectations, aligning our team's efforts, and determining our project plan.

  • Scenarios: During the 2nd lab session, we engaged in an in-depth discussion regarding the quiz question generation feature of our app. While we talk on how to implement this feature, team members naturally came up with some user scenarios. Such scenarios played a crucial role in refining our design and implementation strategies. For example, we debated on whether to allow users to select the question type for each question or for the entire quiz. Through exploring various user scenarios, we decided to provide maximum flexibility by allowing users to choose the question type on a per-question basis. This approach not only enhanced our design choices but also ensured that our application meets user expectations, thereby positively impacting user satisfaction and engagement.

  • Mockups: The creation of mockups was vital in visualizing the UI for both our mobile and web app. Prior to this deliverable, we had not fully considered the detailed layout of our home screen. However, during the mockup process, we identified the need for two sections: one to display quizzes in the same level with the user and another to filter quizzes based on difficulty. Such UI design decisions, which were finalized during the mockup phase, have influenced our implementation, ensuring that our app meets users' needs.

  • Software Design (UML diagrams): In the 4th lab session, we conducted a thorough discussion around the API design, particularly concerning the Quiz Creation, since it is the most significant and challenging aspect of our app. This discussion was significant in synchronizing our understanding of the necessary features for the project. This enabled us to outline the sequence diagrams, use cases, and classes required for our implementation. With a clear understanding of the features and functionalities, we were able to design the UML diagrams efficiently, distributing the work among team members.

  • Project plan: We utilize Github's Projects Roadmap feature to manage our project plan effectively. This visual representation allows us to monitor our progress according to the upcoming deadlines, such as the milestones. Additionally, it facilitates communication between sub-teams (backend, frontend, and mobile), ensuring that everyone is informed of each other's progress. Ebrar is responsible to update the Project plan frequently, and other team members also review and revise it often.

  • Meeting notes: Meeting notes are beneficial in terms of keeping track of what we discussed and function as a reference point for us to go back whenever we need to remind of the specific discussions from the team meetings. We follow the template we produced in the last semester to take the notes, and we try to keep these notes as detailed as possible for the purpose of decent documentation.

  • Weekly Lab reports: Similar to the meeting notes, lab reports are a great proof of the works we completed, during the labs. We take meeting notes during the lab and then prepare a report from the meeting notes. We follow a template to preserve consistency. Lab reports are also significant for us to show our accomplishments to the instructors.

  • Communication plan: We determined the communication plan for the semester in the first week. Such planning allowed us to be clear on the means of communication among the team. We sometimes change the meeting day to meet the team's momentary availability. We also use our WhatsApp group for instant communication whenever we seek it.

  • RAM (Responsibility Assignment Matrix): We keep track of our individual task distributions in this matrix, and we often review it. This semester, Semih volunteered for the RAM revision duty. Other team members also review the matrix to arrange their responsibilities. RAM is particularly important in terms of task distributions in the sub temas (mobile, backend, frontend). With this visualization, we find it easier to distribute the tasks fairly among us.

3.2 Addressed Requirements

The status of requirements is updated at their page. The emojis symbolize three different state:

  • ✅ is for requirements that we finished implementing it.
  • ⚠️ is for requirements that we have started working on but not finished.
  • ❌ is for requirements that we have not started.

4. Evaluation of Tools

We used four major tools for team communication, and planning and design of our project.

4.1 GitHub

GitHub has been the primary platform for planning and tracking of our project. We constantly used issues to collaborate on and track project tasks and it enabled all team members to exactly know the status of our project and diffuse confusion as to who's supposed to do what.

We used wiki section to share requirements, diagrams and design files. This easy access to project files helped us keep in sight what our final objective is at all times. We also used discussion section to determine the name of our project.

Finally we used pull requests to ensure only high quality code makes it to our codebase. For this we only commmited reviewed and approved code to our main branch.

4.2 Discord

We used discord to host our weekly meetings and also for brainstorming and file sharing. We think it is a great tool for real-time communication with voice and video sharing. Also different channels on this platform helped us keep our conversations organized.

4.3 WhatsApp

We used WhatsApp for texting related to issues that needed to be resolved fast. Because it was the platform that everyone received their messages in the shortest time compared to other platforms

4.4 Figma

We used Figma to draw and design the user experience and the visual interface of our project. This is where we thought about what users are going to be doing when they open our application on the web or their mobile devices.

Visualizing the different views from our application helped everyone have a better idea of what the final application will look like. Also it made us more excited about starting to create the actual application.


5. Individual Contribution Table

Responsibilities:

Mobile Development, Requirements Elicitation, Use-case Diagrams

Main contributions:

My biggest contribution was to implement the quiz solving page for mobile. I created and linked a quiz solving page that looks similar to our mockups and has functionalities such as seeing the right and wrong answers when you choose one. In addition to that, I collaborated with Fahreddin on writing the User Requiremets. I also worked on the use-case diagrams with Süleyman and Ramazan. Those being my main contributions, I also worked on a lab report and a few issue and PR rewievs.

Code-related significant issues:

  • #294 I created the quiz solving page in mobile.PR #299
  • #295 The issue for implementing the home page by Ebrar got closed automatically when I reviewed and merged PR #296

Non-code-related significant issues:

  • #263 I researched the data sources for english words.
  • #270 I wrote the User Requirements with Fahreddin.
  • #281 I wrote the lab report #3.
  • #282 I reviewed the user scenarios.
  • #308 I worked on the use-case diagrams.
  • #289 I did a review on Meeting Notes 3.

Pull requests:

  • PR #299 I added a functioning quiz solving screen that fits our requirements.
  • PR #296 I reviewed and merged Ebrar's PR that included many Mobile additions.

Additional information:

  • #248 I modified my personal page for 451.
  • #276 I created the structure for the requirements wiki page.
  • I tried learning Figma to help with the mockups. I worked on turning one of the pages to web layout.
  • wiki I put the use-case diagram in its wiki page.

Responsibilities

Group Communicator, Mobile Development, Conceptual Research, Graphical Design.

Main Contributions

I often document lab reports. Also, I keep track of our Project Plan. In the first weeks, I contribute to the research on LinkedData and initiated the discussion around the Proof of Concept on how to utilize linked data to generate quiz questions. I worked on a basic script to fetch similar words and word's meanings from WordNet. Then, I designed the mockups with Deniz. I also created sequence diagrams for create forum post and commenting on a forum post functionalities.

For our Mobile app, I set up the project, implemented the Login/Registration and Create Quiz functionalities, as well as the Home Screen. I also implemented the API requests from Mobile for solving Quizzes. I collaborated with Ramazan to finalize the initial version of our Mobile app, which has the Solve Quiz feature fully implemented and connected to backend, along with Create Quiz and Forum functionalities with mock data.

Code-related significant issues

  • #272: Initialized the mobile project with Login, Register and Home screens. PR #273
  • #293: Implemented the Create Quiz screen and added the Create Quiz button to the Home screen. PR #296
  • #295: Implemented the Quiz View component for the Home page, prepared mock quiz data to display and finish up the Home screen view, with navigation bar. PR #296
  • #319: Implemented the API requests for user authentication, POST /quizzes and GET /quizzes. PR #336

Non-code-related significant issues

  • #317: Arrange the Project plan Roadmap view.
  • #306: Designed the "Commenting on a forum post sequence diagram".
  • #305: Designed the "Creating a forum post sequence diagram".
  • #283: Designed the mockups with Deniz.
  • #265: Worked on the Proof of Concept for Quiz Question generations.
  • #263: Did research about linked data resources.
  • #258, #267, #277, #310, #311: Prepared the lab reports, documented the project plan and general plan, initiated the milestone and keeping track of its issues.

Pull Requests

Created

  • #273: Initialize the Mobile Project (Login & Register).
  • #296: Implement Home and Create Quiz Screen and add the Quiz View for home screen.
  • #336: API requests for user authentication and GET /quizzes (with Ramazan).
  • #337: Solve Quiz screen buttons and some fixes for Home Screen.

Reviewed/Merged

  • #299: Implement Solve Quiz Screen with mock data.
  • #316: Database Migrations and API Documentation.
  • #318: Implement Forum Page with mock data.
  • #334: Write build and deploy instructions.

Additional Information

I value the quality of documentation. Thus, I frequently review our wiki pages, specifically the home page and sidebar. I add links to missing recent meeting notes and lab reports. I also add the group's issues to the Github Project, and add missing labels to the issues whenever I locate them.

Responsibilities

Frontend Development, Conceptual Research, Meeting Notes Organiser and Documentation (Requirements and Diagrams)

Main Contrubutitons

I actively noted down the topics covered in the meetings and created the meeting notes files for our lab sessions to keep the team synced and on track. I researched LinkedData tools to find the best fits for the project. I colloborated with Arınç on writing our project requirements and organising our wiki pages. For our frontend, I set up the project, implemented the quiz solving, quiz listing and authentication pages and contributed to overall structures. I also created sequence diagrams for key functionalities such as solving a quiz and searching a post in the forum.

Code-related significant issues

  • #274: Initialized the frontent project with detailed configuration PR #275
  • #290: Created the quiz solving page and general project structure PR #291
  • #298: Implemented quiz listing page PR #314
  • #323: Implemented the frontend authentication pages PR #325
  • #324: Update/Refactor Quiz Creation Page UI PR #327
  • #331: Integrate Backend APIs with frontend PR #332
  • #342: Prerelease the application release

Non-code-related significant issues

  • #313: Search in the forum, sequence diagram
  • #312: Solve a quiz, sequence diagram
  • #260, #269, #284, #309: Taking notes in the meeting and writing the meeting notes files.
  • #270: Writing User Requirements
  • #263: Doing a research about linked data resources

Pull Requests

Created

  • #275: Initialize Frontend Project
  • #325: Implement Authentication Pages
  • #314: Implementing quiz listing page
  • #291: Implement Quiz Solving Page
  • #332: Integrate Backend APIs with frontend
  • #327: Update quiz creation page UI

Reviewed/Merged

  • #322: Dockerizing Frontend Application
  • #292: Implement Quiz Creation Page
  • #316: Database Migrations and API Documentation
  • #330: Integrating auth APIs with frontend
  • #341: Review Backend Meeting Notes

Conflicts

We haven't really faced any git conflicts, but while working asyncronously on the frontend project, each of us created our own Quiz/Question types considering different requirements. In one of the next PR's, we merged the types into one and solved the conflict.

Responsibilities

Backend development, Conceptual Research, Database Design, API design.

Main Contributions

I researched quiz creation, word suggestions, and generating incorrect answers to improve quiz quality. I also designed the database and created migration scripts for smooth data handling. I wrote user scenarios to guide and improve the user experience.

For the API, I planned out the endpoints and documented them using Swagger to keep everything clear. I helped set up the backend, and got the main framework running. Additionally, I helped dockerize the project to make deployment easier.

Before the customer presentation, I deployed the application on Google Cloud with Suleyman and tested web features to ensure everything worked well.

Code-related significant issues

  • #288: Helped initialization and dockerization of backend PR #301

Non-code-related significant issues

  • #263: Researched data sources for english-turkish translations.
  • #265: Worked on the Proof of Concept for Quiz Question generations.
  • #282: Wrote 2 user scenarios.
  • #285: Made database design and implemented migration script.
  • #286: Made API design and documented.
  • #304: Documented sequence diagrams for login and register.
  • #335: Deployed the application and tested.

Pull Requests

Created

  • #334: Wrote build/deploy documentation.
  • #316: API and database design.

Reviewed/Merged

  • #338: Reviewed mobile build instructions.

Additional Information

Responsibilities: Conceptual Research, Graphical Design, Frontend Implementation

Main contributions: I researched various linked data resources to figure out how we can realize our project and wrote several scripts to prove that we could generate quiz question with those resources. Then I helped design the user interface out application in Figma. Finally I implemented the quiz creation page of our web app and also dockerized the web app.

Code-related significant issues:

Non-code-related significant issues:

  • #263: I researched linked data resources.
  • #265: I wrote several scripts to use linked data resources for question generation.
  • #283: I designed visual interface of our app with Figma.

Pull requests:

Created:

  • #322: Dockerizing Frontend Application
  • #292: Implement Quiz Creation Page

Reviewed:

  • #316: Database Migrations and API Documentation
  • #275: Initialize Frontend Project
  • #325: Implement Authentication Pages
  • #314: Implementing quiz listing page
  • #291: Implement Quiz Solving Page

There was small conflict because of a lock file. The reason was I was using npm and Fahreddin was using pnpm. I switched to pnpm and conflict was resolved.

Responsibilities:

Mobile Development, Use-case Diagrams, Conceptual Research

Main contributions:

My main contribution was implementing Forum Page and related Question Screens. With respect to our choice for the 1st customer presentation, we were supposed to deliver Forum Page, Search Screen, Question Generation Screen and Question Details Screen with mock data from the app. Previously, I worked on PoC of Quiz Generation and moderated one of our general meeting. For the planning part of the milestone, I worked on User Scenarios and Use Case Diagrams. Lastly, I implemented the API calls that are actively working with the assistance of Ebrar.

Code-related significant issues:

Non-code-related significant issues:

  • #308 UML Use Case Diagrams
  • #282 User Scenarios
  • #278 Moderating Meeting and Taking Notes

Pull requests:

Created

  • #318 Implementation of Forum, Search, and related Question Pages
  • #336 Implementation of API requests from Mobile

Reviewed/Merged

  • #272 Initialization of Mobile
  • #336 Implementation of API requests from Mobile

Additional information:

Responsibilities

Backend Development, Class Design, API Design

Main Contributions

I took responsibility to write system requirements and non-functional requirements. I designed class diagram. I also keep the responsibility assignment matrix up to date.
I reviewed and edited API design according to feedbacks from client side teams. I reviewed our database design and implemented quiz related endpoints with Süleyman.

Code-related significant issues

  • #340: Implemented backend endpoints for quiz operations. PR #328

Non-code-related significant issues

Pull Requests

Created

  • #328: Backend Quiz POST and GET Endpoints.

Reviewed/Merged

  • #301: Backend initialization for Quizzard
  • #316: Database Migrations and API Documentation.

Responsibilities: Backend Development, Conceptual Research, Meeting Moderator and Note Taker

Main Contribution: I attended all labs and meetings, even managed and took notes of the 1st and 3rd general meetings. I maintained positive communication with my team throughout the process. I researched LinkedData resources and introduced and suggested BabelNet to my team. I wrote the system requirements together with Semih. I made the use-case diagrams together with Arınç and Ramazan. I also edited them in detail according to Ebrar's feedback. I also provided important feedback to my team as a reviewer of the sequence and class diagrams. We edited the API-doc prepared by Utkun together with Semih and finalized it. I made the first version of the backend (dockerization and initialization). I also wrote the Quiz endpoints. Later, Semih finalized them. I also constantly edited the API while writing the endpoints. Finally, I deployed our application together with Utku.

Code-Related Issues:

Non-Code-Related Important Issues:

  • #308: UML Use-Case Diagram
  • #268: System Requirements
  • #262,#289, #261: Take, create, update notes
  • #263: Research about LinkedData resources

Reviewed Important Issues:

  • #307: UML Class Diagram
  • #304: UML Sequence Diagrams
  • #286: API Design

Pull Requests: Created:

  • #328: Quiz endpoints
  • #301: Backend Initialization

Reviewed:

  • #316: Database migration and API design
  • #328: Semih did last changes so I reviewed them.

6. Deliverables

6.1 Project Repository

6.2 Requirements

6.2.1 Software Requirement Specification

6.2.2 Software Design - UML Diagrams

6.2.3 Scenarios

6.2.4 Mockups

6.3 Project Plan

6.4 Communication Plan

6.5 RAM (Responsibility Assignment Matrix)

6.6 Weekly Lab Reports

6.7 Meeting Notes

6.7.1 Lab Meeting Notes

6.7.2 Team Meeting Notes

6.8 A pre-release Version of our Software

Main Authors

Deniz, Ebrar, Semih

🏠 Home

🗃️ All Project Files

💻 Lab Reports

📝 Meeting Notes

Lab Meeting Notes
Team Meeting Notes
🧑🏻‍💻 About Us
🗂️ Templates
CmpE 352

🚀 Important Project Files

🗃️ All Project Files
📝 352 Meeting Notes
📜 Research & Resources
Clone this wiki locally