Front-end será desenvolvido em html, css, javascrip e ejs. Foi inspirados em cores mais sóbrios para trazer harmonia e a paz que os produtos visam oferecer. Focado em atender diversos dispositivos, do desktop ao mobile.

O Figma foi utilizado para prototipar o projeto.

Foi escolhido utilizar o ejs para renderizar as views.

Link protótipo: https://www.figma.com/file/Q0SAknsw6ue4HVEsKK9Yu1/Home?node-id=0%3A1

Foi criado padrão de projetos para facilitar o desenvolvimento em grupo. No pacote de desenvolvimento foi definido o arquivo main.css como core do css.

As paletas de cores iniciais são:

• --main-white: #fff;

• --main-yellow: #f1c40f

• --main-grey: #d4d4d4;

• --main-grey-700: #979797;

• --main-rosa: #e15f41;

• --main-blue: #303952;

• --main-green: #27ae60;

• --main-red: #d63031;

A Fonte escolhida foi a POPPINS, por ser uma fonte extremamente versatil e agrádavel.

• card
• container
• bg-"color"
• t-"color"
• d-flex
• all-center
• w-100
• h-100
• btn
• btn-"type"
• list
• link
• mt-20 : margin-top: 20px
• mt-40 : margin-top: 40px
• item-list

'/'

'/blog'

'/produtos'

'/produtos/produto/:id'

'/produtos/criar'

'/user/carrinho'

'/system/pagamento'

'/sucess'

'/user/conta'

'/user/login'

'/user/cadastro'

'/administrador/login'

'/administrador/criar'
A priore só pelo postman ou insominia

'/administrador'

Abaixo esta a modelagem inicial do banco de dados.

1. cliente
2. telefone
3. endereco
4. categoria
5. fabricante
6. image
7. adm
8. estoque
9. produto
10. promocao
11. kit
12. pedido
13. status
14. ordemPedido
15. cupom

Inserir credenciais no .env como exemplificado no .env.example
Para construir a imagem e rodar no docker em desenvolvimento usar:

• docker-compose -f docker-compose.dev.yml up -d

CSS Units:

A) Layout Fluido. Uso de: % - Porcentagem. Por exemplo: colocar as imagens em 100% para se adaptarem ao box em que estão auto - automática vh - viewport Height vw - viewport Width

B) Textos Fluidos. Uso de rem no font-size para que o texto se adapte à tela A cada 1 rem será considerado 10px em - multiplicado pelo pai rem = multiplicado pelo root

C) Uso de Media Queries. Os Media Queries foram cadastrados no mani.css para seguir a relavância de acordo com a mudança das telas, tanto para o menu sanduíche como para os textos

D) Criação do script menu.js. Essencial mantê-lo para que o menu sanduíche funcione. Foi adicionado em todos os arquivos .ejs