Casa do Alemão

Casa do Alemão é uma SPA (single-page application) feita em Angular no bootcamp T-Academy. Os usuários podem, além de outras funcionalidades, acessar informações gerais sobre a Alemanha, publicar artigos e commentar nas publicações.

Tecnologias utilizadas

• Angular 18
• Tailwind
• Angular Material

Frontend: foi utilizado Tailwind para estilização geral, e o SnackBar do Angular Material para implementar notificações de sucesso.

Backend: como o foco do projeto era o frontend, foi utilizada a biblioteca JSON Server para simular uma API no backend.

Funcionalidades e permissões

Função	Ação	Editores	Usuários	Visitantes
Informações Gerais	Visualizar	✔️	✔️	✔️
Artigos	Visualizar	✔️	✔️	✔️
Artigos	Publicar	✔️	❌	❌
Artigos	Editar	✔️	❌	❌
Artigos	Excluir	✔️	❌	❌
Comentários	Visualizar	✔️	✔️	✔️
Comentários	Comentar	✔️	✔️	❌
Comentários	Editar	✔️	✔️	❌
Comentários	Excluir	✔️	✔️	❌

Componentes

graph LR
A[App]
A ----> B[Navbar]
A ---> C[Router Outlet]
C ---> D[Home]
C ---> H[States]
C ---> G[Gallery]
C ---> F[Articles]
C ---> M[Full Article]
C ---> J[Signup]
C ---> I[Login]
C ---> K[Not Found]
C ---> Q[Error]
D ---> R[Header]
H ---> T[Stat Card]
H ---> R
G ---> R
F ----> R
F ---> E[Article Card]
F ---> N[Article Form]
F ---> V[Dialog]
F ---> U[Loading]
F ---> S[EmptyState]
M ---> R
M ---> O[CommentSection]
M ---> U
O ---> R
O ---> V
O ---> Y[CommentForm]
O ---> X[Comment]
O ---> U
J ---> U
I ---> U
X ---> Y
A ----> P[Footer]

Loading

Configuração e execução

Requisitos

• Node.js

Executando a aplicação

1. Clone o repositório:

   git clone [email protected]:paulohenrique-gh/angular-casa-do-alemao.git
   cd angular-casa-do-alemao

2. Instale as dependências:

   npm install

3. Inicie a aplicação

   npm run start

   Serão executados os comandos ng serve e npx json-server db.json em paralelo devido à biblioteca Concurrently

4. Acesse a aplicação:

   Acesse a http://localhost:4200 no navegador de sua preferência

Testando a aplicação

Você pode usar as credenciais abaixo para testar as funcionalidades:

• Editor:

  • Email: [email protected]
  • Senha: password123

• Usuário:

  • Email: [email protected]
  • Senha: password101

Se preferir, pode também criar um novo cadastro no endereço http://localhost:4200/signup e acessar com o email e senha cadastrados

Capturas

Vídeo

casa-do-alemao.-.demo.mp4

Imagens

Página Inicial

Estados

Galeria

Artigos

Formulário de Artigo

Artigo Completo

Pop-up de Confirmação

Cadastro

Login

Erro

Página Não Encontrada