Mapa Interativo de Stands - Desafio Front-End Angular

🚀 Aplicação em Produção

Clique aqui para ver a aplicação ao vivo!

---

📄 Sobre o Projeto

A aplicação simula um mapa interativo para um evento de empresas, permitindo o gerenciamento, visualização e "compra" de stands de forma dinâmica e interativa.

O objetivo principal é demonstrar habilidades em componentização, manipulação de estado, interatividade com a DOM e organização de código.

✨ Funcionalidades

A aplicação conta com as seguintes funcionalidades:

Gerenciamento de Stands

• Adicionar: Criação de novos stands no mapa.
• Editar: Edição de informações de stands existentes (nome, descrição, logo) através de um painel lateral.
• Mover: Arrastar e soltar (drag-and-drop) os stands livremente pela área do mapa.
• Comprar: Um usuário pode simular a compra de um stand, alterando seu status para "ocupado" e seu visual.

Interatividade do Mapa

• Zoom: Zoom in e out com o scroll do mouse.
• Pan: Arrastar o mapa clicando e segurando no fundo para navegar.
• Limite de Borda: Os stands não podem ser arrastados para fora da área do mapa.
• Planta Baixa Dinâmica: Carregamento de uma imagem de planta baixa para servir de fundo para o mapa. A área do mapa se ajusta para ter a mesma proporção da imagem carregada.
• Controles de Visualização: Botões para resetar o zoom/pan e para remover a planta baixa carregada.

UI/UX

• Painel de edição lateral com animação suave.
• Design limpo e responsivo.
• Feedback visual claro para ações, como cursores diferentes para arrastar o mapa ou um stand.

---

🛠️ Tecnologias Utilizadas

• Framework Principal: Angular
• Linguagens: TypeScript, SCSS, HTML5
• Bibliotecas Chave:
  • Angular CDK: Utilizado para a funcionalidade de Drag & Drop dos stands.
  • RxJS: Usado para o gerenciamento de estado reativo através de BehaviorSubject.
• Ferramentas:
  • Angular CLI
  • Git & GitHub
• Deploy:
  • Vercel

---

⚙️ Como Rodar o Projeto Localmente

Siga os passos abaixo para executar a aplicação na sua máquina.

Pré-requisitos

Antes de começar, você vai precisar ter as seguintes ferramentas instaladas:

• Node.js
• Angular CLI: npm install -g @angular/cli@16.2.16

Passos

1. Clone o repositório:

   git clone https://github.com/LansyLord/stands-map

2. Navegue para a pasta do projeto:

   cd stands-map

3. Instale as dependências:

   npm install

4. Execute a aplicação:

   ng serve

5. Acesse no navegador: Abra seu navegador e acesse http://localhost:4200/. A aplicação será recarregada automaticamente se você alterar qualquer um dos arquivos de origem.

---

📸 Screenshots

---

📸 Imagem exemplo utilizada

---