{"id":13338026,"url":"https://github.com/KarinaOlenina/todo-react-app","last_synced_at":"2025-03-11T08:32:30.712Z","repository":{"id":111213686,"uuid":"572494321","full_name":"KarinaOlenina/todo-react-app","owner":"KarinaOlenina","description":"Web application \"ToDo\" with React.","archived":false,"fork":false,"pushed_at":"2024-01-07T21:58:33.000Z","size":39351,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-23T20:12:09.308Z","etag":null,"topics":["axios","axios-react","html","javascript","react","react-router","reactjs","scss","todo","web"],"latest_commit_sha":null,"homepage":"","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/KarinaOlenina.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":"2022-11-30T11:54:28.000Z","updated_at":"2023-01-07T17:47:41.000Z","dependencies_parsed_at":"2024-10-23T20:12:25.851Z","dependency_job_id":null,"html_url":"https://github.com/KarinaOlenina/todo-react-app","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/KarinaOlenina%2Ftodo-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarinaOlenina%2Ftodo-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarinaOlenina%2Ftodo-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarinaOlenina%2Ftodo-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KarinaOlenina","download_url":"https://codeload.github.com/KarinaOlenina/todo-react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243000952,"owners_count":20219778,"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":["axios","axios-react","html","javascript","react","react-router","reactjs","scss","todo","web"],"created_at":"2024-07-29T19:15:29.273Z","updated_at":"2025-03-11T08:32:28.837Z","avatar_url":"https://github.com/KarinaOlenina.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Todo React App\n\u003cdiv align=\"center\"\u003e\n\n![GitHub contributors](https://img.shields.io/github/contributors/KarinaOlenina/todo-react-app?style=for-the-badge\u0026color=blue)\n![GitHub top language](https://img.shields.io/github/languages/top/KarinaOlenina/todo-react-app?style=for-the-badge\u0026color=aqua)\n![GitHub last commit](https://img.shields.io/github/last-commit/KarinaOlenina/todo-react-app?style=for-the-badge\u0026color=blue)\n![Github Repo Size](https://img.shields.io/github/repo-size/KarinaOlenina/todo-react-app?style=for-the-badge\u0026color=aqua)\n\n\u003c/div\u003e\n\n\n## 📖 Overview\n\nThe TODO Application is an interactive and user-friendly task management app that enables users to efficiently organize their responsibilities, create new tasks, edit them, and track the progress of their completion.\n\n## 🔥Key Features\n\n1. **Task Creation:**\n    - Add new tasks with defined names, descriptions, and color codes.\n\n2. **Editing and Deleting Tasks:**\n    - User-friendly interface for editing existing tasks or deleting them when necessary.\n\n3. **Marking Completed Tasks:**\n    - Mark tasks as completed for clear progress tracking and task organization.\n\n4. **Color Labels for Categories:**\n    - Define task categories using color-coded labels for easy identification and filtering.\n\n5. **Category List (Task List):**\n    - Convenient display of the task list and their categories for quick access and navigation.\n\n![todo-gif.gif](public%2Ftodo-gif.gif)\n\n## 🧩Technical Details\n\n1. **Technologies Used:**\n    - Implemented on the React platform using the `react-router-dom` library for routing.\n    - Utilized `axios` for server interaction, ensuring data storage and retrieval.\n\n2. **Design and UI/UX:**\n    - Modern and intuitive design for maximum user convenience.\n    - Use of color labels for categories and creating an aesthetically pleasing atmosphere.\n\n3. **Security:**\n    - Implemented crucial security measures such as input data validation and processing to prevent potential attacks.\n\n4. **Scalability and Extensibility:**\n    - Architecturally flexible structure, allowing for easy expansion and modification of the application's functionality.\n\nThe TODO Application helps users efficiently manage their tasks, providing tools for easy creation, tracking, and completion of tasks.\n## 🛠 Getting Started\n\nTo use the application, follow these steps:\n\n\u003e First, make sure you have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your computer.\n\n### 📔 Clone the repository:\n\nHTTPS:\n```bush\nhttps://github.com/KarinaOlenina/todo-react-app.git\n```\n\n### 📦 Install the project dependencies by running:\n```bush\nnpm install\n```\n\n### 💻 Install JSON-Server\n```bush\nnpm i json-server\n```\n\n### 🚀 Start app:\n```bush\nnpm start\n```\n\n### ☁️ Start json-server:\nIn addition to the application, you need to run a fake server to store data about words and results. You can do this by running:\n```bush\nnpm run json-server\n```\n\nThis will start a JSON server on  [http://localhost:3001](http://localhost:3001).\n\nNow you can access the application in your web browser at [http://localhost:3000](http://localhost:3000).\n\nCreate word pairs, practice, and review your results using the different modes available in the application.\n\n## ‍🔧 Technologies Used\n\n- \u003cb\u003eReact\u003c/b\u003e: A JavaScript library for building user interfaces.\n- \u003cb\u003ereact-router-dom\u003c/b\u003e: A library for adding routing and navigation to your React applications.\n- \u003cb\u003eaxios\u003c/b\u003e: A promise-based HTTP client for making requests to your JSON server or other APIs.\n- \u003cb\u003eJSON Server\u003c/b\u003e: A fake REST API to store and retrieve data.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKarinaOlenina%2Ftodo-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKarinaOlenina%2Ftodo-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKarinaOlenina%2Ftodo-react-app/lists"}