{"id":21470411,"url":"https://github.com/webdevsk/react-todo-app","last_synced_at":"2026-05-07T05:40:24.323Z","repository":{"id":176944031,"uuid":"657631522","full_name":"webdevsk/react-todo-app","owner":"webdevsk","description":"A TODO App based on React with dynamic Routing.","archived":false,"fork":false,"pushed_at":"2023-07-23T16:29:00.000Z","size":3680,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T16:12:57.009Z","etag":null,"topics":["material-ui","react","react-router","tailwind"],"latest_commit_sha":null,"homepage":"https://celadon-cactus-42acbb.netlify.app/","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/webdevsk.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-06-23T13:35:38.000Z","updated_at":"2023-07-16T09:36:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"ae7acaf1-7a00-4f70-9dc8-7c16a3f3f250","html_url":"https://github.com/webdevsk/react-todo-app","commit_stats":null,"previous_names":["webdevsk/react-todo-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2Freact-todo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2Freact-todo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2Freact-todo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdevsk%2Freact-todo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdevsk","download_url":"https://codeload.github.com/webdevsk/react-todo-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243988956,"owners_count":20379649,"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":["material-ui","react","react-router","tailwind"],"created_at":"2024-11-23T09:27:38.437Z","updated_at":"2025-10-09T04:09:42.615Z","avatar_url":"https://github.com/webdevsk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Replace these using search `repo_name`, `project_title`, `project_description`, view_demo_link --\u003e\n\u003c!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --\u003e\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\u003c!-- [![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url] --\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webdevsk/react-todo-app\"\u003e\n    \u003cimg src=\"github_assets/logo.png\" alt=\"Logo\" width=\"100\" height=\"100\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003eReact TODO App\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A TODO App based on React with dynamic Routing.\n    \u003cbr /\u003e\n\n  [**Explore the docs »**](https://github.com/webdevsk/react-todo-app)\n\n  [View Demo](https://celadon-cactus-42acbb.netlify.app/)\n  · [Report Bug](https://github.com/webdevsk/react-todo-app/issues)\n  · [Request Feature](https://github.com/webdevsk/react-todo-app/issues)\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\u003cbr /\u003e\n\n- [About The Project](#about-the-project)\n  - [Built With](#built-with)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Features](#features)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\n\u003cdiv align=\"center\"\u003e\n\n[![Product snapshot](github_assets/snapshot.png)](https://celadon-cactus-42acbb.netlify.app/)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\n- This is a simple TODO APP built with React.\n- It was built with handheld device accessibility in mind. Hence the bottom Input field.\n- It features dynamic routing and dynamic category using React Router.\n- Light, Dark and Auto theme. The auto theme follows system preferences.\n- Here's what users can expect from this APP:\n  - Create Category for different types of tasks.\n  - Create tasks for the respective category.\n  - Mark completed task as done.\n  - Bulk Mark all tasks as done.\n  - Delete task.\n  - Bulk delete completed tasks.\n  - Mark task as important.\n  - Important tasks get pinned to top.\n  - Users can visit site_url/Groceries and add tasks directly to a category named Groceries.\n  - Nice little rewarding animations when a task is completed. 😉\n\n\u003ch4\u003e⭐ Head over to the \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e section to dive deep into the problems I faced and how I solved them.\u003c/h4\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\n[![React][React]][React-url]  \n[![React-router][React-router]][React-router-url]  \n[![TailwindCSS][TailwindCSS]][Tailwind-url]  \n[![MUI][MUI]][MUI-url]  \n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n🌐 The site is already live at: [https://celadon-cactus-42acbb.netlify.app/](https://celadon-cactus-42acbb.netlify.app/)\n\nOR\n\n🖥️ You can test it on your local machine by following the steps below.\n\n### Prerequisites\n\n1. **Install** [NODE.JS](https://nodejs.org/en/download) and [Git](https://git-scm.com/downloads)\n1. Open your projects base folder and launch any **terminal** of your choice.\n1. Run this command:\n\n   ```sh\n   npm install npm@latest -g\n   ```\n\n### Installation\n\n\u003c!-- 1. Get a free API Key at [https://example.com](https://example.com) --\u003e\n1. Clone the repo\n\n    ```sh\n    git clone https://github.com/webdevsk/react-todo-app.git\n    ```\n\n1. Install NPM packages\n\n    ```sh\n    npm install\n    ```\n\n1. Run Dev server\n\n    ```js\n    npm run dev\n    ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Features\n\n\u003ctable\u003e\n    \u003ctr valign=\"bottom\"\u003e\n    \u003ctd\u003e\n    \u003ca href=\"#\"\u003e\u003cimg src=\"github_assets/snapshot-desktop.apng\" alt=\"Menu desktop view\"\u003e\u003c/a\u003e\n    \u003cp align=\"center\"\u003e\u003csmall\u003eDesktop\u003c/small\u003e\u003c/p\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n    \u003ca href=\"#\"\u003e\u003cimg src=\"github_assets/snapshot-mobile.apng\" alt=\"Menu mobile view\"\u003e\u003c/a\u003e\n    \u003cp align=\"center\"\u003e\u003csmall\u003eMobile\u003c/small\u003e\u003c/p\u003e\n    \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3\u003e⭐ Handheld accessible layout\u003c/h3\u003e\u003c/summary\u003e\n\n- The input field is placed at the bottom making it is easily reachable on handheld devices.\n- Unlike most other Todo Apps, it featues top to bottom (old to new) layout.\n- As you add new tasks, the newer tasks will appear at the bottom.\n- The page will scroll down automatically to keep newer tasks in focus.\n\n  \u003cdetails\u003e\n  \u003csummary\u003e\n  \u003cstrong\u003e⚒️ Here's a snippet of code on how I solved the scroll issue:\u003c/strong\u003e\n  \u003c/summary\u003e\n\n  ```jsx\n  const {tasks, category} = useLoaderData()\n\n  //Length of the task array before new task is added\n  const prevLength = useRef(tasks.length)\n\n  useEffect(() =\u003e {\n    // Run only when new task is added\n    if (prevLength.current \u003c tasks.length){\n      window.scrollTo({ left: 0, top: document.body.scrollHeight || document.documentElement.scrollHeight, behavior: \"smooth\" })\n    }\n    //Setting new task array length after new task is added\n    prevLength.current = tasks.length\n  }, [tasks])\n  ```\n  \n  \u003c/details\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3\u003e⭐ Dynamic Drawer Menu\u003c/h3\u003e\u003c/summary\u003e\n\n- Larger screens\n  - Side Drawer Menu can stay either Shown or Hidden based on user's preference.\n  - The shown/hidden state is persisted between browsing sessions.\n  - Clicking outside the menu will not close it.\n\n- Smaller screens (1400px or less)\n  - Side Drawer Menu will always be Hidden unless user opens it.\n  - Window size is consistently being monitored to check if the window goesbelow 1400px. If so the menu will hide automatically.\n  - Clicking outside the menu will close it.\n  \u003cdetails\u003e\n  \u003csummary\u003e\n  \u003cstrong\u003e⚒️ Here's a snippet of code on how I solved it:\u003c/strong\u003e\n  \u003c/summary\u003e\n\n  ```jsx\n  //Initial state. Defaults to false on smaller screens\n  const [open, setOpen] = useState(() =\u003e (\n    window.outerWidth \u003c= 1400\n    ? false\n    : 'drawerOpen' in localStorage\n    ? true\n    : false\n  ))\n\n  //Saves state in localStorage\n  useEffect(()=\u003e (\n    open \n    ? localStorage.setItem('drawerOpen', '1') \n    : localStorage.removeItem('drawerOpen')\n  ), [open])\n\n  //Enables overlay on smaller screens. Which blurs outside content and listens to touch events\n  const [overlay, setOverlay] = useState(() =\u003e window.outerWidth \u003c= 1400)\n\n  //Runs on window resize\n  useEffect (()=\u003e{\n    let currentWindowWidth = window.outerWidth\n\n    function handleWindowResize(){\n      //Run only when the horizontal width changes to avoid firing on keyboard popup on touch devices\n      if (window.outerWidth === currentWindowWidth) return\n      currentWindowWidth = window.outerWidth\n\n      if (window.outerWidth \u003c= 1400){\n        setOpen(false)\n        setOverlay(true)\n      } else {\n        setOverlay(false)\n      }\n    }\n    \n    window.addEventListener('resize', handleWindowResize)\n    return () =\u003e {\n      window.removeEventListener('resize', handleWindowResize)\n    }\n  }, [])\n  ```\n\n  \u003c/details\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3\u003e⭐ Create your own Categories\u003c/h3\u003e\u003c/summary\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"github_assets/dynamic-category.apng\" width=\"800px\"\u003e\n  \u003c/div\u003e\n  \u003cbr/\u003e\n\n- Click on the \"Add new category\" button and type your desired name for it.\n- Press Enter or click on the ✅ (tick) button.\n- You will be redirected to a new page where you can add tasks in this category.\n- Visit or Bookmark https://celadon-cactus-42acbb.netlify.app/School\n  - If you already had tasks in School category, the tasks will be listed. \n  - If you never had a School category, it will generate a new Category where you can add new tasks.\n  - You can write any strings in place of \"School\".\n  - If you want to add spaces or symbols in category name, rather create it from the Side Drawer Menu instead.\n- To save up space in Database/storage, A category won't be stored unless you have atleast 1 task in it.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3\u003e⭐ Bulk Operations\u003c/h3\u003e\u003c/summary\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"github_assets/bulk-action.apng\" width=\"800px\"\u003e\n  \u003c/div\u003e\n  \u003cbr/\u003e\n\n- Completed all tasks for today? Well, congratulations!!! The \"Mark all as completed\" button will be handy then.\n- No need to clutter the list with already complted tasks. The \"Delete All Completed\" button will make them go away.\n\n\u003c/details\u003e\n\nAnd many more handmade features, animations here and there...\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ROADMAP --\u003e\n\u003c!-- ## Roadmap\n\n- [ ] Feature 1\n- [ ] Feature 2\n- [ ] Feature 3\n    - [ ] Nested Feature\n\nSee the [open issues](https://github.com/webdevsk/react-todo-app/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n1. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n1. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n1. Push to the Branch (`git push origin feature/AmazingFeature`)\n1. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n## Contact\n\n[![Follow on GitHub][GitHub]](https://github.com/webdevsk)\n[![Follow on Linkedin][Linkedin]][Linkedin-url]\n\nProject Link: [https://github.com/webdevsk/react-todo-app](https://github.com/webdevsk/react-todo-app)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n\u003c!-- ## Acknowledgments\n\n* []()\n* []()\n* []()\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e --\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[Linkedin-url]: https://linkedin.com/in/webdevsk\n[GitHub]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\n[Linkedin]: https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\n[contributors-shield]: https://img.shields.io/github/contributors/webdevsk/react-todo-app.svg?style=for-the-badge\n[contributors-url]: https://github.com/webdevsk/react-todo-app/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/webdevsk/react-todo-app.svg?style=for-the-badge\n[forks-url]: https://github.com/webdevsk/react-todo-app/network/members\n[stars-shield]: https://img.shields.io/github/stars/webdevsk/react-todo-app.svg?style=for-the-badge\n[stars-url]: https://github.com/webdevsk/react-todo-app/stargazers\n[issues-shield]: https://img.shields.io/github/issues/webdevsk/react-todo-app.svg?style=for-the-badge\n[issues-url]: https://github.com/webdevsk/react-todo-app/issues\n[license-shield]: https://img.shields.io/github/license/webdevsk/react-todo-app.svg?style=for-the-badge\n[license-url]: https://github.com/webdevsk/react-todo-app/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[Next-url]: https://nextjs.org/\n[React]: https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-url]: https://reactjs.org/\n[TailwindCSS]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\n[Tailwind-url]: https://tailwindcss.com/\n[Bootstrap]: https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white\n[Bootstrap-url]: https://react-bootstrap.netlify.app/\n[SASS]: https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white\n[SASS-url]: https://sass-lang.com/\n[Chakra]: https://img.shields.io/badge/chakra-%234ED1C5.svg?style=for-the-badge\u0026logo=chakraui\u0026logoColor=white\n[Chakra-url]: https://chakra-ui.com/\n[MUI]: https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge\u0026logo=mui\u0026logoColor=white\n[MUI-url]: https://mui.com/\n[Styled Components]: https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge\u0026logo=styled-components\u0026logoColor=white\n[Styled-url]: https://www.styled-components.com/\n[React-router]: https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white\n[React-router-url]: https://reactrouter.com/\n[Redux]: https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white\n[Redux-url]: https://redux.js.org/\n[Three-js]: https://img.shields.io/badge/threejs-black?style=for-the-badge\u0026logo=three.js\u0026logoColor=white\n[Three-js-url]: https://threejs.org/\n[GSAP]: https://img.shields.io/badge/green%20sock-88CE02?style=for-the-badge\u0026logo=greensock\u0026logoColor=white\n[GSAP-url]: https://greensock.com/gsap/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdevsk%2Freact-todo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdevsk%2Freact-todo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdevsk%2Freact-todo-app/lists"}