codi-teste-tecnico

Teste Técnico

☠️ Projeto

Teste técnico feito para a empresa Container Digital Jr.. Está é uma Landing Page de uma empresa fictícia chamada Monopolius SA. que está lançando um novo produto de computação extremamente rápido.

Veja o projeto completo aqui.

Durante o desenvolvimento do projeto, foquei em construir uma página estilizada de forma que se assemelha-se a um jornal, usando o dialeto pirata, tentando fazer jus ao universo apresentado durante o processo seletivo.

Requisitos do Teste

Para a responsividade, assim para como todo o projeto, eu usei o TailwindCSS, um framework CSS com classes utilitárias. O framework apresenta uma forma de construir a responsividade de maneira simples, e eu usei dos seus breakpoints para fazer ajustes pontuais para os diversos tamanhos de tela.

Quanto ao formulário, construí ele com uma biblioteca de formulários do React chamada React Hook Form, além de usar o zod para construir máscaras e fazer uma boa integração no meu formulário.

A tecnologia usada no projeto foi o React, visto que foi uma solicitação do teste como preferência de framework JavaScript para a análise.

Ao decorrer da página adicionei vários elementos dinâmicos e interativos, como um accordion com dúvidas sobre o produto, um banner com uma foto do produto com o efeito parallax, um modal apresentando a equipe do projeto, um toast de confirmação quando uma sugestão é enviada pelo formulário, dentre outros.

O projeto foi bem divertido de fazer, tentei fazer minha criatividade fluir e construir um verdadeiro jornal pirata anunciando a venda de um produto incrível. Usei do Chat-GPT para gerar alguns textos e me dar algumas ideias para nomes.

🎨 Visual do Projeto

Desktop e Telas Maiores

Mobile e Telas Menores

📁 Diretórios

└── src/
    ─ @types: Tipos para amplo uso em Hooks.
    ─ assets: Diretório com arquivos de imagens para serem usadas no projeto.
    ─ components: Diretório de componentes. Podem ser criados dentro de outros diretórios.
        ─ /hooks: Hooks customizados para renderização de listas nos componentes.
    ─ index.css: Configuração global do TailwindCSS e criação de classes utilitárias.
    ─ App.tsx: Arquivo que engloba toda a aplicação.
    ─ main.tsx: Arquivo de montagem da aplicação.
└── tailwind.config.ts: Arquivo de configuração do TailwindCSS.
└── vite.config.ts: Arquivo de configuração do Vite.

🔧 Tecnologias

🔨 Construção do site

🎨 Estilização

📂 IDE, Versionamento e Deploy

🚀 Configurações e Instalação

Veja documentação de configuração do Vite.

Clonando o Template

git clone https://github.com/davsilvam/codi-teste-tecnico

Executando o Projeto

npm install

Compilar e abrir o programa para desenvolvimento

npm run dev

Compilar e reduzir para produção

npm run build

View Source Code

Post Views: 69