Teste Front-end - Le Tip - Victor Machado

.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+.env
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.prettierrc.json

@@ -0,0 +1,7 @@
+
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

README.md

@@ -1,116 +1,131 @@
-# Convenia
-
-## Avaliação Técnica - Frontend
-
-> O desafio é muito simples: um SPA responsivo (desktop e mobile) para divisão de gorjeta
-> Esperamos avaliar sua melhor implementação para o contexto que estamos propondo.
-
-Que tenha um excelente desenvolvimento :wink:
-
-### Desafio
-
-> Voce deverá desenvolver um SPA ou Aplicação responsiva usando o framework Vue.js e qualquer pacote de componentes que desejar.
-> Calculadoras de gorjeta existem aos montes nas principais lojas de aplicativos. Você insere o total da conta, o quanto quer dar de gorjeta e quantas pessoas vão dividir a conta.
-> O total da conta pode ser em USD(Dólar) ou EUR(Euro).
-> Deve ser exibido a conversão para BRL(R$), obtida via chamada (REST)
-
-Dica: você pode usar qualquer API gratuita para obter a conversão de moedas, como o [SWOP](https://swop.cx/).
-
-### User Story
-
-```gherkin
-#language:pt
-Funcionalidade: Calculo de Gorjeta
-Como Usuário do App
-Gostaria de Visualizar 
-De maneira que estas informações alimentem meu sistema pessoal
-
-    Regra: Valores padrão
-        Dado que não queremos exibição de erros
-        Então o valor padrão para o campo "Valor" é "0"
-        E o valor padrão para o campo "Gorjeta" é "10"
-        E o campo "Gorjeta" pode variar de "10" a "20" %
-        E o valor padrão para o campo "Pessoas" é "2"
-        E o campo "Pessoas" pode variar de "2" a "16"
-
-    Regra: Exibição
-        Dado que estejamos entrando no app Le/Tip
-        E o cliente seja mobile
-        Então devemos exibir o painel de Entrada
-
-    Esquema do Cenário: Cálculo padrão
-        Dado que estejamos no app Le/Tip
-        Quando selecionamos EUR no seletor de moeda
-        E inserirmos <conta> no campo "Valor" 
-        E selecionamos <gorjeta> no campo "Gorjeta"
-        E selecionamos <pessoas> no campo "Pessoas"
-        Então visualizamos <conta> em Conta no painel de resultado
-        E visualizamos <gorjetacalculada> em Gorjeta no painel de resultado
-        E visualizamos <total> em Total no painel de resultado
-        E visualizamos <porPessoa> em Por Pessoa no painel de resultado
-
-        Exemplo:
-        |conta|gorjeta|pessoas|gorjetacalculada|total|porPessoa|
-        |73.23|13     |10     |9.52            |82.75|8.28     |
-        |60.00|10     |3      |6.00            |66.00|22.00    |
-        |13.00|15     |2      |1.95            |14.95|7.48     |
-        |2.58 |17     |3      |0,44            |3.02 |1.01     |
-
-    Cenário: Cálculo em reais
-        Dado que estejamos no app Le/Tip
-        E selecionamos EUR no seletor de moeda
-        E inserirmos "13.00" no campo "Valor" 
-        E selecionamos "15" no campo "Gorjeta"
-        E selecionamos "2" no campo "Pessoas"
-        Quando o cálculo é realizado de maneira fluente
-        E o sistema realiza uma chamada de API para obter a conversão para BRL
-        Então o obtém o resultado da conversão para BRL
-        E apresenta o valor obtido em "em R$"
-
-    Cenário: experiencia mobile
-        Dado que estejamos no app Le/Tip
-        E o cliente seja mobile
-        E estejamos no painel de entrada
-        Quando pressionarmos o botão ">"
-        Então o painel de resultado deve ser exibido
-
-    Cenário: experiencia mobile, novo cálculo
-        Dado que estejamos no app Le/Tip
-        E o cliente seja mobile
-        E estejamos no painel de resultado
-        Quando pressionarmos o botão "<"
-        Então o painel de entrada deve ser exibido
-
-    Esquema do Cenário: alteração de moeda
-        Dado que estejamos no app Le/Tip
-        Quando alteramos o campo "moeda" para <moeda>
-        Então todas as etiquetas de moeda devem ser alteradas para <sinal>
-        E a conversão para BRL deve considerar <moeda>
-
-        Exemplo:
-        |moeda|sinal|
-        |EUR  |€    |
-        |USD  |$    |
+# Tip Calculator 💰
+
+> [!IMPORTANT]
+>
+> Este projeto utiliza uma API externa para buscar as taxas de câmbio. **Para que a funcionalidade de integração com a API funcione corretamente, é necessário adicionar uma API Key no arquivo `src/services/currencyService.js`**.
+>
+> Para configurar a API Key: 
+> 1. Obtenha sua API Key na plataforma [SWOP](https://swop.cx/).
+> 2. Substitua o valor de `<SUA_API_KEY>` pelo valor da sua chave API. 
+
+
+### Visão Geral
+Uma aplicação web de calculadora de gorjetas construída com Vue.js, projetada para ser responsiva e oferecer uma experiência intuitiva para calcular gorjetas e dividir contas.
+
+### Versão Desktop
+![image](https://github.com/user-attachments/assets/5b36e1ed-1f93-46e3-aa73-b42668948836)
+
+## Versão Mobile
+![image](https://github.com/user-attachments/assets/d5361109-3468-4cf9-865f-448e3d84fb7a)
+![image](https://github.com/user-attachments/assets/4f1a0bbb-6066-4f9c-8744-1aa75f310d5c)
+
+### 🚀 Tecnologias Utilizadas
+
+- Vue.js 3 (Composition API)
+- Vite
+- SASS/SCSS
+- Axios (para requisições de API)
+- API SWOP
+
+### 🔑 Principais Decisões de Design
+#### Arquitetura de Componentes
+
+- Componentização para facilitar manutenção
+- Uso de Composition API para lógica de estado
+- Separação clara de responsabilidades entre componentes
+
+#### Layout Mobile
+
+- Toggle entre painel de entrada e resultados em telas menores
+- Botão flutuante para navegação entre seções
+- Design responsivo
+
+#### Conversão de Moeda
+
+- Suporte para USD e EUR
+- Conversão em tempo real para BRL
+- Tratamento de erros na conversão de moedas
+
+### 🎨 Design no Figma
+O design da interface foi criado no Figma, é possivel observar o processo de design até a criação do layout final no link abaixo:
+
+👉 [Design Workflow do Projeto](https://www.figma.com/design/AssQRqrLObmgOIXx5YQIuk/Calculadora-de-Gorjeta-Workflow?node-id=0-1&t=F5VvKkGfJBUx7D7u-1)
+
+### 🔧 Funcionalidades
+
+- Cálculo de gorjeta baseado em percentual
+- Divisão de conta entre múltiplas pessoas
+- Seleção de moeda (USD/EUR)
+- Conversão para BRL
+- Layout responsivo
+- Botão flutuante para alternar entre o painel de entrada e os resultados em telas menores.
+
+## Configuração Recomendada de IDE
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (com Vetur desabilitado).
+
+### Instalação e Execução
+
+```sh
+npm install
+```
+
+### Compilar e Hot-Reload para Desenvolvimento
+
+```sh
+npm run dev
 ```
 
-### Referência visual
 
-#### Desktop
+### Linter com [ESLint](https://eslint.org/)
 
-![Mockup Desktop](/Desktop.png)
+```sh
+npm run lint
+```
 
-#### Mobile
+### 🧪 Testes
+Este projeto possui testes implementados utilizando Vitest e Vue Test Utils para garantir a confiabilidade dos componentes e dos serviços.
 
-![Mockup Desktop](/Mobile.png)
+#### Executando os Testes
+Para rodar os testes localmente, use o seguinte comando:
 
-### Considerações
+```bash
+npm run test
+```
+Isso executará todos os testes definidos na aplicação.
 
-* Como pode perceber, não há um botão "calcular", todos cálculos devem ser reativos
-* Apreciamos o uso de alguma metodológia CSS (BEM, RSCSS, ou qualquer outra) 
-* Avaliaremos como organizará a requisição para conversão de moeda
-* A partir do apresentado, você pode incrementar a aplicação como quiser
-* Você tem 1(uma) semana para realizar a avaliação
 
-### Aguardamos seu Merge Request
+### 🧩 Estrutura do Projeto
+```
+src/
+├── assets/
+│   └── base.scss
+├── components/
+│   ├── AppHeading.vue
+│   ├── CurrencyInput.vue
+│   ├── CurrencySelector.vue
+│   ├── FloatButton.vue
+│   ├── RangeInput.vue
+│   ├── ResultItem.vue
+│   ├── ResultsPanel.vue
+│   └── TipCalculator.vue
+├── composables/
+│   ├── useCurrencyConverter.js
+│   └── useExchangeRates.js
+├── services/
+│   └── currencyService.js
+├── tests__/
+│   ├── components/
+│   │   ├── TipCalculator.spec.vue
+│   │   ├── CurrencySelector.spec.vue
+│   │   ├── RangeInput.spec.vue
+│   │   ├── ResultsPanel.spec.vue
+│   │   └── CurrencyInput.spec.vue
+│   └── services/
+│        ├── currency.integration.spec.js
+│        └── currencyService.spec.js
+├── App.vue
+└── main.js    
+```
+
 
-Convenia :purple_heart:

eslint.config.js

@@ -0,0 +1,19 @@
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  skipFormatting,
+]

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}