Esta aplicação é um desafio de um processo seletivo que foi desenvolvido apenas para fins de estudo, o desafio consiste em desenvolver um banco de piadas online, onde os usuários podem ver todas as piadas cadastradas e interagir com elas através do like, deslike e denuncia, além disso o usuário também pode registrar piadas.
O maior desafio deste projeto para mim foi a implementação do back-end que está em contato em tempo real com a aplicação, ele foi desenvolvido com SQL e também no MongoDB (branch mongodb).
O mockup do projeto pode ser encontrado aqui.
Para desenvolver o front-end foi utilizado o next-js na versão 12, e algumas dependências foram utilizadas no desenvolvimento, sendo elas:
- Styled-components - css in js
- Uuid - hashs unicos para os componentes que utilizam .map
- Radixui - componentes prontos e completamentes acessíveis, utilizado no popover de ordenação
- Fontawesome - ícones de like / deslike
- Axios - utilizado para fazer as requisições
Nesta branch foi utilizado o SQL para construir o back-end dentro do servidor local, para isto, uma estrutura foi montada e os seguintes programas foram utilizados: XAMPP, Apache, HeidiSQL e Insomnia
- XAMPP
- Apache
Servidor Web responsável por distribuir os arquivos, sem ele não há requisição e resposta, ele é um software que conecta um servidor e o navegador, localmente ele toma o localhost e é la que nos criamos o banco de dados, na foto é possível ver que o banco MySQL foi criado na porta 3306
- Insomnia
Software utilizado para fazer requisições e testar o banco antes de implementar propriamente o front-end.
- HeidiSQL
IDE para manipulação do SQL, antes de desenvolver o código foram criadas as tabelas nele.
Além disso foram utilizadas as seguintes tecnologias para o desenvolvimento do código do back-end: Node.js, express, MySQL para node.js.
- Node.js
Ferramenta utilizada para instalação de pacotes (com o Node Package Manager) e para a execução do JavaScript no back-end, sem um browser.
- Express
Framework para o desenvolvimento de aplicações JavaScript com o Node.js, foi utilizado para fazer as requisições da aplicação
- MySQL para node.js
Framework para o desenvolvimento conjunto de node.js com mysql
Todo o back-end da aplicação está configurado no index.js, onde é criado o a conexão com o banco local e as rotas de requisições com o express
Clone o projeto e acesse a pasta crud-nodejs
Inicie o servidor mysql e o apache pelo xamp e através do HeidiSQL crie as tabelas com a seguinte query
CREATE TABLE `piadas` (
`id` TINYINT(3) NOT NULL AUTO_INCREMENT,
`titulo` VARCHAR(100) NOT NULL DEFAULT '' COLLATE 'utf8_general_ci',
`piada` VARCHAR(500) NOT NULL DEFAULT '' COLLATE 'utf8_general_ci',
`autor` VARCHAR(100) NOT NULL DEFAULT '' COLLATE 'utf8_general_ci',
`likes` SMALLINT(6) NULL DEFAULT '0',
`dislikes` SMALLINT(6) NULL DEFAULT '0',
`dataPublicacao` TIMESTAMP NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
PRIMARY KEY (`id`) USING BTREE
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
AUTO_INCREMENT=20
;
A partir da pasta inicial
$ cd front-end
## Instalar as dependências.
$ yarn
## Iniciar o projeto - (localhost:3000)
$ yarn dev
$ cd back-end
## Instalar as dependências.
$ yarn
## Iniciar o projeto - (localhost:3006)
$ yarn dev
Agradeço muito ao Vicente e ao Luiz Eduardo pela ajuda no desenvolvimento do projeto e no entendimento dos conceitos de SQL e Back-end em geral.