Reservas API Seazone

Aplicação web para busca, visualização e reserva de imóveis para temporada. Permite filtrar propriedades por preço, tipo de acomodação, comodidades, quartos, hóspedes e localização, visualizar detalhes completos e realizar reservas de forma simples e intuitiva.

Sumário

• Instalação e Execução
• Tecnologias Utilizadas
• Estrutura do Projeto
• Detalhes dos Componentes
• Estilização
• Utilização da API
• Autor

Instalação e Execução

1. Pré-requisitos:
   • Node.js >= 18
   • npm ou yarn
2. Instalação:

   npm install
   # ou
   yarn install

3. Rodar em modo desenvolvimento:

   npm run dev
   # ou
   yarn dev

   O sistema estará disponível em http://localhost:3000.

Tecnologias Utilizadas

• Next.js: Framework React para aplicações web modernas
• React: Biblioteca para construção de interfaces
• TypeScript: Tipagem estática para JavaScript
• CSS Modules: Estilização modular dos componentes
• Fetch API: Consumo de dados de uma API mock
• ESLint: Padronização e qualidade do código

Decisões Técnicas

• TypeScript para maior segurança e organização do código.
• CSS Modules para evitar conflitos de estilos e garantir escopo local.
• Componentização para facilitar manutenção e reuso.
• API mock externa para simular dados reais sem backend dependente do localhost para agilizar tempo.

Pontos para Melhorias Futuras

• Implementar autenticação de usuários e histórico de reservas.
• Adicionar testes automatizados (unitários e de integração).
• Melhorar acessibilidade (a11y) e internacionalização (i18n).
• Refatorar filtros para maior flexibilidade e performance.
• Criar painel administrativo para cadastro/edição de imóveis.
• Utilizar banco de dados real e backend próprio.
• Otimizar carregamento de imagens e dados (lazy loading, cache).

Estrutura do Projeto

reservas-api-seazone/
├── public/                # Imagens e ícones públicos
├── src/
│   ├── app/
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx      # Página principal
│   │   └── imovel/
│   │       └── [id]/
│   │           ├── imovel.module.css
│   │           └── page.tsx  # Página de detalhes do imóvel
│   ├── components/
│   │   ├── Filtros.tsx       # Filtros de busca
│   │   ├── Header.tsx        # Cabeçalho e busca por localização
│   │   ├── ImovelCard.tsx    # Card de imóvel
│   │   ├── ImovelCardLoader.tsx
│   │   ├── ModalReserva.tsx  # Modal de confirmação de reserva
│   │   └── style/            # Estilos CSS dos componentes
│   └── hooks/
│       └── useProperties.ts  # Hook para buscar detalhes dos imóveis
├── package.json
├── tsconfig.json
├── next.config.ts
├── postcss.config.mjs
├── eslint.config.mjs
└── README.md

Detalhes dos Componentes

• Header.tsx: Cabeçalho com busca por cidade/estado (autocomplete dinâmico)
• Filtros.tsx: Filtros avançados (preço, quartos, hóspedes, tipo, comodidades)
• ImovelCard.tsx: Card com informações resumidas do imóvel e botão de reserva
• ModalReserva.tsx: Modal para confirmação visual da reserva
• ImovelCardLoader.tsx: Loader para exibir enquanto imóveis são carregados
• useProperties.ts: Hook para buscar detalhes de imóveis via API
• imovel/[id]/page.tsx: Página de detalhes do imóvel

Estilização

• CSS Modules para escopo local de estilos
• Estilos em src/components/style/ por componente
• Layout responsivo com flexbox e grid
• Cores, espaçamentos e efeitos de hover para melhor experiência visual

Utilização da API

• API mock: https://mock-api-temporada.onrender.com/properties
• Dados buscados via Fetch API nos componentes/hooks
• Busca dinâmica de cidades/estados no Header
• Filtros aplicados para busca personalizada

Autor

• Amanda Gois