https://github.com/rodrigofontesdev/investidor10
Uma aplicação de notícias desenvolvida para o teste técnico da Investidor10. Construída em Next.js.
https://github.com/rodrigofontesdev/investidor10
nextjs react-query tailwindcss
Last synced: 2 months ago
JSON representation
Uma aplicação de notícias desenvolvida para o teste técnico da Investidor10. Construída em Next.js.
- Host: GitHub
- URL: https://github.com/rodrigofontesdev/investidor10
- Owner: rodrigofontesdev
- License: mit
- Created: 2024-10-22T19:45:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-01-28T00:37:12.000Z (5 months ago)
- Last Synced: 2026-01-28T15:36:29.792Z (5 months ago)
- Topics: nextjs, react-query, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 573 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 10News
Uma aplicação de notícias construída em **Next.js**, o projeto foi elaborado como solução para o teste técnico da **Investidor10**.
Neste repositório está localizado o front-end do projeto, como requisitos do desafio foram utilizados **Next.js** e **Tailwind CSS**.
## Pré-requisitos
- Git
- Node 20+
## Como iniciar
Antes de começar, siga o tutorial de instalação do back-end [10News API](https://github.com/rodrigofontesdev/investidor10-api).
Clone o repositório em um novo diretório:
```sh
git clone git@github.com:rodrigofontesdev/investidor10.git
```
```sh
cd investidor10
```
Instale as dependências do projeto:
```sh
npm install
```
Inicie o Next.js:
```sh
npm run dev
```
## Funcionalidades
- [x] Visualizar todas as notícias na página inicial
- [x] Fazer a paginação de resultados
- [x] Exibir as notícias por categoria
- [x] Acessar o conteúdo da notícia
- [x] Utilizar a aplicação em qualquer tamanho de dispositivo
## Considerações
Para construção de alguns componentes utilizei o padrão **Compound Component Pattern**, ideal para componentes que são dependentes de outros e muitas das vezes compartilhan informações entre si.
Na paginação procurei atuar com o conceito de "infinite scroll", o hook `useInfiniteQuery()` do React Query permite manipular os dados e parâmetros da paginação de maneira simples.
Criação de custom hooks para separar a camada lógica do JSX, além de contar com o benefício de reaproveitamento do código das chamadas HTTP.
A escolha do React Query para trabalhar com comunicação assincrona se deve aos benefícios que ele oferece, como gerenciamento de dados simplificado, cache das requisições e poder atuar com interface otimista.
Por fim, atuei com o padrão `app router` para construção de rotas dinâmicas. Pensando no aperfeiçoamento do projeto, pode ser interessante aplicar testes end-to-end com ferramentas como Playwright ou Cypress para garantir a consistência das telas e poder realizar testes de acessibilidade. Além, melhorar o SEO das páginas.
## Construído com
- Next.js
- Tailwind CSS
- TanStack Query (React Query)
## Licença
Este projeto está licenciado sob a licença MIT - consulte o arquivo [LICENSE.md](LICENSE) para obter detalhes.