Site para conhecer mais a obra Star Wars com desafios e documentação.
desafio 01 de pessoa: Luke Skywalker
Para ver detalhes mais do projeto como a troca de UI quando o desafio é completado, o feedback quando o desafio está completado na página de categoria de pessoa e na pagina de documentação e mais...
- Pessoa 🧔
- Espécie 🐵
- Planeta 🪐
- Filme 📽️
- Nave estelar 🛸
- Veículo 🚙
O que pratiquei para fazer esse projeto 🥇
- metadata
- generateMetadata
- página estática
- página dinâmica
- client Components
- server Components
- Definir rotas
- Rotas Dinâmicas
- middleware
"O middleware é executado antes que o conteúdo e as rotas armazenados em cache sejam correspondidos" Utilizei o middleware, para redirecionar o usuário para segmento de rota desafios, porque não tem a página home.
- Páginas e layouts
- layout Raiz
- sub-layout (layout aninhado)
- Carregamento UI & Streaming
- Suspense
- Loading
- Redirecionando 🔗
- Rotas Dinâmicas
- layout
- loading
- page
- not-found
- metada arquivos
- favicon
- Fontes
com tailwindcss
- Component Image
utilizei svg também, mas não é otimizado.
- Link
- metadata
- data fetching components server
- fetch
- generateMetadata
- Ganchos ⚓
- usePathname
- useSearchParams
- useRouter (replace)
Tem mais recursos de nextjs que pratiquei como pattern, utilizar client-side em components que realmente necessita para não transformar todos os components em client-side, passar o component que não necessita de recursos do client como children para component client, assim o children é renderizado no servidor.
exemplo: Component Link com uma estilização extra para informar qual rota está, para construir esse component precisa descobrir qual rota o usuario está, tem o gacho usePathname que me retorna a rota que o usuário está atualmente, mas tem o problema que esse gancho funciona somente em component client, então, o que farei ? transformar o component em client-side que vai utilizar esse link ou construir um component Link client com a lógica e utilizar no component que necessita do link ? resposta: criar o component Link com a diretiva "use client" e utilizar em component server 🏁
- classes customizadas
- tailwind Merge
- tailwind Class Variance Authority
- tailwind Clsx
- tailwind @utilities
- tailwind @layer
- tailwind @aplly
- function cn (a junção de clsx com merge)
resolver conflito de classes e classes condicionais.
repositório de componentes fantástico, Shadcn-iu
Esta NÃO é uma biblioteca de componentes. É uma coleção de componentes reutilizáveis que você pode copiar e colar em seus aplicativos. lista de components que copiei ⬇️
- Tema 🌞/ 🌚
- next themes
- Base-color: zinc
- Button
- Carousel
- Pagination
- Card
- Form
- zod
- react/hook/form
- react/hook/resolvers
- Dropdown-Menu
- Toast
- Input
- Label
- Skeleton
- Separator
- Badge
- Mode-toggle (botão de alternar tema)
Uma lista destacada de conceitos que pratiquei ⬇️
- context
- custom hooks
- Reaproveitamento
- Composição
Uma lista destacada de conceitos que pratiquei ⬇️
- indexação de tipo
- generics
- restrição de generics
repositório de padrão de commits
- padrão de commits
function: logicLocalStorageDataChallenger localstorage como banco de dados para armazenar os desafios completados. exemplo: {categoriaFilme, categoriaPessoa}
eu precisei criar funções para formatar os dados retornados, porque tem propriedades com valor "unknow", "none", "n/a" ou array vazio []
A forma que encontrei para resolver esse problema em rotas dinâmicas foi enviando o index como id e o parametro de pesquisa page para fazer o mesmo fetch na página dinãmica e utiliza o id como index no array de dado que é retornado.
lógica: PaginationLogic
gerenciamento é feito pela url, as vantagens que tenho é o compartilhamento, renderização no servidor...
Eu utilizei o component Pagination do shadcn-ui para construir a páginação, porém precisava fazer a lógica de paginação e essa lógica precisa ser reutilizada em outras página de categoria, consegui fazer a lógica e a reutilização, porém outro problema apareceu que é a versão mobile, precisei fazer a lógica de paginação ellipsis e consegui fazer.
eu pensei em duas formas, a primeira é utilizar context, a segunda é utilizando o gerenciamento pela url. então, o que fiz ??? A página dinâmica de pessoa utiliza o context api para trocar a UI quando o desafio está completado, as outras páginas dinãmicas de categorias o gerenciamento da troca da UI é feita pela URL. Por que vc fez das duas que pensou ??? para descobrir qual é a melhor maneira, e a melhor é pela url porque não preciso utilizar client-side na UI de desafio completado.
lógica: promiseAllFormatedDataDescriptionSubList Os dados retornados para melhorar a descrição são urls que preciso fazer requisições, então criei uma função com promisse all que solicita os dados dessas urls e quando estiverem me retorna, porém essa função precisa ser reutilizada para outras categorias, criei generics, params para a função tornar reutilizada.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.