Isis-gsantos / ScienceBlog-Node.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ScienceBlog with Node.js 🌱

scienceblog-2 0

O ScienceBlog é uma releitura do projeto original News-Project-React, agora implementado com Node.js e MySQL, utilizando as bibliotecas Express e Sequelize para a gestão do banco de dados e rotas

English Version ScienceBlog is a reinterpretation of the original News-Project-React, now implemented using Node.js and MySQL, with the Express and Sequelize libraries managing database and routing.

Funcionalidades 🍃

  • Cadastro e Gerenciamento de Categorias e Artigos: O site permite a criação de categorias e artigos, ambos possuem um relacionamento: um artigo pertence a uma e as categorias podem pertencer a diversos artigos. Ambos possuem uma rota que exibe uma tabela com informações como título e id, dentro dessas tabelas é possível editar e deletar uma categoria ou artigo, permitindo a gestão completa do conteúdo publicado. Na rota de criação de artigos, é necessário preencher os campos: título, imagem (opcional), texto (feito com tinyMCE) e selecionar uma categoria. Adicionei um campo de imagem que permite com que o usuário faça o uploads de imagens (apenas png e jpeg). As imagens são salvas através do middleware Multer, o qual salva as imagens dentro da aplicação.
  • Visualização e Filtro de Artigos: Na página principal, todos os artigos são listados e com o opção de acessar a página única de cada arquivo. Na navbar da página principal é possível filtrar os artigos por categoria, ao clicar vai exibir apenas os artigos pertencentes aquela categoria selecionada. Além disso a interface também inclui paginação para melhor organização.
  • Sistema de Login: Os usuários podem se registrar e acessar áreas restritas para postagem de artigos, os quais só poderão ser acessados após o login. As sessões são gerenciadas pelo express-session com um limite de 20 minutos.
  • Responsividade: O design do site é agradável e responsivo, garantindo uma boa visualização em diferentes dispositivos.

English Version

Features 🍃

  • Category and Article Registration and Management: The site allows the creation of categories and articles, both of which are interrelated: an article belongs to one category, and categories can belong to multiple articles. Both have a route that displays a table with information such as title and ID. Within these tables, it is possible to edit and delete a category or an article, allowing for complete management of the published content.
  • Article Creation Route: When creating articles, it is necessary to fill out fields for the title, image (optional), text (created with tinyMCE), and select a category. I added an image field that allows users to upload images (only png and jpeg). Images are saved through the Multer middleware, which stores the images within the application.
  • Article Viewing and Filtering: On the main page, all articles are listed with the option to access the unique page of each article. In the navbar of the main page, it is possible to filter articles by category, displaying only the articles that belong to the selected category. Additionally, the interface includes pagination for better organization.
  • Login System: Users can register and access restricted areas for posting articles, which can only be accessed after logging in. Sessions are managed by express-session with a 20-minute limit.
  • Responsiveness: The site's design is pleasant and responsive, ensuring good visibility on different devices.

scienceblog-2 0-artigos scienceblog-2 0-artigos-edit scienceblog-2 0-categorias

Category Filter

scienceblog-2-filter

Pagination

scienceblog-2-pagination

Login

scienceblog-2-articles scienceblog-2-articles-login

Logout

scienceblog-2-logout

Tecnologias Utilizadas | Technologies 🍄

  • Node.js
  • Express
  • MySQL
  • Sequelize
  • Multer
  • Express-session

Mobile 📱

scienceblog-2-navbar1

Tablet 📟

scienceblog-2-tablet

About


Languages

Language:JavaScript 89.8%Language:EJS 6.7%Language:CSS 3.4%