🎫 Ticketeria

Sistema completo de gestão de tickets desenvolvido em React Native, com suporte a modo offline, autenticação, cache local e sincronização de dados.

📱 Sobre o Projeto

Ticketeria é uma aplicação mobile para gerenciamento de tickets/suporte técnico, desenvolvida com React Native. O app permite criar, visualizar, gerenciar tickets e adicionar comentários, com funcionalidades avançadas de cache offline e sincronização automática.

✨ Funcionalidades

🔐 Autenticação

✅ Login e registro de usuários
✅ Persistência de sessão com AsyncStorage
✅ Logout com limpeza de dados
✅ Validação de formulários em tempo real
✅ Feedback visual de erros e sucessos

📋 Gestão de Tickets

✅ Listagem de Tickets
- Busca por título ou número
- Filtros por status (todos, aberto, em andamento, resolvido, fechado)
- Pull to refresh
- Indicadores visuais de status e prioridade
- Cards com informações resumidas
✅ Criação de Tickets
- Formulário completo com validação
- Campos: título, descrição, categoria, prioridade
- Upload de anexos (múltiplos arquivos)
- Preview de arquivos anexados
- Validação em tempo real
✅ Detalhes do Ticket
- Visualização completa de informações
- Lista de comentários
- Adicionar novos comentários
- Alterar status (resolver, fechar)
- Visualizar e baixar anexos
- Scroll automático ao focar no input de comentário

💾 Modo Offline

✅ Cache local com AsyncStorage
✅ Carregamento de dados do cache quando offline
✅ SQLite para armazenamento robusto
✅ Sincronização automática de anexos pendentes
✅ Sistema de fila para ações pendentes
✅ Sincronização quando voltar online

🎨 Interface e UX

✅ Tema claro e escuro
✅ Design moderno e responsivo
✅ Feedback visual em todas as ações
✅ Estados de loading e erro
✅ Animações suaves
✅ Componentes reutilizáveis

🔧 Funcionalidades Técnicas

✅ Integração com API (mock e real)
✅ Tratamento de erros robusto
✅ Validação de formulários
✅ Testes unitários
✅ TypeScript para type safety
✅ Styled-components para estilização

🛠️ Tecnologias Utilizadas

React Native 0.82.1
TypeScript 5.8.3
React Navigation 7.x
Styled Components 6.1.19
AsyncStorage 2.2.0
React Native Vector Icons 10.3.0
React Native Documents Picker 11.0.0
React Native Picker 2.11.4
Jest 29.6.3 (testes)

📋 Pré-requisitos

Antes de começar, certifique-se de ter instalado:

Node.js >= 20
Yarn (gerenciador de pacotes)
React Native CLI
Android Studio (para Android)
Xcode (para iOS - apenas macOS)
Java JDK 17 ou superior

🚀 Como Instalar e Executar

1. Clone o repositório

git clone <url-do-repositorio>
cd Ticketeria

2. Instale as dependências

yarn install

3. Instale as dependências nativas (iOS)

cd ios
pod install
cd ..

4. Execute o projeto

Android

# Inicie o Metro bundler
yarn start

# Em outro terminal, execute o app
yarn android

iOS

# Inicie o Metro bundler
yarn start

# Em outro terminal, execute o app
yarn ios

5. Limpar cache (se necessário)

# Limpar cache do Metro
yarn start:reset

# Limpar tudo (node_modules, pods, gradle)
yarn clean

📱 Como Usar o App

Primeiro Acesso

Login:
- Email: teste@teste.com
- Senha: 123456
- Os campos já vêm pré-preenchidos para facilitar a avaliação
Registro (opcional):
- Toque em "Cadastre-se" na tela de login
- Preencha nome, email e senha
- Confirme a senha

Gerenciando Tickets

Criar um Ticket

Na tela principal, toque no botão "+" no canto superior direito
Preencha os campos:
- Título (obrigatório, mínimo 5 caracteres)
- Descrição (obrigatório, mínimo 10 caracteres)
- Categoria (selecione uma categoria)
- Prioridade (baixa, média, alta, crítica)
- Anexos (opcional - toque para selecionar arquivos)
Toque em "Criar Ticket"
O ticket será criado e você será redirecionado para a lista

Visualizar Tickets

Na tela principal, você verá a lista de todos os tickets
Use a barra de busca para filtrar por título
Use os filtros de status para ver tickets específicos:
- Todos
- Aberto
- Em Andamento
- Resolvido
- Fechado
Toque em um ticket para ver os detalhes

Detalhes do Ticket

Visualize todas as informações do ticket
Adicionar Comentário:
- Role até o final da página
- Digite seu comentário
- Toque no ícone de enviar
Alterar Status:
- Role até o final
- Toque em "Marcar como Resolvido" ou "Fechar Ticket"
Visualizar Anexos:
- Toque em um anexo para visualizar ou baixar

Logout

No canto superior direito, toque no ícone de logout
Confirme a ação
Você será redirecionado para a tela de login

Modo Offline

O app funciona mesmo sem conexão com a internet:

Os tickets são salvos localmente
Você pode criar tickets offline
Comentários são salvos e sincronizados quando voltar online
Anexos são sincronizados automaticamente

Tema Claro/Escuro

Na barra inferior, toque no ícone de tema (sol/lua)
O tema será alternado automaticamente

Modo Online/Offline

Na barra inferior, toque no ícone de rede (nuvem)
O modo será alternado entre online e offline
Quando voltar online, os dados pendentes serão sincronizados

📁 Estrutura do Projeto

Ticketeria/
├── src/
│   ├── components/          # Componentes reutilizáveis
│   │   └── _fragments/
│   │       ├── PickerModal/     # Modal de seleção
│   │       ├── TicketCard/      # Card de ticket
│   │       ├── TicketComment/   # Componente de comentário
│   │       └── TicketStatusBadge/ # Badge de status
│   │
│   ├── constants/           # Constantes do projeto
│   │   └── ticket.constants.ts
│   │
│   ├── contexts/            # Contextos React
│   │   ├── AuthContext.tsx      # Autenticação
│   │   ├── NetworkContext.tsx    # Status de rede
│   │   └── ThemeContext.tsx     # Tema
│   │
│   ├── database/            # Operações SQLite
│   │   └── ticketSqliteOperations.ts
│   │
│   ├── helpers/             # Funções auxiliares
│   │   ├── authStorage.ts       # Storage de autenticação
│   │   ├── attachmentStorage.ts # Storage de anexos
│   │   ├── attachmentSync.ts    # Sincronização de anexos
│   │   └── ticketStorage.ts     # Storage de tickets
│   │
│   ├── hooks/               # Custom hooks
│   │   └── useTicketList.ts
│   │
│   ├── pages/               # Páginas do app
│   │   ├── Auth/
│   │   │   ├── Login/          # Tela de login
│   │   │   └── Register/        # Tela de registro
│   │   └── Ticketeria/
│   │       ├── index.tsx        # Lista de tickets
│   │       ├── CreateTicket/    # Criar ticket
│   │       ├── TicketDetails/   # Detalhes do ticket
│   │       ├── Header.tsx       # Cabeçalho
│   │       └── Body.tsx         # Corpo da lista
│   │
│   ├── routes/              # Configuração de rotas
│   │   ├── App.routes.tsx
│   │   └── Ticketeria.routes.tsx
│   │
│   ├── services/            # Serviços de API
│   │   ├── AuthApi.ts           # API de autenticação
│   │   ├── TicketApi.ts         # API de tickets
│   │   └── TicketApi.mock.ts    # Mock da API
│   │
│   ├── styles/              # Estilos globais
│   │   └── theme.ts
│   │
│   ├── types/               # Tipos TypeScript
│   │   ├── auth.types.ts
│   │   └── ticket.types.ts
│   │
│   └── utils/               # Utilitários
│       ├── apiErrorHandler.ts
│       ├── ticket.utils.ts
│       └── validation.utils.ts
│
├── __tests__/              # Testes unitários
│   ├── components/
│   ├── helpers/
│   ├── hooks/
│   ├── services/
│   └── utils/
│
├── android/                # Código nativo Android
├── ios/                    # Código nativo iOS
├── App.tsx                 # Componente raiz
└── package.json            # Dependências

🧪 Testes

O projeto inclui testes unitários para:

Utilitários (ticket.utils, validation.utils)
Helpers (ticketStorage, authStorage)
Serviços (TicketApi, AuthApi)
Componentes (TicketCard, TicketStatusBadge)
Hooks (useTicketList)

Executar Testes

# Executar todos os testes
yarn test

# Executar testes em modo watch
yarn test --watch

# Executar testes com coverage
yarn test --coverage

🎨 Padrões de Código

TypeScript

Tipagem forte em todos os arquivos
Interfaces para todos os tipos de dados
Sem uso de any desnecessário

Styled Components

Todos os estilos em arquivos separados (styles.ts)
Uso do tema centralizado
Sem estilos inline

Componentes

Componentes funcionais com hooks
Uso de memo para otimização
Separação de lógica e apresentação

Organização

Imports organizados (React → React Native → Bibliotecas → Internos)
Funções utilitárias separadas
Helpers para operações comuns

🔧 Configuração

Variáveis de Ambiente

O projeto usa configuração de API mockada por padrão. Para alterar:

Edite src/services/TicketApi.ts
Altere a constante USE_MOCK_API para false
Configure a URL base da API

Tema

O tema pode ser personalizado em src/styles/theme.ts:

Cores
Espaçamentos
Tamanhos de fonte
Bordas
Sombras

📝 Scripts Disponíveis

# Desenvolvimento
yarn start              # Inicia o Metro bundler
yarn start:reset        # Inicia com cache limpo
yarn android            # Executa no Android
yarn ios                # Executa no iOS

# Qualidade
yarn lint               # Executa o linter
yarn test               # Executa os testes

# Limpeza
yarn clean              # Limpa node_modules, pods e gradle

🐛 Troubleshooting

Problemas Comuns

Metro bundler não inicia:

yarn start:reset

Erro ao instalar pods (iOS):

cd ios
pod deintegrate
pod install
cd ..

Erro no Android:

cd android
./gradlew clean
cd ..
yarn android

Cache do Metro:

yarn start --reset-cache

🤝 Contribuindo

Faça um fork do projeto
Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
Commit suas mudanças (git commit -m 'Add some AmazingFeature')
Push para a branch (git push origin feature/AmazingFeature)
Abra um Pull Request

👨‍💻 Autor

Rodrigo Junior

Desenvolvedor Front-end & Mobile

😺 🐱‍👤 Nothing will make me give up on my dreams.

🌱 Atualmente aprendendo: Node.js, Python, English

💬 Pergunte-me sobre: JavaScript, TypeScript, CSS e React

⚡ Curiosidade: Eu amo animes 😜

Desenvolvido com ❤️ usando React Native

Teste Técnico - Desenvolvedor Mobile

📄 Licença

Este projeto foi desenvolvido como teste técnico para avaliação de competências em desenvolvimento mobile.

Name		Name	Last commit message	Last commit date
.bundle		.bundle
.vscode		.vscode
__tests__		__tests__
android		android
ios		ios
src		src
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
.watchmanconfig		.watchmanconfig
App.tsx		App.tsx
Gemfile		Gemfile
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
index.js		index.js
jest.config.js		jest.config.js
jest.setup.js		jest.setup.js
metro.config.js		metro.config.js
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Latest commit

History

Folders and files

Repository files navigation