https://github.com/victor-lis/react-lanchesplus
https://github.com/victor-lis/react-lanchesplus
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/victor-lis/react-lanchesplus
- Owner: Victor-Lis
- Created: 2023-05-29T14:18:23.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-15T19:34:06.000Z (12 months ago)
- Last Synced: 2024-10-17T05:39:35.665Z (12 months ago)
- Language: JavaScript
- Homepage: https://react-lanches-plus-by-dev-victor-lis.vercel.app
- Size: 2.68 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Laches+
Esse é o primeiro projeto na qual integrei mais de uma aplicação ao mesmo banco de dados, no caso foi um App e um Site, sendo esse o site. O projeto em si consiste em um WebApp para uma loja de comidas / fast-food.
## Desafios
Acredito que meus principais desafios nesse projeto foram:
- Utilizar pela primeira vez a lib "react-router-dom".
- Uma das primeiras vezes usando ternary operator.
- Uma das primeiras vezes fazendo um sistema de login na web (trabalhando com LocalStorage).
- Criação de um QR Code usando uma API e passando valores em JSON (QR Code pode ser lido no App de Admin).
## Aprendizados
Por final aprendi algumas coisas interessantes como:
#### Usar a lib "react-router-dom"
Na época não conhecia o useContext(), então setava os dados "manualmente" para cada componente e para cada filho de cada componente.
```javascript
}/>
}/>
}/>
}/>
}/>
}/>
} />
}/>
```
#### Utizar Ternary Operator
Uma das primeiras vezes utilizando Ternary Operator, prática muito mais comum para mim hoje em dia.
```javascript
{showPassword? : }
```
#### Usar useEffect() + localStorage para sistema de login
```javascript
useEffect(() => {
let userId = localStorage.getItem("@useruid")
setUserID(userId)
getDatas(userId)
}, [])
```
#### Gerar um QR Code usando uma API
```javascript
async function finish(){
const objetoString = JSON.stringify(produtos)
const objetoCodificado = btoa(objetoString)
const url = `https://chart.googleapis.com/chart?cht=qr&chs=500x500&chl=${objetoCodificado}`;
setImg(url)
setShowQRCode(true)
}
```
# Screenshots
## Outros
- [App para Administradores](https://github.com/Victor-Lis/Adm-App-for-LanchesPlus)
## Autores
- [@Victor-Lis](https://github.com/Victor-Lis)