Quiz example

Monorepo de Frontend/Backend, abordando conceitos sobre:

• React - Lib para frontend

  • Typescript - Tipagens avançadas
  • Formik - Manipular formulário no react
  • Axios - Chamadas assíncronas ao backend
  • Emotion - Utilizar estilização dentro da UI
  • MaterialUI - UI para react
  • Vite - Build tool para react
  • React router dom - Roteamento de páginas

• Angular - Framework frontend

  • Material Angular - UI para react
  • SASS - Estilização de página e components
  • Formly - Manipular formulário no Angular

• Fastify - Web framework para nodejs

  • Swagger - Documentação de endpoints do backend
  • Knex - SQL Query builder | migrations | seeds
  • Docker - Rodando banco de dados em container
  • Mysql - Consultar e registro de dados

Requisitos

Para executar a aplicação é necessário instalar algumas ferramentas tais como um editor de códigos para realizar compilação dos mesmos. Nesse projeto foi utilizado o Visual Studio Code, NodeJS para compilação do código, Git para baixar o repositório e baixar todas as dependências necessárias, @angular/cli para instalar as dependências do angular. Docker Para executar o banco de dados.

Para configurar o Backend é necessário seguir as instruções previamente ao frontend

# Clone este repositório
$ git clone <https://github.com/Ricnaga/react-quizz>

# Acesse a pasta do projeto no terminal/cmd
$ cd react-quizz

# Instale as dependências
$ yarn (ou npm -i)

# Para iniciar a aplicação apenas no frontend com react 
$ yarn frontend:react (ou npm run frontend:react)

# Para iniciar a aplicação apenas no frontend com angular 
$ yarn frontend:angular (ou npm run frontend:angular)

# Para iniciar a aplicação apenas no backend 
$ yarn backend (ou npm run backend)

# Para iniciar a aplicação Frontend e Backend junta 
$ yarn dev:angular ou dev:react (ou npm run dev:angular ou dev:react)

# Assim que a aplicação terminar de executar, abra o navegador e digite http://localhost:5173 para o react ou http://localhost:4200 para angular