Skip to content

yanm1103/Angular-Tour-of-Heroes

Repository files navigation

Angular Tour Of Heroes (Developed in pt-BR)

logo

🇧🇷 Seguindo o tutorial do Angular v17 em criar um app simples. Porém, eu modifiquei bastante coisa, principalmente visualmente.

🇺🇸 This is just a step by step recreation of Angular's tutorial on creating a simple app. However, I modified a bunch of things, mainly visually.

Screenshots

image

image

image

image

Production Updates

Final Lesson complete 15/06/2024

🇧🇷 A última lição se tratava de implementar um servidor e fazer o request invés de puxar diretamente do front-end. Além disso, inseri uma barra de pesquisa de herói na tela inicial.

🇺🇸 The last lesson was about implementing a server and making the request instead of fetching directly from the front end. Additionally, I added a hero search bar on the main screen.

Material - Light and Dark theme switch 13/06/2024

🇧🇷 A mudança de tema é salva no local storage.

🇺🇸 Theme changes are saved in local storage.

Dark theme

Light theme

Material - Custom theme 13/06/2024

🇧🇷 Finalmente entendi como criar paletas de cor em um tema customizado do Angular Material. Apliquei cores custom no projeto.

🇺🇸 Finally, I understood how to create color palettes in a custom Angular Material theme. I applied custom colors to the project.

Lesson 5 - Routing 08/06/2024

🇧🇷 Gastei o sábado inteiro trabalhando nesse carrossel. Acho que valeu a pena, estou contente com os resultados.

🇺🇸 Spent this entire saturday working in this carousel. I guess it was worth it, I'm very happy with the results.

lesson5

lesson5mobile

Lesson 4 - Add services 01/06/2024

🇧🇷 Mesmo que esta lição seja sobre serviços, decidi melhorar um pouco a aparência visual das coisas. 🇺🇸 Even though this lesson is about services, I've decided to improve the visual of things a bit.

Lesson 4 image

Lesson 4 notifications

Lesson 3 - Create a feature component 01/06/2024

🇧🇷 Esta lição apenas separa os componentes, então não há diferença visual. O componente Heroes foi dividido em Heroes e HeroDetail.

🇺🇸 This lesson just separates components, so no visual difference. Heroes component was divided into Heroes and HeroDetail.

Lesson 2 - Display a List

🇧🇷 Nesta lição, eu já implementei o Bootstrap para ajudar com o design responsivo, e em vez de usar uma lista, optei por usar um select, pois achei mais agradável.

🇺🇸 In this lesson I already implemented Bootstrap to help with the responsive design, and instead of using a list I opted for using a select, since I find it more pleasing.

Lesson 2 image

Lesson 2 image mobile

Lesson 1 - The hero editor

Lesson 1 image

Development server | Servidor de desenvolvimento

Execute ng serve para iniciar o servidor de desenvolvimento. Navegue até http://localhost:4200/. A aplicação será recarregada automaticamente se você modificar qualquer um dos arquivos de origem.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build | Compilar

Execute ng build para compilar o projeto. Os artefatos de compilação serão armazenados no diretório dist/.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.