Abstract

The Cricket Coach App is a comprehensive mobile solution engineered to address

the systemic inefficiencies of traditional cricket coaching. It replaces disparate,
analog methods—such as physical notebooks, fragmented video files, and
verbal-only feedback—with a unified, data-driven digital ecosystem. By
leveraging a robust cloud architecture built on Microsoft Azure and a highly
interactive frontend powered by React Native, the application provides an end-
to-end platform for player management, video session capture, advanced
multimedia annotation, and structured performance tracking. This report details
the project's strategic aims, technical architecture, a granular, step-by-step user
manual, detailed system diagrams, and visual mockups. It also explores critical
lessons learned during development and outlines a forward-looking roadmap for
future enhancements, establishing the app as a market-ready tool poised to
revolutionize player development in cricket.

Chapter 1: Aim and Strategic Objectives

1.1. Project Aim: The Vision for a Digital Coaching Ecosystem
The primary aim of the Cricket Coach App is to fundamentally digitize and
streamline the entire coaching lifecycle for cricket professionals. The vision is to
create a singular, indispensable tool that empowers coaches to move beyond
subjective assessments and embrace data-backed, visual-centric methodologies.
This mobile application is designed to be an all-in-one digital ecosystem for
managing students, capturing and analyzing practice sessions through powerful
video annotation, and delivering precise, actionable feedback to players, thereby
fostering a more efficient and impactful development environment.
1.2. Core Objectives
To realize this ambitious aim, the project was guided by five core strategic
objectives:
1. To Engineer an Intuitive, Role-Based User Interface: The app must
provide a frictionless experience for both coaches and students. This
involves designing distinct dashboards and workflows tailored to their
specific needs, ensuring that complex tasks like video annotation and
feedback review can be accomplished with minimal cognitive load.
2. To Implement a State-of-the-Art Video Annotation Suite: The
application's core value proposition lies in its ability to facilitate granular
feedback. This objective focuses on developing a feature-rich annotation
toolkit that allows for both real-time and post-session analysis, enabling
coaches to draw, highlight, and comment on specific video frames with
precision.
3. To Build a Scalable, Secure Cloud Infrastructure: To handle
significant multimedia content, the app must be supported by a robust
backend. This objective involves leveraging enterprise-grade cloud
services for the structured storage and retrieval of videos, images, and
associated metadata, ensuring data integrity, security, and high
availability.
 4. To Facilitate Asynchronous, Multimedia-Rich Feedback: The app
must break the dependency on in-person feedback delivery. This objective
is centered on creating a system where coaches can provide detailed
feedback asynchronously using a combination of visual annotations,
textual comments, and potentially audio notes, which students can access
at their convenience.
5. To Empower Students with Ownership of Their Performance
Data: For development to be effective, students must be active
participants. This objective ensures that students have direct access to
their training history, coach feedback, performance metrics, and
annotated videos, allowing them to track their progress and understand
areas for improvement transparently.

Chapter 2: Methodology and Technology Stack

2.1. Development Approach: Agile and Modular
The project was executed using the Agile methodology, which facilitated
flexibility and rapid iteration. The development cycle was organized into one-
week sprints, each culminating in a review of newly implemented features. This
iterative process allowed for:
 Continuous Integration and Testing: Features were tested in a
modular fashion as they were developed, reducing the risk of large-scale
bugs late in the project.
 Stakeholder Feedback: The sprint-based approach created regular
opportunities to incorporate feedback, ensuring the final product was
closely aligned with user needs.
 Modular Design: The application was architected with a component-
based structure. Screens, UI elements, and logic modules were built as
independent, reusable components, enhancing maintainability and
scalability.
2.2. Technology Stack Rationale
The selection of technologies was driven by the need for cross-platform
compatibility, scalability, and development efficiency.

Technology
Component Rationale for Selection
Used

Mobile React Native React Native was chosen for its "write
Frontend (Expo Router, once, run anywhere" capability,
TypeScript) significantly reducing development time
for iOS and Android. Expo
Router provided a file-based routing
system for streamlined
navigation. TypeScript was used to
enforce static typing, improving code
 quality and reducing runtime errors.

A serverless architecture using Azure

Functions was selected for its auto-scaling
Azure capabilities and cost-effectiveness (pay-
Backend &
Functions per-execution model). [Link] offered
APIs
([Link]) high performance for I/O-intensive
operations like handling API requests for
video metadata.

Firebase Auth provides a secure, fully

managed, and easily implemented
Firebase solution for user identity management. It
Authenticati
Authenticatio handles the entire authentication flow,
on
n including email/password login, sign-up,
and password resets, with robust security
protocols.

Cosmos DB, a NoSQL database, was

chosen for its low-latency data access and
Azure Cosmos flexible schema, which is ideal for storing
Database
DB evolving user and video metadata. Its
global distribution capabilities provide a
clear path for future international scaling.

Azure Blob Storage is specifically

designed for storing massive amounts of
unstructured data like videos and images.
Media Azure Blob
It is highly scalable and cost-effective,
Storage Storage
offering secure access via Shared Access
Signatures (SAS) tokens generated by our
backend.

For managing complex application state

(e.g., user login status, video lists,
State annotation data), Redux Toolkit was
Managemen Redux Toolkit implemented. It provides a predictable
t state container, simplifying state logic and
making debugging easier with tools like
Redux DevTools.

React Native Paper was used for its

suite of high-quality, customizable Material
React Native
UI Library & Design components. Core styling was
Paper,
Styling handled with React Native's StyleSheet
StyleSheet
API, with Tailwind-like utility classes for
rapid and consistent styling.
 Git was used for distributed version
Version control, and GitHub served as the central
Git & GitHub
Control repository for code collaboration, issue
tracking, and project management.

Chapter 3: Comprehensive User Manual

This section provides a granular, step-by-step guide on operating the Cricket
Coach App.
3.1. Module 1: Authentication and Onboarding 🔐
The authentication module is the gateway to the application, ensuring that only
registered users can access its features.
 Login Process:
1. Upon launching the app, the user is presented with the Login
screen.
2. The user must enter their registered email address and password
into the designated fields.
3. Tapping the "Login" button triggers an API call to Firebase
Authentication to verify the credentials.
4. On success, the user's authentication state is stored globally using
Redux, and they are navigated to their respective dashboard (Coach
or Student).
 Sign-Up Process:
1. New users must tap the "Sign Up" link on the Login screen.
2. They are required to fill out a registration form with their Full
Name, Email Address, and a secure Password.
3. A critical step is selecting their Role (Coach or Student) from a
dropdown menu. This role assignment determines the user interface
and feature set they will access upon login.
4. Tapping "Sign Up" creates a new user record in Firebase
Authentication and a corresponding profile document in Azure
Cosmos DB.
 Forgot Password Recovery:
1. If a user forgets their password, they can tap the "Forgot Password"
link.
2. They are prompted to enter their registered email address.
3. The app uses a Firebase SDK function to send a password reset link
to the provided email, guiding the user through a secure recovery
process.
Technical Insight: The use of Firebase Authentication abstracts away the
complexity of password hashing, token management, and secure data
transmission, allowing the development team to focus on core application
features.
3.2. Module 2: The Coach Dashboard and Navigation 🏠
The Coach Dashboard serves as the central command center, offering an at-a-
glance overview and access to all modules.
 Dashboard Components:
o Coach Info Header: Prominently displays the coach's profile
picture and name, personalizing the experience.
o Statistical Cards: These three cards provide key performance
indicators:
 Total Students: A live count of active students linked to the
coach's profile.
 Total Videos: A tally of all video sessions uploaded by the
coach.
 Total Sessions: A metric that could represent distinct
practice events recorded.
 Drawer Navigation Menu: 🧭
Accessible via a "hamburger" icon in the top-left corner, this menu is the
primary navigation hub:
o Personal Info: Leads to a screen where coaches can view and
update their profile details.
o My Students: Navigates to the core student management module.

o All Videos/Pictures: Provides access to the complete media

library, unfiltered by student.
o Favourites: A curated list of starred videos or student profiles for
quick access.
o Settings: Allows configuration of account details, app theme (e.g.,
light/dark mode), and notification preferences.
3.3. Module 3: Player Relationship Management (My Students) 👨‍🎓
This module is the CRM of the app, where coaches manage their roster of
players.
 Viewing Student Profiles:
1. From the drawer, the coach selects "My Students" to see a list of all
their players, presented as interactive cards.
2. Tapping a student's card navigates to their detailed profile page.
This page aggregates all information related to that student,
including:
  Biographical Data: Name, age, contact information, and a
performance score.
 Media History: A filterable list of all practice videos
recorded for that student.
 Feedback History: A log of all feedback (annotated
sessions, comments) provided by the coach.
 Recording a New Video Session:
1. Within a specific student's profile, the coach taps the "Record New
Session" button.
2. This action opens the device's camera interface within the app.
3. After the recording is complete, the coach is taken to a post-
recording screen where they must add metadata:
 Title: A descriptive title for the session (e.g., "Cover Drive
Practice - July 21").
 Description: Optional notes about the session's focus.
4. Upon tapping "Save," the video file is compressed to optimize size
and then uploaded to a designated container in Azure Blob
Storage.
5. Simultaneously, a metadata document is created in Azure Cosmos
DB, containing the videoId, studentId, timestamp, title, description,
and the URL of the video in Blob Storage. This linking is crucial for
data integrity.
3.4. Module 4: The Video Annotation Suite 🎥
This is the app's most powerful and differentiating feature.
 Initiating Annotation:
1. A coach can start an annotation session by navigating to a video
either through the "All Videos" library or a specific student's profile.
2. Tapping "Annotate Video" opens the annotation editor. The UI
consists of the video player, a timeline, and the annotation toolbar.
 The Annotation Toolkit:
o Pen Tool: For freehand drawing. Ideal for tracing the path of the
ball, the arc of a bat swing, or a bowler's arm action.
o Marker Tool: A semi-transparent highlighter used to draw attention
to larger areas, such as a player's stance or field positioning,
without completely obscuring the video.
o Text Tool: Allows the coach to place text notes directly onto a
frame. Perfect for concise, written instructions like "Keep your head
still" or "Bend your front knee."
 o Shape Tool: Provides tools to draw precise shapes, like a rectangle
to box in a player's foot position or a circle to highlight head
position.
o Eraser Tool: To remove specific annotations on the current frame
without affecting others.
 Saving Annotations:
1. As the coach annotates, each action (a drawing, text box, etc.) is
captured along with its video timestamp.
2. When the coach taps "Save," the system processes the annotations.
For each annotated frame, it generates a snapshot image. The
annotation data itself (e.g., coordinates, text content, color) is
stored as a JSON overlay.
3. These images and JSON files are uploaded to Azure Blob Storage
and linked to the original video's metadata in Cosmos DB, ensuring
the video and its feedback layer are permanently connected.
3.5. Module 5: Viewing Annotated Sessions 🎬
This module focuses on the consumption of feedback by both coaches (for
review) and students.
1. Users navigate to the "Annotated Videos" section.
2. Selecting a session opens a specialized viewer.
3. This viewer displays the video alongside a timeline scrubber. Frames with
annotations are marked on the timeline.
4. As the video plays, the saved overlays are rendered on top at the precise
timestamp they were created.
5. The user can also navigate frame-by-frame, viewing the annotated
snapshots and any associated text or audio comments from the coach.
3.6. Module 6: Coach Task Management ✅
This feature acts as a productivity tool to ensure no feedback opportunity is
missed.
 Task Panel Sections:
o Pending Tasks: This list is automatically populated with videos
that have been uploaded but not yet annotated. Each item
represents a pending feedback task.
o Completed Tasks: Once a coach saves an annotation for a video,
the corresponding task is automatically moved from the "Pending"
to the "Completed" list.
 Workflow: Tapping a task in the "Pending" list directly redirects the coach
to the annotation editor for that specific video, streamlining the workflow.
3.7. Module 7: The Student Experience 🧑‍🎓
The student-facing side of the app is designed for clarity, motivation, and
learning.
 Student Home Screen: Upon login, the student sees a personalized
dashboard featuring:
o Assigned Coaches: A list of their coach(es).

o Recent Feedback: Direct links to their most recently annotated

practice sessions.
o Task Reminders: Gentle notifications prompting them to watch a
newly annotated video or complete a practice drill.
 Accessing Feedback:
1. The student navigates to their "Feedback" or "My Videos" section.

2. They can see a list of all their sessions, clearly marked with an icon
if feedback is available.
3. Tapping on an annotated session opens the same interactive viewer
the coach uses, allowing them to see the visual feedback and read
comments in context.

Chapter 4: Best Practices and Critical Lessons Learned

4.1. Implemented Best Practices
 Modular Architecture: The codebase was strictly organized by feature
(screens, styles, Redux slices), making it easy to navigate and scale.
 State Management Discipline: Redux was used for global state, while
component-level state was used for non-shared UI logic, preventing
unnecessary re-renders.
 Data Integrity: The use of unique, timestamp-based IDs for every
student, video, and annotation entry prevented data conflicts.
 Media Optimization: All videos were compressed on the client-side
before being uploaded to Azure, drastically reducing upload times and
storage costs.
4.2. Critical Lessons Learned
 Cloud Security Configuration: Integrating with Azure Blob Storage
required a deep understanding of Cross-Origin Resource Sharing
(CORS) policies and the secure generation and management of Shared
Access Signature (SAS) tokens. An improperly configured CORS policy
can block all media uploads, while poorly managed SAS tokens pose a
security risk.
 Annotation Synchronization Challenge: The most significant technical
hurdle was ensuring perfect synchronization between the video's playback
time and the rendering of canvas overlays. This required meticulous state
 management to map each annotation's JSON data to a specific millisecond
in the video stream.
 Performance Optimization: Initial versions of the app suffered from
slow list rendering when dealing with hundreds of videos.
Implementing lazy loading (fetching data in chunks as the user scrolls)
dramatically improved the user experience.
 Gesture Handling Nuances: Creating an intuitive drawing experience
for the annotation tools required sophisticated use of the React Native
gesture handler library. Differentiating between a pan (to move the
canvas), a pinch (to zoom), and a draw gesture was critical for a smooth
UX.

Chapter 5: Conclusion and Future Work

5.1. Conclusion
The Cricket Coach App successfully achieves its objective of revolutionizing the
digital management of cricket coaching. By providing a seamless, end-to-end
workflow—from video recording and cloud storage to sophisticated annotation
and asynchronous feedback delivery—the application empowers coaches to be
more efficient and effective. It transforms abstract advice into tangible, visual
lessons, fostering deeper engagement and accelerating player development. The
robust technical architecture ensures the platform is both scalable and
maintainable.
5.2. Future Improvements and Roadmap
The current application provides a strong foundation for several high-impact
future enhancements:
1. AI-Driven Performance Analysis: Integrate computer vision models
(e.g., PoseNet) to automatically analyze a player's biomechanics, classify
shot types, and provide initial performance metrics, offering coaches an
AI-powered "second opinion."
2. Wearable Device Integration: Connect with sensors in smart bats or
wearables to capture data on bat speed, swing path, and body motion,
overlaying this quantitative data directly onto the video feed.
3. Offline Functionality: Develop an offline mode where coaches can
record and even annotate videos without an internet connection. The app
would use a local database (like WatermelonDB or SQLite) and a
background sync service to upload the data once connectivity is restored.
4. Export and Shareable Reports: Allow coaches to export a fully
rendered MP4 video file with the annotations burned into the frames,
creating a shareable clip perfect for presentations, player reports, or social
media.

Chapter 6: GitHub Repository and Documentation

The complete source code, detailed technical documentation, and deployment
instructions are maintained in the official GitHub repository.
🔗 GitHub Repository Link:
[Link]
Repository Best Practices:
 Well-Structured Hierarchy: The repository is organized into logical
folders for src, components, screens, redux, assets, etc.
 Comprehensive [Link]: The root [Link] file includes:
o A detailed project overview.

o Step-by-step setup and installation instructions.

o Environment variable configuration (.env file setup).

o Key application screenshots and a link to a video demonstration.

 API Documentation: An overview of the backend Azure Functions,

detailing the expected request/response formats for each endpoint.
Chapter 6: System Architecture Diagrams
This chapter provides a blueprint of the application's structure and behavior
through standard UML diagrams.
6.1. Use Case Diagram
The Use Case Diagram illustrates the interactions between the actors (Coach,
Student) and the system.
Actors:
 Coach: The primary user who manages students and provides feedback.
 Student: The user who receives and views feedback.
 Firebase Auth: External system for handling authentication.
 Azure Cloud: External system for storage and backend logic.
System Boundary: Cricket Coach App
Primary Use Cases for Coach:
 Manage Account: (Includes) Login, Sign Up, Reset Password.
 Manage Students: (Includes) Add Student, View Student List, View
Student Profile.
 Manage Sessions: (Includes) Record Video, Upload Video, Add Video
Metadata.
 Annotate Video: (Extends Manage Sessions) Involves using Pen Tool, Text
Tool, Shape Tool, Eraser.
 Manage Tasks: (Includes) View Pending Tasks, View Completed Tasks.
  View Media Library: (Includes) View All Videos, View Favourites.
Primary Use Cases for Student:
 Manage Account: (Includes) Login, Sign Up, Reset Password.
 View Dashboard: (Includes) View Assigned Coaches, View Performance
Stats.
 View Feedback: (Includes) Watch Session Video, View Annotations, Read
Coach Comments.
Diagrammatic Description:
 The Coach actor is connected to Manage Students, Manage
Sessions, Annotate Video, and Manage Tasks.
 The Student actor is connected to View Dashboard and View Feedback.
 Both Coach and Student actors are connected to Manage Account.
 The Manage Account use case is associated with the Firebase
Auth system.
 The Manage Sessions and Annotate Video use cases are associated with
the Azure Cloud system, indicating that these processes involve backend
interactions.

6.2. Class Diagram

The Class Diagram models the static structure of the system, showing the main
classes and their relationships.
Classes:
 User (Abstract)
o Attributes: userId: string, fullName: string, email: string, role:
RoleType
o Methods: login(), logout(), updateProfile()

 Coach (Inherits from User)

o Attributes: students: List<Student>

o Methods: addStudent(), recordVideo(), annotateVideo(), createTask()

 Student (Inherits from User)

o Attributes: assignedCoaches: List<Coach>, performanceScore: float

o Methods: viewFeedback(), watchAnnotatedVideo()

 VideoSession
 o Attributes: videoId: string, studentId: string, coachId:
string, videoUrl: string, title: string, description: string, timestamp:
Date, isAnnotated: boolean
 Annotation
o Attributes: annotationId: string, videoId: string, frameTimestamp:
float, overlayData: JSON
o Methods: save(), delete()

 AnnotationTool (Interface)
o Methods: draw(), erase()

 PenTool, TextTool, ShapeTool (Implement AnnotationTool)

 Task
o Attributes: taskId: string, coachId: string, videoId: string, status:
TaskStatus
o Methods: updateStatus()

Relationships:
 A Coach "manages" 1-to-many Students.
 A Student "is managed by" 1-to-many Coaches.
 A Coach "creates" 1-to-many VideoSessions.
 A Student "is associated with" 1-to-many VideoSessions.
 A VideoSession "has" 1-to-many Annotations.
 A Coach "uses" many AnnotationTools.
 A Coach "has" 1-to-many Tasks.

6.3. Sequence Diagram: Annotating a Video

This diagram shows the sequence of interactions for the core "Annotate Video"
use case.
Objects:
 Coach (Actor)
 :AnnotationScreen (UI)
 :VideoPlayerComponent (UI)
 :ReduxStore (State)
 :AzureFunctionAPI (Backend)
 :AzureCosmosDB (Database)
 :AzureBlobStorage (Storage)
Sequence of Events:
1. Coach -> :AnnotationScreen: tap(annotateButton)
2. :AnnotationScreen -> :VideoPlayerComponent: loadVideo(videoUrl)
3. :AnnotationScreen -> :AnnotationToolbox: selectTool('PenTool')
4. Coach -> :AnnotationScreen: drawOnFrame(coordinates)
5. :AnnotationScreen -> :ReduxStore: dispatch(addAnnotationToFrame({f
rame: 10.5, data: ...}))
o Self-Message on :AnnotationScreen: Re-renders canvas with new
overlay.
6. Coach -> :AnnotationScreen: tap(saveButton)
7. :AnnotationScreen -> :AzureFunctionAPI: POST
/api/annotations/save (Payload: videoId, annotationData)
o Loop starts for each annotation

8. :AzureFunctionAPI -> :AzureBlobStorage: upload([Link],

[Link])
9. :AzureBlobStorage -> :AzureFunctionAPI: return(storageUrl)
10.:AzureFunctionAPI -> :AzureCosmosDB: update('VideoSessions',
{ videoId: '...', annotations: [..., {url: storageUrl}] })
11.:AzureCosmosDB -> :AzureFunctionAPI: return(success)
o Loop ends

12.:AzureFunctionAPI -> :AnnotationScreen: return({status: 200,

message: 'Saved!'})
13.:AnnotationScreen -> Coach: show(notification: 'Annotations saved
successfully')

Chapter 7: Application Screenshots and UI Workflow

This section provides a visual walkthrough of the application's key screens.
7.1. Authentication Screens
 Login Screen: A clean interface with the app logo at the top. Fields for
"Email" and "Password" are prominent. Below them are a primary "Login"
button and two text links: "Forgot Password?" and "Don't have an account?
Sign Up."
 Sign Up Screen: Similar branding to the login screen. It includes fields for
"Full Name," a dropdown selector for "Role (Coach/Student)," "Email," and
"Password." A "Sign Up" button completes the form.
7.2. Coach Dashboard and Student Management
  Coach Home Screen: A dashboard layout. The top features a header
with the coach's profile picture and "Welcome, [Coach Name]!". Below are
three prominent stat cards side-by-side: "Total Students: 12," "Total
Videos: 48," and "Total Sessions: 25." A floating action button for "New
Session" is in the bottom right. The top-left shows a hamburger menu icon.
✅ [Screenshot Placeholder: Coach_Dashboard.png]
 My Students Screen: A vertically scrollable list of student cards. Each
card displays the student's profile photo, full name, and age. Tapping a
card navigates to their full profile.
✅ [Screenshot Placeholder: Student_List.png]
7.3. Recording and Annotation Workflow
 Student Profile Screen: Shows the student's detailed info at the top.
Below are two tabs: "Videos" and "Feedback." The "Videos" tab shows a
grid of video thumbnails. A large "Record New Video" button is clearly
visible.
✅ [Screenshot Placeholder: Student_Profile.png]
 Video Annotation Screen: This is the most complex UI.
o The main area is the video player, paused on a specific frame.

o On top of the video, there are freehand red lines tracing a bat
swing. A rectangular box highlights the player's foot position. A text
note says, "Keep front elbow high."
o On the left side is a vertical toolbar with icons for Pen, Marker, Text,
Shape, and Eraser. The Pen icon is highlighted.
o Below the video player is a timeline scrubber showing the video's
duration, with markers indicating annotated frames.
o A "Save Annotations" button is in the top right corner.
✅ [Screenshot Placeholder: Video_Annotation_Interface.png]
7.4. Viewing Feedback (Student and Coach)
 Annotated Session Viewer: The screen shows the video playing. As it
reaches an annotated point, the video pauses, and the saved overlays
(drawings, text) appear. A side panel lists all coach comments,
timestamped to the video (e.g., "0:08 - Good follow-through here.").
✅ [Screenshot Placeholder: Annotated_Video_Viewer.png]
 Coach Task Management Screen: A simple screen with two tabs:
"Pending (5)" and "Completed (18)." The "Pending" tab lists videos
awaiting feedback, showing the student's name and video title. Each list
item acts as a direct link to the annotation screen.
✅ [Screenshot Placeholder: Coach_Task_Management.png]
7.5. Student Experience
 Student Home Screen: A welcoming dashboard that displays "Your
Coaches" with profile pictures. A main section titled "Recent Feedback"
shows thumbnails of recently annotated videos. A "Performance" widget
 might show a graph of their progress over time.
✅ [Screenshot Placeholder: Student_Dashboard.png]

Chapter 8: GitHub Repository and Documentation

... (Content from previous response remains unchanged, but a link to a folder
containing these visual assets would be added) ...
 Visual Assets: The repository should contain a /design folder with:
o UML_Diagrams.png (containing the diagrams described above).

o A /screenshots sub-folder with the images described in Chapter 7.

Of course. For a professional academic or business-ready report, the order of the

chapters is crucial for creating a logical and compelling narrative. You want to
guide the reader from the high-level concept down to the specific details and
future potential.
Here is the correct and most logical order for the chapters of your Cricket Coach
App report.

Recommended Report Structure

Preliminary Pages
 Title Page: Project Title, Your Name, Course/Purpose, Date.
 Abstract: A concise summary (approx. 250 words) of the entire report:
the problem, the solution, the technology, and the outcome.
 Table of Contents: An auto-generated list of all chapters, headings, and
their page numbers.

Main Body of the Report

Chapter 1: Introduction
 Purpose: To set the stage. This chapter answers the question, "Why does
this project exist?"
 Content:
o 1.1. Project Aim: The primary goal and vision.

o 1.2. Strategic Objectives: The specific, measurable goals that

needed to be achieved to fulfill the aim.
o 1.3. Problem Statement: A brief description of the inefficiencies
in traditional coaching that the app solves.
 o 1.4. Scope and Delimitations: What the project includes and
what it intentionally leaves out.
Chapter 2: Methodology and Technology Stack
 Purpose: To explain how the project was built from a process and tools
perspective.
 Content:
o 2.1. Development Approach: Describe the Agile methodology,
sprints, and modular design.
o 2.2. Technology Stack: Present the table of technologies used
(Frontend, Backend, Database, etc.) and provide a brief rationale for
choosing each one.
Chapter 3: System Architecture and Design
 Purpose: To provide the technical blueprint of the application. This
logically follows the technology stack and comes before the user manual,
as it explains the internal structure.
 Content:
o 3.1. System Architecture Overview: A high-level description of
how the frontend, backend, and database interact.
o 3.2. Use Case Diagram: Show the diagram and explain the key
interactions between actors and the system.
o 3.3. Class Diagram: Show the diagram and describe the main
classes and their static relationships.
o 3.4. Sequence Diagram: Show the diagram for a key process (like
annotating a video) and explain the flow of interactions.
Chapter 4: Comprehensive User Manual
 Purpose: To explain what the application does from a user's point of
view. This is the functional "how-to" guide.
 Content:
o 4.1. Authentication: Login, Sign Up, Forgot Password.

o 4.2. Coach Dashboard and Navigation.

o 4.3. Managing Students.

o 4.4. Video Recording and Uploading.

o 4.5. The Video Annotation Suite.

o 4.6. Task Management (Coach).

o 4.7. The Student Experience.

Chapter 5: Application Screenshots and UI Workflow

  Purpose: To provide visual evidence and context for the features
described in the User Manual. This chapter should directly follow the
manual.
 Content:
o Include the screenshots for each key screen (Login, Dashboard,
Annotation Interface, etc.).
o Provide a brief caption for each screenshot explaining what it shows
and how it relates to the user workflow.
Chapter 6: Best Practices and Lessons Learned
 Purpose: To demonstrate critical reflection and analysis of the
development process. This answers the question, "So what was learned?"
 Content:
o 6.1. Implemented Best Practices: Discuss the good decisions
made (e.g., modular structure, media compression).
o 6.2. Critical Lessons Learned: Discuss the challenges faced (e.g.,
Azure CORS configuration, annotation synchronization) and how
they were overcome.
Chapter 7: Conclusion and Future Work
 Purpose: To summarize the project's success and look ahead. This
provides a strong, forward-looking closing statement.
 Content:
o 7.1. Conclusion: Briefly reiterate the project's aim and state how
the final app successfully met its objectives. Summarize its key
impact.
o 7.2. Future Enhancements: Outline the potential future
improvements (AI analysis, offline mode, etc.) to show the project
has long-term potential.

Concluding Pages
 References (Optional): A list of any external articles, frameworks, or
documentation cited in the report.
 Appendices:
o Appendix A: GitHub Repository Link: Provide the direct link to
the project's source code.
o Appendix B (Optional): You could include the full
Mermaid/PlantUML code for the diagrams here if desired.