Skip to content

Aplicação de banco de piadas CRUD com Next.js no front e SQL/MongoDB no back.

Notifications You must be signed in to change notification settings

lucastoll/crud-nodejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 

Repository files navigation

crud-nodejs

image

🎤 O que é

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.

🔴 Tecnologias

Front-end

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

image

Back-end

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
Serve para separar um espaço na memória do computador para o banco de dados rodar, ele é um ambiente de desenvolvimento PHP e Perl que disponibiliza a instação e o uso do Apache e do MySQL de maneira facilitada, então é possivel fazer o uso desses 2 para manipular um banco de dados no seu computador.

  • 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 image

  • 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

🟡 index.js

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

image

⌨️ Como executar

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 

🎉 Agradecimentos

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.

About

Aplicação de banco de piadas CRUD com Next.js no front e SQL/MongoDB no back.

Topics

Resources

Stars

Watchers

Forks