You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+82-14Lines changed: 82 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,39 +6,68 @@
6
6
</span>
7
7
</h3>
8
8
9
-
<br/>
10
-
<br/>
11
-
<br/>
12
-
<ahref="https://github.com/higorpo/fatorial-frontend">Veja o repositório principal desta aplicação.</a>
13
-
14
9
# Indice
10
+
-[Sobre](#sobre)
11
+
-[Repositório do backend em Node.js](https://github.com/higorpo/fatorial-backend-node)
12
+
-[Repositório do backend em Java](https://github.com/higorpo/fatorial-backend-java)
15
13
-[Tecnologias usadas](#tecnologias)
16
14
-[Resultados](#resultados)
17
15
-[Como usar?](#comousar)
18
16
17
+
<aid="sobre"></a>
18
+
## :bookmark: Sobre
19
+
<p>
20
+
Esta aplicação foi criada com base no desafio proposto no processo seletivo do <ahref="http://bridge.ufsc.br/"target="_blank">Laboratório Bridge</a>. A ideia era criar uma interface web que pudesse ser usada para desenvolver cálculos fatoriais usando um backend.
21
+
</p>
22
+
<p>
23
+
O frontend desta aplicação foi desenvolvido utilizando React.js com TypeScript e SASS. Já o backend possuí duas versões: uma feita em <ahref="https://github.com/higorpo/fatorial-backend-node"><strong>Node.js</strong></a> com Express e outra feita em <ahref="https://github.com/higorpo/fatorial-backend-java"><strong>Java</strong></a> 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.
24
+
</p>
25
+
19
26
<aid="tecnologias"></a>
20
27
## :rocket: Tecnologias
21
28
<p>
22
29
Para o frontend desta aplicação utilizou-se das seguintes tecnologias:
23
30
</p>
24
31
32
+
- ReactJS
25
33
- TypeScript
26
-
- Express
27
-
- Express Validator
34
+
- React Router Dom
35
+
- React Icons
36
+
- SASS
28
37
29
38
<aid="resultados"></a>
30
39
## :heavy_check_mark: Resultados
31
40
<p>
32
-
Faça uma requisição ao backend em Node.js a partir do seguinte comando:
41
+
O site foi construído com base na minha prototipagem no Figma, que pode ser conferida <ahref=""target="_blank">clicando aqui</a>.
42
+
</p>
43
+
<p>Do desenvolvimento desse, chegou-se ao seguinte resultado:</p>
44
+
45
+
Clique na foto abaixo para ver o vídeo de demonstração do site:
46
+
[](https://drive.google.com/file/d/1xHrablhJW5Jk2HBlKEkrrTGFNX5wgXO0/view)
47
+
48
+
49
+
<p>Você pode testar a aplicação agora mesmo através <ahref="https://fatorial.vercel.app/"target="_blank">deste link</a>, uma versão do site hospedada na <b>Vercel</b>.</p>
<p>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.</p>
54
+
<p>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).</p>
Siga o tutorial do backend que você baixou acima (Node.js ou Java)
93
+
#####Node.js
55
94
```sh
95
+
cd backend
56
96
yarn dev
57
97
```
98
+
Depois de executado o comando acima, execute ```cd ..```
99
+
100
+
---
101
+
#####Java
102
+
```sh
103
+
cd backend
104
+
./gradlew bootRun
105
+
```
106
+
Depois de executado o comando acima, execute ```cd ..```
107
+
108
+
### Configurando o frontend
109
+
Antes de executarmos o frontend precisamos configurar a URL do nosso servidor, seja ele Node ou Java.
110
+
111
+
Para isso entre na seguinte pasta:
112
+
```sh
113
+
cd ./frontend/src/config
114
+
```
115
+
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.
58
116
59
-
Após executar o comando acima, um servidor deve começar a rodar na porta 8000.
117
+
Para finalizar, volte para pasta inicial com
118
+
```sh
119
+
cd ../../../
120
+
```
121
+
### Executando o frontend
122
+
Após ter completado o passo acima, inicie o servidor web
123
+
```sh
124
+
cd frontend
125
+
yarn start
126
+
```
127
+
Um servidor web deve começar a rodar na porta 3000, acesse-o usando ```http://localhost:3000```
0 commit comments