https://github.com/matheusandrade23/landing-pages-generator

Este é um gerador de landing pages que monta páginas à escolha do usuário. Desenvolvido com ReactJS e NodeJS.
https://github.com/matheusandrade23/landing-pages-generator

cors express express-session handlebars jest-tests mongoose nodejs nodemon proptypes react react-hooks react-router-dom storybook styled-components

Last synced: 2 months ago
JSON representation

Este é um gerador de landing pages que monta páginas à escolha do usuário. Desenvolvido com ReactJS e NodeJS.

• Host: GitHub
• URL: https://github.com/matheusandrade23/landing-pages-generator
• Owner: MatheusAndrade23
• License: mit
• Created: 2022-02-02T00:04:15.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-17T13:05:48.000Z (about 3 years ago)
• Last Synced: 2025-02-09T14:38:16.976Z (4 months ago)
• Topics: cors, express, express-session, handlebars, jest-tests, mongoose, nodejs, nodemon, proptypes, react, react-hooks, react-router-dom, storybook, styled-components
• Language: JavaScript
• Homepage:
• Size: 38.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Landing Pages Generator




 



É um gerador de landing pages que monta uma página à escolha do usuário.


#### O projeto é constituído por duas partes: O gerador (o repositório em que você está) e a página (clique para ver o código). O gerador (NodeJS) envia um arquivo JSON que contem todas as informações da tela a ser montada para o Front-End (ReactJS), que, por sua vez, as interpreta e faz a renderização.




---




Menu de Navegação


- Introdução

- Como Funciona?

- Demonstração

  - Um pequeno tour pelo Projeto

  - Trocando Páginas

  - Mensagens

- Tecnologias Utilizadas

- Storybook

- Testes com Jest

- Alguns Detalhes do Funcionamento do Projeto

  - FrontEnd

  - BackEnd

  - Resposta JSON

- Rodapé




---

Como Funciona? ❓


O usuário escolhe a página que será gerada no gerador, que fica salva no banco de dados. Depois, abre o FrontEnd e faz o login com seu usuário e, como uma truque de mágica, a página escolhida é renderizada. Veja melhor no próximo tópico!





---

Demonstração 🎥


_
Um pequeno tour pelo Projeto! 🚀
_




_
Trocando Páginas! 🚀
_




_
Mensagens! 🚀
_







---

Tecnologias Utilizadas ⚙️


#### FrontEnd: `ReactJS!`

- React-Dom

- React-Router-Dom

- Styled Components

- Jest Styled Components

- Proptypes

- Storybook

- React Hooks

#### BackEnd: `NodeJS!`

- Express

- Express-Handlebars

- Express-Session

- Mongoose

- Nodemon

- DotEnv

- Cors

#### Banco de Dados: `MongoDB-Atlas!`

 





  

  

  

  

  

  

  

  

  

  

  

 


 


---

Storybook 📚


#### O Storybook é uma biblioteca React que ajuda muito no processo de desenvolvimento de uma página. Ele te permite visualizar e manipular totalmente um componente qualquer de seu interesse apenas com a execução de um comando: `npm run storybook`. Veja uma demonstração de como foi utilizado nesse projeto!









---

Testes com Jest 🧪


#### Jest é um poderoso Framework que te permite testar totalmente seus projetos JavaScript. Para isso, escreva testes automatizados e execute-os com o comando: `npm test`. Assim, é mostrado no terminal o relatório dos testes, e quando algum deles falha, é exibido exatamente o que deu errado e o porquê. Foi mais uma das coisas que eu aprendi com o desenvolvimento do LP Generator!






#### Você também pode gerar um relatório de como está a cobertura do seus testes com o comando: `npm test -- --watchAll="false" --coverage`. Acredite, é muito satisfário ver uma cobertura de 100%!









---

Alguns Detalhes do Funcionamento do Projeto 🔎


_
FrontEnd 

_


#### O FrontEnd foi desenvolvido com Storybook, Jest e Styled Components. Pela primeira vez fiz arquivos separados para temas, configurações e funções.

#### Os avisos que está página pode apresentar são muito interessantes. Eles são divididos por códigos, em que cada um deles pode represetar uma mensagem de sucesso ou de erro. Segue uma tabela que mostra todos os códigos possíveis.

  

    Código:

    Mensagem:

  

  

    

      WHP1

      Without User or Password

    

    

      ISE1

      Internal Server Error

    

    

      WPU1

      Wrong Password

    

    

      UNF1

      User not Found

    

    

      LRS1

      Success

    

  

##

_
BackEnd 

_


#### O BackEnd foi desenvolvido utilizando a arquitetura MVC (Models, Views e Controllers) com o Handlebars para template engine e Mongoose para bancos de dados. Esta arquitetura ajuda deixar o código mais limpo e organizado.









##

_
Resposta JSON 

_


#### O JSON que configura uma página é estruturado em seções. Algumas estão por padrão em todas as páginas, como as que configuram o menu e o rodapé, já outras variam de acordo com a página a ser montada. Assim, para renderizar a página, as funções da pasta "Api" (FrontEnd) desestruturam o JSON e passam as informações necessárias para os componentes certos.

#### Os tipos de seções são: `section-two-columns`, `section-grid-text`, `section-grid-image`, `section-content`.

#### Cada uma das seções devem conter as informações necessárias para sua construção, como títulos, descrições, imagens e etc.









---