4.1 Architecture Diagram

1. Front-end

1.1 File Manager (UI)

• This component handles the user navigation of Files and Folders in Sashmi Note.

1.2 Content

• This component has 2 major sub components:
  • Editor:
    • Receive the markdown content input by the user.
  • Viewer:
    • Display the rendered the converted markdown data.

2. Back-end

2.1 File Manager (Logic)

• This component provides an API for FileManager (UI) to manage the organisation Files and Folders.
• Serves as a middle-man between FileManager (Logic) and Storage.

2.2 Document Packager

• This component parses and process the markdown data and output a html string.
• In this project, this component will:
  1. filter the markdown data with a set of given conditions from the user
  2. convert markdown content into HTML string
  3. insert markdown plugins specified by the users

2.3 Storage

• This component manages the data storage and organisation of all the files and folders that the user owns and has permission to.
• This component directly communicates with the browser's indexedDB database through AlaSQL.
• Provides an API for FileManager(Logic) to update and retrieve Files and Folders information into the database.
• It also acts as a middle-man between the program and the database.^{[See ER Diagram]}