Scribd
Upload
4 views10 pages

Design

ok

Uploaded by

Lifetime Goal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views10 pages

Design

ok

Uploaded by

Lifetime Goal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Cinemate

Design Document

Version 1.0

Group Id: 2022-bbit-2

Supervisor Name : Ma’am Anum Liaqat


Revision History
Date Version Description Author
(dd/mm/yyyy)
27-12-2024 1.0 Cinemate is a dynamic movie discovery 2022-bbit-2
application that allows users to explore,
search, and filter movies by categories,
powered by real-time data from the TMDB
API.
Table of Contents

Introduction of Design Document


Sequence Diagrams
Architecture Design Diagram
Class Diagram
1. Introduction of Design Document

The design document for the Cinemate project provides a detailed blueprint for the system's
architecture, design, and functionality, ensuring a clear and structured approach to
development. It begins with an introduction that outlines the project's purpose and objectives,
emphasizing its role in helping users discover, search for, and view detailed information about
movies. Additionally, the introduction briefly highlights the target audience and the
technologies employed, such as React.js, Tailwind CSS, and the TMDB API.

The system architecture section elaborates on the tiered design, which includes a Presentation
Tier for the front-end interface, a Business Logic Tier for API integration and functional
logic, and a Data Tier that utilizes TMDB API as the external data source. This separation of
concerns enhances scalability and maintainability, allowing each layer to operate
independently yet cohesively.

To further clarify the system's structure, class diagrams are included, illustrating key
components such as the Fetch class for handling API calls, the Category class with inherited
functionality for search and movie details, and the Page class, which demonstrates a
composition relationship with Fetch. Sequence diagrams complement these visualizations by
depicting workflows for discovering movies, searching, and viewing movie details. These
diagrams highlight interactions between users, the UI, the controller, and the external API,
ensuring a seamless user experience.
2. Sequence Diagrams
UC-01
UC-02
UC-03
3. Architecture Design Diagram

Presentation Tier (Front-End)

 Role: Responsible for user interaction and displaying data.


 Components:
o React.js for building a dynamic and responsive user interface.
o Tailwind CSS for styling and layout design.
o Handles input from the user (e.g., selecting a category, searching for a movie).
 Key Features:
o Movie categories displayed dynamically.
o A search bar for user queries.
o Detailed movie information on user selection.

Logic/Business Tier (Middle Layer)

 Role: Acts as a bridge between the presentation tier and the data tier.
 Components:
o JavaScript functions handle:
 API integration.
 Data transformation and formatting.
 Error handling (e.g., API failures).
 Key Features:
o Interacts with the TMDB API to fetch data.
o Implements logic for categorizing movies and searching.
o Handles responses and prepares data for the front-end.

Data Tier (Back-End/External Services)

 Role: Responsible for data retrieval and storage.


 Components:
o TMDB API as the external data source.
o Fetches data such as popular movies, top-rated movies, upcoming movies, and
movie details.
 Key Features:
o Provides JSON data for the application.
o Ensures reliable access to movie information.
o Handles requests and responses efficiently.
4. Class Diagram

You might also like