> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/dev-start/editor.md).

# Development Environment

## Overview

Explains how to build a stable development environment for X2BEE development.

***

## Library Information Used

| Name          | Version | Purpose                                                                               |
| ------------- | ------- | ------------------------------------------------------------------------------------- |
| Next.js       | v16.0.1 | A React-based server-side rendering (SSR) and static site generation (SSG) framework  |
| React.js      | v19.2.0 | A JavaScript library for building user interfaces                                     |
| Zustand       | v5.0.3  | A simple and intuitive global state management library                                |
| TypeScript    | v5.8.2  | A superset language of JavaScript that supports static typing                         |
| TailwindCSS   | v4.1.16 | A utility-first CSS framework that supports fast and consistent UI styling            |
| ESLint        | v8.57.1 | A JavaScript/TypeScript linter for improving code quality and maintaining consistency |
| Prettier      | v3.3.3  | An automatic code formatting tool used to maintain style consistency                  |
| @mui/material | 6.0.1   | A UI component library using Material-UI                                              |

## Project Package Structure

{% stepper %}
{% step %}

### src/main/java

* Framework common class package: includes project-related configuration, exception handling, DB-related properties, security, and utility classes
* API-related business logic class package: Controller, Service, Dao, Entity classes

<div align="left"><figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FHT3LDhwOaFGM4dsTeEae%2Fimage-20230914-102711.png?alt=media&#x26;token=c632e6ea-2b18-4c67-94aa-c4650e7d52b9" alt="" width="426"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### src/main/resources

* Framework configuration package: datasource settings per dev/local, logging settings, other configuration files
* API-related query package: query files to be used within the project
* View template package: Front-end html files and error html files
* Other configuration package: the project-wide application.yml file and configuration files

<div align="left"><figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2Flu6C1YnW6cPA5xcRS5Cy%2Fimage-20230914-102453.png?alt=media&#x26;token=9bc1df86-cd92-4f1d-950c-a15ba8016c01" alt="" width="439"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}