Sprint 2 - Kaboo4sure/MSSU GitHub Wiki

E-Commerce Platform: System Design and Modeling Report

Contents

  • E-Commerce Platform: System Design and Modeling Report 1
    1. Introduction 1
    1. Requirements Modeling 2
  • 2.1 Scenario-Based Modeling: Use Case Diagram 2
  • 2.2 Class-Based Modeling: UML Class Diagram 2
  • 2.3 Functional Modeling: UML Sequence Diagram 3
  • 2.4 Behavioral Modeling: UML State & Activity Diagrams 4
    1. System Design 8
  • 3.1 Architectural Design 8-
  1. Planning 11
  • 4.1 Task Breakdown for Every Story 11
  • 4.2 Assigned Workload Balance 12
  • 4.3 Frequent Meetings & Documentation 12
    1. GitHub Repository Management 12
  • 5.1 Commit Logs and References 12
  • 5.2 Discussion and Reviews 13
    1. Conclusion 13
    1. References
  1. Introduction This report presents the system design and modeling components of the E-Commerce Platform, including use case diagrams, class diagrams, sequence diagrams, state diagrams, activity diagrams, architectural design, and component-level design. Each diagram is accompanied by an explanation to demonstrate its relevance and consistency with the system requirements.
  2. Requirements Modeling 2.1 Scenario-Based Modeling: Use Case Diagram The use case diagram illustrates how different user roles (Buyer, Seller, Admin) interact with the platform. Buyers can browse and compare products, place orders, and return orders. Sellers manage inventory and product listings, while Admins oversee user management and platform activities.

image

2.2 Class-Based Modeling: UML Class Diagram This UML class diagram defines the system's core entities: User, Buyer, Seller, Admin, Product, Order, and Cart. The diagram shows relationships between these classes, demonstrating how users interact with products and order processing.

image

2.3 Functional Modeling: UML Sequence Diagram This sequence diagram outlines the step-by-step interaction between a buyer, the system, the payment gateway, and the seller during the order processing flow. The diagram ensures that the process aligns with the platform's functional requirements.

image

2.4 Behavioral Modeling: UML State & Activity Diagrams State Diagram for Order Lifecycle This state diagram represents the lifecycle of an order, from placement to payment processing, shipping, and potential return or cancellation. It helps visualize how an order transitions through different stages.

image

2.5 Activity Diagram This activity diagram represents the major workflows of the three primary user roles within the e-commerce platform: Buyer, Seller, and Admin.

  • The Buyer workflow includes searching for products, viewing details, adding items to the cart, proceeding to checkout, making payments, tracking orders, and requesting returns if needed.
  • The Seller workflow covers logging into the seller dashboard, listing new products, setting prices and stock levels, publishing products, receiving and processing orders, shipping products, and tracking payments.
  • The Admin workflow involves logging into the admin panel, reviewing and approving/rejecting user account requests, managing product listings, monitoring transactions, suspending or flagging accounts for violations, and generating system reports. This diagram ensures that the platform supports seamless interactions between buyers, sellers, and administrators while maintaining efficient order processing, product management, and platform governance.

image

  1. System Design 3.1 Architectural Design This diagram illustrates the high-level architecture of the platform, highlighting key components such as the frontend (HTML), backend (Django), database (PostgreSQL), cloud deployment (AWS), and the payment gateway (PayPal). The architecture follows a client-server model with microservices integration.

image

3.1 User Interaction Layer (Frontend) User Devices (Mobile/Web): Buyers, sellers, and admins interact with the platform using web browsers. Client (HTML, CSS, JavaScript): The frontend will be built using HTML for structure, CSS for styling, and JavaScript (Vanilla JS or jQuery) for interactive elements. Instead of a single-page application (SPA) like React.js/Vue.js, it will use multi-page templates rendered by the backend (Django templates or Flask Jinja templates). • Interaction Flow:

  1. Users request pages (e.g., Home, Product Listings, Cart) via the browser.
  2. The server renders HTML pages dynamically based on the user’s request.
  3. JavaScript enhances interactivity (e.g., AJAX calls for live updates).

3.2. Application Layer (Backend) • Backend (Django or Flask):

  • Handles business logic, processes user requests, and interacts with databases and third-party services.
  • Dynamically renders HTML templates and serves them to the frontend.
  • Authentication Service (OAuth2/JWT): -- Manages user authentication using OAuth2 (Google, Facebook login) or JWT for session handling. -- Admin Dashboard: -- A separate HTML-based interface for administrators to manage users, products, and transactions. • Backend Communication Flow:
  1. The frontend (HTML) sends form submissions or AJAX requests to the backend.
  2. The backend validates data and processes business logic.
  3. The backend dynamically renders new HTML pages or returns JSON responses.

3.3. Data & Storage Layer

  • Database (PostgreSQL): Stores: -- User Information (Buyers, Sellers, Admins). -- Product Listings & Inventory. -- Orders, Payments, and Transactions.
  • Cloud Storage (AWS S3): Stores: -- Product Images, Profile Pictures, and Order Attachments. -- Media is loaded in HTML via CDN links.
  • Data Flow: -- The backend retrieves data from PostgreSQL and renders it into HTML templates. -- Large media files are stored in AWS S3, reducing database load.

3.4 External Services & Third-Party Integrations

  • Payment Gateway (Stripe/PayPal): -- Handles secure online transactions. -- Users are redirected to Stripe/PayPal for payment processing. -- Third-Party APIs (Shipping, Reviews): -- Shipping API: Fetches delivery rates and tracks shipments. -- Reviews API: Integrates with external review platforms.
  • External Communication Flow: -- The backend communicates with payment and shipping APIs. -- Users interact with third-party services via redirects or embedded widgets.

3.5 Administrator Role

  • Admin Dashboard: -- Built using HTML templates rendered by Django/Flask. -- Allows admins to manage users, approve/reject accounts, monitor transactions, and generate reports.
  1. Planning

4.1 Task Breakdown for Every Story Each user story has a breakdown of development tasks. For example, the task breakdown for the product search feature includes:

  • Implementing the search bar UI.
  • Connecting the search functionality to the backend.
  • Displaying search results and filters.

4.2 Assigned Workload Balance Tasks are assigned to team members based on expertise. For example:

  • Frontend Developer: Implements UI components using HTML, CSS, and JavaScript.
  • Backend Developer: Handles database interactions, API development, and authentication.
  • QA Engineer: Conducts testing and bug fixes.

4.3 Plan for Next Release The next release will introduce enhanced order tracking, improved search filters, and additional seller analytics features. A milestone for Sprint 3 will be created in the GitHub repository.

4.4 Frequent Meetings & Documentation This is a standalone effort, no meeting is held with anyone as I complete this assignment alone.

  1. GitHub Repository Management

5.1 Commit Logs and References

  • Commit messages are structured and reference issue reports. Example commit messages: -- "Implemented user authentication – Closes #10" -- "Fixed search filtering bug – Closes #22"

5.2 Discussion and Reviews Code reviews and discussions are conducted via pull requests. All commits are reviewed before merging, ensuring code quality and consistency.

  1. Conclusion This report provides a structured approach to system modeling and design for the E-Commerce Platform. The diagrams and explanations demonstrate the logical flow of system functionalities, ensuring alignment with software engineering best practices.

  2. References