This page outlines the recommended project structure for our GitLab repository. The guidelines described here are designed to ensure that our project is organized and easy to navigate for all contributors and maintainers.

Back-end

Directory Structure

src

This directory contains all the application code, which is divided in subdirectories for better organization.

The subdirectories are:

• 'config': This folder contains all the configuration classes for Spring-boot such as "CorsConfig", "SecurityConfig" or "AuthenticationConfig".
• 'controller': This folder contains all the controller classes. The controller classes contain all the endpoints provided by our back-end application.
• 'dto': This folder contains all the dtos used in the back-end. Dto means "data transfer objects". These object types are used to send information from a system to another, and we use them as standard objects in our API calls.
• 'entity': This folder contains all the entities of the project. An entity is a Java class that maps to a Database table.
• 'Repository': This folder contains all the repository interfaces that define Java methods which interact with the database.
• 'Service': This folder contains all the service classes used in the back-end. Services combine the methods defined in the repositories to form more comprehensive methods used in the endpoints.
• 'Util': This folder contains all the util classes. That contains general algorithms that are used in different places of the code.

test

This directory contains all the tests implemented in the application back-end. For successful execution, the location of these tests must mirror the location of the main class being tested.

.gitignore

This file lists all folders and files that should be excluded from Git and not uploaded to the repository.

.gitlab-ci.yml

This file contains the instruction for the pipeline in GitLab.

pom.xml

This file contains all the external dependencies used by the project.

Front-end

Directory Structure

Our front-end directory structure is configured based on a Vue application, bundled with Vite. By initializing a Vue.js project, the structure is pre-defined. To ensure that the directories and files are structured in a standardized way, we chose to apply this layout for all the front-end code. For this reason, we have an outer folder called SmartMat, which houses the application code.

cypress

This folder contains the code that serves the integration testing for the application. The tool used for 'SmartMat' E2E-testing is Cypress.

src

The 'src' directory holds the essential code of our application, including the App.vue and main.js files that act as the primary entry point to our Vue.js application. These are the subdirectories:

• 'dist': The 'dist' directory contains the compiled project files, generated using the 'npm run vite build' command. This script transforms the project front-end application code to a standard html based format. This delivery ensures that a browser could run the formatted code.

• 'assets': The 'assets' directory hosts all visual resources for the project. It consists of two subdirectories, 'css' and 'img'. As the names state, the css is the folder for code responsible for component styling, and 'img' are the images found throughout the application.

• Vue Component Structure - 'components': The 'components' directory is according to Vue's recommended structure, housing self-contained, reusable Vue components and their associated views.

• Unit-test Directory Structure: For enhanced readability and structure, we've organized the 'tests' directory to mirror the 'components' directory. This way, any developer or maintainer has easy access to the code. Furthermore, it makes the creation of any additional test files simpler, by having a clear standard as to which directory the file is to be created in.

• 'router': This folder houses the native Vue router, which is utilized by the single page application for rendering the various views.

• 'services': The 'services' folder holds the javascript code for specialized API-communicator-files. These files serve as way of communicating with the back-end endpoints, which ensures transportation of persistent data to and from the back-end. These classes have been configured to use the Axios-library.

• 'stores': 'stores' is a crucial concept for the front-end application. By implementing javascript code that uses the Pinia stores, the application front-end can utilize the browser's temporary storage system to enhance the user experience. The files for stores, persists data in session storage.

• 'utils': This folder contains all utility code for the project. To ensure readable code, these files hold javascript functions that are widely used throughout the project.

• 'views': Holds the vue views that are rendered on the website.

ssl

The 'ssl' folder contains the project ssl-certificate.

.gitignore

Is a file that communicates to GIT which files or directories to ignore. This ensures that sensitive and unnecessary files are being committed to the central repo, being GitLab.

config-files

These are generated configuration files that ensure the setup of the project.

index.html

Is the outer html-file for the application.

README.md

Is the instructional file for developers and maintainers. This describes how to run the project, as well as it serves as instructions for development.

.gitlab-ci.yml

This file instructs GitLab on how to quality validate any new code or actions being performed towards the central repo. This file tells GitLab to run environments to ensure that the project functions correctly after committed code is uploaded.