{"id":15598825,"url":"https://github.com/jofaval/react-todo-list","last_synced_at":"2026-04-09T02:31:35.836Z","repository":{"id":125618373,"uuid":"442561304","full_name":"jofaval/react-todo-list","owner":"jofaval","description":"A simple PWA To-Do list on React.","archived":false,"fork":false,"pushed_at":"2022-01-12T21:14:58.000Z","size":9642,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T12:15:00.232Z","etag":null,"topics":["jest","pwa","react","react-redux","react-testing-library","reactjs","redux","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://jofaval.github.io/react-todo-list/","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/jofaval.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-12-28T19:16:39.000Z","updated_at":"2022-01-11T03:16:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"365d83e3-39e2-40fb-abcd-2008680b87ad","html_url":"https://github.com/jofaval/react-todo-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jofaval/react-todo-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Freact-todo-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Freact-todo-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Freact-todo-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Freact-todo-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jofaval","download_url":"https://codeload.github.com/jofaval/react-todo-list/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jofaval%2Freact-todo-list/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31582604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"online","status_checked_at":"2026-04-09T02:00:06.848Z","response_time":112,"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":["jest","pwa","react","react-redux","react-testing-library","reactjs","redux","styled-components","typescript"],"created_at":"2024-10-03T01:41:26.631Z","updated_at":"2026-04-09T02:31:35.821Z","avatar_url":"https://github.com/jofaval.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# To-Do List with React #\n\nProject started as a playground and warmup for a technical interview (at the start).\n\n## Description\n\nThe basic idea is to provide a home screen with a list of tasks with a completition status, Mobile-First.\n\nCheck out the final product at [jofaval.github.io/react-todo-list](https://jofaval.github.io/react-todo-list)\n\n### Why?\n\nHave I not done a To-Do list before? yes, with react.js? yes I have, without it? we, *almost* all, have done it. But it's a good playground for a component structure testing.\n\n## Installation process\n\n### Pre-Requirements\n\n#### Browser\n\nIt's been tested with Mozilla Firefox, but you can use anything you'd like\n\n*This is what will be used, you don't need to configure it*\n\n#### Testing\n\n- `react-testing-library`\n- `jest`\n\n#### Libraries\n\n- `typescript`\n- `react.js`\n- `redux`\n- `styled-components`\n\n#### CI/CD\n\n- `Github Actions`\n\n### Guide\n\nIn the folder that you may want the project, execute the following command (on Git BASH if you're running a Windows)\n\nThis will clone (download) the repository locally on your device\n```shell\ngit clone https://github.com/jofaval/react-todo-list.git\n```\n\nThen you'll need to install the dependencies (if node.js is not installed, please do so before this step at, [node.js](https://nodejs.org/es/download/))\n```shell\ncd react-todo-list\nnpm install\n```\n\n## Deploy\n\nIt's all handled by Github Actions, to see the full configuration file, check out [branching.yml](./.github/workflows/branching.yml)\n\nIt publishes the build with Github Pages, deployed at [jofaval.github.io/react-todo-list](https://jofaval.github.io/react-todo-list)\n\n## Features\n\n### Main\n\n- **CRUD** (**C**reate/**R**ead/**U**pdate/**D**elete) of Tasks\n- Complete status toggler, you can mark as completed, and toggle their visibility but completetion status\n- Search bar by title to find the right task(s)\n- Save the tasks on your device (browser/phone)\n- PWA, so you can install it anywhere you have a browser\n- Responsive design, works on phone/tablet/browser\n\n### Secondary\n\n- Make the APP work offline\n- Share the same content between different tabs\n- A more detailed task (description, category)\n- Saving create/update timestamps to display the last updated text\n\n## Design Pattern\n\nDesign with mobile-first in mind,\n\n1. Functionality is always the first priority, there's no compose if there's no product to which apply it to. It's not a design concept, but it's worth keeping in mind\n2. UX goes before the UI, a simple, native, uggly button can do if it's where it's supposed to be. UX may be the most important part of a feature (visually-wise)\n3. UI goes last, it's usually a matter of browsing to get a moodboard (even mentally) of what you're looking for.\n\n## Tech Stack\n\nMade with cra-template pwa typescript\n\n```shell\nnpx create-react-app my-app --template cra-template-pwa-typescript\n```\n\n### Frontend\n\n- **TypeScript**\n  - The static typed version of JavaScript, good for preventing errors before execution, and easier usage (since you should always know exactly what you're working with!)\n- **react.js**\n  - One of the most used Frontend Libraries, and a perfect fit for small/medium projects such as this with a smaller team (just me).\n- **redux stack**\n  - **redux** - Is the go to for state management between components (and a better fit for the actual use-case)\n  - **react-redux** - **redux** configured for **react.js**\n  - **redux-persist** - Allows for the **redux** state to be locally saved (no matter the device)\n  - **redux-thunk** - Implements interacion with the **redux** store\n  - **redux-state-sync** - Allows for the **redux** state to be shared between tabs on the same device.\n- **styled-components**\n  - Cleaner styling for components with inheritance\n**jest + react-testing-library**\n  - The full package for a complete Frontend testing experience\n\n### CI/CD\n\n- **Github Actions**\n  - A free CI/CD, and easy to configure for an open github repo, it's a new trend and with tons of community contributions.\n\n## Testing\n\nThe tests will be executed BEFORE every deploy, but it's a good practice to test it before comitting/pushing, and ALWAYS after some system-breaking refactoring\n\n### How to run the tests?\n\n```shell\nnpm run test\n```\n\n## How to use?\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 test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\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## Credits\n- [Ibrahima Ndaw's How to Use Redux in Your React TypeScript App](https://www.freecodecamp.org/news/how-to-use-redux-in-your-react-typescript-app/)\n- [Redux State Sync's Official Repo](https://dev.to/cassiolacerda/with-redux-3g41)\n- React's and the Official packages' documentation\n- StackOverflow\n- Support by Github Pages and Github Actions","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjofaval%2Freact-todo-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjofaval%2Freact-todo-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjofaval%2Freact-todo-list/lists"}