NLW Agents

Projeto desenvolvido durante o evento NLW (Next Level Week) da Rocketseat, focado na criação de uma aplicação web moderna para gerenciamento de salas com agentes.

🛠️ Tecnologias Utilizadas

Core

• React 19 - Biblioteca para interfaces de usuário
• TypeScript - Tipagem estática para JavaScript
• Vite - Build tool e dev server

Gerenciamento de Estado

• TanStack Query - Gerenciamento de estado assíncrono e cache

Roteamento

• React Router DOM - Navegação client-side

Estilização

• Tailwind CSS v4 - Framework CSS utility-first
• shadcn/ui - Biblioteca de componentes (estilo New York)
• Lucide React - Biblioteca de ícones
• tw-animate-css - Animações CSS com Tailwind

Code Quality

• Biome - Linter e formatter (com configuração Ultracite)

📁 Estrutura do Projeto

src/
├── components/          # Componentes reutilizáveis
│   └── ui/             # Componentes da biblioteca shadcn/ui
├── pages/              # Páginas da aplicação
│   ├── create-room.tsx # Página de criação/listagem de salas
│   └── room.tsx        # Página da sala
├── lib/                # Utilitários e configurações
├── app.tsx             # Componente principal da aplicação
└── main.tsx            # Ponto de entrada

🚀 Setup e Instalação

Pré-requisitos

• Node.js 18+
• npm ou yarn

Instalação

# Clone o repositório
git clone <url-do-repositorio>

# Navegue até o diretório
cd web

# Instale as dependências
npm install

Desenvolvimento

# Inicie o servidor de desenvolvimento
npm run dev

A aplicação estará disponível em http://localhost:5173

Build

# Gerar build de produção
npm run build

# Preview do build
npm run preview

⚙️ Configurações

Path Aliases

O projeto utiliza path aliases configurados no TypeScript:

• @/* → ./src/*

Tailwind CSS

• Versão: 4.x
• Tema base: Zinc
• CSS Variables: Habilitadas
• Suporte a modo escuro: Configurado

Biome

Configurado com:

• Extensão Ultracite para regras avançadas
• Indentação: 2 espaços
• Aspas: Simples
• Semicolons: Conforme necessário

shadcn/ui

• Estilo: New York
• Biblioteca de ícones: Lucide
• RSC: Desabilitado
• TypeScript: Habilitado

🏗️ Padrões de Projeto

• Componentes funcionais com React Hooks
• TanStack Query para cache e sincronização de dados
• Roteamento baseado em páginas com React Router
• Tipagem estrita com TypeScript
• Componentização com shadcn/ui
• CSS utility-first com Tailwind

📡 API

A aplicação consome uma API local rodando em http://localhost:3333 com os endpoints:

• GET /rooms - Lista de salas disponíveis

---

Desenvolvido com ❤️ durante o NLW da Rocketseat