Architecture

Architecture

• This page highlights the key architecture of the SoarNego application. Those who are wishing to get a better understanding of the application should attempt to work through the files and directories that are listed here.

SoarNego: Core files to understand the SoarNego application.

Frontend Pages:

Editor

Editor:

• Using remirror found here remirror
• The editor is the core of the SoarNego application. This is where changes to files occur where one can make modifications to all styling as well as load in files to edit.
• The library that the editor is using is Remirror: Remirror is an open-source library for building text editors using web technology. It is built on top of ProseMirror, which is a well-known toolkit for creating web-based text editors that support collaborative editing, complex formatting, and extensible functionality.
• Remirror aims to simplify the process of creating custom text editors by providing a React-based framework that abstracts away some of the complexities of working directly with ProseMirror. It offers a set of high-level components, hooks, and utilities for building feature-rich text editors tailored to specific use cases.
• The editor code can be found here: Editor

Providers

• The providers folder gives us access to the different services of the application. We have the FileExplorerContext Here this is where the context for our file explorer is positioned.
• ShowDiffContext is where the logic for our seePrevious feature is stored: ShowDiff
• UserProvider provides us the context on if our users are logged in, if the user is authenticated and if we need to clear and authenticated user. User Provider

Remirrior Components

• This is where the components that are imported from remirror are stored in order to be used, this includes Font Size, Highlights, and Line Height. This can be modified in order to add more components if necessary.
• Remirror Components

Custom Components

• If a built in component is not available it is possible to build a custom component in order to use. The Custom components folder is where such components are stored in order to be used. One such example of this is the ToggleListItemExtension which is currently being used in order to return a bullet list of items. Toggle List
• Custom Components

File Explorer

• The file explorer is where the file is read in so that it can be used and modified on the editor. This is also where the code to convert a docx to html is located (line 42).
• File Explorer

See Previous Feature

• This is one of the main features of the SoarNego application. It will allow a user to take a file and see the previous versions of said file on the right side of the editor. One is able to see what changes were made as highlighted in green for additions and red for subtractions respectively.
• seePrevious See Previous

SoarNego App Pages

• Pages for displaying the application can be found here: Application Display Page

• The routes for the application page can be found here: Application Connector Page

Login and Signup

Backend

Application

Application

• The main class for launching the application using java. Application

Config

• Config contains our classes that are invovled with our authentication services using JwtAuthentication. Config
• JwtAuthenticationFilter intercepts incoming HTTP requests and authenticates if the user token is valid. Here
• JwtService extracts username from the token and generates a new token for a user as well as validation and assignment of a key. Jwt service

Model

• Model is where we define our entities and fields. Model

Controller

• The controller is where we make our main calls to the api. Controller

DataFiles

• Datafiles is where you are able to load in the files that you would like to use in the editor. This can be in a docx or a .json format. This folder was included for easy navigation while trying to edit with the application. DataFiles can be found here