/fatorial-frontend

Repositório do frontend da aplicação fatorial, desenvolvida como parte do processo seletivo do Laboratório Bridge.

Primary LanguageTypeScript

Fatorial Logo
Faça seus cálculos de fatorial de maneira simples e rápida.

Indice

🔖 Sobre

Esta aplicação foi criada com base no desafio proposto no processo seletivo do Laboratório Bridge. A ideia era criar uma interface web que pudesse ser usada para desenvolver cálculos fatoriais usando um backend.

O frontend desta aplicação foi desenvolvido utilizando React.js com TypeScript e SASS. Já o backend possuí duas versões: uma feita em Node.js com Express e outra feita em Java utilizando o framework Spring. Isto foi feito devido a minha maior proximidade com o universo JavaScript, neste caso, com o Node.js quando comparado com o Java.

🚀 Tecnologias

Para o frontend desta aplicação utilizou-se das seguintes tecnologias:

  • ReactJS
  • TypeScript
  • React Router Dom
  • React Icons
  • SASS

✔️ Resultados

O site foi construído com base na minha prototipagem no Figma, que pode ser conferida clicando aqui.

Do desenvolvimento desse, chegou-se ao seguinte resultado:

Clique na foto abaixo para ver o vídeo de demonstração do site: Assista ao video

Você pode testar a aplicação agora mesmo através deste link, uma versão do site hospedada na Vercel.

🔥 Como executar?

Para executar este projeto em sua máquina local existem alguns requisitos básicos. Você deve ter o Node.js instalado na sua versão mais recente e um gerenciador de pacotes Yarn ou NPM, além disso, se for utilizar o Java como backend precisa ter todas as dependências instaladas (Java 11).

Baixando o frontend

Clone este repositório

git clone https://github.com/higorpo/fatorial-frontend frontend

Instale as dependências do projeto

cd frontend
yarn

Baixando o backend

Volte uma pasta utilizando cd .. e escolha um dos dois backends abaixo, siga as instruções

Node.js

Clone o repositório

git clone https://github.com/higorpo/fatorial-backend-node backend

Instale as dependências do projeto

cd backend
yarn

Depois de executado o comando acima, execute cd ..


Java

Clone o repositório

git clone https://github.com/higorpo/fatorial-backend-java backend

Executando o backend

Siga o tutorial do backend que você baixou acima (Node.js ou Java)

Node.js
cd backend
yarn dev

Depois de executado o comando acima, execute cd ..


Java
cd backend
./gradlew bootRun

Depois de executado o comando acima, execute cd ..

Configurando o frontend

Antes de executarmos o frontend precisamos configurar a URL do nosso servidor, seja ele Node ou Java.

Para isso entre na seguinte pasta:

cd ./frontend/src/config

Edite o arquivo api.ts colocando a URL do seu backend (normalmente http://localhost:8000). Se você não fizer isto você estará rodando com o um backend Node.js previamente hospedado no Heroku.

Para finalizar, volte para pasta inicial com

cd ../../../

Executando o frontend

Após ter completado o passo acima, inicie o servidor web

cd frontend
yarn start

Um servidor web deve começar a rodar na porta 3000, acesse-o usando http://localhost:3000