https://github.com/epiled/aluroni-3-otimizado
🥖 Neste projeto, foram otimizadas diversas páginas para o restaurante Aluroni, utilizando de hooks como useMemo e imagens em Webp. 🥖
https://github.com/epiled/aluroni-3-otimizado
Last synced: 2 months ago
JSON representation
🥖 Neste projeto, foram otimizadas diversas páginas para o restaurante Aluroni, utilizando de hooks como useMemo e imagens em Webp. 🥖
- Host: GitHub
- URL: https://github.com/epiled/aluroni-3-otimizado
- Owner: Epiled
- License: mit
- Created: 2024-01-06T20:07:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-18T09:10:45.000Z (over 1 year ago)
- Last Synced: 2025-01-20T12:27:44.504Z (4 months ago)
- Language: TypeScript
- Homepage: https://aluroni-3-otimizado.vercel.app
- Size: 3.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🥖🍕🍷 Aluroni 3 Rotas
Projeto do curso React: otimizando a performance, curso ministrado pelo instrutor Luiz Fernando Ribeiro.
| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Aluroni 3 Rotas**
| :label: Tecnologias | html, css, js, sass, css modules, node, typescript, react
📃 Detalhes do projeto
Neste projeto, foram otimizadas diversas páginas para o restaurante Aluroni, utilizando de hooks como useMemo e imagens em Webp.
Um componente de Suspense foi adicionado para melhorar a UX do site.
O código foi desenvolvido em React com TypeScript e estilizado usando CSS Modules e Sass.
📑 Tabela de Conteúdos
* [Detalhes do projeto](#detalhes-do-projeto)
* [Tópicos Desenvolvidos](#topicos-curso)
* [Demonstração](#demonstracao)
- [Início](#inicio)
- [Cardapio](#cardapio)
- [Sobre](#sobre)
- [Prato](#prato)
- [Not Found 404](#notFound404)
* [Pré-Requisito](#pre-requisito)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Tecnologias](#tecnologias)
* [Autor](#autor)
👩🏫 Tópicos desenvolvidos
* Saiba como analisar componentes e páginas que podem ser mais performáticas
* Conheça a fundo como o React renderiza seus componentes, também termos como Virtual DOM e Reconciliation.
* Aprenda como memoização e imutabilidade se complementam e porque eles são tão importantes no universo React
* Entenda diferenças entre memo e useMemo e quando utilizar cada um deles
* Utilize a extensão React Devtools de forma prática para analisar tempos de renderização de componentes e o motivo dos componentes estarem atualizando
👀 Demonstração
Início
https://github.com/Epiled/aluroni-2-router/assets/55258483/65004157-72ab-4979-9542-c64583196d21
https://github.com/Epiled/aluroni-2-router/assets/55258483/9beeb7ab-0f8d-4b8a-b5a1-8b3e03c94286
Cardapio
https://github.com/Epiled/aluroni-2-router/assets/55258483/a55b9681-7434-47e8-9db8-b5c2b6745e15
https://github.com/Epiled/aluroni-2-router/assets/55258483/c50e4d65-c10c-4187-a3bb-c15859ff1c96
Sobre
https://github.com/Epiled/aluroni-2-router/assets/55258483/6f1861fa-62e5-4c31-80db-842357ac5fa9
https://github.com/Epiled/aluroni-2-router/assets/55258483/f2fa2ad6-b50a-4165-9b8b-27e29993d50b
Prato
https://github.com/Epiled/aluroni-2-router/assets/55258483/00c2ebad-8702-49d6-8a90-633009b6bb9a
https://github.com/Epiled/aluroni-2-router/assets/55258483/4d314941-8df8-4953-ab97-025c8fa48fb5
Not Found 404
https://github.com/Epiled/aluroni-2-router/assets/55258483/dcab9311-a639-42a6-b135-7ce38aa8ea75
https://github.com/Epiled/aluroni-2-router/assets/55258483/a74bbc06-a447-4f2e-8177-1df4c0e20138
🚨 Pré-requisito
- Node
⚙ Instalação
```
1. git clone https://github.com/Epiled/aluroni-3-otimizado.git
2. cd aluroni-3-otimizado
3. npm install
```
👩🏫 Como usar
```
1. npm start
2. Caso a url não abra sozinha acesse através deste caminho http://localhost:3000/
```
🛠 Tecnologias
As seguintes tecnologias foram usadas na construção deste projeto:
👨💻 Autor
Felipe De Andrade
Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!
[](https://www.linkedin.com/in/fademendonca/)
[](mailto:[email protected])
[](https://www.instagram.com/felipe.deam/)
[](https://codepen.io/epiled)