Submissão do teste Tecnico Desafio: Checkout para Compensação de Carbono

README.md

@@ -1,4 +1,35 @@
-# Desafio: Checkout para Compensação de Carbono
+<div align="center">
+  <h1 align="center">
+    Checkout Carbon
+    <br />
+    <br />
+      <img src="./public/logo.svg" width="86" height="118" alt="Checkout Carbon">
+  </h1>
+</div>
+<p align="center">
+  <img src="http://img.shields.io/static/v1?label=STATUS&message=DEPLOYED&color=GREEN&style=for-the-badge" alt="DEPLOYED" />
+<p/>
+
+# Tabela de Conteúdos
+
+* [Tabela de Conteúdos](#tabela-de-conteúdos)
+* [Introdução](#introdução)
+* [Desafio](#desafio)
+    * [Requisitos](#requisitos)
+* [Como rodar a aplicação](#como-rodar-a-aplicação)
+* [Acessar aplicação hospedada](#acessar-aplicação-hospedada)
+* [API Mock](#api-mock)
+* [Screenshots](#screenshots)
+* [Tecnologias Utilizadas](#tecnologias-utilizadas)
+* [Contato técnico](#contato-técnico)
+
+# Introdução
+
+Essa é uma aplicação que simula a compensação de carbono.<br>
+Foi desenvolvida para um seguindo as instruções do desafio abaixo.
+
+
+# Desafio
 
 Neste desafio, você deverá recriar um layout de checkout fictício para compensação de carbono, conforme o design fornecido no Figma. Além disso, será necessário consumir dois endpoints da API:
 
@@ -20,54 +51,60 @@ O valor do crédito de carbono, que será atribuído ao parâmetro `cred` (ou `c
 
 A requisição ao endpoint `Get Credit Price` é necessária para garantir que o valor do crédito esteja sempre atualizado e de acordo com as especificações do sistema.
 
-FIGMA:
-[LAYOUT](https://www.figma.com/design/3dbuGSs6oCSLkPw9viSsfT/Front-end-Teste?node-id=0-1&t=KvUCyOT5Miiuh0D5-1)
-
-## Consumo da API Mock
-
-Use a API mock do Postman diponibilizada em /docs.
-
-### Importação da Coleção do Postman
-
-Siga as etapas abaixo para importar a coleção e testar os endpoints do checkout.
-
-1. Abra o Postman.
-2. Clique no botão **Importar** no canto superior esquerdo.
-![Onde clicar no postman para importar](./docs/image.png)
-3. Selecione o arquivo `Carbon_Checkout.postman_collection.json` localizado na pasta `doc/`.
-
-![Como deve ficar apos a importação.](./docs/image-2.png)
-4. Execute os testes com os parâmetros fornecidos para verificar o funcionamento correto da aplicação.
-
+# Como rodar a aplicação
+
+Após clonar o repositório, rode os seguintes comandos em seu terminal para acessar a aplicação em produção:
+
+```
+$ npm install
+$ npm run build
+$ npm run start
+
+```
+**Obs:** Lembre de criar o arquivo .env para o endpoint da api
+
+# Acessar aplicação hospedada
+
+Para acessar a aplicação hospedada na Vercel, click [aqui](https://frontend-test-tree-three.vercel.app/)
+
+# API Mock
+
+A MockAPI utilizada para a aplicação é a que foi disponibilizada pelo teste. Seu url pode ser encontrado na coleção do Postman
+# Screenshots
+<div>
+<p>Full Screen</p>
+<p width="100%">
+<img src="./public/prints/full-home-screen.png" alt="full-home-screen" width="40%" hspace="32"/>
+<img src="./public/prints/full-checkout-screen.png" alt="full-checkout-screen" width="40%" hspace="32"/>
+
+</p>
+<p width="100%">
+<img src="./public/prints/full-success-screen.png" alt="full-success-screen" width="40%" hspace="32"/>
+<img src="./public/prints/full-error-screen.png" alt="full-error-screen" width="40%" hspace="32"/>
+</p>
+<p>Mobile</p>
+<p width="100%">
+<img src="./public/prints/mobile-home-screen.png" alt="mobile-home-screen" width="40%" hspace="32"/>
+<img src="./public/prints/mobile-checkout-screen.png" alt="mobile-checkout-screen" width="40%" hspace="32"/>
+
+</p>
+<p width="100%">
+<img src="./public/prints/mobile-success-screen.png" alt="mobile-success-screen" width="40%" hspace="32"/>
+<img src="./public/prints/mobile-error-screen.png" alt="mobile-error-screen" width="40%" hspace="32"/>
+</p>
+</div>
+
+
+# Tecnologias Utilizadas
+ - [Next.js](https://nextjs.org/)
+ - [Tailwindcss](https://tailwindcss.com/)
+ - [React-hook-form](https://react-hook-form.com/)
+ - [Zod](https://zod.dev/)
+ - [@hookform/resolvers](https://www.npmjs.com/package/@hookform/resolvers/v/1.3.7)
+ - [imask](https://imask.js.org/)
+ - [Shadcn/ui](https://ui.shadcn.com/)
+ - [Axios](https://axios-http.com/ptbr/docs/intro)
 -----------------------------------------------------
-
-## FRAMEWORK
-
-- [NEXT.JS](https://nextjs.org/docs)
-
------------------------------------------------------
-
-## ESTILOS
-
-- Os estilos deste teste devem ser feitos em styled-components (ou tailwind).
-- O projeto ser o mais proximo possivel do layout fornecido.
-- Deve ser totalmente responsivo.
-
-## REQUISITOS DIFERENCIAIS:
-
-- Back-end (para desenvolvedores full-stack)
-- Código performático.
-- Manutenibilidade do Código.
-- Utilizar inglês no projeto todo.
-- Fazer deploy do mesmo (heroku, netlify, aws, vercel, github pages ou outro da preferência).
-
-## GIT
-- Faça um fork deste repositório.
-- Criar uma branch para codar as suas features.
-- Criar um pull-request quando o teste for finalizado e submetido.
-
-## Contato técnico.
-- Junior Schmidt
-- GSS | Desenvolvedor Back-end & Tech Lead.
-- schmidt@repenso.eco
-- www.gss.eco
+## Contato técnico
+- Daniel Colares Schmidt
+- danielmcolares@gmail.com

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

env.exemple

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;