Wavecom Frontend Assessment (React + TypeScript)

This repository contains my solution for a Wavecom frontend technical assessment.
Focus areas: React + TypeScript, UI behavior, API integration, and performance/debugging.

📸 Preview

🎬 Demo

Live application: frontend-assessment-wavecom.vercel.app

✅ Implemented

Performance bug

Identified the root cause of UI slowdown over time
Applied fix: (add 1–2 lines explaining what you changed)

Map View

Added pins for Wavecom Portugal, Spain, and Mozambique
Added quick navigation between locations (buttons/dropdown/search)

Products (CRUD)

Lists products from Beeceptor CRUD API
Add product form (with validation)
Prevent duplicate names
Search by product name
Delete products

Fixed browser back / “Go back” behavior where URL changed but UI didn’t

Challenge 2 – Permissions badge

Badge updates in real time based on userPermissions changes

Challenge 3 – Recurring API request

Fixed state update while keeping Promise-based flow

🧰 Tech Stack

React • TypeScript • Vite • Tailwind • (antd if you used it) • react-map-gl / maplibre

▶️ Run locally

npm install
npm run dev

Desafio Frontend

Introdução

Com o objetivo de te juntares à equipa da Wavecom Technologies, propomos-te uma série de pequenos desafios. Alguns deles surgiram-nos no desenvolvimento do dia-a-dia.
Em anexo, encontrarás um projeto React (c/ Typescript) preparado para a sua realização. Não sendo de realização obrigatória, valorizamos quem completa a totalidade das tarefas. Pode ser adicionado qualquer pacote que ajude no desenvolvimento das tarefas, bem como review, correção de código e bugs para além dos desafios.
Existe um bug de performance que com o tempo e ao navegar a página web começa a ficar lenta, aconselhamos a começar por aqui.

Setup

Correr 1) npm install e 2) npm run dev no terminal do projeto.
Na barra lateral, encontrarás links de navegação para cada uma das seguintes páginas:

Map View

O que tem a página?
Configuração inicial de um mapa (react-map-gl + map-libre).

Desafio:
A Wavecom tem vários edifícios espalhados pelo mundo.

Wavecom Portugal: 40.64199521504551, -8.63178967710328
Wavecom Espanha: 40.359607538579745, -3.6821318323286754
Wavecom Moçambique: -25.952198177765005, 32.592926415365056

Adiciona um marcador/pin a cada um deles no mapa.
Adiciona um método para navegar rapidamente entre os vários locais no mapa, por exemplo: três botões, barra de pesquisa, dropdown…

Products
Nota: Este desafio não deve ocupar muito tempo. Não estamos à espera de um produto final. Caso tenhas interesse nisso, deixamos ao teu critério aplicar considerações como precaver erros no formulário, o que acontece se a API não tiver informação disponível (?), responsividade do layout, etc., mas não será um fator determinante.

O que tem a página?
Nada. É uma página em branco com instruções para dares setup a uma API (https://beeceptor.com/crud-api/).
Body:

{
   "name":"Dell Latitude",
   "price":1000,
   "year":2019,
   "desc":"Laptop",
   "imgUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Dell_Logo.svg/1024px-Dell_Logo.svg.png"
}

Nota: Existe um limite diário de 50 pedidos que deve ser gerido da melhor forma, caso seja necessário mais, também é possível gerar uma nova api.

Api tutorial:
Master CRUD API - Build & Test

Desafios: O objetivo deste desafio é listar, adicionar, pesquisar e eliminar produtos.

Listar os produtos que a API devolve. Segue um mock visual dos cartões, desenvolvido com recurso à biblioteca “antd” (opcional).

Criar um formulário que permita adicionar produtos.
Não deve ser possível adicionar produtos com o nome repetido (apesar da API permitir).
Adicionar uma barra de pesquisa que permita pesquisar pelo nome dos produtos.
Adicionar a funcionalidade “Eliminar” aos cartões.

Challenge 1

O que tem a página?
Encontras uma página 1 que contém um link para uma página 2.
Na página 2, ao clicar na opção de “Go back” ou retrocedendo no browser verifica-se que, apesar do url atualizar para o desejado, a visualização mantém-se na página 2.

Desafio:
Consegues perceber e resolver o problema?

Challenge 2

O que tem a página?
Um badge do antd para mostrar visualmente se um utilizador tem permissão root.

Desafio:
Na App.tsx encontras um estado chamado userPermissions que simula a atualização de novas permissões de um utilizador de segundo a segundo. Consegues usar o badge na página do desafio para validar se o utilizador tem permissão root em tempo real?

Challenge 3

O que tem a página?
Uma simulação de um pedido recorrente à API.

Desafio:
O estado na página não está a atualizar. Queremos manter a Promise para que possa escalar. Consegues resolver o problema?

AdrianaAC/frontend-assessment-wavecom