{"id":26472738,"url":"https://github.com/samuel-amaro/kanban-web-app","last_synced_at":"2026-04-18T06:02:22.655Z","repository":{"id":161144748,"uuid":"635877659","full_name":"Samuel-Amaro/kanban-web-app","owner":"Samuel-Amaro","description":"aplicativo web de gerenciamento de tarefas usando metodologia Kanban","archived":false,"fork":false,"pushed_at":"2023-05-04T12:08:16.000Z","size":936,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T21:49:35.647Z","etag":null,"topics":["bem-methodology","context-api","css","drag-and-drop","hooks-api-react","html-semantics","immerjs","kanban-board","kanban-board-application","localstorage","mobile-first","normalize-css","reactjs","reducers","responsive-web-design","typescript"],"latest_commit_sha":null,"homepage":"https://samuel-amaro.github.io/kanban-web-app/","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/Samuel-Amaro.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":"2023-05-03T16:39:40.000Z","updated_at":"2023-07-06T08:21:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"f1f02235-7d81-497c-922f-e3ff3c1c0e61","html_url":"https://github.com/Samuel-Amaro/kanban-web-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Samuel-Amaro/kanban-web-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Fkanban-web-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Fkanban-web-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Fkanban-web-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Fkanban-web-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Samuel-Amaro","download_url":"https://codeload.github.com/Samuel-Amaro/kanban-web-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Fkanban-web-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31958467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["bem-methodology","context-api","css","drag-and-drop","hooks-api-react","html-semantics","immerjs","kanban-board","kanban-board-application","localstorage","mobile-first","normalize-css","reactjs","reducers","responsive-web-design","typescript"],"created_at":"2025-03-19T21:44:30.695Z","updated_at":"2026-04-18T06:02:22.627Z","avatar_url":"https://github.com/Samuel-Amaro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Kanban task management web app solution\n\nThis is a solution to the [Kanban task management web app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/kanban-task-management-web-app-wgQLt-HlbB). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n- [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- [x] View the optimal layout for the app depending on their device's screen size\n- [x] See hover states for all interactive elements on the page\n- [x] Create, read, update, and delete boards and tasks\n- [x] Receive form validations when trying to create/edit boards and tasks\n- [x] Mark subtasks as complete and move tasks between columns\n- [x] Hide/show the board sidebar\n- [x] Toggle the theme between light/dark modes\n- [x] **Bonus**: Allow users to drag and drop tasks to change their status and re-order them in a column\n- [x] **Bonus**: Keep track of any changes, even after refreshing the browser (`localStorage` could be used for this if you're not building out a full-stack app)\n- [x] **Bonus**: Build this project as a full-stack application\n\n### Screenshot\n\n#### Preview\n\n![](./src/assets/images/preview.jpg)\n\n#### Result Mobile\n\n![](./src/assets/images/result-mobile.png)\n\n#### Result Desktop Tablet\n\n![](./src/assets/images/result-desktop-tablet.png)\n\n#### Result Desktop\n\n![](./src/assets/images/result-desktop.png)\n\n### Links\n\n- Solution URL: [Repository GitHub](https://github.com/Samuel-Amaro/kanban-task-management-web-app)\n- Live Site URL: [Result Live](https://samuel-amaro.github.io/kanban-web-app/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS(Flexbox, Grid)\n- [Bem](https://getbem.com/introduction/) - Bem Metodolody CSS Architecture\n- [Normalize](https://necolas.github.io/normalize.css/) - Normalize CSS\n- Mobile-first workflow\n- Responsive Web Design(RWD)\n- WebAcessibility with arias attributers, and roles\n- Typescript\n- NPM\n- [Vite](https://pt.vitejs.dev/) - Vite Tooling Front-End\n- [React](https://reactjs.org/) - JS library\n  - Hooks React, and Custom Hooks\n  - Context API with reducers\n  - [Immer](https://immerjs.github.io/immer/) - JS package\n  - [Classnames](https://github.com/JedWatson/classnames) - JS utility\n  - [Nano ID](https://github.com/ai/nanoid) - ID generator for JavaScript.\n- [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) - HTML Drag and Drop API\n- [LocalStorage Web API Browser](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) - LocalStorage Web API Browser\n\n## Author\n\n- Website - [Portfolio Web Samuel](https://samuel-amaro.github.io/portfolio-web/)\n- Frontend Mentor - [@samuel-amaro](https://www.frontendmentor.io/profile/Samuel-Amaro)\n\n# Como usar o Tooling Front-End vite com react é typescript\n\n### Criar projeto vite\n\n```sh\nnpm create vite@latest\n```\n\ndepois so seguir as instruções e escolher as opções de template fornecidas, de acordo com a necessidade do projeto.\n\n### Instalar depêndencias\n\nO vite não instala as dependencias somente as especifica, para instalar todas depencias e instalar a pasta node-modules para executar o projeto\n\n```sh\nnpm install\n```\n\n### Executando o projeto no modo Dev\n\nApos instalar dependencias iniciais podemos iniciar nosso projeto e começar a trabalhar, iniciamos executando o servidor de desenvolvimento, rodar o projeto no modo de desenvolvimento\n\n```sh\nnpm run dev\n```\n\n### Build para production\n\nfazendo o build para produção\n\n```sh\nnpm run build\n```\n\n### ESLint é Prettier\n\n#### Instalar ESLint para checagem de tipos e encontrar problemas no codigo\n\ninstalar e configurar, apos executar o comando, so seguir as intruções, e escolher as opções que encaixam de acordo com as ferramentas que serão necessarias para seu projeto.\n\n```sh\nnpm init @eslint/config\n```\n\n#### Plugins ESLint\n\neslint-plugin-jsx-a11y\n\nVerificador AST estático para regras de acessibilidade em elementos JSX.\n\n```sh\nnpm install eslint-plugin-jsx-a11y --save-dev\n```\n\nUso\n\nVocê também pode habilitar todas as regras recomendadas ou estritas de uma só vez. Adicionar `plugin:jsx-a11y/recommended` ou `plugin:jsx-a11y/strict` em extends:\n\n```sh\n{\n  \"extends\": [\"plugin:jsx-a11y/recommended\"]\n}\n```\n\n#### Prettier\n\ninstale o Prettier localmente\n\n```sh\nnpm install --save-dev --save-exact prettier\n```\n\nEm seguida, crie um arquivo de configuração vazio para permitir que os editores e outras ferramentas saibam que você está usando o Prettier:\n\n```sh\necho {}\u003e .prettierrc.json\n```\n\nDesativa todas as regras desnecessárias ou que possam entrar em conflito com o Prettier.\n\n```sh\nnpm install --save-dev eslint-config-prettier\n```\n\nEm seguida, adicione `\"prettier\"` à matriz \"extends\" em seu `.eslintrc.*` arquivo. Certifique-se de colocá-lo por último, para que tenha a chance de substituir outras configurações.\n\n```sh\n{\n  \"extends\": [\n    \"some-other-config-you-use\",\n    \"prettier\"\n  ]\n}\n```\n\n## Deploy e Build Para GitHub Pages \n\nDeploy e build para produção no GitHub Pages.\n\n### Envie seu código para o repositório GitHub\n\nExecute os seguintes comandos no seu Terminal\n\n```sh \n  $ git init\n```\n```sh \n$ git add .\n```\n```sh \n$ git commit -m \"first commit\"\n```\n```sh \n$ git branch -M main\n```\n```sh \n$ git remote add origin http://github.com/username/repo-name.git\n```\n```sh \n$ git push -u origin main\n``` \n\nAgora, você poderá ver seu código em seu repositório.\n\n### Deployment (Static)\n\n1. Vá para o seu ```vite.config.js``` arquivo. E adicione seu URL base a ele.\n\n```javascript\nexport default defineConfig({\n  plugins: [react()],\n  base: \"/repo-name/\" //Aqui e o url base do website\n})\n```\n\n2. Instalar package GitHub pages\n\n```sh\nnpm install gh-pages --save-dev\n``` \n\n3. adicionar à ```package.json```\n\n```json\n\"homepage\": \"https://\u003cusername\u003e.github.io/\u003crepo\u003e/\",\n...\n\"scripts\": {\n...\n  \"build\": \"vite build\",\n  \"predeploy\": \"npm run build\", //add esse script\n  \"deploy\": \"gh-pages -d dist\", //add esse script\n  ...\n```\n\n4. Opcional - Se for uma aplicação SPA - Single Page Apps for GitHub Pages usando react-router-dom\n\n  * Copie o [404.html](https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html) arquivo para o seu repositório como está.\n\n    * Observe que, se você estiver configurando um site do Project Pages e não estiver usando um domínio personalizado (ou seja, o endereço do seu site é username.github.io/repo-name), será necessário definir pathSegmentsToKeep como 1 no 404.html arquivo para manter /repo-name o caminho após o redirecionamento. Se você estiver usando o React Router, precisará dizer a ele para usar o repo-name como o basename, por exemplo \n    ```jsx\n      \u003cBrowserRouter basename=\"/repo-name\" /\u003e\n    ```\n\n  * Copie o [script de redirecionamento](https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html#L21-L42) do ```index.html``` arquivo e adicione-o ao seu ```index.html``` arquivo - Observe que o script de redirecionamento deve ser colocado antes do script do aplicativo de página única em seu ```index.html``` arquivo.  \n\n5. Por fim execute o comando\n\n```sh\nnpm run deploy\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-amaro%2Fkanban-web-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuel-amaro%2Fkanban-web-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-amaro%2Fkanban-web-app/lists"}