{"id":19466693,"url":"https://github.com/patryk-majchrzak/todo_list_react","last_synced_at":"2026-04-13T00:10:46.230Z","repository":{"id":247488291,"uuid":"823577930","full_name":"Patryk-Majchrzak/todo_list_react","owner":"Patryk-Majchrzak","description":"Application which allows you to create list of things to do and organise your work. List items can be deleted and their status can be changed from not done to done and other way around. Check it out!","archived":false,"fork":false,"pushed_at":"2024-08-03T14:11:30.000Z","size":8067,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T04:13:15.841Z","etag":null,"topics":["flexbox","grid","hooks","i18next","javascript","localstorage","react-i18next","react-router","react-toolkit","reactjs","redux","redux-saga","styled-components"],"latest_commit_sha":null,"homepage":"https://patryk-majchrzak.github.io/todo_list_react/","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/Patryk-Majchrzak.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":"2024-07-03T09:48:09.000Z","updated_at":"2024-08-03T21:12:39.000Z","dependencies_parsed_at":"2024-11-10T18:31:14.850Z","dependency_job_id":"7b86ca13-8eae-49be-acc7-bcd0fa09e82b","html_url":"https://github.com/Patryk-Majchrzak/todo_list_react","commit_stats":null,"previous_names":["patryk-majchrzak/todo_list_react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patryk-Majchrzak%2Ftodo_list_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patryk-Majchrzak%2Ftodo_list_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patryk-Majchrzak%2Ftodo_list_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patryk-Majchrzak%2Ftodo_list_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Patryk-Majchrzak","download_url":"https://codeload.github.com/Patryk-Majchrzak/todo_list_react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240680543,"owners_count":19840263,"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":["flexbox","grid","hooks","i18next","javascript","localstorage","react-i18next","react-router","react-toolkit","reactjs","redux","redux-saga","styled-components"],"created_at":"2024-11-10T18:29:43.768Z","updated_at":"2026-04-13T00:10:45.798Z","avatar_url":"https://github.com/Patryk-Majchrzak.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# To-do List with react\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Description\nHi! Welcome to my todo list, where you can create your list of tasks that can help you organize your work. 😊 Below som information for users how to navigate through the website and information for developers about code itself. So, what are you waiting for? Click th link in the demo and try it out 😉\n\n## Details for users\n1. Website is available only in polish and in english. If you start the website for the first timee it will run in polish, however you can switch the languageby clicking one of the flags in \"Wybierz język\" (choose language)\n\n\u003cimg src=\"./for_readme/languageSelection.gif\"\u003e\n\n2. After starting the website you should see navigation with two subpages. Subpage \"zadania\" (tasks) should be selected and there should be three sections:\n- Dodaj nowe zadanie (Add new task) with place where you can wirte task you can add and button for adding it\n- Wyszukiwarka (Search section) which allows you to filter tasks by key words you can put in the input\n- Lista zadań (Tasks list) which will display tasks you added or if you filtered some in \"Wyszukiwarka\" section only tasks with key words will be displayed. If you enter the website for the first time, tasks list will be empty, however it will save tasks on your device and generate yor tasks list  \n\n\u003cimg src=\"for_readme/startingView.png\"\u003e\n\n3. You can add new task to your to-do list by selecting the input with \"Co jest do zrobienia?\" (What needs to be done) text and click button with \"Dodaj zadanie\" (add task). Task will go to section called \"lista zadań\" (tasks list)\n\n\u003cimg src=\"for_readme/addNewTaskAnimation.gif\"\u003e\n\n4. You can also click on \"Pobierz przykładowe zadania\" (download example tasks) button to geenerate 2 example tasks in tasks list. Button wil be disabed for 2 seconds and will change its text to \"Ładuję zadania\" (loading tasks). After loading tasks \"zrobuć coś\" (do something) and crossed out \"zrobić coś innego\" (do something else) should appear. \n\n\u003cimg src=\"for_readme/fetchExampleTasksAnimation.gif\"\u003e\n\nIf there will be any potential error during downloading example tasks, below message will be displayed\n\n\u003cimg src=\"for_readme/exampletasksError.png\"\u003e\n\n5. You can filter tasks in \"Wyszukiwarka\" by selecting input \"Szukaj zadania\" (search for task). Task will filter tasks and return only ones which have key words put in search input. Anything you search will be added to the URL, so it will be easy to for you to come back to tasks you were filtering (you can paste changed URL like in animation below). If you click on \"X\" sign in the search input all tasks will be displayed again \n\n\u003cimg src=\"for_readme/searchAnimation.gif\"\u003e\n\n6. You can select existing tasks by\n- clicking green button which changes tasks status from not done to done and from done to not done. Done tasks are crossed out and have \"✔\" icon inside of the button\n\n\u003cimg src=\"for_readme/toggleDoneAnimation.gif\"\u003e \n\n- clicking red button which removes task entirely\n\n\u003cimg src=\"for_readme/deleteTaskAnimation.gif\"\u003e\n\n7. You can mark all tasks as done by clicking \"ukończ wszystkie\" (finish all) you can mark all tasks as done\n\n\u003cimg src=\"for_readme/markAllDoneAnimation.gif\"\u003e\n\n8. You also can hide all tasks that are done by clicking \"Ukryj ukończone\" (hide done) which hides all done tasks and chcnges text into \"pokaż ukończone\" (show done). If you click on the text once again all done tasks will show up again\n\n\u003cimg src=\"for_readme/DisplayDoneAnimation.gif\"\u003e\n\n9. You can click on specific task to see its title and if it is done or not (options Ukończono: tak and Ukońcozno: nie means done: yes and done: no). You can then go back by clicking the arrow near the task title.\n\n\u003cimg src=\"for_readme/taskDetailsAnimation.gif\"\u003e\n\n10. You can click \"O autorze\" (about author) to see quick note about me with a photo\n\n\u003cimg src=\"for_readme/aboutAuthorAnimation.gif\"\u003e\n\n## Details for developers\n\n1. For styling website I used styled-components NPM library\n2. Whole application has been put into ThemeProvider and themes for various colors and breakpoints for max-width have been added \n3. App has alternative box model in GlobalStyle\n4. I used media queries to change how website will be displayed on various devices\n5. App downloads data from localStorage using axios library\n6. Hooks used:\n\nReact:\n- useState\n- useRef\n\nReact-redux:\n- useSelector\n- useDispatch\n\nReact-router:\n- useParams\n- useHistory\n- useLocation\n\nCustom hooks:\n- useGetQueryParameter\n- useReplaceQueryParameter\n7. App is using Redux, tasksSlice is using function create slice for feature called tasks. Then reducers from tasksSlice are going to ReduxStore and then pulled out in appropiate components. Therefore in Appview I don't need to give variables further to the components they are pulling it out from the Redux store.\n8. App is using react-router to create subpages and dynamically switch between them using HashRouter\n9. All side-effects are dealt with Redux-saga\n10. User-friendly loading and error messages have been added\n11. Libraries i18next and react-i18next used for language selector\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes.\\\nYou may also see any lint errors in the console.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can't go back!**\n\nIf you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.\n\nYou don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatryk-majchrzak%2Ftodo_list_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatryk-majchrzak%2Ftodo_list_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatryk-majchrzak%2Ftodo_list_react/lists"}