💼 | Minha solução para o desafio técnico da vaga de Dev. FrontEnd Jr na DomPixel.
Observação: Até a data desta atualização (31 de outubro), a DomPixel ainda não forneceu feedback sobre o projeto nem sobre o processo seletivo. Entrei em contato por e-mail solicitando um retorno, mas não obtive sucesso.
- Desafio
- Curiosidade
- Estrutura do Projeto
- Implementações
- Instruções
- Resultado
- Tecnologias
- Referências
- Licença
- Contato
O Teste Tecnico da Dom Pixel propõe o desenvolvimento de um blog usando Next.js e Mantine. A aplicação deve permitir que os usuários visualizem e leiam as postagens do blog, bem como criem novas postagens. Como desenvolvedora frontend, sou responsável por criar o layout da página e preparar o frontend para receber os dados do backend.
- Página Inicial: O usuário pode ver os posts atuais, bem como as postagens mais recentes e populares, com informações sobre data, autor, título e uma descrição curta do conteúdo.
- Página de Detalhes: O usuário poderá ver a página do conteúdo com os aspectos mencionados acima (data, autor, etc.), além de visualizar o texto completo da postagem.
- Página de Criação de Postagens: O usuário pode visualizar as postagens antigas e criar novas, interagindo com o formulário.
Desenvolvi uma interface no Figma simulando como eu gostaria que o blog fosse. Isso me ajudou na estruturação do layout, embora eu não tenha sido 100% fiel ao design.
Figma - Protótipo do Desafio: DomPixel Blog
dompixel-backend/: Pasta que contém o backend da aplicação, uma API desenvolvida usando Node - Express com dados fictícios. (Não funciona)dompixel-blog/: Pasta que contém o frontend do projeto, desenvolvido utilizando Next e Mantine com Tailwind.
Mandatório/
- Configuração Inicial: O candidato deve configurar um projeto Next.js funcional. Isso inclui a configuração do ambiente de desenvolvimento e a instalação das dependências necessárias.
- Criar uma página inicial que liste postagens de blog. As postagens devem ser obtidas de uma API falsa (simulada) usando fetch ou axios. Cada postagem deve exibir seu título, data de publicação e uma imagem de capa.
- Página de Detalhes: Quando um usuário clicar em uma postagem na página inicial, ele deve ser redirecionado para uma página de detalhes que exiba o conteúdo completo da postagem, incluindo texto e imagens.
- Criação de Postagens: Implemente uma página onde os usuários possam criar novas postagens de blog. Eles devem poder inserir um título, conteúdo de texto e uma imagem de capa. Os dados da postagem devem ser enviados para a API falsa para armazenamento.
- Estilo: A aplicação deve ser estilizada de forma atraente e responsiva (usar Mantine [https://mantine.dev/] para componentização).
- Controle de Estado: Use o estado local do Next.js para gerenciar os dados da aplicação, como postagens e formulários.
- Responsividade: Aplicar responsividade para este projeto para diferentes tamanhos de tela.
Bônus/ 🎁🎁🎁
- Implementar um sistema de autenticação básico, permitindo que os usuários façam login antes de criar postagens.
- Adicionar funcionalidade de pesquisa para que os usuários possam procurar postagens por título ou conteúdo.
- Implementar animações ou transições para melhorar a experiência do usuário.
Bônus Pessoal/
- Testes automatizados no frontend usando Cypress.
- Testes automatizados no backend.
❗️ | Certifique-se de ter as seguintes ferramentas instaladas em sua máquina antes de prosseguir:
- Clone o repositório
# Clone o repositório em formato HTTPS e digite o seguinte comando no terminal
$ git clone https://github.com/mewmewdevart/DompixelBlog.git
# Clone o repositório em formato SSH e digite o seguinte comando no terminal
$ git clone [email protected]:mewmewdevart/DompixelBlog.git
# Entre dentro do repositório
$ cd DompixelBlogTO DO/ O backend não está funcionando e não está integrado ao projeto. Por conta disso, não irei prosseguir com o tutorial de instalação.
- Instalação de dependências:
# Em outro terminal, navegue até o diretório do frontend
$ cd dompixel-blog
# Instale as dependências do projeto
$ npm install- Execute o servidor de desenvolvimento:
# Inicie o servidor de desenvolvimento
$ npm start
# Acesse a visualização do Frontend através da URL http://localhost:3000/- Resultado das implementações no Frontend : Url :
http://localhost:3000/
Screencast.from.2024-10-06.12-48-10.webm
Blog/
Blog/Post/
Blog/Panel
Experiência enriquecedora; pude aprender bastante enquanto produzia o desafio. Tinha conhecimento superficial sobre Next e zero conhecimento sobre Mantine. Pode-se dizer que aprendi ambas as tecnologias do zero, fazendo pesquisas na documentação e em ferramentas externas neste desafio. No início, foram necessárias muitas tentativas para conseguir resolver os erros que surgiam na minha tela. A maioria deles estava ligada à estrutura do Next, mas, conforme fui produzindo, a quantidade de problemas que surgiam foi diminuindo.
Antes de começar a codificar, desenvolvi uma interface no Figma para ter um norte sobre quais componentes seriam necessários para a aplicação, e isso facilitou o desenvolvimento do layout. Foi divertido criar alguns componentes do zero e fazer modificações nos componentes do Mantine, mesclando o "Only CSS" com "Tailwind CSS" nas estilizações do projeto. A biblioteca Mantine é rica em componentes; isso ajudou a tornar minhas ideias em realidade sem gastar muito tempo no desenvolvimento e a aplicar um pouco do Atomic Design na separação modular dos componentes.
Tentei fazer um projeto integrado com o backend em Node Express, que seria hospedado no Vercel, porém o backend estava apresentando falhas. Como não queria ficar presa no desenvolvimento dele, dediquei as últimas horas ao layout. O fato de não conseguir fazer essa integração atrapalhou a obtenção das rotas. Gostaria que cada matéria do blog tivesse uma URL única gerada pela API, mas sem sucesso. Dependendo de como forem as próximas semanas, irei me esforçar para fazer o backend funcionar; assim, conseguirei usar os métodos GET, POST, CREATE e DELETE, ou até mesmo fazer a parte bônus relacionada à autenticação.
Gostaria de ter tido mais tempo para fazer uma aplicação completa; porém, estou satisfeita com o resultado atual. Foi um desafio divertido.
- VS Code: Ambiente de desenvolvimento integrado.
- Git Bash: Git Bash para realizar commits.
- Figma: Ferramenta de prototipagem para desenvolver elementos da interface.
- Node.js: Plataforma para instalação de pacotes necessários para o frontend (React, Express, Next, etc.).
- Next.js: Framework para React que permite a criação de aplicações web renderizadas no lado do servidor (SSR) e geração de sites estáticos (SSG).
- Mantine.js: iblioteca de componentes React que oferece uma ampla variedade de elementos pré-estilizados e personalizáveis.
- Markdown - Basic Syntax: Documentação sobre a sintaxe básica do Markdown.
- W3Schools: Documentação e tutoriais práticos.
- Figma Community: Inspiração na prototipação do projeto.
- Fóruns e blogs da internet, como Alura, Stack Overflow e Geeks for Geeks, para sanar dúvidas relacionadas à linguagem.
Este projeto é licenciado nos termos do arquivo LICENÇA. Consulte o arquivo para obter mais detalhes.
Desenvolvido com muito ☕ por Larissa Cristina Benedito