TL;DR https://reddit-image-viewer.vercel.app
I’ve been deep diving with React and Next.js lately. Uma grande parte dessa imersão, é a simplicidade do Next.js. Para mim, o Next.js tem a quantidade perfeita de abstracção…algures entre Create React App e Gatsby. Você não precisa saber Webpack ou roteamento, mas você também não está preso a uma forma opinativa de fazer coisas React ao lado do Node.
Next.js apenas se mistura ao fundo, então você pode se concentrar em construir componentes e enviar um site estático (ou SSR) em pouco tempo.
Ainda, há um monte de outros sites e aplicativos de imagem Reddit por aí, mas eu sempre quis criar o meu próprio. Aqui vai…
Sobre
O aplicativo Reddit Image Viewer usa Next.js como plataforma, o React Hooks useEffect()e useState(), depende do Fetch nativo para pegar os dados, e o React Cool Image para carregar a mídia de qualquer subreddit. Também liguei o Tailwind CSS para estilizar as cartas e o grid.
Desafios
Existiram alguns desafios, no entanto, como lidar com CORS, uma vez que os navegadores da web estão se tornando cada vez mais rígidos no conteúdo de cross-site. Felizmente, eu pude usar CORS Anywhere para contornar isso.
Partilhar o JSON para embeds também foi difícil. Reddit permite todos os tipos de mídia embutida, então ser capaz de verificar e exibir certos tipos de mídia foi definitivamente um pequeno desafio divertido, e acabei construindo uma declaração de troca.
Outro conseguiu? Reddit codifica mídias ricas, como vídeos, então eu tive que decodificá-la em <textarea> antes que eu pudesse renderizar a marcação.
Eu realmente gosto da funcionalidade de “busca ao vivo”, mas acertar uma API toda vez que alguém digita uma letra não funciona. Eu usei outro gancho de reação chamado useDebounce() para forçar a barra de busca a esperar 1 segundo antes de enviar um pedido de busca.
Mas a maior lição que aprendi neste projeto? Como fazer em linha if/else declarações em componentes React! Um tópico que vale a pena no seu próprio blog, e me deixa muito animado para o React Suspense.
Wrap Up
No final, o aplicativo funciona muito bem. Eu já abri alguns problemas no Github para algumas melhorias que eu gostaria de adicionar. Tudo e mais alguma coisa, foi uma experiência de aprendizado divertida!
Cheque o código no Github e veja o aplicativo ao vivo aqui: https://reddit-image-viewer.vercel.app