Backend Architecture

Mon, 01 Jan 0001 00:00:00 +0000

DataMate backend adopts microservices architecture built on Spring Boot 3.x and Spring Cloud.

Architecture Overview

DataMate backend uses microservices architecture, splitting into multiple independent services:

┌─────────────────────────────────────────────┐
│ API Gateway │
│ (Spring Cloud Gateway) │
│ Port: 8080 │
└──────────────┬──────────────────────────────┘
 │
 ┌───────┴───────┬───────────────┐
 ▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Main │ │ Data │ │ Data │
│ Application │ │ Management │ │ Collection │
└──────────────┘ └──────────────┘ └──────────────┘
 │ │ │
 └───────────────┴───────────────┘
 │
 ▼
 ┌────────────────┐
 │ PostgreSQL │
 │ Port: 5432 │
 └────────────────┘

Tech Stack

Core Frameworks

Technology	Version	Purpose
Java	21	Programming language
Spring Boot	3.5.6	Application framework
Spring Cloud	2023.x	Microservices framework
MyBatis Plus	3.5.x	ORM framework

Support Components

Technology	Version	Purpose
Redis	5.x	Cache and message queue
MinIO	8.x	Object storage
Milvus SDK	2.3.x	Vector database

Microservices List

API Gateway

Port: 8080

Frontend Architecture

Mon, 01 Jan 0001 00:00:00 +0000

DataMate frontend is built on React 18 and TypeScript with modern frontend architecture.

Architecture Overview

DataMate frontend adopts SPA architecture:

┌─────────────────────────────────────────────┐
│ Browser │
└──────────────────┬──────────────────────────┘
 │
 ▼
┌─────────────────────────────────────────────┐
│ React App │
│ ┌──────────────────────────────────────┐ │
│ │ Components │ │
│ └──────────────────────────────────────┘ │
│ ┌──────────────────────────────────────┐ │
│ │ State Management │ │
│ │ (Redux Toolkit) │ │
│ └──────────────────────────────────────┘ │
│ ┌──────────────────────────────────────┐ │
│ │ Services (API) │ │
│ └──────────────────────────────────────┘ │
│ ┌──────────────────────────────────────┐ │
│ │ Routing │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

Tech Stack

Core Frameworks

Technology	Version	Purpose
React	18.x	UI framework
TypeScript	5.x	Type safety
Ant Design	5.x	UI components
Tailwind CSS	3.x	Styling

State Management

Technology	Version	Purpose
Redux Toolkit	2.x	Global state
React Query	5.x	Server state

Project Structure

frontend/
├── src/
│ ├── components/ # Common components
│ ├── pages/ # Page components
│ ├── services/ # API services
│ ├── store/ # Redux store
│ ├── hooks/ # Custom hooks
│ ├── routes/ # Routes config
│ └── main.tsx # Entry point

Routing Design

const router = createBrowserRouter([
 { path: "/", Component: Home },
 { path: "/chat", Component: AgentPage },
 {
 path: "/data",
 Component: MainLayout,
 children: [
 {
 path: "management",
 Component: DatasetManagement
 }
 ]
 }
]);

State Management

Redux Toolkit Configuration

export const store = configureStore({
 reducer: {
 dataManagement: dataManagementSlice,
 user: userSlice,
 },
});

Slice Example

export const fetchDatasets = createAsyncThunk(
 'dataManagement/fetchDatasets',
 async (params: GetDatasetsParams) => {
 const response = await getDatasets(params);
 return response.data;
 }
);

Component Design

Page Component

export const DataManagement: React.FC = () => {
 const dispatch = useAppDispatch();
 const { datasets, loading } = useAppSelector(
 (state) => state.dataManagement
 );

 useEffect(() => {
 dispatch(fetchDatasets({ page: 0, size: 20 }));
 }, [dispatch]);

 return (
 <div className="p-6">
 <h1>Data Management</h1>
 <DataTable data={datasets} loading={loading} />
 </div>
 );
};

API Services

Axios Configuration

const request = axios.create({
 baseURL: import.meta.env.VITE_API_BASE_URL,
 timeout: 30000,
});

// Request interceptor
request.interceptors.request.use((config) => {
 const token = localStorage.getItem('token');
 if (token) {
 config.headers.Authorization = `Bearer ${token}`;
 }
 return config;
});

Performance Optimization

Code Splitting

const DataManagement = lazy(() =>
 import('@/pages/DataManagement/Home/DataManagement')
);

React.memo

export const DataCard = React.memo<DataCardProps>(({ data }) => {
 return <div>{data.name}</div>;
});

Backend Architecture - Backend architecture
Development Setup - Dev environment

Developer Guide on DataMate

Backend Architecture

Architecture Overview

Tech Stack

Core Frameworks

Support Components

Microservices List

API Gateway

Frontend Architecture

Architecture Overview

Tech Stack

Core Frameworks

State Management

Project Structure

Routing Design

State Management

Redux Toolkit Configuration

Slice Example

Component Design

Page Component

API Services

Axios Configuration

Performance Optimization

Code Splitting

React.memo

Related Documentation