---
sidebar_position: 4
title: "Camadas do Sistema"
---

Esta divisão ajuda a entender responsabilidades e reduzir acoplamento entre partes da aplicação.

```mermaid
graph TD
    UI[**Camada de Interface**
Páginas · Componentes · Rotas]
    EF[**Camada de Estado e Fluxo**
Contexts · Hooks · Event Bus]
    EA[**Camada de Execução de Atividades**
Programação · Letramento · Interpretador]
    PI[**Camada de Persistência e Utilitários**
LocalStorage · Serviços · Utils]

    UI --> EF
    EF --> EA
    EA --> PI
```

## Camada de interface

Responsável por renderização, navegação e interação com usuário.

- Páginas: `app/src/pages`
- Componentes: `app/src/components`
- Rotas: `app/src/App.jsx`

## Camada de estado e fluxo

Responsável por estado compartilhado e coordenação de eventos.

- Contextos: `app/src/contexts`
- Hooks: `app/src/hooks`
- Barramentos: `app/src/utils/gameEvents.js`, `app/src/utils/letramentoEvents.js`

## Camada de execução de atividades

Responsável pelo runtime das atividades.

- Programação: `app/src/atividades/programacao`
- Letramento: `app/src/atividades/letramento`
- Interpretador: `app/src/interpreters`
- Base de runtime: `app/src/shared/BaseGameScene.js`

## Camada de persistência e utilitários

Responsável por armazenamento local e funções transversais.

- Serviços: `app/src/services`
- Utilitários: `app/src/utils`

## Decisões importantes

- Eventos assíncronos foram desacoplados com pub-sub para reduzir dependência entre UI e runtime.
- Estado global ficou em providers para evitar cadeias longas de props.
- O runtime de atividades de letramento usa fronteira clara por iframe sandbox.

Referências externas:

- EventTarget: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
- React Context: https://react.dev/reference/react/createContext
