---
sidebar_position: 1
title: "Visão Geral"
---

Esta seção apresenta a arquitetura real da aplicação em `app/`, com foco no que está em produção hoje.

## Camadas principais

```mermaid
graph TD
    A[**Interface**
Páginas e Componentes React] --> B[Estado e Fluxo
Contexts, Hooks, Event Bus]
    B --> C[**Execução de Atividades**
Interpretador, Runtime, Validação]
    C --> D[**Infra Local**
LocalStorage e Build com Vite]
```

A aplicação se organiza em quatro camadas práticas:

1. **Interface**: páginas e componentes React.
2. **Estado e fluxo**: contexts, hooks e barramentos de evento.
3. **Execução de atividades**: interpretador, renderização e validação.
4. **Infra local**: persistência no navegador e build com Vite/Docker.

## Áreas funcionais

- Atividades de programação em `app/src/atividades/programacao`.
- Atividades de letramento em `app/src/atividades/letramento`.
- Componentes compartilhados em `app/src/components`.
- Estado compartilhado em `app/src/contexts`.

## Documentação disponível nesta seção

- **[Analytics - GA4](analytics.md)** — Sistema de rastreamento de uso com Google Analytics 4
- **[Versionamento e Atualizações](versionamento-atualizacoes.md)** — Detecção automática de deploys e recarregamento
- **[Camadas do Sistema](camadas-do-sistema.md)** — Organização técnica das camadas
- **[Padrões e Conventions](patterns.md)** — Padrões de código e design
- **[Otimização de Bundle](otimizacao-bundle.md)** — Estratégias de compressão e carregamento
- Outras documentações técnicas da plataforma