{"id":22115062,"url":"https://github.com/walissonrodrigo/kanban-react-pwa","last_synced_at":"2025-03-24T05:19:31.854Z","repository":{"id":117401784,"uuid":"610250248","full_name":"WalissonRodrigo/kanban-react-pwa","owner":"WalissonRodrigo","description":"Kanban in React using Authentication JWT for login and CRUD resources about cards kanban","archived":false,"fork":false,"pushed_at":"2025-02-21T07:31:57.000Z","size":2474,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T08:28:10.706Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/WalissonRodrigo.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-03-06T11:57:05.000Z","updated_at":"2023-03-06T11:57:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"4238420b-83dd-4eee-8d51-fa423eb244b5","html_url":"https://github.com/WalissonRodrigo/kanban-react-pwa","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/WalissonRodrigo%2Fkanban-react-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fkanban-react-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fkanban-react-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fkanban-react-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WalissonRodrigo","download_url":"https://codeload.github.com/WalissonRodrigo/kanban-react-pwa/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245212447,"owners_count":20578463,"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":[],"created_at":"2024-12-01T12:14:18.481Z","updated_at":"2025-03-24T05:19:31.835Z","avatar_url":"https://github.com/WalissonRodrigo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"/\" target=\"_blank\" rel=\"noreferrer\"\u003e\n \u003cimg src=\"./public/cover.png\" title=\"Base App\"\u003e\n\u003c/a\u003e\n\n# Kanban-PWA - is here 🚀🎉⚡️\n\n## Synopsis\n\nThis project (a GitHub template) is an opinionated setup for modern web applications.\nIt's a combination of essential (and minimal) libraries/components/utils/etc., which developers usually need during the process of making modern React applications.\n\n## Motivation\n\nAlmost all projects need to have a router, a UI framework, store integration, theming, error handling, base file/folder structure, a builder, some developer tools (eslint, prettier, etc), and many more. In this starter kit, we tried to put together the best options available from the above-mentioned fields. Out of the box, it provides a modern production-ready setup created by developers for developers 💚\n\n## Features\n\n- ✅ [Vite](#vite)\n- ✅ [React](#react)\n  - `v18` 🔥\n- ✅ [TypeScript](#typescript)\n- ✅ [Router](#router)\n  - `React Router v6`\n- ✅ [UI-framework](#ui-framework)\n  - `MUI v5`\n- ✅ [Store](#store)\n  - `Recoil`\n- ✅ [Notifications](#notifications)\n- ✅ [Theme](#theme)\n- ✅ [Base file/folder structure](#base-filefolder-structure)\n- ✅ [PWA](#pwa)\n- ✅ [Performance](#performance)\n- ✅ [Hotkeys](#hotkeys)\n- ✅ [Error Handling](#error-handling)\n- ✅ [Pages](#pages)\n- ✅ [Dev tools](#dev-tools)\n  - ✅ eslint\n  - ✅ prettier\n  - ✅ husky\n  - ✅ lint-staged\n  - ✅ https localhost\n\n#### Vite\n\n[Vite](https://vitejs.dev/) is a blazingly fast build tool based on [native ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/), [rollup](https://rollupjs.org/guide/en/), and [esbuild](https://esbuild.github.io/). `React-PWA` v1 was based on [CRA](https://reactjs.org/docs/create-a-new-react-app.html). We still love `CRA` and really think it's a great tool, but `Vite` provides a much better developer experience and it's unconditionally faster (maybe, we will also create a `CRA` version of `React-PWA` v2 in near future).\n\n#### React\n\nThe latest version (v18) is used here. All dependencies support [React](https://reactjs.org/) v18 and the `v2` is refactored according to the latest changes and requirements of `React` v18.\n\n#### TypeScript\n\n\"Not using [TypeScript](https://www.typescriptlang.org/) is like driving without a seatbelt\" - [Matt Howard](https://twitter.com/MattDotHow).\n\nFor those who are not familiar with `TypeScript` - don't worry, you will love it, as we all did. `TypeScript` is a superset of `JavaScript`; it should be very easy to work with if you know `JavaScript`.\n\n#### Router\n\n[React Router v6](https://reactrouter.com/) is used here. You can find routing in the [src/routes](./src/routes/) folder.\n\n#### UI-framework\n\n[MUI](https://mui.com/) v5 is used here. `MUI` is a fully-loaded component library, super customizable, and easy to use.\n\n#### Store\n\nAs a store management tool [Recoil](https://recoiljs.org/) is used. Check the [src/store](./src/store) folder for more information.\n\n#### Notifications\n\nOut of the box you have a notification system. To show a simple notification you can use `useNotification` hook:\n\n```js\nimport { useNotifications } from '@/store/notifications';\n\nfunction MyCoolComponent() {\n  const [notifications, actions] = useNotification();\n\n  function showNotification() {\n    actions.push({ message: 'Moses had the first tablet that could connect to the cloud' });\n  }\n\n  return (\n    ...\n  );\n}\n\n```\n\n#### Theme\n\nThe [theme system](./src/theme/) is based on [MUI Theme](https://mui.com/material-ui/customization/theming/#main-content). To get the current theme mode or to change it you can use `useTheme` hook:\n\n```js\n...\nimport { useTheme } from '@/store/theme';\n\nfunction MyCoolComponent() {\n  const [theme, actions] = useTheme();\n\n  // check the current theme mode\n  console.log(theme);\n\n  // if you want to change the theme, call an appropriate action\n  function toggleTheme() {\n    actions.toggle();\n  }\n\n  ...\n}\n```\n\nYou have access to `theme` object via `sx` prop and `styled-components`:\n\n```js\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport { styled } from '@mui/system';\n\n// styled-components\nconst MyCoolButton = styled(Button)(({ theme }) =\u003e ({\n  marginRight: theme.spacing(1),\n  color: theme.palette.text.disabled,\n}));\n\n// sx prop\nfunction MyCoolComponent() {\n  return \u003cBox sx={{ borderRadius: theme.shape.borderRadius }}\u003e...\u003c/Box\u003e;\n}\n```\n\nAlso, you can redefine the theme in the theme configuration file. Check the [src/theme/themes.ts](./src/theme/themes.ts) file for more information.\n\n#### Base file/folder structure\n\nHere how the base file/folder structure looks like:\n\n\u003cimg src=\"./public/file-folder-structure.png\" title=\"file folder structure\"\u003e\n\nTBD: more information about the file/folder structure will be added soon.\n\n#### PWA\n\nOut of the box, it's a `Progressive Web Application`. It can be installed on mobile and desktop devices 🙂, it can work offline, and many more. Check more about PWAs [here](https://web.dev/progressive-web-apps/)\n\nYour users will also be informed about the new version of your app:\n\n\u003cimg src=\"./public/pwa-reload.png\" width=\"600\" title=\"pwa reload\"\u003e\n\n#### Performance\n\nAfter all these integrations the biggest bundle size is `~79KB`. It means even the first load will be pretty fast (in my case it's `1.1s`), further loads (already cached by `service worker` and `workbox`) will take `~0.25s`.\n\n\u003cimg src=\"./public/bundle.png\" title=\"bundle\"\u003e\n\n\u003cimg src=\"./public/audit.png\" title=\"audit\"\u003e\n\nNOTE: The performance is not 100 because it's running on demo server.\n\n#### Hotkeys\n\nA basic implementation of hotkeys is demonstrated here. Check the [src/sections/HotKeys](./src/sections/HotKeys/HotKeys.tsx) for more information.\n\nCurrently, you can use the following hotkeys:\n\n`Alt+s` - to toggle the theme mode\n`Alt+t` - to toggle the sidebar\n`Alt+/` - to open the hotkeys dialog\n\n#### Error Handling\n\nNobody likes white screens and crashes without any notes. In [src/error-handling](./src/error-handling) you can find the error handling implementation. Here you can find `withErrorHandler` high order component. You can wrap any component by this HOC and it will catch all errors and show a default or your custom fallback. Currently, the main APP component is wrapped by `withErrorHandler` HOC.\n\n#### Pages\n\nFrom a layout point of view the application consists of 3 main parts:\n\n- Header\n- Sidebar\n- Pages\n\nThe last one is a router-based switcher. All routes are defined in [src/routes](./src/routes/index.ts). By default, pages are being loaded asynchronously via [asyncComponentLoader](src/utils/loader/loader.tsx). You can use it to asynchronously load any `React` component you want. It uses `React.Suspense` and `React.lazy` with some magic 🧙‍♂️\n\n# Dev tools\n\n- [eslint](https://eslint.org/)\n\n  The latest version of `eslint` with the latest recommended collection of `eslint` rules is available out of the box. It contains:\n\n  - eslint:recommended\n  - react/recommended\n  - @typescript-eslint/recommended\n\n  Check the [.eslintrc.json](./eslintrc.json) file for more information.\n\n- [prettier](https://prettier.io/)\n\n  Stop fighting about styling in code reviews; save your time and energy - configure it once and let the machine format/correct your code.\n\n  Check the [.prettierrc.json](./prettierrc.json) file for more information.\n\n  There is an additional configuration for your import statements. They will be automatically ordered and grouped by the given rules (check the `.prettierrc.js`) - one more topic for debates in code reviews :)\n\n- [husky](https://typicode.github.io/husky/#/)\n\n  You can use it to lint your commit messages, run tests, lint code, etc.\n\n  Currently, only `pre-commit` hook is set up. Every time you try to do a commit it will run `prettier` and `eslint` to be sure that everything is according to the rules.\n\n- [lint-staged](https://github.com/okonet/lint-staged)\n\n  `lint-staged` helps to run `eslint` and `prettier` only on staged files - it makes the linting process super fast and sensible.\n\n- [https localhost](https://github.com/daquinoaldo/https-localhost)\n\n  It's a simple way to run your application on localhost with https.\n\n  Just run:\n\n  ```bash\n  npm run https-preview # or yarn https-preview\n  ```\n\n  after:\n\n  ```bash\n  npm run build # or yarn build\n  ```\n\n  and check `https://localhost` in your browser.\n\n  NOTE: first time it will ask you about installing localhost certificate. For more info check [this](https://github.com/daquinoaldo/https-localhost#root-required)\n\n## Usage\n\nYou can use this template by just pressing `Use this template`.\n\n\u003cimg src=\"./public/use-template.png\" width=\"300\" title=\"Use this temaplte\"\u003e\n\nOr you can fork/clone it.\n\nInstall dependencies:\n\n```bash\nnpm install # or yarn\n```\n\nIn order to run it in development, run:\n\n```bash\nnpm run dev # or yarn dev\n```\n\nIn order to do a production build, run:\n\n```bash\nnpm run build # yarn build\n```\n\nThere are two more scripts:\n\n`preview` and `https-preview`\n\n- `preview` command will boot up local static web server that serves the files from `dist` folder. It's an easy way to check if the production build looks OK in your local environment.\n- `https-preview` is the same, but with HTTPS. It's handy for testing your PWA capabilities in your local environment.\n\n## [Live Demo](https://localhost:3000/)\n\n\u003cdiv\u003e\n \u003cimg src=\"./public/demo-dark.png\" width=\"280\" title=\"Dark demo\"\u003e \u003cimg src=\"./public/demo-light.png\" width=\"280\" title=\"Light demo\"\u003e\n\u003c/div\u003e\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalissonrodrigo%2Fkanban-react-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwalissonrodrigo%2Fkanban-react-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalissonrodrigo%2Fkanban-react-pwa/lists"}