{"id":29245786,"url":"https://github.com/arnobt78/taskmate-to-do--react-fundamental-project-21","last_synced_at":"2025-07-03T22:38:16.831Z","repository":{"id":254517367,"uuid":"846783907","full_name":"arnobt78/Taskmate-To-Do--React-Fundamental-Project-21","owner":"arnobt78","description":"Taskmate is a simple React project where you can add a todo list, edit it, delete it, and also change the theme of the page using a local database.","archived":false,"fork":false,"pushed_at":"2025-07-01T00:20:48.000Z","size":381,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T01:28:34.564Z","etag":null,"topics":["css","html","json","react","react-bootstrap","react-hooks","react-router-dom","reactjs"],"latest_commit_sha":null,"homepage":"https://taskmate-arnob.netlify.app","language":"CSS","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/arnobt78.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,"zenodo":null}},"created_at":"2024-08-24T00:31:30.000Z","updated_at":"2025-07-01T00:45:55.000Z","dependencies_parsed_at":"2024-12-01T13:35:34.376Z","dependency_job_id":"ada0817a-9cdf-47e9-bdea-eb7271d0417c","html_url":"https://github.com/arnobt78/Taskmate-To-Do--React-Fundamental-Project-21","commit_stats":null,"previous_names":["arnobt78/taskmate","arnobt78/taskmate--reactjs","arnobt78/taskmate-reactpage","arnobt78/taskmate-to-do--react"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Taskmate-To-Do--React-Fundamental-Project-21","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTaskmate-To-Do--React-Fundamental-Project-21","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTaskmate-To-Do--React-Fundamental-Project-21/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTaskmate-To-Do--React-Fundamental-Project-21/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTaskmate-To-Do--React-Fundamental-Project-21/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Taskmate-To-Do--React-Fundamental-Project-21/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTaskmate-To-Do--React-Fundamental-Project-21/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"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":["css","html","json","react","react-bootstrap","react-hooks","react-router-dom","reactjs"],"created_at":"2025-07-03T22:38:15.340Z","updated_at":"2025-07-03T22:38:16.796Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Taskmate - React To-Do App 📝\n\n\u003cimg width=\"1275\" alt=\"Screenshot 2024-08-25 at 07 01 05\" src=\"https://github.com/user-attachments/assets/37019d27-7829-45d6-8e41-7b4253bbb8c9\"\u003e\n\n---\n\n## Project Summary\n\nTaskmate is a modern, feature-rich To-Do list application built using React. It empowers users to add, edit, delete, and manage their daily tasks, with the added ability to toggle between light and dark themes. Built for both learning and productivity, Taskmate leverages local storage for persistence and is styled using TailwindCSS and Flowbite for a beautiful, responsive interface.\n\nWhether you are new to React or looking for a practical project example, Taskmate offers a hands-on experience with core React concepts, component-based architecture, state management, routing, and more.\n\n- **Live-Demo:** [https://taskmate-arnob.netlify.app/](https://taskmate-arnob.netlify.app/)\n\n---\n\n## Table of Contents\n\n- [Project Summary](#project-summary)\n- [Features](#features)\n- [Technology Stack](#technology-stack)\n- [Project Structure](#project-structure)\n- [Setup \u0026 Installation](#setup--installation)\n- [Available Scripts](#available-scripts)\n- [Functionality \u0026 Workflow](#functionality--workflow)\n- [Components Overview](#components-overview)\n- [API \u0026 Routing](#api--routing)\n- [Learning and Teaching Guide](#learning-and-teaching-guide)\n- [Example Usage \u0026 Scripts](#example-usage--scripts)\n- [Keywords](#keywords)\n- [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- Add, edit, delete tasks (To-Dos)\n- Toggle between light and dark themes\n- Data persistence using local storage\n- Responsive UI with TailwindCSS and Flowbite\n- React Router for navigation\n- Clean, modular codebase ideal for learning\n\n---\n\n## Technology Stack\n\n- **React** (via Create React App)\n- **TailwindCSS** (utility-first CSS framework)\n- **Flowbite** (UI component library for Tailwind)\n- **React Router DOM** (routing)\n- **LocalStorage API** (for task persistence)\n- **Node.js \u0026 npm** (environment \u0026 package management)\n\n---\n\n## Project Structure\n\nTypical structure (assuming default Create React App plus custom components):\n\n```\nTaskmate-To-Do--React/\n├── public/\n│   ├── index.html\n│   └── ...\n├── src/\n│   ├── components/\n│   │   ├── TodoList.js\n│   │   ├── TodoItem.js\n│   │   ├── ThemeToggle.js\n│   │   └── ...\n│   ├── App.js\n│   ├── index.js\n│   ├── App.css\n│   └── ...\n├── package.json\n├── tailwind.config.js\n├── README.md\n└── ...\n```\n\n\u003e **Note:** The exact file/folder names may differ; check your `src` directory for details.\n\n---\n\n## Setup \u0026 Installation\n\n### Prerequisites\n\n- **Node.js**: Install from [nodejs.org](https://nodejs.org/en/)\n- **npm**: Comes bundled with Node.js\n\n### 1. Clone the repository\n\n```sh\ngit clone https://github.com/arnobt78/Taskmate-To-Do--React.git\ncd Taskmate-To-Do--React\n```\n\n### 2. Install project dependencies\n\n```sh\nnpm install\n```\n\n### 3. Install React Router\n\n```sh\nnpm install react-router-dom\n```\n\u003e [React Router Documentation](https://reactrouter.com/en/main)\n\n### 4. Install TailwindCSS\n\nFollow the official instructions:  \n[https://tailwindcss.com/docs/installation](https://tailwindcss.com/docs/installation)\n\n### 5. Install Flowbite (TailwindCSS Framework)\n\nFollow the official instructions:  \n[https://flowbite.com/docs/getting-started/quickstart/](https://flowbite.com/docs/getting-started/quickstart/)\n\n---\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in development mode.  \nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.  \nThe page will reload with changes, and lint errors will appear in the console.\n\n---\n\n### `npm test`\n\nLaunches the test runner in interactive watch mode.  \nSee [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more info.\n\n---\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.  \nOptimizes React for best performance and minifies the output.\n\n---\n\n### `npm run eject`\n\n**Note:** This is a one-way operation. Once you eject, you can't go back!  \nCopies all configuration files and dependencies into your project, giving you full control.\n\n---\n\n## Functionality \u0026 Workflow\n\n### How It Works\n\n1. **Add Task**:  \n   Enter a task in the input field and submit. The task appears in the list below.\n\n2. **Edit Task**:  \n   Click the edit icon/button next to a task to modify its text and save changes.\n\n3. **Delete Task**:  \n   Click the delete icon/button to remove a task from the list.\n\n4. **Theme Toggle**:  \n   Use the theme toggle button to switch between light and dark modes. The preference is saved locally.\n\n5. **Persistence**:  \n   All tasks and theme preferences are saved in your browser's local storage, so they persist after reloading or closing the browser.\n\n---\n\n## Components Overview\n\n- **App.js**: Root component. Handles layout, routing, and global state.\n- **TodoList.js**: Displays the list of tasks. Manages adding, editing, and deleting.\n- **TodoItem.js**: Renders each individual task with edit/delete controls.\n- **ThemeToggle.js**: Switches between light and dark themes.\n- **Other Components**: You may have modals, notification components, or others for enhanced UX.\n\n---\n\n## API \u0026 Routing\n\n- **API**: No external API—data is managed locally via localStorage.\n- **Routing**:  \n  Implemented with `react-router-dom` for multi-page navigation (e.g., About, Home, etc.).\n\n**Example:**\n```jsx\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\n\u003cRouter\u003e\n  \u003cSwitch\u003e\n    \u003cRoute path=\"/\" exact component={Home} /\u003e\n    \u003cRoute path=\"/about\" component={About} /\u003e\n    {/* Add more routes as needed */}\n  \u003c/Switch\u003e\n\u003c/Router\u003e\n```\n\n---\n\n## Learning and Teaching Guide\n\nThis project demonstrates:\n\n- **React fundamentals**: components, props, state, hooks\n- **Component-based architecture**: each logical unit in its own file\n- **Persistent state with LocalStorage**\n- **Styling with TailwindCSS**: utility-first, responsive design\n- **Reusable UI components with Flowbite**\n- **Routing with React Router**\n- **Best practices**: folder structure, code organization, and more\n\n**Perfect for:**\n- Beginners learning React\n- Demonstrating CRUD operations\n- Showcasing modern frontend workflow\n\n---\n\n## Example Usage \u0026 Scripts\n\n### Add a Task (Example Code)\n```jsx\nconst [tasks, setTasks] = useState([]);\n\nfunction addTask(taskText) {\n  const newTask = { id: Date.now(), text: taskText, completed: false };\n  setTasks([...tasks, newTask]);\n  localStorage.setItem('tasks', JSON.stringify([...tasks, newTask]));\n}\n```\n---\n\n### Edit a Task (Example Code)\n```jsx\nfunction editTask(id, newText) {\n  const updatedTasks = tasks.map(task =\u003e\n    task.id === id ? { ...task, text: newText } : task\n  );\n  setTasks(updatedTasks);\n  localStorage.setItem('tasks', JSON.stringify(updatedTasks));\n}\n```\n---\n\n### Delete a Task (Example Code)\n```jsx\nfunction deleteTask(id) {\n  const updatedTasks = tasks.filter(task =\u003e task.id !== id);\n  setTasks(updatedTasks);\n  localStorage.setItem('tasks', JSON.stringify(updatedTasks));\n}\n```\n---\n\n### Theme Toggle (Example Code)\n```jsx\nconst [darkMode, setDarkMode] = useState(false);\n\nfunction toggleTheme() {\n  setDarkMode(!darkMode);\n  localStorage.setItem('theme', !darkMode ? 'dark' : 'light');\n}\n```\n---\n\n## Keywords\n\n- React\n- To-Do App\n- CRUD\n- LocalStorage\n- TailwindCSS\n- Flowbite\n- React Router\n- Theme Toggle\n- Component-based Architecture\n- Web Development\n\n---\n\n## Conclusion\n\nTaskmate is a practical, easy-to-understand project for learning and sharing core React concepts, modern CSS, and essential web development patterns. Explore, modify, and expand it as you wish!\n\n---\n\n## Additional Resources\n\n- [Create React App Documentation](https://facebook.github.io/create-react-app/docs/getting-started)\n- [React Documentation](https://reactjs.org/)\n- [TailwindCSS Docs](https://tailwindcss.com/docs/installation)\n- [Flowbite Docs](https://flowbite.com/docs/)\n- [React Router Docs](https://reactrouter.com/en/main)\n\n---\n\n## Happy Coding! 🎉\n\nThank you for using and sharing Taskmate.  \nFeel free to contribute or provide feedback!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Ftaskmate-to-do--react-fundamental-project-21","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Ftaskmate-to-do--react-fundamental-project-21","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Ftaskmate-to-do--react-fundamental-project-21/lists"}