Montik E-Comerce é o desafio Front-End para a empresa Montik. O Desafio consiste em desenvolver uma página e-commerce de um produto fictício, com o objetivo de demonstrar as habilidades de desenvolvimento Front-End.

Clone o repositório e instalando as dependências:

git clone https://github.com/tavareshenrique/montik-e-commerce.git

cd montik-e-commerce

pnpm install

Se você não tem o pnpm instalado, instale-o globalmente com o comando abaixo:

npm install -g pnpm

Copie o arquivo .env.example para .env.local e preencha as variáveis de ambiente.

cp .env.example .env.local

Fill in the environment variables:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

docker-compose up --build

A flag --build é necessária somente na primeira execução.

Rode a aplicação com o comando:

pnpm dev

Se tudo estiver correto, acesse a aplicação pelo navegador no seguinte endereço:

Application: http://localhost:3000

Abaixo estão listadas algumas das funcionalidades implementadas no projeto:

Como os vídeos foram gravados em GIF, isso afeta a qualidade da imagem. Para uma melhor visualização, acesse o projeto aqui.

O projeto funciona com Docker, o que facilita a execução em diferentes ambientes.

O projeto utiliza o pnpm como gerenciador de pacotes, o que garante uma instalação mais rápida e eficiente das dependências.

É usado Vitest e Testing Library para os testes unitários.

pnpm test

Foi Implementado o CI com GitHub Actions para garantir a qualidade do código utilizando Vitest.

Foi implementado o CD utilizando Vercel para fazer o deploy da aplicação após qualquer commit na branch main.

Link da Aplicação: https://montik-e-commerce.vercel.app/

• Typescript
• React
• Next.js
• Tailwind CSS
• Tailwindcss Animate
• Class Variance Authority
• Clsx
• Lucide React
• UUID
• Radix UI Toast
• Tailwind Merge
• Vite
• Vite TSConfig Paths
• ESLint
• Prettier
• Jest DOM
• Testing Library React
• Typescript ESLint
• Faker
• JSdom
• PostCSS
• Globals
• Vitest

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Henrique Tavares @tavareshenrique 💻