REPOSITORY OVERVIEW

Live repository statistics

★ 0Stars

⑂ 0Forks

◯ 0Open issues

◉ 0Watchers

34/100

OPENREPOHUB HEALTH SIGNAL

Limited signals

A transparent discovery signal based on current public GitHub metadata.

Recent activity35% weight

Community adoption25% weight

Maintenance state20% weight

100

License clarity10% weight

Project information10% weight

This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.

README preview

📝 Task: descrição do projeto e funcionalidades

O Task é uma aplicação web desenvolvida para auxiliar usuários no controle, organização e planejamento de suas tarefas diárias. Nesse sentido, a plataforma oferece uma interface amigável e recursos para garantir produtividade e clareza nas atividades pessoais e profissionais. Estas poderão ser editadas, filtradas, alteradas, adicionadas e excluídas, tendo informações de id, título, descrição, deadline, progresso, classificação (rótulo da tarefa) e prioridade. A partir de tais aspectos, objetiva-se que os utilizadores do sistema possam deter um maior controle sobre suas tasks e, consequentemente, um melhor planejamento. Por fim, é válido mencionar que a documentação completa do projeto (com mais detalhes) está em documents/WAD.md.

Funcionalidades

De modo mais específico, as funcionalidades inerentes ao site Task estão descritas nos tópicos subsequentes:

Cadastro e login de usuários com autenticação segura (Verificação e criptografia de senhas);
Criação de tarefas personalizadas com:
- ID (identificador único);
- Título;
- Descrição;
- Deadline (data limite);
- Progresso (percentual ou status);
- Classificação (rótulo/categoria);
- Prioridade (baixa, média, alta).
Edição e atualização das tarefas;
Exclusão definitiva de tarefas;
Filtragem e ordenação por categoria, prioridade, data ou progresso;
Dashboard com visualização categorizada das atividades.

Tecnologias utilizadas

Backend

Node.js – ambiente de execução para JavaScript no servidor;
Express.js – framework web para Node, responsável pelas rotas e lógica;
PostgreSQL – banco de dados relacional usado para armazenar tarefas e usuários;
Supabase – interface para configurar e conectar bancos PostgreSQL em nuvem;
express-session – Gerencia sessões de usuários (ex: login);
cors – permite requisições entre diferentes origens (Cross-Origin);
dotenv – armazena dados sensíveis como credenciais de banco de dados;
method-override – permite usar métodos HTTP como PUT e DELETE em formulários;
bcrypt – criptografa senhas dos usuários com segurança;
date-fns – biblioteca para manipulação e formatação de datas.

Frontend

JavaScript – Lógica do lado do cliente, manipulação de DOM e requisições assíncronas, além de fetch API;
CSS – estilização responsiva e personalizada da interface;
EJS – templates para renderização dinâmica no frontend;
ScrollReveal – biblioteca de animações de entrada ao rolar a página;
SweetAlert2 – Pop-ups e alertas customizados para interações com o usuário (confirmações, avisos, etc);
Chart.js: biblioteca para adicionar gráficos.

Link do vídeo de demonstração

Para ver o vídeo de demonstração deste projeto, acesse este link: clique aqui

Prints da interface

No projeto foram desenvolvidas 6 views: Landing page, login, cadastro, home, minhas tarefas e criar tarefa. Ademais, o footer e o header da aplicação foram separados na pasta components, uma vez que estão padronizados para as views. É importante ressaltar que a descrição das views nesta seção também está presente no WAD.

A figura 1 mostra a view de landing page, que possui os botões de login, cadastro e inscreva-se grátis (que direciona para o cadastro também).

A figura 2 mostra a view de cadastro quando o usuário a acessa. A figura 3 mostra a verificação se o e-mail possui @ em sua estrutura (com base na estrutura padrão de e-mail, já que o input é do tipo e-mail). A figura 4 mostra o popup que aparece quando o usuário tenta cadastrar uma senha sem 8 caracteres, 1 letra maiúscula e um caractere especial. ,A figura 5 mostra o popup que aparece ao usuário quando ele tenta cadastrar um e-mail que já está cadastrado. Vale mencionar que quando o usuário faz o cadastro com sucesso, ele é direcionado à view de login para entrar no site. Logo abaixo das imagens, é mostrado como fetch API foi usado na tela de cadastro.

 //Usando Fetch API para mandar os dados de cadastro para o banco por meio da rota /cadastro.
    try {
        const response = await fetch("/cadastro", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ nome_usuario, email, senha }),
    });

    //Verificando a resposta JSON e adicionando o SweetAlert2 para retornar ao usuário se o cadastro foi bem-sucedido ou não.
    const data = await response.json();

        if (response.ok) {
          Swal.fire({
            icon: "success",
            title: "Sucesso!",
            text: data.mensagem,
            timer: 2000,
            showConfirmButton: false,
            scrollbarPadding: false
          }).then(() => {
            window.location.href = "/login";
          });
        } else {
          Swal.fire({
            icon: "error",
            title: "Erro",
            text: data.error || "Erro ao realizar cadastro",
            scrollbarPadding: false
          });
        }
      } catch (error) {
        Swal.fire({
          icon: "error",
          title: "Erro",
          text: "Erro na comunicação com o servidor",
          scrollbarPadding: false
        });
        console.error(error);
      }

A figura 6 mostra a view de login quando o usuário a acessa. Já a figura 7 mostra o popup que é apresentado ao usuário quando ele erra seu e-mail ou sua senha. Já a figura 8 mostra o popup que aparece ao usuário quando ele faz o login com sucesso. Logo abaixo das imagens, é mostrado como fetch API foi usado na tela de login.

// ***USO DE FETCH API NO LOGIN -> arquivo scripts/login.js***
try {
      //Feth API
      const response = await fetch('/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, senha })
        });

      const data = await response.json();

      if (response.ok) {
            // Login OK
            Swal.fire({
                icon: 'success',
                title: 'Sucesso!',
                text: data.mensagem,
                timer: 2000,
                showConfirmButton: false,
                scrollbarPadding: false
            }).then(() => {
                //Redirecionar para home depois do alerta fechar.
                window.location.href = '/home';
            });

        }else {
            //Erro no login (ex: senha incorreta).
            Swal.fire({
                icon: 'error',
                title: 'Erro',
                text: data.error || 'Erro ao realizar login'
            });
        }
}catch (error) {
            Swal.fire({
            icon: 'error',
            title: 'Erro',
            text: 'Erro na comunicação com o servidor'
        });
            console.error(error);
}

As figuras 9 e 10 mostram a tela de home, que é aberta após o login do usuário. Nela, são mostradas quantas tarefas o usuário têm no total, quantas estão concluídas e quantas estão pendentes, por meio de um m. Além disso, especificamente a figura 10 apresenta a seção de gráficos que é apresentada ao usuário.

    //Este código, que está em controllers/usuarioController.js, manda os dados para a view de home com uma identificação específica.
    res.render('Home/index', {
      nomeUsuario: usuario.nome_usuario,
      totalTarefas: total,
      tarefasConcluidas: concluidas,
      tarefasAFazer: aFazer
    });

//E essa identificação é aplicada em views/Home/index.ejs dessa maneira:
<h2 class="home__body__dashboard__cartao__numero"><%= tarefasConcluidas %></h2>
<h2 class="home__body__dashboard__cartao__numero"><%= totalTarefas %></h2> 
<h2 class="home__body__dashboard__cartao__numero"><%= totalTarefas %></h2>

A figura 11 mostra a sidebar que é aberta quando o usuário clica no menu hambúrguer no canto superior esquerdo da tela, com todas as opções de funcionalidades da aplicação web (ir para home, minhas tarefas, criar tarefa, logout e excluir conta). Essa sidebar é padrão para todas as páginas do site. Por fim, o uso de fetch API nessa parte está explicitado logo abaixo das figuras.

//***USANDO FETCH API NA SIDEBAR***
//1) Fetch API para logout --> ARQUIVO scripts/logout.js
document.getElementById('btn-logout').addEventListener('click', function(event) {
  event.preventDefault();

  Swal.fire({
    title: 'Tem certeza que deseja sair?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Sim, sair',
    cancelButtonText: 'Cancelar'
  }).then(async (result) => {
    if (result.isConfirmed) {
      try {
        //Fazendo o logout via GET.
        const response = await fetch('/logout', { method: 'GET' });
        
        if (response.ok) {
          //Mostrando a mensagem de sucesso do logout.
          Swal.fire({
            icon: 'success',
            title: 'Logout efetuado com sucesso!',
            showConfirmButton: false,
            timer: 1500,
          }).then(() => {
            //Redirecionando para a landing page após o l

ALGORITHMICALLY RELATED

Similar Open-Source Projects

Selected from shared topics, language and repository description—not editorial ratings.

daniel-oliv3 /

JavaScript-O-Guia-Definitivo-by-David-Flanagan

★ 43

Referência completa para programadores, JavaScript: O guia definitivo fornece uma ampla descrição da linguagem JavaScript básica e das APIs JavaScript do lado do cliente definidas pelos navegadores Web. Em sua 6ª edição, cuidadosamente reescrita para estar de acordo com as melhores práticas de desenvolvimento Web atuais, abrange ECMAScript 5 e HTML5 e traz novos capítulos que documentam jQuery e JavaScript do lado do servidor. Recomendado para programadores experientes que desejam aprender a linguagem de programação da Web e para programadores JavaScript que desejam ampliar seus conhecimentos e dominar a linguagem, este é o guia do programador e manual de referência de JavaScript completo e definitivo.

53/100 health

Active repository

HTMLNo license#book#david-flanagan#javascript#livro

⑂ 5 forks◯ 0 issuesUpdated Apr 6, 2026

View details View on GitHub ↗

apiplaybook /

open-banking-brasil

★ 41

Este repositório contém uma aplicação construída em JavaScript com a biblioteca React. Ela é capaz de realizar chamadas às APIs do Open Banking Brasil, gerar uma matriz de comparação e tabelas com os valores retornados.

27/100 health

Has homepageArchived

Task-gerenciador-de-tarefas-com-arquitetura-MVC