O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Overview

Projeto HTML
100% Javascript

Front-end feito "sem HTML"

Dependencies Language Top License

Conteúdos

➜ Sobre o projeto
➜ O que aprendi
➜ Como usar


🔎 Sobre o projeto

Voltar ao topo

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Para gerar as páginas em HTML usei o próprio JS para criá-las e inserir os componentes necessários. Além disso, esse projeto também é o frontend da minha API 100% NodeJS (sem dependências).


API

A API utilizada é feita totalmente em NodeJS, ou seja, todo esse projeto (frontend e backend) foi feito sem nenhuma dependência externa.

Para ver mais detalhes de como usar a API acesse o repositório: joaovictornsv/http-node-api


Arquitetura

Para gerar todos os componentes necessários criei uma arquitetura que se resume basicamente em:

  • Prototypes
  • Factories
  • Components
  • Pages

Prototypes

Os prototypes são adições nos métodos dos elementos HTML que fiz para facilitar a criação de componentes estilizados.


Um exemplo de como um prototype funciona:
// Mudando a cor de um botao
const button = document.getElementById('btn')


// ❌ SEM PROTOTYPE
button.style.color = 'blue'


// ✅ COM PROTOTYPE

// Criando uma função nova no prototype da tag 'button'
HTMLButtonElement.prototype.setCSS = function setCSS(new_css) {
  // add CSS in element
}

// Usando a função criada
button.setCSS({ color: 'blue'})

Factories

As factories são closures, ou seja, funções que "se lembram" do escopo de quando foram criadas. Funcionam semelhante a uma espécie de classe. Não escolhi trabalhar com classes para poder pôr em prática o que havia estudado sobre as closures. Caso deseje ler mais sobre closures clique aqui.


Um exemplo de como uma closure funciona:
// Cria um botão escrito 'Botão 1'
const button1 = makeButton({ value: 'Botão 1' });

// Cria outro botão escrito 'Botão 2'
const button2 = makeButton({ value: 'Botão 2' });



// Muda a cor do texto do Botão 1 para azul
button1.setCSS({ color: 'blue' })

// Muda a cor do texto do Botão 2 para Vermelho
button2.setCSS({ color: 'red' });


// Ambos os botões tem seus escopos próprios

Components

Os components são os elementos HTML já criados e estilizados prontos para uso (assim como ocorre com o styled-components).


Um exemplo de como um component funciona:
// Criação de um elemento 'h1'
const title = makeText({tag: 'h1', value: 'Título Princiapl'});

// Estilização do elemento
titleMain.setCSS({
  fontSize: '22px',
  color: 'black',
  fontFamily: 'Arial, sans-serif'
});

export default title;

Pages

As pages são os conjuntos de componentes organizados para formar uma página completa.


Um exemplo de como uma página funciona:
// Criação de um elemento 'h1'
import header from './components/header.js'
import title from './components/title.js'
import subtitle from './components/subtitle.js'

function HomePage() {
  // Adicionando components na div 'header'
  header.append(title);
  header.append(subtitle);
}

export default HomePage;

Funcionalidades ✔️

A aplicação realiza o CRUD da API (Create, Read, Update and Delete) e possui as seguintes funcionalidades:

Funções principais:

  • Listagem de usuários ou usuário único
  • Criação de novo usuário
  • Alteração de dados de um usuário
  • Remoção de um usuário

Outras funcionalidades:

  • Criação de arquivos HTML a partir do Javascript
  • Tratamento de erros retornados da api

📚 O que aprendi

Voltar ao topo

Além de aprender como funcionam as closures, também fixei mais alguns conceitos:

  • Uso dos Prototypes
  • Uso da função Object.entries
  • Requisições com AJAX
  • Tratamento de erros com AJAX
  • Correção de erros de CORS da API
  • Uso das classes URL e URLSearchParams
  • Organização de código no geral

ℹ️ Como usar

Voltar ao topo

Para testar essa aplicação na sua máquina você precisa atender aos requisitos:

  • Baixar o repositório da API
  • Instalar a extensão LiveServer no seu Visual Studio Code
# Clone this repository
$ git clone https://github.com/joaovictornsv/http-node-api-web

# Clone the server repository
$ git clone https://github.com/joaovictornsv/http-node-api


#### 🟡 BACK-END

# Go into the server repository
$ cd http-node-api

# Run the server
$ yarn start


#### 🔵 FRONT-END

# Back to this repository

# Generate HTML files
$ yarn start

# Run frontend server
➜ Use 'Live Server' to run (Visual Studio Code Extension)

Profile Made with 💙 by João Victor
You might also like...

Um projeto feito utilizando a biblioteca React para entrada e saída de custos e serviços realizados.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Mar 9, 2022

100 Days of Code is a self improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days.

100 Days of Code is a self-improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days. This repository includes a range of tasks, lessons, resources, and challenges on various programming languages to help improve programming skills.

Dec 14, 2022

esse bot envia sinais, do gamer double blaze, direto para chats do telegram. leave the star ⭐️

esse bot envia sinais, do gamer double blaze, direto para chats do telegram. leave the star ⭐️

Bot Blaze Double A blaze.com, site de aposta online, operada pela empresa Prolific Trade N.V. e bastante popular nas mídias sociais. Em um de seus jog

Dec 30, 2022

Projeto criado com intenção de se parecer com a Netflix

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 19, 2022

This is an unofficial front end for Hacker News, reminiscent of the Windows XP era Outlook email client on a Windows XP default desktop

This is an unofficial front end for Hacker News, reminiscent of the Windows XP era Outlook email client on a Windows XP default desktop

Hacker XP Hacker News styled as the Windows XP Outlook email client. Try out Hacker XP here! Description This is an unofficial front end for Hacker Ne

Jul 12, 2022

Docker: Criando containers sem dor de cabeça.

Docker: Criando containers sem dor de cabeça.

Docker: Criando containers sem dor de cabeça. A evolução do host de aplicações Antigamente... Várias aplicações, vários servidores. Capacidade pouco a

Jun 23, 2022

⚡️ CLI building blocks & framework for the TypeScript era.

molt A set of packages related to building CLIs. Alpha maturity. Each package has its own docs. 📛 Package Path Description Use Case 🌲 molt packages/

Jan 6, 2023

Uma opção simples baseada na biblioteca exceljs para criar planilhas.

 Uma opção simples baseada na biblioteca exceljs para criar planilhas.

NODE-SHEET A simple option based on the exceljs library to create spreadsheets. Disclaimer The project is under development and is not fit to be used

Oct 11, 2022

Projeto de uma aplicação financeira pessoal para estudo de tecnologias.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jun 8, 2022
Owner
João Victor Negreiros
Estagiário de Desenvolvimento @ Dataside | Estudante de Engenharia da Computação @ IFPB - Campus Campina Grande
João Victor Negreiros
O projeto MKS Sistemas tem como objetivo o desenvolvimento de uma aplicação em React que utilize endpoint da API de produtos fornecida pela própria MKS Sistemas.

MKS front-end Descrição O projeto MKS Sistemas tem como objetivo o desenvolvimento de uma aplicação em React que utilize endpoint da API de produtos f

Rodrigo William 4 Jul 21, 2022
Venho construindo uma aplicação com objetivo de estudo, um CRUD de gestão financeira que permitirá o usuário tanto acompanhar seus valores quanto ter um histórico.

WoBank Venho construindo uma aplicação com objetivo de estudo, um CRUD de gestão financeira que permitirá o usuário tanto acompanhar seus valores quan

null 7 Sep 14, 2022
Repositório criado para prática do dia 14/05 utilizando nodeJs, express, nodemon e MVC. Como base utilizamos o modelo ER criado para uma locadora de filmes fictícia.

gamabuster Repositório criado para prática do dia 14/05 utilizando nodeJs, express, nodemon e MVC. Como base utilizamos o modelo ER criado para uma lo

Délio Costa 3 May 18, 2022
A ideia do projeto era desenvolver um jogo onde o usuário pode tentar "descobrir" ou melhor dizendo, lembrar a maior quantidade de HTML Tags em um determinado tempo.

HTML Tag Memory Test ?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: ViteJS ReactJS Typescript Tailwind Zustand Immer Axios

Igor Santos 4 May 17, 2022
O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenchidas pelo usuário usando um formulário.

Web-Chat Introdução O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenc

BiaGrenzel 5 Oct 5, 2022
API desenvolvida em NodeJs sem o uso de framewors e, utilizando o google planilhas para armazenamento de dados

NodeJS + Google SpreadSheet Catálogo online de produtos ??️ O Projeto Desenvolver uma API de busca de informações como preço médio, marca e categoria,

Arthur Couto 10 Jul 14, 2022
Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript, Styled-Components, Axios, React-Feather e Open Trivia Database.

TRIVIA-QUIZ Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript,

Daniela Farias 2 Feb 6, 2022
Essa API tem como objetivo auxiliar na produção de documentação de métodos e design packs, fornecendo de maneira visual a documentação de cores para api's

DocColors-API Essa API tem como objetivo auxiliar na produção de documentação de métodos e design packs, fornecendo de maneira visual a documentação d

Yhan Nunes 6 Feb 4, 2022
Projeto feito em conjunto de uma Pokedex com API própria

Tópicos Preview Sobre o Pekedex Tecnologias Instalação e uso Preview Clique aqui para ter acesso a um preview do App. Sobre o Pokedex O Pokedex é um d

Rafael França 3 Apr 25, 2022