{"id":19853948,"url":"https://github.com/ggteixeira/first-todo-app","last_synced_at":"2026-04-12T23:03:41.108Z","repository":{"id":39585702,"uuid":"204082243","full_name":"ggteixeira/first-todo-app","owner":"ggteixeira","description":"todoApp, a simple To-Do List app made with React","archived":false,"fork":false,"pushed_at":"2024-12-16T17:15:13.000Z","size":29964,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T01:08:10.621Z","etag":null,"topics":["app","purecss","react","reactjs","todoapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ggteixeira.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-23T23:15:38.000Z","updated_at":"2024-09-24T13:21:22.000Z","dependencies_parsed_at":"2024-08-26T18:52:50.022Z","dependency_job_id":"3f93899c-6584-4c21-9e47-d2341caf65f3","html_url":"https://github.com/ggteixeira/first-todo-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ggteixeira%2Ffirst-todo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ggteixeira%2Ffirst-todo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ggteixeira%2Ffirst-todo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ggteixeira%2Ffirst-todo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ggteixeira","download_url":"https://codeload.github.com/ggteixeira/first-todo-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241243773,"owners_count":19933190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["app","purecss","react","reactjs","todoapp"],"created_at":"2024-11-12T14:08:09.767Z","updated_at":"2026-04-12T23:03:40.652Z","avatar_url":"https://github.com/ggteixeira.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# todoApp\n\n# Introdução\n\nO todoApp é um to-do list feito usando React. Ele permite ao usuário adicionar, visualizar e completar tarefas. Ele também mostra dinamicamente a lista das tarefas completadas.\n\n![todo](https://github.com/guiemi/todoApp/blob/main/media/todoApp_screenshot.png)\n\n## Instalação / pré-requisitos\n\n- O único requisito necessário é que você tenha instalados o **npm** (Node Package Manager) e o Node.js. Para baixá-lo na sua máquina, visite o [nodejs.org/pt-br](https://nodejs.org/pt-br/).\n\n# O todoApp\n\n## Como funciona\n\nSeu funcionamento é **straight to the point**, facilitando ao usuário a criação de listas rápidas de tarefas. Depois de adicionada a tarefa, ela é mostrada imediatamente abaixo na tela. E, para melhor visualização do fluxo **daquilo que já foi feito x o que ainda precisa ser feito**, as tarefas já completadas são mostradas dinamicamente imediatamente abaixo da _to-do list_ principal.\n\n![todo-hd](https://github.com/guiemi/todoApp/blob/main/media/todo-hd.gif)\n\n# Diário de Bordo\n\n## Dia 1/4 (quinta): primeiros passos\n\n### Aprendendo os fundamentos do React\n\nNo primeiro dia eu **aprendi os básicos sobre** `props` **e** `states`. Visualizei de forma geral o \"dialeto\" que o React usa **a partir da sintaxe do JavaScript**. Outro aspecto importante do primeiro dia foi aprender o fluxo de código dentro da **organização de pastas e arquivos** dessa library.\n\nUtilizei o tutorial **[Create a Simple Todo app in React](https://medium.com/@kris101/create-a-simple-todo-app-in-react-72d9341a7e6c)** (de autoria de Krissanawat Kaewsanmuang) para me familiarizar melhor com o React.\n\n## Dia 2/4 (sexta): estados\n\n### Aprendendo sobre estados\n\nNa sexta-feira, li sobre estados (o funcionamento do `setState`). Entendi melhor também como configurar os estados das funções para que um item marcado como \"completed\" apareça na lista de \"Tasks done\".\n\nA aplicação ganhou uma nova feature: uma tarefa, ao ser marcada como completada, é movida para uma lista de \"Tasks done\".\n\n## Dia 3/4 (sábado): desacoplamento de componentes e layout\n\n### Reorganizando a estrutura do código\n\nNo sábado, estudei a disposição dos diretórios do React para uma melhor organização dos componentes. Criei uma branch a partir da master afim de desacoplar o App.js, inserindo cada componente em uma pasta dedicada, porém não alcancei os resultados desejados e, então, passei para a próxima tarefa que era estruturar o layout.\n\n### Adicionando CSS ao layout\n\nPreferi usar o CSS _vanilla_ (e Flexbox) para desenhar o layout, primeiramente porque estou praticando flexbox; e também porque talvez eu perdesse tempo lendo sobre como implementar o Bootstrap, o Miligram ou outro _framework_ CSS neste projeto. Por ser um app simples, o uso do CSS puro inicialmente me pareceu ser a melhor decisão.\n\n## Dia 4/4 (domingo)\n\n### Finalizando a documentação\n\nNo último dia, finalizei a escrita e a revisão da documentação do projeto: adicionei um _screenshot_ e um _gif_ do app ao README e também inseri uma seção de \"próximos passos\", que em breve será transformada em _issues_ no GitHub.\n\n# Próximos passos\n\n- [x] ~~Enviar as tarefas completadas automaticamente para uma lista de \"_Tasks completed_\"~~\n- [x] ~~Mostrar dinamicamente a lista de tarefas completadas somente se ela não estiver vazia~~\n- [ ] Adicionar a opção de editar/apagar uma tarefa na lista principal\n- [ ] Adicionar a opção de apagar todas as tarefas já concluídas\n- [ ] Adicionar a opção de apagar todas as tarefas de todas as listas\n- [ ] Desacoplar os componentes do App.js e organizá-los em pastas dedicadas\n\n# Referências\n\n- **Artigo**: [Create a Simple Todo app in React](https://medium.com/@kris101/create-a-simple-todo-app-in-react-72d9341a7e6c) (Medium)\n- **Tutorial em vídeo**: https://www.youtube.com/watch?v=e_ZibOe77yo\u0026t=577s\n- Arrow functions: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions\n- **React.js Cheatsheet**: https://devhints.io/react\n- **Artigo**: [Understanding React setState](https://css-tricks.com/understanding-react-setstate/) (CSS-TRICKS)\n- **Talk**: [The introduction to Reat you've been missing](https://www.youtube.com/watch?v=SAIdyBFHfVU) (Kent C. Dodds @UtahJS)\n- **Paleta de cores**: [#1443225](https://colorhunt.co/palette/143225) (ColorHunt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fggteixeira%2Ffirst-todo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fggteixeira%2Ffirst-todo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fggteixeira%2Ffirst-todo-app/lists"}