---
# System prepended metadata

title: DeviProp app functional specification

---

# DeviProp app functional specification

SAAS app functional specification
`DeviProp`
10/12/2023

## About SAAS app specification

The functional specification is a useful document which describes functions, appearance, purpose and requested outputs of the software. It allows you tostructure all the information so the software partner can select appropriate technologies, plan resources, schedule and price the project

## Changelog

| **Date** | **Author** | **Version** | **Description** |
| --- | --- | --- | --- |
| 10/12/2023 | Quang | 0.1 | Create document |

## Table of contents

TBD

## Project description

### Context and scope

DeviProp has a need to develop a Software as a Service (SaaS) website that aims to bring some of the main functionality of certain existing desktop-installed software to the web. This project involves creating a cloud-based platform that allows users to access and use the software directly from their web browser, without needing to install anything on their local machine.
The proposed SaaS product will be a web-based platform that allows users to access and use the software directly from their web browser, without needing to install anything on their local machine. The product will have the following features:

- User account management
- User registration, login
- Project creation, listing, update, delete
- Project amount calculation and display
- API Gateway to control traffic to upstream services
- Hosting on-premise, in the cloud, or in a hybrid environment
- Deployment orchestration plan to roll out the software in production

### How the proposed product is going to behave

The product will be designed to be easy to use and manage, and it will be scalable to meet the needs of a wide range of customers.  
Here is an example of how the product might be used:

1.  A user creates a new account and logs in.
2.  The user creates a new project and enters the relevant information.
3.  The user edits the project as needed.
4.  The user clicks a button to calculate the project amount.
5.  The product displays the project amount.
6.  The user saves the project and exits.

#### What it can do

- Allow users to access and use the software directly from their web browser, without needing to install anything on their local machine.
- Create, list, and manage projects.
- Calculate and display the project amount.
- Control traffic to upstream services using an API Gateway.
- Be hosted on-premise, in the cloud, or in a hybrid environment.
- Be deployed using a deployment orchestration plan to roll out the software in production.

#### What it cannot do

- Run native desktop applications.
- Provide the same level of performance as a desktop-installed application in all cases.

## Functional Requirements
[https://devipropxofficience.atlassian.net/jira/software/projects/DEVIPROP/boards/1/backlog](https://devipropxofficience.atlassian.net/jira/software/projects/DEVIPROP/boards/1/backlog)

### Login

![](https://hackmd.io/_uploads/HkmoYE5Wp.png)

The Login view allows user to login into the system with username and password. There's also a forgot password function to let the user recover the password in case of forgotten

### Register

The Register view allows user to make the registration with username and password. The user must accept the Term Of Use to proceed.

### User management

![](https://hackmd.io/_uploads/SJdTF4cWp.png)

The administrator can view the user list as well as do the management tasks like: update a user information or delete a user

### List of project

![](https://hackmd.io/_uploads/S1Qk5Nc-p.png)

The List Of Project view allows user to view the current quotation lists on the system. The format to display as a grid view, including:

- ID: the id of the quotation
- Quote name: name of the quotation
- Company: the company relevant
- Update: the last updated date
- Status: New/ Pending status
- Amount: the quotation value

### Add a new project

![](https://hackmd.io/_uploads/BJheqV9bT.png)

The Add quotation view allows user to input a new quotation into the system. The format to display as a popup, including:

- ID: the id of the quotation
- Quote name: name of the quotation
- Company: the company relevant
- Update: the last updated date
- Status: New/ Pending status
- Amount: the quotation value

### Project detail

![](https://hackmd.io/_uploads/Sy9WqN9Z6.png)

The project detail view allows user to view the detail of a project as well as edit its information, recalculation the cost

## Technical Requirements

- This application will be developed on Front end and Back end
- This application is intended for use on web browser
- JSON requests are used to handle the communication between the app and server
- This application works only in online mode

### Architecture

The following architecture, libraries and technologies should be used

| **Architecture** | **Additional Info** | **Techno** |
| --- | --- | --- |
| High Availability | Database must come in master and slave to improve the readability and performance | MySQL Master Slave |
| Reverse Proxy | Centralized Control: The proxy serves as the single entry point for all client requests. | Nginx |
| Reverse Proxy | Request Routing: It can route requests to the appropriate servers based on the request details. | Nginx |
| API Gateway | Load Balancing: The API Gateway can distribute incoming requests to backend services to balance load and ensure optimal use of resources. | Nginx |
| API Gateway | Caching: The API Gateway can cache responses from backend services to reduce the load and improve performance. | Nginx |
| Security | Platform must have built in Proxy to manage web access through HTTPS | Nginx |
| Security | A client application must send a JSON Web Token (JWT) in the authorization header of the HTTP request to the backend API. The Backend takes the token to process the authentication | Nginx |

#### General System Architect

The diagram component includes 2 main services:

- Dashboard service: a service to handle all requests of authentication and create/view/update/delete a project from client side.
- DeviProp service: a service to handle anything related to project calculation

![](https://hackmd.io/_uploads/SySomvq-6.png)


### Software interface

#### Backend

| **Techno** | **Additional Info** |
| --- | --- |
| Django | A high-level Python web framework for rapid development. This will be used for Dashboard webservice |
| .NET Core | .NET Core is a new version of .NET Framework, which is a free, open-source, cross-platform, general-purpose development platform maintained by Microsoft. |
| MySQL | Powerful, open-source object-relational database management system |
| Celery | A task queue that allows to perform asynchronous, message-driven tasks. |
| Nginx | Reversed proxy, load balancer |
| Docker | a platform for developing, shipping, and running applications as containers. |

#### Frontend

| **Techno** | **Additional Info** |
| --- | --- |
| React | Facebook's framework to build declarative, reusable UI components for building modern web apps |
| React query | Data fetching and state management for React apps |
| Ant Design | Enterprise-grade UI components for React apps |
| Redux | State management for JavaScript apps |
| Babel | JavaScript transpiler for modern features |
| Webpack | Module bundler for modern JavaScript apps |
| TailwindCSS | CSS framework for rapid development |
| Jest | Comprehensive JavaScript testing framework |


### The way Webservice communication with DeviProp calculation module
#### Sequense diagram

![](https://hackmd.io/_uploads/SJir8dq-6.png)

#### Get/calculation
Request parameters
| **name** | **Type** | |
| --- | --- | --- |
|Quantité|Float|quantity from the description of the selected row|
|Inflation|Float|Inflation from the description of the selected row|
|Centre de coût|Float|Centre de coût data impact|
|Main d’œuvre|Float|Main d’œuvre input from the client|
|Loi d’achat|Float|Loi d’achat (optional) input from the client|
|Achat|Float|Achat from the description of the selected row|
|Frais de déplacement|Float|Frais de déplacement from the description of the selected row|
|Risque|Float|Risque from the description of the selected row|
|Date CE|Float|Date CE from the description of the selected row|

Response
| **name** | **Type** | |
| --- | --- | --- |
|Production cost|Float|Production cost calculated|
|Inflated production cost|Float|Inflated production cost calculation|
|Price|Float|Price calculation from the inputted data from client|

#### App architecture

The application should use Three-Tier Architecture that separates applications into a presentation tier, an application tier and a data tier.

![](https://hackmd.io/_uploads/B14gB_c-T.png)

The Logic tier should be designed in Modular Monolith architecture. The main focus of Modular Monolith is to separate modules. Each module has its own layers ( Domain, Infrastructure and API etc.). Thus, they can use same or different database solutions. On the other hand, modules don't share their own business logics with each other. They can communicate with each other with sync or async approaches. These approaches are called loosely coupled.

![](https://hackmd.io/_uploads/SkbbS_5-a.png)

### Database management
#### Creation
A central database administration (DBA) team is responsible for creating and owning all common databases in the organization. This team has the expertise and resources to ensure that databases are created and managed in a consistent and secure manner.

#### Ownership
Ownership of common databases is retained by the DBA team. This means that the team has the authority to create, modify, and delete common databases. The team also has the authority to grant and revoke access to common databases.

#### Access rights
The DBA team uses role-based access control (RBAC) to manage access rights to common databases. RBAC allows the team to assign users to roles, and then grant permissions to roles. This makes it easier to manage access rights, as the team can simply add or remove users from roles.

In the project scope, the system has a common database that stores project information. The DeviProp team has to create a role called `external_developer_role` and grant this role the ability to read and write into necessary project information tables. All external developers here are Officience developers assigned to this `external_developer_role`. This means that all these developers have the ability to access and update the project information tables relevant

If a new developer is added, the DeviProp team can simply add them to the `external_developer_role` role. This will automatically grant the new access to the project information database.

If an external developer leaves the project, the DeviProp team can simply remove them from the `external_developer_role` role. This will automatically revoke their access to the project information database.

## Testing Requirements

For testing there will be 2 environments for that: QA & Production

- The QA team picks up the new QA environments and performs QA testing, regression testing, integration and performance testing.
- Once the QA builds pass the QA team’s and client verification, the builds become release candidates and will be deployed to the production environment on schedule.

### Functional testing:

- User account creation:
    - Verify that a user can create a new account with a valid email address and password.
    - Verify that a user cannot create a new account with an existing email address.
    - Verify that a user cannot create a new account with a password that does not meet the password requirements.
- Project creation:
    - Verify that a user can create a new project with a valid name and description.
    - Verify that a user cannot create a new project with a name that is already in use.
    - Verify that a user cannot create a new project without a name or description.
- Project listing:
    - Verify that a user can list all of their projects.
    - Verify that a user can filter their projects by name, description, or creation date.
    - Verify that a user can search for projects by name or description.
- Project editing:
    - Verify that a user can edit an existing project's name, description, or start and end dates.
    - Verify that a user cannot edit an existing project's name to an existing name.
    - Verify that a user cannot edit an existing project's start or end dates to be before the current date.
- Project amount calculation:
    - Verify that the project amount is calculated correctly based on the project's start and end dates, as well as the hourly rate of the user who created the project.
- Project amount display:
    - Verify that the project amount is displayed correctly on the project details page.
- API Gateway:
    - Verify that the API Gateway can route requests to the correct upstream services.
    - Verify that the API Gateway can handle a large number of concurrent requests.
    - Verify that the API Gateway can authenticate and authorize users correctly.

### Non-functional testing:

- Performance testing:
    - Verify that the application can handle a large number of concurrent users.
    - Verify that the application can withstand high traffic loads.
    - Verify that the application can respond to requests quickly.
- Security testing:
    - Verify that the application only allows authorized users to access its features and functionality.

### Deployment testing:

- Verify that the application can be deployed to on-premise, cloud, or hybrid environments.
- Verify that the application can be deployed using the deployment orchestration plan.
- Verify that the application can be deployed without errors.