https://github.com/kleutons/angular-ibblog

Desafio de frontend, que consiste na criação de um projeto Angular para um blog de notícias, utilizando a API externa do IBGE. Desenvolvimento de software. Angular
https://github.com/kleutons/angular-ibblog

angular api api-client ibge ibge-api javascript typescript

Last synced: 8 days ago
JSON representation

Desafio de frontend, que consiste na criação de um projeto Angular para um blog de notícias, utilizando a API externa do IBGE. Desenvolvimento de software. Angular

• Host: GitHub
• URL: https://github.com/kleutons/angular-ibblog
• Owner: kleutons
• Created: 2023-10-10T00:27:46.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-19T00:25:58.000Z (about 1 year ago)
• Last Synced: 2023-10-19T14:48:59.360Z (about 1 year ago)
• Topics: angular, api, api-client, ibge, ibge-api, javascript, typescript
• Language: TypeScript
• Homepage: https://kleutons.github.io/angular-ibblog/
• Size: 1.09 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🚀 Desafio Frontend - Projeto Angular - Blog de Notícias com API do IBGE

Seja bem-vindo(a) a este desafio de frontend, que consiste na criação de um projeto Angular para um blog de notícias, utilizando a API externa do IBGE. O objetivo deste desafio é aprimorar minhas habilidades no desenvolvimento de software.

## [Visualize o Projeto Online](https://kleutons.github.io/angular-ibblog/)

- Link: https://kleutons.github.io/angular-ibblog/

### Capturas de Tela

![Captura de Tela do Aplicativo](.github/prototype.png)

## 📋 Desafios do Projeto

- [x] Organizar o sistema em módulos para cada rota da página:

  - [x] Módulo App - núcleo

  - [x] Módulo Pages - rotas das páginas: Home, Post, Search

  - [x] Módulo Shared - componentes globais compartilhados

- [x] Criar um blog com suporte aos modos Escuro e Claro (Dark Mode e Light Mode).

- [x] Desenvolver um layout responsivo.

- [x] Exibir as notícias em destaque.

- [x] Implementar a paginação "Ver Mais" para exibir mais notícias.

- [x] Filtrar notícias por categoria.

- [x] Visualizar notícias por ID.

- [x] Implementar um sistema de busca de notícias.

- [x] Criar um layout para a barra lateral (sidebar).

- [x] Utilizar serviços para lidar com as requisições da API e funções adicionais.

- [x] Criar um sistema de cache para as requisições à API, tornando o site mais rápido e reduzindo a carga nos serviços do servidor backend.

- [x] Criar pipes personalizados para formatação de dados.

- [x] Utilizar variáveis de ambiente.

## 👨‍💻 Instruções de Instalação

### Servidor de Desenvolvimento

Execute o comando `ng serve` para iniciar um servidor de desenvolvimento. Acesse o site em `http://localhost:4200/`. O aplicativo será recarregado automaticamente.

### Compilação

Execute `ng build` para construir o projeto. Os artefatos da compilação serão armazenados na pasta `dist/`.

## Rotas Disponíveis

- http://localhost:4200/ => Página Inicial

- http://localhost:4200/post/:id => Rota GET para visualizar a notícia com base no ID

- http://localhost:4200/search/category/:category => Rota GET para listar notícias de acordo com a categoria

- http://localhost:4200/search/:value => Rota GET para buscar notícias

## 👨‍💻 Sobre Mim

### Criado com 💙 por [@kleutons](https://github.com/kleutons)

### Contato

- [LinkedIn](https://www.linkedin.com/in/kleuton-novais/)

- [Portfólio](https://kleuton.dev)

### Fique à vontade para compartilhar seu feedback e sugestões sobre esta solução. Estou ansioso para ouvir sua opinião.