Matricule-se
Voltar para o blog
Full Stack

Este projeto pode ser seu primeiro freela Full Stack!

Pedro Surreaux

Neste post você vai aprender a criar um sistema de login com dashboard usando Node.js, Express, HTML, CS, e Chart.js com potencial de cobrar até R$2.000.

Este projeto é perfeito para freelancers que querem vender uma solução simples e funcional para pequenas empresas. Vamos detalhar a construção de um sistema com uma tela de login e um dashboard com gráficos, mostrar como rodar o sistema localmente, além de sugerir formas de incrementá-lo para atrair novos clientes.

O código fornecido será usado como base, com explicações claras para que você possa adaptá-lo e usá-lo como template para seus projetos.

Para receber por e-mail um arquivo com o código utilizado aqui, preencha:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Por que criar um sistema de login com dashboard?

Este tipo de projeto é ideal para pequenas empresas que precisam de um sistema simples para gerenciar acessos e visualizar dados, como relatórios de vendas ou acessos ao site.

Ele combina frontend (nesse caso, a interface de login e o dashboard) e backend (autenticação e rotas). Então, além de ser um ótimo ponto de partida para freelancers, também é um projeto que vai te mostrar como funciona um sistema full stack.

  • Benefícios:
    • Fácil de implementar e personalizar para diferentes clientes.
    • Alta demanda por sistemas de login e visualização de dados.
    • Pode ser escalado com mais funcionalidades, aumentando o valor do projeto.
Captura de tela da tela de login com campos de usuário e senha. Legenda: “Tela de login simples e funcional para autenticação de usuários.”

Estrutura do Projeto

O projeto é composto por um backend em Node.js com Express, para gerenciar autenticação e rotas, e um frontend com HTML, CSS, e Chart.js para exibir gráficos no dashboard.

A estrutura de pastas e arquivos, que você pode baixar ali em cima, inclui:

  • /public: Contém arquivos estáticos como style.css e dashboard.js.
  • /views: Contém as páginas login.html e dashboard.html.
  • /server.js: Configura o servidor backend com Express.
  • /.env: Armazena variáveis de ambiente (ex.: credenciais de login).
  • /package.json: Lista as dependências do projeto.

Passo a Passo para Criar o Sistema

1. Configurando o Ambiente

Dica: Antes de prosseguir, se você quer entender melhor como funciona o Node.js e os comandos com npm, veja uma explicação detalhada neste artigo.

Pra começar, crie uma pasta para o projeto e inicialize um projeto Node.js inserindo o seguinte comando no terminal:

npm init -y

Adicione o campo "type": "module" ao package.json para usar importações ES6:

JSON
{

"name": "freela-dashboard",

"version": "1.0.0",

"type": "module",

"scripts": {

"start": "node server.js"

},

"dependencies": {

"express": "^4.17.1",

"dotenv": "^16.0.3"

}

}

Instale as dependências:

npm install express dotenv

Crie um arquivo .env para armazenar as credenciais de login (não compartilhe este arquivo publicamente) Exemplo:

Codigo
USER=admin

PASS=1234

PORT=3000

2. Criando o Backend com Node.js e Express

O arquivo server.js configura o servidor, define rotas para login e dashboard, e autentica usuários com base nas credenciais do .env.text

JavaScript
import express from "express";

import path from "path";

import dotenv from "dotenv";

dotenv.config();

const app = express();

const PORT = process.env.PORT || 3000;

// Middleware

app.use(express.static("public"));

app.use(express.urlencoded({ extended: true }));

// Rotas

app.get("/", (req, res) => {

res.sendFile(path.resolve("views/login.html"));

});

app.post("/login", (req, res) => {

const { usuario, senha } = req.body;

// Simulação de login

if (usuario === process.env.USER && senha === process.env.PASS) {

res.sendFile(path.resolve("views/dashboard.html"));

} else {

res.send("<h2>Login inválido. <a href='/'>Tente novamente</a></h2>");

}

});

app.listen(PORT, () => {

console.log(`Servidor rodando em http://localhost:${PORT}`);

});
Ícone Full StackFull Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agoraSeta para a direita
Fundo Full StackTelas Full Stack
Luz Full Stack

Explicação do código:

  • Dotenv: Carrega variáveis de ambiente do arquivo .env.
  • Middleware:
    • express.static("public"): Serve arquivos estáticos (CSS, JS) da pasta public.
    • express.urlencoded: Permite processar dados de formulários HTML.
  • Rotas:
    • GET /: Exibe a tela de login (login.html).
    • POST /login: Verifica as credenciais do formulário; se válidas, exibe o dashboard; caso contrário, mostra uma mensagem de erro.
  • Servidor: Escuta na porta definida no .env (ou 3000 por padrão).

3. Criando a Tela de Login

A página login.html contém um formulário simples para autenticação.

HTML
<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8" />

<title>Login - Freela Dashboard</title>

<link rel="stylesheet" href="/css/style.css" />

</head>

<body>

<div class="login-container">

<h1>Login</h1>

<form action="/login" method="POST">

<input type="text" name="usuario" placeholder="Usuário" required />

<input type="password" name="senha" placeholder="Senha" required />

<button type="submit">Entrar</button>

</form>

</div>

</body>

</html>

Explicação do código:

  • Formulário: Envia um POST para /login com os campos usuario e senha.
  • Estilização: Vincula o arquivo style.css para um design limpo.
  • Funcionalidade: Os dados do formulário são enviados ao backend para autenticação.

4. Criando o Dashboard com Gráficos

A página dashboard.html exibe um gráfico de barras usando Chart.js, mostrando dados mockados de acessos ao site.

HTML
<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8" />

<title>Dashboard - Freela</title>

<link rel="stylesheet" href="/css/style.css" />

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

<div class="dashboard-container">

<h1>Dashboard de Acessos</h1>

<canvas id="graficoAcessos" width="400" height="200"></canvas>

</div>

<script src="/js/dashboard.js"></script>

</body>

</html>

O arquivo dashboard.js configura o gráfico com Chart.js:

JavaScript
const ctx = document.getElementById("graficoAcessos");

new Chart(ctx, {

type: "bar",

data: {

labels: ["Seg", "Ter", "Qua", "Qui", "Sex"],

datasets: [

{

label: "Visitas no site",

data: [12, 19, 3, 5, 10],

backgroundColor: "#4CAF50",

},

],

},

options: {

responsive: true,

scales: {

y: {

beginAtZero: true,

},

},

},

});

Explicação do código:

  • Chart.js: Usado via CDN para criar um gráfico de barras responsivo.
  • Dados: Mostra acessos semanais mockados (ex.: 12 visitas na segunda-feira).
  • Configuração: Define o tipo de gráfico (bar), rótulos (labels), e opções como responsividade.
freela full stack

5. Estilização com CSS

A pasta para download também inclui um .css bem simples para estilizar a página.

Como aumentar o valor do projeto

Este projeto pode ser vendido como um freelancer por R$ 500 a R$ 2.000, dependendo da complexidade.

Aqui estão formas de aumentar o valor do projeto:

  • Mais gráficos: Adicione outros tipos de gráficos (ex.: linha, pizza) usando a documentação do Chart.js.
  • Integração com API: Substitua os dados mockados por uma API real, como um banco de dados de vendas ou Google Analytics.
  • Autenticação avançada: Implemente tokens JWT para segurança.
  • Design aprimorado: Use frameworks como Tailwind CSS para um visual mais moderno.
  • Deploy online: Hospede o projeto em plataformas como Heroku ou Vercel para fornecer um link ao cliente.

Níveis de Complexidade e Preço

ComplexidadeFuncionalidadesPreço Estimado
BásicoLogin simples, dashboard com 1 gráfico mockadoR$ 500 - R$ 800
IntermediárioMúltiplos gráficos, integração com API simplesR$ 800 - R$ 1.500
AvançadoAutenticação com token, banco de dados, designR$ 1.500 - R$ 2.000+

Conclusão

Você aprendeu aqui a criar uma página de login com dashboard, uma excelente ferramenta para freelancers iniciantes ou experientes conseguirem entrar no mercado.

Com Node.js, Express, e Chart.js, você pode construir um projeto funcional e vendável em poucas horas. Use o código fornecido como template, personalize ele com dados reais ou gráficos adicionais, e ofereça a pequenas empresas que precisam de soluções práticas.

Se quiser ver mais dicas e guias como este sobre, veja os outros conteúdos de Full Stack em nosso blog!

E caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?







Posts mais recentes de Full Stack

Posts mais recentes da Hashtag Treinamentos

Pedro Surreaux

Autor do artigo

Pedro Surreaux

Redator de Publicações

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.

Ver mais posts