docs/frontend.mdc - main - voting/frontend

docs/frontend.mdc
165 строк2 KB
TimPulin
create nomination
16 июл 2026, 20:29
16 июл 2026, 20:297753759
---

description: Frontend rules (React + Vite)
globs:

* "frontend/src/**/*.ts"
* "frontend/src/**/*.tsx"
  alwaysApply: true

---

# Frontend Rules

## General

The frontend is built with:

* React
* Vite
* TypeScript

The frontend communicates with the backend exclusively through the REST API and Server-Sent Events (SSE).

---


## Components

Components should:

* Have a single responsibility.
* Be small and reusable.
* Avoid excessive nesting.

Split large components into smaller ones.

---

## State Management

Prefer local component state.

Use shared/global state only when data is required across multiple features.

Avoid unnecessary global state.

---

## API Access

Do not perform HTTP requests directly inside UI components.

Use a dedicated API or service layer.

Example:

```text
Component
    ↓
API Service
    ↓
REST API
```

---

## Server-Sent Events

Use SSE only for realtime updates, including:

* active nomination changes
* voting status changes
* event state updates

Reconnect gracefully if the SSE connection is interrupted.

---

## Routing

Use client-side routing.

Keep routes organized by feature.

Avoid deeply nested routing unless necessary.

---

## Forms

Use controlled form components.

Validate input before submitting requests.

Display clear validation messages.

---

## Styling

Keep styling consistent across the application.

Prefer reusable UI components over duplicated styles.

Avoid inline styles unless required for dynamic values.

---

## Error Handling

Display user-friendly error messages.

Do not expose backend or network implementation details.

Handle API failures gracefully.

---

## Loading States

Provide loading indicators for asynchronous operations.

Avoid blocking the entire interface unless necessary.

---

## Accessibility

Generated UI should:

* use semantic HTML
* support keyboard navigation
* provide accessible labels
* avoid relying solely on color to communicate state

---

## Performance

* Avoid unnecessary re-renders.
* Memoize expensive computations only when justified.
* Lazy load large features where appropriate.

Do not optimize prematurely.

---

## TypeScript

Use strict typing throughout the frontend.

Avoid `any`.

Share common types where appropriate.

---

## General Rules

Generated frontend code must:

* Follow React best practices.
* Keep components focused.
* Isolate API communication.
* Use SSE only for realtime updates.