Blog desenvolvido em NextJS que disponibiliza o acesso e leitura de artigos acadêmicos.
IMPORTANTE !
- Nessa primeira versão não foi implementado o conceito de roles para restringir acessos e definir permissões, porém posteriormente será implementado.
- Os itens abaixo sem a marcação de checado são recursos que estão mapeados para serem implementados posteriormente.
-
Usuário poderá se autenticar quando estiver com o status ativo
-
Usuário autenticado como administrador poderá gerenciar:
Todas as funcionalidades abaixo estão implementadas na API e serão integradas futuramente na interface.
- Usuários
- Criar
- Com restrição de
emaileusernameúnicos
- Com restrição de
- Consultar todos
- Com paginação e limite de itens
- Ordenar por padrão em ordem decrescente de criação
- Adicionar filtro para ordenação
- Consultar por id
- Consultar por email
- Editar
- Com restrição de
emaileusernameúnicos
- Com restrição de
- Deletar
- Do tipo
soft deletepara se manter histórico - Não é possível deletar ( desativar ) um usuário já desativado
- Do tipo
- Criar
- Docentes
- Criar
- Com restrição de
nomeúnico
- Com restrição de
- Consultar todos
- Com paginação e limite de itens
- Ordenar por padrão em ordem decrescente de criação
- Adicionar filtro para ordenação
- Consultar por id
- Consultar por nome
- Editar
- Com restrição de
nomeúnico
- Com restrição de
- Deletar
- É feita automaticamente a desativação do seu usuário correspondente
- Criar
- Usuários
-
Usuário autenticado como docente poderá gerenciar:
- Categorias
- Criar
- Com restrição de
nomeúnico
- Com restrição de
- Consultar todas
- Com paginação e limite de itens
- Ordenar por padrão em ordem decrescente de criação
- Ordenar por nome, ativo e criado em
- Visualizar detalhes
- Filtrar por nome
- Adicionar ou remover a exibição de colunas da tabela
- Editar
- Com restrição de
nomeúnico
- Com restrição de
- Deletar
- Com restrição de somente se não estiver associada em artigo(s)
- Criar
- Artigos
- Criar
- Com restrição de
títuloeslugúnicos
- Com restrição de
- Consultar todos
- Com paginação e limite de itens
- Ordenar por padrão em ordem decrescente de data da última publicação
- Ordernar por categoria, docente, título, data da última publicação, publicado e criado em
- Visualizar detalhes do artigo concatenando com dados do docente e categoria
- Filtrar por título
- Adicionar ou remover a exibição de colunas da tabela
- Editar
- Com restrição de
títuloeslugúnicos
- Com restrição de
- Deletar
- Criar
- Categorias
-
Usuário visitante não estritamente autenticado poderá acessar:
- Página inicial
- Consultar artigos
- Com paginação e limite de itens
- Filtrar artigos por categoria ativa
- Filtrar artigos por título ou conteúdo na barra de pesquisa
- Consultar artigos
- Página de detalhes do artigo
- Visualizar detalhes do artigo
- Visualizar e acessar artigos ativos recomendados de mesma categoria
- Compartilhar artigo nas principais redes sociais
- Publicar um comentário no artigo
- Favoritar artigo para leitura quando houver sido implementado o conceito de roles e autenticação de visitante
- Alternar entre tema claro e escuro
- Alterar idioma
- Alterar tamanho da fonte
- Página inicial
O projeto foi desenvolvido seguindo diversas boas práticas e princípios arquiteturais para que se mantenha robusto e escalável para novas implementações. Futuramente poderá ser ainda mais aprimorado e aplicado DDD como foi feito na API.
- Clean code
- DRY ( Dont Repeat Yourself )
A estrutura de pastas é semântica e os arquivos estão devidamente categorizados de acordo com suas finalidades.
Embora esteja sendo utilizado o husky com o lintstaged para já validar o arquivo tanto em sua estrutura de código, quanto na validação dos testes após cada push. Há ainda um workflow configurado com o github actions responsável por efetuar os fluxos abaixo, assim como executar os devidos scripts definidos em package.json com o sufixo ci.
- Integração contínua
- Validação de testes unitários a cada
pushe em qualquerbranch - Validação de testes de integração e de e2e em cada
pull request( Em breve )
- Validação de testes unitários a cada
- Entrega contínua ( Em breve )
- Após ser efetuado um
pushnabranch maine já ter sido executado todo o fluxo de integração contínua, será feito obuildprévio da aplicação e disponibilizada a imagem nodockerhub.
- Após ser efetuado um
DICA !
Para mais detalhes das configurações feitas, pode-se acessar os arquivos na pasta workflows.
Instalar as dependências do projeto.
pnpm installpnpm run testSerá gerado um relatório no terminal, assim como um arquivo index.html dentro da pasta ./coverage/index.html que poderá ser aberto para uma visão mais ampla.
pnpm run test:coverageA execução dos linters podem ser aplicados automaticamente dependendo da configuração do seu editor de código, ao salvar um arquivo, por exemplo, no VSCODE.
Mas se caso desejar executar via comando poderá executar os seguintes:
pnpm run lint:fixpnpm run prettier:format- Instalar as dependências do projeto.
- A API e o banco de dados devem estar em execução.
pnpm installConfigure previamente as variáveis de ambiente criando um arquivo .env na raiz do projeto. É possível obter o nome das variáveis a serem definidas, no arquivo .env.example contida na pasta raiz do projeto.
# Futuramente quando o projeto estiver hospedado em uma plataforma, poderá ser informado o domínio abaixo
NEXT_PUBLIC_WEBSITE_URL=
# Atualmente no package.json está definido fixadamente a porta 4000 devido a incompatibilidades. Futuramente essa variável será utilizada
NEXT_PUBLIC_PORT=
# Informe um termo para o secret do token da API
NEXT_PUBLIC_JWT_SECRET=
# Informe a url da API
NEXT_PUBLIC_DINAMIQUES_API=http://localhost:3000/api/v1A API e o banco de dados estando em execução, basta executar:
pnpm devAtualizar a variável de ambiente no arquivo .env.
NEXT_PUBLIC_DINAMIQUES_API=http://host.docker.internal:3000/api/v1docker-compose up web-devAtualizar a variável de ambiente no arquivo .env.
NEXT_PUBLIC_DINAMIQUES_API=http://host.docker.internal:3000/api/v1docker-compose up web-prodSe houver algum problema com alguma criação anterior do container do docker, basta executar o comando abaixo, antes de executar o docker-compose up web-prod --build ou docker-compose up web-dev --build.
docker-compose downComo a rota de criação de usuário é protegida com autenticação, foi criado um usuário padrão para que seja possível se autenticar e acessar demais recursos. Segue abaixo os dados do usuário para autenticação inicial.
{
"email": "[email protected]",
"password": "admin"
}- Docker
- CI/CD: GitHubActions
- Next.js
- React
- ReactHookForm
- ReactMarkdown
- ReactColorful
- Typescript
- JWT
- ESLint
- Prettier
- CommitLint
- LintStaged
- Husky
- Vitest
- TestingLibrary
- Tailwind
- ClassVarianceAuthority
- CLSX
- RadixUI
- Tanstack
- UIWReactMdEditor
- DateFns
- Zod
- Heroicons
- JSdom
- PostCSS
- Google: Lighthouse
- Google: RichResultsTest
DICA !
Todas as demais dependências utilizadas podem ser visualizados acessando o package.json.
Felipe DR 📩 |