Desenvolvido como um desafio técnico, este blog serve como uma ferramenta de aprendizado e demonstração de habilidades em desenvolvimento web. O desafio em questão é construir uma aplicação qualquer. Escolhi um blog de um layout que encontrei na comunidade Figma:
Segue o link para desenvolvedores que quiserem:
https://www.figma.com/community/file/1216616090937021365/free-blog-template-modern-creative-design
Laravel, Filament foram escolhidos por sua facilidade de aplicação, velocidade de desenvolvimento e familiaridade.
#2. Arquitetura do Sistema
Para interação com o banco de dados.
Desenvolvidas com React, proporcionando uma interface de usuário interativa.
Gerenciando a lógica de negócios e a interação entre Models e Views.
Escolhido pela facilidade de desenvolvimento e modelagem em um curto período de tempo, além de possibilidade de visualização em um esquema EER Diagram.
- Criação de Usuários: Permite a administração de usuários do sistema.
- Criação de Postagens: Interface para publicar e gerenciar postagens.
- Criação de Categorias: Facilita a organização das postagens em diferentes categorias.
Sem personalizações específicas foram implementadas.
Utilizado para criar a interface do usuário do blog.
Que inclui também um modo dark:
Empregado para estilizar os componentes de front-end, proporcionando maior flexibilidade e organização do código CSS.
Abordagem de Design: O projeto foi desenvolvido especificamente para desktop, sem uma estratégia de design responsivo, será feito no futuro a responsividade.
Utilização das medidas de segurança integradas do Laravel, incluindo proteção contra CSRF.
Abordagem de Desenvolvimento: Estratégias específicas de otimização de performance, como caching ou minificação de arquivos, não foram implementadas ainda.
Processo de Deploy: O projeto não foi implantado em um ambiente de produção; está armazenado apenas no GitHub.
Página inicial atraente, será o primeiro contato do leitor:
Página Blog, onde todas as postagens são listadas:
Página Sobre, que conta um pouco sobre cada escritor e mostra as últimas noticias deles.
Ao clicar no nome de um autor, em qualquer parte do site, será redirecionado para a página do autor, que contém somente os posts dele e suas informações básicas:
Ao clicar em uma noticia, será aberta a página da noticia:
No header, é possível fazer uma busca por nome de noticia, o que levará o usuário a uma página com o resultado das buscas:
No footer existem as categorias de noticias, onde o usuário pode filtrar as noticias.
Como requisito, é necessário ter em sua máquina:
- php8.2 ou superior instalado
- Node.js
- Composer
- MySQL
Ao fazer o clone do repositório, com os requisitos instalados, abra o projeto no terminal, no root digite os seguintes comandos:
- composer install (instalará as dependências do PHP)
- npm install (instalará as dependências do Node)
Será necessário criar um novo banco de dados no MySQL com o nome que preferir Deverá renomear o .env.examples para .env e ajustar os dados:
- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=blog
- DB_USERNAME=root
- DB_PASSWORD=
Para os dados do seu banco de dados
Após feito isso, precisará rodar os comandos no mesmo terminal de antes (ou um novo na mesma pasta).
- php artisan key:generate (irá gerar uma chave no .env)
- php artisan migrate (irá gerar as tabelas necessárias no banco de dados)
- php artisan make:filament user. (Criará um novo usuário no painel administrativo)
- Irá pedir o nome de usuário (pode ser fictício)
- Irá pedir um email (pode ser fictício)
- Irá pedir uma senha.
- php artisan serve (irá servir a aplicação no link http://localhost:8000)
Abra outro terminal na mesma pasta e digite npm run build para gerar um html estático