Desafio técnico buildbox
Monte uma página utilizando React.js que contenha uma lista de posts com a possíbilidade de adicionar e remover. Cada post deve conter nome, mensagem e foto. Não é necessário fazer o Back-End, os dados podem estar apenas em tempo de execução no Front-End.
Projetos que encontramos Typescript, Styled Compoments, Responsividade, terão pontos adicionais!
Tente colocar ao máximo todos os recursos técnicos que você conhece, padrão de arquitetura, boas práticas de código, bibliotecas, etc.
Você deve fazer um Fork deste repositório e solicitar um Pull Request com seu nome, email e celular na descrição para nossa avaliação e contato.
Abaixo segue o link do XD com protótipo navegável para conhecer a dinâmica da interface e os dados para Logar no Zeplin para ter acesso ao Design com suas medidas.
Contém: ✅ Responsividade ✅ Validação de campos ✅ Uso do banco de dados ✅ Uso de server actions para envio de dados
Demorei um pouquinho devido a briga com o file input, acreditei firmemente que seria possível usar o watch para gerenciar o preview do arquivo e o setar o valor no envio, porém sem o input estar controlado isso não funciona muito bem pelo fato de ser o input de arquivos, funciona bem diferente
Acredito que há diversas OUTRAS formas de solucionar o desafio com e sem backend:
- redux
- contextapi
- uplift state com ou sem composition pattern (fragmentar pra evitar prop drilling)
- utilizar rotas ao invés de actions
- backend dedicado que use o filesistem (fs) pra salvar os arquivos
- usar uma api para enviar a imagem para uma cdn e retornar o link da imagem (ao invés de armazenar ela no server ou no banco de dados)
Após clonar, baixar ou fazer um fork, utilize o comando abaixo para instalar as dependências do projeto:
npm installAdicione e preencha sua varável de ambiente em seu arquivo .env com a informação da conexão para o seu banco de dados.
Depois disso adicione os dados em seu banco de dados com o comando:
prisma migrate dev --name initDepois só criar ou remover quantas postagens desejar!
💌 Para me mandar uma mensagem basta usar um dos botões abaixo!
