System Requirements Document

1. Introduction

This System Requirements Document (SRD) specifies the requirements for a morph-transition PowerPoint presentation (referred to as "the deck") that presents the final-year project (PFE) titled “Création et refonte d’un site web” — the creation and redesign of the web platform for Parapharmacie Cléopâtre (Ezzahra / Hammam-Lif, Tunisia).

The deliverable was requested explicitly in the project chat: a PowerPoint presentation using morph transitions, built from the project contents supplied in the uploaded kickoff presentation. The uploaded source ("Black_and_Red_Minimalist_Project_Kickoff_Business_Presentation") defines the content that the deck must convey. This SRD therefore governs both:

• Deck mechanics — the morph-transition presentation behavior, structure, and delivery.
• Content coverage — how every section, capability, diagram, and specification from the source project is represented inside the deck.

The deck is intended for presentation during the PFE defense and must communicate the project from problem statement through to demonstration and conclusion.

The deck is a ~15-minute PFE defense presentation; all presentation content is in French.

2. System Overview

The system is a single Microsoft PowerPoint deck (.pptx) that uses the Morph transition to animate shared elements across consecutive slides. It is organized as an academic/industrial project presentation covering the Cléopâtre web platform.

The deck presents the platform as three complementary pillars:

1. Boutique en ligne — the online storefront.
2. Espace client — the personal customer space.
3. Back-office — the store-management area used by the Cléopâtre team.

The narrative arc of the deck follows the source structure: Introduction → Problématique → Solution → Spécification des besoins → Conception → Implémentation → Démonstrations → Conclusion.

The deck is a single self-contained .pptx file that runs fully offline, including embedded media, and opens reliably in Microsoft PowerPoint versions that support the Morph transition (PowerPoint 2016 and later, or Microsoft 365).

The Morph transition is the defining mechanic: recurring objects (the section numbers 01–08, titles, diagram nodes, screenshots) persist and visually transform from one slide to the next, creating a continuous thread instead of abrupt cuts. The deck uses a black-and-red minimalist visual identity derived from the source presentation.

3. Functional Requirements

3.1 Deck Structure and Navigation

• As the presenter, I want a single PowerPoint file containing the complete deck, so that the entire PFE presentation can be delivered from one artifact.
• As the presenter, I want a title slide identifying the project (“Création et refonte d’un site web”) and the presenter, so that the audience immediately knows the subject and author.
• As the presenter, I want a Sommaire (table of contents) slide listing all numbered sections 01–08 (Introduction, Problématique, Solution, Spécification des besoins, Conception, Diagrammes de séquence, Diagramme de classe, Implémentation), so that the audience can follow the deck structure.
• As the presenter, I want each major section introduced by a numbered section divider, so that the audience can track progress through the deck.
• As the presenter, I want to advance the deck linearly through the defined sequence, so the story flows from introduction to conclusion.
• As the presenter, I want to jump directly to any section (e.g., to the demonstration slides), so I can adapt the presentation to available time and audience questions.
• As the presenter, I want a closing slide ("Merci pour votre attention") with an invitation for questions, so the defense ends with a clear hand-off to the jury.

3.2 Morph Transitions and Motion

• As the presenter, I want the Morph transition applied between consecutive slides, so that shared elements move, scale, and transform smoothly rather than jumping.
• As the presenter, I want the section numbers (01–08) to persist and morph between divider slides, so the deck maintains a continuous visual thread.
• As the presenter, I want titles and text blocks that recur across slides to morph in place, so the narrative reads as one evolving story.
• As the presenter, I want diagram nodes and images to morph when the same diagram is revisited, so viewers can track how a diagram develops across slides.
• As the presenter, I want consistent transition timing and easing across the deck, so morphs feel deliberate and predictable rather than erratic.
• As the presenter, I want a restrained set of motion effects limited to Morph and supporting entrance animations, so the presentation remains readable and professional.
• As the presenter, I want animations to be triggered on click or on advance, so I control pacing during the defense.

The deck must preserve the section numbering and flow of the source (01–08).

3.3 Content — Introduction

• As the presenter, I want an Introduction générale slide, so the project context is established.
• As the presenter, I want the introduction to state the internship context (participation in the creation and redesign of the web platform of Parapharmacie Cléopâtre, located in Ezzahra / Hammam-Lif), so the audience understands the setting.
• As the presenter, I want the introduction to describe the project goal — a complete online experience from product discovery to ordering, plus a management space for the store team, so scope is clear.
• As the presenter, I want slides identifying Organisme d’accueil (Parapharmacie Cléopâtre — Ezzahra / Hammam-Lif, Tunisie), Projet (Création et refonte d’une plateforme web), and Plateforme (Boutique en ligne, espace client et back-office), so the host, project, and platform are each defined.

3.4 Content — Problématique

• As the presenter, I want a Problématique slide stating the central question — how to offer Cléopâtre’s customers a simple and complete online shopping experience while easing the daily management of the store — so the problem is framed.
• As the presenter, I want a “Parcours client” point (help customers discover products and order easily), so the customer-facing problem is captured.
• As the presenter, I want a “Gestion de la boutique” point (allow the team to manage products, stock, and orders from a dedicated space), so the operational problem is captured.
• As the presenter, I want a “Continuité du service” point (link the customer purchasing experience to the operations managed by the team), so the continuity concern is captured.

3.5 Content — Solution proposée

• As the presenter, I want a Solution proposée slide stating that the platform unites the customer purchasing experience with the store-management tools, so the proposed answer is explicit.
• As the presenter, I want a “Boutique en ligne” pillar slide (browse the catalogue, search products, add to cart, place an order), so the storefront is presented.
• As the presenter, I want an “Espace client” pillar slide (manage one’s account and consult one’s orders from a personal space), so the customer space is presented.
• As the presenter, I want a “Back-office” pillar slide (manage products, stock, orders, and customers), so the administration space is presented.

3.6 Content — Spécification des besoins

• As the presenter, I want a Spécification des besoins section stating that it defines what the system must do and how it must function, so the requirements phase is introduced.
• As the presenter, I want a slide distinguishing Besoins fonctionnels (actions and services the platform must allow customers and the team to perform) from Besoins non fonctionnels (expected qualities such as ease of use, security, performance, and adaptation to different screens).

Besoins fonctionnels — Pour les clients

• As the presenter, I want a slide stating that clients can browse the catalogue and search for products, so a key capability is documented.
• As the presenter, I want a slide stating that clients can add products to the cart and place an order, so the purchase capability is documented.
• As the presenter, I want a slide stating that clients can manage their account and consult their orders, so the account capability is documented.
• As the presenter, I want a slide stating that clients can contact support and submit a return request, so the after-sales capability is documented.

Besoins fonctionnels — Pour l’équipe de Cléopâtre

• As the presenter, I want a slide stating that the team can manage products and catalogue information, so the catalogue-management capability is documented.
• As the presenter, I want a slide stating that the team can track stock and orders, so the inventory/order-tracking capability is documented.
• As the presenter, I want a slide stating that the team can manage customers, promotions, and support requests, so the customer/promotion/support capability is documented.

Besoins non fonctionnels

• As the presenter, I want a Sécurité slide (protect accounts and reserve private spaces to authorised users), so the security requirement is documented.
• As the presenter, I want an Adaptation mobile slide (navigation and layout suited to both phones and computers), so the responsive requirement is documented.
• As the presenter, I want an Accessibilité slide (keyboard navigation, understandable interactive elements, respect for reduced-motion preferences), so the accessibility requirement is documented.
• As the presenter, I want a Confort d’utilisation slide (a clear, coherent, easy-to-browse interface), so the usability requirement is documented.

3.7 Content — Conception

• As the presenter, I want a Conception générale slide showing that customers use the online store and client space, the Cléopâtre team uses the back-office, and the platform uses store data (products, stock, customers, orders), so the interaction model is clear.
• As the presenter, I want a Diagramme de cas d’utilisation slide with a placeholder for the use-case diagram image, so the actors and platform interactions are presented.
• As the presenter, I want a Diagramme de séquence — Mise à jour du profil slide with an image placeholder, so the profile-update scenario is presented.
• As the presenter, I want a Diagramme de séquence — Suppression d’un produit slide with an image placeholder, so the product-deletion scenario is presented.
• As the presenter, I want a Diagramme de séquence — Ajout d’une commande slide with an image placeholder, so the order-addition scenario is presented.
• As the presenter, I want a Diagramme de classe slide with an image placeholder, so the data model is presented.
• As the presenter, I want each diagram slide to carry a clearly marked image placeholder (“Insérer l’image du diagramme ici”), so diagrams can be dropped in before the defense.

3.8 Content — Implémentation

• As the presenter, I want a “De la conception à la réalisation” transition slide stating that requirements and UML diagrams guide the implementation, so the move from design to build is explained.
• As the presenter, I want an Environnement technique section presenting the implementation stack, so the technical choices are visible:

Interface et développement

• As the presenter, I want the Next.js, React, TypeScript, and Tailwind CSS stack presented as the tools for building the interface and the platform.

Validation des données

• As the presenter, I want Zod presented as the tool for verifying the validity of entered data.

Base de données

• As the presenter, I want PostgreSQL presented for structuring and storing platform data.
• As the presenter, I want Drizzle ORM presented for facilitating data access and management.

Animations et interactions visuelles

• As the presenter, I want Framer Motion presented for enriching animations and visual interactions.
• As the presenter, I want GSAP presented for enriching animations and visual interactions.

3.9 Content — Démonstrations

• As the presenter, I want a Démonstration — Espace client slide with a placeholder for the demonstration video, so the customer journey can be shown.
• As the presenter, I want a Démonstration — Espace administrateur slide with a placeholder for the demonstration video, so back-office management can be shown.

3.10 Content — Conclusion

• As the presenter, I want a Conclusion générale et perspectives slide stating that the project resulted in a web platform uniting an online store, a client space, and an administration back-office, so the outcome is summarised.
• As the presenter, I want a Bilan point (design and realisation of a platform adapted to the parapharmacy’s activities, presented through the client and administrator demonstrations).
• As the presenter, I want a Perspectives point (continue improving the user experience and the platform’s features, and evolve the solution according to the parapharmacy’s future needs).

3.11 Media Handling and Delivery

• As the presenter, I want all diagram and video slots to be labelled placeholders, so missing media is obvious before presenting.
• As the presenter, I want embedded videos to play within the deck, so no external navigation is needed during the defense.
• As the presenter, I want the deck to run fully offline, so the presentation is not dependent on internet access.
• As the presenter, I want the deck to open reliably in Microsoft PowerPoint with Morph support, so the transitions are preserved.

4. User Personas

4.1 Presenter (PFE student)

The active persona. Builds the deck, inserts the diagrams and demonstration media, rehearses, and delivers the defense live. Needs control over pacing, clear section navigation, and reliable morph transitions. Primary activities: opening the deck, advancing slides, jumping to the demonstration section, and managing Q&A.

Successful outcome: the full PFE presentation is delivered from one self-contained .pptx that runs offline in PowerPoint with Morph support, ending with a clear hand-off to the jury for questions.

4.2 Jury / Academic Audience

The viewer persona. Watches the deck during the defense, reads the requirements and diagrams, follows the project logic, and asks questions afterwards. Needs legible typography, coherent visuals, and a structure that is easy to follow from a distance. Visible information differs from the presenter’s (no control of the deck), so this persona is kept distinct.

5. Core User Flows

5.1 Presenter — Preparation and Rehearsal

1. Open the deck in Microsoft PowerPoint.
2. Verify the title slide and Sommaire (sections 01–08).
3. Insert each diagram into its marked placeholder (use case, three sequence diagrams, class diagram).
4. Insert each demonstration video into its marked placeholder (client space, administrator space).
5. Review morph transitions between slides and confirm shared elements transform correctly.
6. Confirm the deck plays offline and animations run on the presentation machine.

5.2 Presenter — Defense Delivery

1. Start the slide show on the title slide.
2. Advance through the Sommaire, then into the Introduction section.
3. Present the Problématique (parcours client, gestion de la boutique, continuité du service).
4. Present the Solution pillars (boutique en ligne, espace client, back-office).
5. Present the Spécification des besoins (functional needs for clients and for the team; non-functional needs: security, mobile adaptation, accessibility, comfort of use).
6. Present the Conception section, walking through the use-case diagram, the three sequence diagrams, and the class diagram.
7. Present the Implémentation section, covering the technical environment and stack.
8. Play the Démonstration videos (client space, administrator space).
9. Close with the Conclusion and perspectives, then the thank-you slide.
10. Answer jury questions, jumping back to relevant slides as needed.

5.3 Jury — Review and Questioning

1. Watch each section as it is presented, guided by the Sommaire.
2. Read the requirement specifications and inspect the diagrams during the Conception section.
3. Observe the demonstrations of the client space and back-office.
4. Ask questions after the conclusion, referencing specific slides.

6. Visuals, Colors and Theme

Derived from the source deck identity (black-and-red minimalist business presentation):

• Primary: Black / near-black (e.g., #0B0B0B) for backgrounds and primary text.
• Accent: Red (e.g., #C1121F) for section numbers, emphasis, and key highlights.
• Neutral: White (#FFFFFF) for text on dark backgrounds and for light slides.
• Style: Minimalist — generous whitespace, limited colour palette, thin rules and large section numerals.
• Typography: One clean sans-serif family used consistently; large sizes for projector legibility; strong hierarchy between section numbers, headings, and body text.
• Layout: Consistent grid across slides so morph continuity between recurring elements reads clearly.

7. Signature Design Concept

The signature concept is continuity through Morph: the recurring section numbers (01–08), titles, and diagram nodes are treated as persistent objects that slide, scale, and reposition across slides rather than being cut away. Combined with the black-and-red minimalist layout, this creates the impression of a single evolving canvas on which the project story unfolds — from the problem statement through to the demonstration.

8. Interaction Model & Motion Direction

• Primary interaction: Linear advance through the deck, with the option to jump to any section.
• Motion primitive: PowerPoint Morph transition between consecutive slides.
• Direction: Motion is predominantly forward and horizontal (elements moving left/right as sections change) with subordinate scale and fade, reinforcing progression.
• Continuity rule: Any element that appears on two consecutive slides should be a morph target, not a re-drawn element.
• Pacing: Transitions are short, calm, and consistent; no competing or decorative effects that distract from content.
• Readability first: Motion never obscures text or diagrams at rest.

9. Non-Functional Requirements

• Legibility: Text and diagrams must be readable from the back of an examination room.
• Transition performance: Morph transitions must play smoothly, without stutter, on the machine used for the defense.
• Compatibility: The deck must open and run correctly in Microsoft PowerPoint versions that support the Morph transition.
• Offline operation: The deck, including embedded media, must function without an internet connection.
• File stability: The deck file must remain a manageable size and open without corruption after media is inserted.
• Accessibility of the artifact: Sufficient colour contrast between text and background; consistent reading order across slides.
• Reliability of rehearsal: Placeholders must be clearly marked so that no diagram or video is left missing before the defense.
• Aspect ratio: Standard widescreen (16:9) so the deck fills modern projectors.

10. Tech Stack

Deck delivery:

• Microsoft PowerPoint (.pptx) using the built-in Morph transition.
• 16:9 widescreen format.
• Embedded image and video placeholders for diagrams and demonstrations.
• Self-contained file for offline playback.

Content stack presented inside the deck (from the source "Environnement technique"): Next.js, React, TypeScript, Tailwind CSS (interface and development); Zod (data validation); PostgreSQL and Drizzle ORM (database, access and management); Framer Motion and GSAP (animations and visual interactions). These are shown as slide content describing the Cléopâtre platform — not as tooling for authoring the deck.

11. Assumptions and Constraints

• The deck’s content is taken from the uploaded PFE kickoff presentation and must remain faithful to it.
• The user explicitly requested morph transitions; this is a hard requirement, not an optional effect.
• Diagram slides and demonstration slides are placeholders to be filled with images and videos before the defense.
• The deck is a defense artifact for the Parapharmacie Cléopâtre PFE; presentation content is in French.
• Morph transitions require a PowerPoint version that supports them (PowerPoint 2016 and later, or Microsoft 365).
• The visual identity is constrained to the black-and-red minimalist direction indicated by the source deck.
• The deck must preserve the section numbering and flow of the source (01–08).

12. Glossary

• PFE (Projet de Fin d’Études): Final-year project presented for academic defense.
• Morph transition: A PowerPoint transition that animates matching objects from one slide to the next, creating a continuous transformation.
• Parapharmacie Cléopâtre: The host organisation in Ezzahra / Hammam-Lif, Tunisia, for which the web platform was created and redesigned.
• Boutique en ligne: Online storefront for browsing the catalogue, searching products, adding to cart, and ordering.
• Espace client: Personal space where a customer manages their account and consults their orders.
• Back-office: Administration space where the Cléopâtre team manages products, stock, orders, customers, promotions, and support requests.
• Besoins fonctionnels: Functional requirements — the actions and services the platform must allow users to perform.
• Besoins non fonctionnels: Non-functional requirements — expected qualities such as security, mobile adaptation, accessibility, and comfort of use.
• Diagramme de cas d’utilisation: Use-case diagram.
• Diagramme de séquence: Sequence diagram (profile update, product deletion, order addition).
• Diagramme de classe: Class diagram.
• Sommaire: Table of contents slide listing sections 01–08.
• Next.js / React / TypeScript / Tailwind CSS: Front-end and interface technologies presented in the implementation section.
• Zod: Data-validation library presented in the implementation section.
• PostgreSQL / Drizzle ORM: Database and data-access tooling presented in the implementation section.
• Framer Motion / GSAP: Animation libraries presented in the implementation section.