{"id":23810416,"url":"https://github.com/zingarelli/memoteca","last_synced_at":"2026-05-15T01:32:29.882Z","repository":{"id":64881158,"uuid":"560892076","full_name":"zingarelli/memoteca","owner":"zingarelli","description":"A place to keep your thoughts and favorite quotes. Developed in Angular 14.","archived":false,"fork":false,"pushed_at":"2022-12-16T21:54:29.000Z","size":6480,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T02:56:57.942Z","etag":null,"topics":["angular","angular14","vitrinedev"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zingarelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-02T13:54:18.000Z","updated_at":"2022-11-02T14:20:21.000Z","dependencies_parsed_at":"2022-12-18T19:24:20.410Z","dependency_job_id":null,"html_url":"https://github.com/zingarelli/memoteca","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zingarelli/memoteca","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fmemoteca","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fmemoteca/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fmemoteca/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fmemoteca/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingarelli","download_url":"https://codeload.github.com/zingarelli/memoteca/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fmemoteca/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33050188,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular14","vitrinedev"],"created_at":"2025-01-02T00:14:25.138Z","updated_at":"2026-05-15T01:32:29.856Z","avatar_url":"https://github.com/zingarelli.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Memoteca 💭 | Learning Angular 14\n\n[Veja esta página em português](#detalhes-do-projeto)\n\nA place to keep your thoughts and favorite quotes.\n\n| :placard: Vitrine.Dev |     |\n| -------------  | --- |\n| :sparkles: Nome        | **Guarde seus pensamentos na Memoteca**\n| :label: Tecnologias | Angular\n| :rocket: URL         | \n| :fire: Curso     | https://www.alura.com.br/curso-online-angular-explorando-framework\n\n![](https://user-images.githubusercontent.com/19349339/199535812-3ba61fa6-8f6a-48f7-997f-c4fea3baaef3.png#vitrinedev)\n\n## Project Details\n\nThis project was developed in order to learn the basics of Angular 14. It has two pages: one to create a thought/quote and another to list all thoughts/quotes saved, which can also be edited and removed. Data is stored in a local JSON Server.\n\nPages are in English, but the code and comments are in Portuguese.\n\n### Page overview\n\n![gif showing a list of saved quotes/thoughts](https://user-images.githubusercontent.com/19349339/208193488-ba93018a-6aea-47a6-a4cb-5f0c41d7948b.gif)\n\n### Adding a new item\n\n![gif showing the process of adding a new quote/thought](https://user-images.githubusercontent.com/19349339/208194956-67458849-20ce-40b4-9267-8f8811a54064.gif)\n\n### Editing an item\n\n![gif showing the process of editing a quote/thought](https://user-images.githubusercontent.com/19349339/208195027-20bce146-4fa2-4561-9ed0-236e34006186.gif)\n\n### Deleting an item\n\n![gif showing the process of deleting a quote/thought](https://user-images.githubusercontent.com/19349339/208195018-3e074385-5d36-4395-9dc8-877c72073078.gif)\n\n## Credits\n\nThis project was developed in the first [Angular 14 course](https://www.alura.com.br/curso-online-angular-explorando-framework) from [Alura](https://www.alura.com.br).\n\n**Instructor**: \n- **[Nayanne Batista](https://www.linkedin.com/in/nayannebatista/)**\n\n## How to run this project\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.7. The local server uses JSON server version 0.17.0.\n\nIf you don't have Angular CLI installed, run the following command in a terminal:\n\n`npm install -g @angular/cli`\n\nAfter cloning/downloading the code, open a terminal, go to the project's root folder and run the following command to install all necessary dependencies:\n\n`npm install`\n\nNext, go to `/backend` folder and run `npm install` again to install JSON server:\n\n### Development server\n\nYou'll have to keep two terminals opened, one for JSON server and another for the development server (where the application will run).\n\nIn the first terminal, go to `/backend` folder and start JSON server using `npm start`. The server will use port 3000 to run.\n\nIn the second terminal, go to the project's root folder and run `ng serve`. Navigate to `http://localhost:4200/` to open the application. The application will automatically reload if you change any of the source files.\n\n### Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n## What I've learned\nAngular is a robust framework that eases the steps necessary to develop a Web Application. \n\nYou can easily create components by running `ng generate component name-of-the-component` (shortcut: `ng g c name-of-the-component`) and Angular will provide you CSS, HTML and Typescript files, and will also update the necessary files for your component to be available throughout the app.\n\nDuring this course, I've learned several concepts:\n\n- how to install Angular CLI and use it to create and run a project;\n\n- how to create components and a service;\n\n- the file structure of a component and the responsibilies of a template (HTML file) and the component itself (TypeScript file);\n\n- use property binding (`[]`) to pass values from a component to its template;\n\n- use interpolation (`{{}}`) to display values in the template;\n\n- use event binding (`(event-name)`) to add events to an HTML tag;\n\n- use `[(ngModel)]` for a two-way communication between the component and its template;\n\n- create and configure page navigation using `RouterModule`, `Routes`, `ActivatedRoute` and `\u003crouter-outlet\u003e`;\n\n- Angular directives to add more features into the HTML files: `ngFor`, `ngIf` and `ngClass`;\n\n- how Angular deals with dependency injection and how to use Decorators to add dependency injection between components and service (`@Injectable`);\n\n- how to perform CRUD operations using `HttpClient` and `Observable`.\n\n---\n\n## Detalhes do projeto\n\nUm aplicativo para guardar seus pensamentos e citações favoritos.\n\nEste projeto foi desenvolvido para aprender o básico de Angular 14. Ele possui duas páginas: uma para criar um pensamento/citação e outra para listar todos os pensamentos/citações salvos (e também editá-los ou removê-los). Os dados são salvos em um JSON Server rodando localmente.\n\nAs páginas estão em inglês, mas o código e os comentários estão em português.\n\n### Visão geral do aplicativo\n\n![gif mostrando uma lista de pensamentos/citações salvos](https://user-images.githubusercontent.com/19349339/208193488-ba93018a-6aea-47a6-a4cb-5f0c41d7948b.gif)\n\n### Adicionando um novo item\n\n![gif mostrando o processo de adicionar um novo item](https://user-images.githubusercontent.com/19349339/208194956-67458849-20ce-40b4-9267-8f8811a54064.gif)\n\n### Editando um item\n\n![gif mostrando o processo de editar um item](https://user-images.githubusercontent.com/19349339/208195027-20bce146-4fa2-4561-9ed0-236e34006186.gif)\n\n### Apagando um item\n\n![gif mostrando o processo de apagar um item](https://user-images.githubusercontent.com/19349339/208195018-3e074385-5d36-4395-9dc8-877c72073078.gif)\n\n## Créditos\n\nEste projeto foi desenvolvido no primeiro [curso de Angular 14](https://www.alura.com.br/curso-online-angular-explorando-framework) da [Alura](https://www.alura.com.br).\n\n**Instrutora**: \n- **[Nayanne Batista](https://www.linkedin.com/in/nayannebatista/)**\n\n## Como executar este projeto\n\nO projeto foi criado com o [Angular CLI](https://github.com/angular/angular-cli) versão 14.2.7. O servidor local usa o JSON Server versão 0.17.0.\n\nSe você não possui o Angular CLI instalado, rode o seguinte comando em um terminal\n\n    npm install -g @angular/cli\n\nApós clonar/baixar o código do projeto, abra um terminal, navegue até a pasta do projeto e rode o comando abaixo para instalar todas as dependências necessárias:\n\n    npm install\n\nA seguir, vá para a pasta `/backend` e rode `npm install` novamente para instalar o JSON server:\n\n### Servidor de desenvolvimento\n\nVocê precisará manter dois terminais abertos, um para o JSON server e outro para o servidor de desenvolvimento (onde o aplicativo vai rodar).\n\nNo primeiro terminal, vá para a pasta `/backend` e inicie o JSON server usando o `npm start`. O servidor irá rodar na porta 3000.\n\nNo segundo terminal, vá para a raiz do projeto e rode `ng serve`. Digite no navegador a URL `http://localhost:4200/` para abrir o aplicativo. Ele irá recarregar automaticamente se você fizer qualquer alteração no código-fonte.\n\n### Ajuda adicional\n\nPara obter mais ajuda com o Angular CLI, digite `ng help` no terminal ou dê uma olhada na página de [Visão Geral e Referência de Comandos do Angular CLI](https://angular.io/cli) (em inglês).\n\n## O que eu aprendi\n\nO Angular é um framework robusto que facilita os passos necessários para desenvolver um aplicativo Web.\n\nVocê pode criar components facilmente rodando `ng generate component nome-do-componente` (atalho: `ng g c nome-do-componente`) e o Angular já irá providenciar os arquivos CSS, HTML e Typescript para você, além de atualizar os arquivos necessários para que seu componente esteja disponível para ser usado por todo o aplicativo.\n\nDurante o curso, eu aprendi vários conceitos:\n\n- como instalar o Angular CLI e usá-lo para criar e rodar um projeto;\n\n- como criar componentes e um serviço;\n\n- a estrutura de arquivos de um componente e as responsabilidades de um template (arquivo HTML) e do componente em si (arquivo TypeScript);\n\n- usar o *\"property binding\"* (`[]`) para passar valores de um componente para seu template;\n\n- usar interpolação (`{{}}`) para mostrar valores no template;\n\n- usar o *\"event binding\"* (`(nome-do-evento)`) para adicionar eventos a uma tag HTML;\n\n- usar `[(ngModel)]` para uma comunicação de dois caminhos entre o componente e seu template;\n\n- criar e configurar navegação de página usando `RouterModule`, `Routes`, `ActivatedRoute` e `\u003crouter-outlet\u003e`;\n\n- diretivas Angular para adicionar mais funcionalidades aos arquivos HTML: `ngFor`, `ngIf` e `ngClass`;\n\n- como o Angular lida com injeção de dependências e como usar *\"Decorators\"* para adicionar injeção de dependências entre componentes e serviços (`@Injectable`);\n\n- como realizar operações CRUD usando `HttpClient` e `Observable`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingarelli%2Fmemoteca","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingarelli%2Fmemoteca","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingarelli%2Fmemoteca/lists"}