├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── index.html └── manifest.json ├── src ├── setupTests.js ├── App.test.js ├── index.js ├── reportWebVitals.js ├── index.css ├── components │ └── Navbar.js ├── App.js ├── pages │ ├── Settings.js │ ├── Dashboard.js │ └── Tasks.js ├── context │ └── TaskContext.js ├── logo.svg └── App.css ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NaveenKumar71/Task-Management-App/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NaveenKumar71/Task-Management-App/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NaveenKumar71/Task-Management-App/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Task Management App 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | 14 | h1, h2, h3, h4, h5, h6 { 15 | margin-top: 0; 16 | } 17 | 18 | button { 19 | cursor: pointer; 20 | } -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | function Navbar() { 5 | return ( 6 | 19 | ); 20 | } 21 | 22 | export default Navbar; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 3 | import Navbar from './components/Navbar'; 4 | import Dashboard from './pages/Dashboard'; 5 | import Tasks from './pages/Tasks'; 6 | import Settings from './pages/Settings'; 7 | import { TaskProvider } from './context/TaskContext'; 8 | import './App.css'; 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 |
15 | 16 |
17 | 18 | } /> 19 | } /> 20 | } /> 21 | 22 |
23 |
24 | 25 | 26 | ); 27 | } 28 | 29 | export default App; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/dom": "^10.4.0", 7 | "@testing-library/jest-dom": "^6.6.3", 8 | "@testing-library/react": "^16.2.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "chart.js": "^4.4.8", 11 | "date-fns": "^4.1.0", 12 | "react": "^19.1.0", 13 | "react-beautiful-dnd": "^13.1.1", 14 | "react-chartjs-2": "^5.3.0", 15 | "react-dom": "^19.1.0", 16 | "react-router-dom": "^7.4.1", 17 | "react-scripts": "5.0.1", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/Settings.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { TaskContext } from '../context/TaskContext'; 3 | 4 | function Settings() { 5 | const { darkMode, setDarkMode } = useContext(TaskContext); 6 | 7 | return ( 8 |
9 |

Settings

10 |
11 |

Theme

12 |
13 | 14 |
15 | setDarkMode(!darkMode)} 19 | id="dark-mode-toggle" 20 | /> 21 | 22 |
23 |
24 |
25 |
26 |

About

27 |

Task Management App v1.0.0

28 |

A simple and efficient way to manage your daily tasks.

29 |
30 |
31 |

Contact

32 |

For support or feedback, please email: support@taskapp.com

33 |
34 |
35 | ); 36 | } 37 | 38 | export default Settings; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Task Management App 2 | 3 | This project is a simple **Task Management App** built using **React.js**. 4 | 5 | ## Tech Stack 6 | - React.js 7 | - HTML 8 | - CSS 9 | - JavaScript 10 | 11 | ## Getting Started 12 | 13 | ### Prerequisites 14 | Ensure you have **Node.js** and **npm** installed on your system. You can check by running: 15 | ```bash 16 | node -v 17 | npm -v 18 | ``` 19 | If not installed, download them from [Node.js Official Website](https://nodejs.org/). 20 | 21 | ### Installation 22 | 1. Clone the repository: 23 | ```bash 24 | git clone https://github.com/NaveenKumar71/Task-Management-App-.git 25 | ``` 26 | 2. Navigate into the project directory: 27 | ```bash 28 | cd Task-Management-App 29 | ``` 30 | 3. Install dependencies: 31 | ```bash 32 | npm install 33 | ``` 34 | 35 | ## Available Scripts 36 | 37 | In the project directory, you can run: 38 | 39 | ### `npm start` 40 | Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 41 | The page reloads when you make changes, and lint errors are displayed in the console. 42 | 43 | ### `npm run build` 44 | Builds the app for production in the `build` folder. It optimizes React for best performance. 45 | 46 | ### `npm test` 47 | Launches the test runner in interactive watch mode. 48 | 49 | ### `npm run eject` 50 | **Warning:** This is a one-way operation. Once you `eject`, you can't go back! 51 | 52 | ## Features 53 | - Add, edit, and delete tasks 54 | - Mark tasks as completed 55 | - No sign-up required 56 | 57 | ## Deployment 58 | Refer to the [React Deployment Guide](https://facebook.github.io/create-react-app/docs/deployment) for deployment options. 59 | 60 | ## Learn More 61 | To learn more about React, visit the [React Documentation](https://reactjs.org/). 62 | 63 | ## License 64 | This project is licensed under the MIT License. 65 | 66 | --- 67 | ### 🚀 Happy Coding! 🎯 -------------------------------------------------------------------------------- /src/context/TaskContext.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState, useEffect } from 'react'; 2 | 3 | export const TaskContext = createContext(); 4 | 5 | export const TaskProvider = ({ children }) => { 6 | const [tasks, setTasks] = useState(() => { 7 | const savedTasks = localStorage.getItem('tasks'); 8 | return savedTasks ? JSON.parse(savedTasks) : []; 9 | }); 10 | const [darkMode, setDarkMode] = useState(() => { 11 | const savedMode = localStorage.getItem('darkMode'); 12 | return savedMode ? JSON.parse(savedMode) : false; 13 | }); 14 | 15 | useEffect(() => { 16 | localStorage.setItem('tasks', JSON.stringify(tasks)); 17 | }, [tasks]); 18 | 19 | useEffect(() => { 20 | localStorage.setItem('darkMode', JSON.stringify(darkMode)); 21 | if (darkMode) { 22 | document.body.classList.add('dark-mode'); 23 | } else { 24 | document.body.classList.remove('dark-mode'); 25 | } 26 | }, [darkMode]); 27 | 28 | const addTask = (task) => { 29 | setTasks([...tasks, { ...task, id: Date.now(), completed: false }]); 30 | }; 31 | 32 | const toggleTask = (id) => { 33 | setTasks(tasks.map(task => 34 | task.id === id ? { ...task, completed: !task.completed } : task 35 | )); 36 | }; 37 | 38 | const deleteTask = (id) => { 39 | setTasks(tasks.filter(task => task.id !== id)); 40 | }; 41 | 42 | const editTask = (id, updatedTask) => { 43 | setTasks(tasks.map(task => 44 | task.id === id ? { ...task, ...updatedTask } : task 45 | )); 46 | }; 47 | 48 | const reorderTasks = (startIndex, endIndex) => { 49 | const newTasks = Array.from(tasks); 50 | const [removed] = newTasks.splice(startIndex, 1); 51 | newTasks.splice(endIndex, 0, removed); 52 | setTasks(newTasks); 53 | }; 54 | 55 | return ( 56 | 66 | {children} 67 | 68 | ); 69 | }; -------------------------------------------------------------------------------- /src/pages/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { TaskContext } from '../context/TaskContext'; 3 | import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'; 4 | import { Pie, Bar } from 'react-chartjs-2'; 5 | 6 | ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement); 7 | 8 | function Dashboard() { 9 | const { tasks } = useContext(TaskContext); 10 | 11 | const completedTasks = tasks.filter(task => task.completed).length; 12 | const pendingTasks = tasks.length - completedTasks; 13 | 14 | const pieData = { 15 | labels: ['Completed', 'Pending'], 16 | datasets: [{ 17 | data: [completedTasks, pendingTasks], 18 | backgroundColor: ['#4CAF50', '#FF5722'], 19 | }] 20 | }; 21 | 22 | const priorityData = { 23 | labels: ['High', 'Medium', 'Low'], 24 | datasets: [{ 25 | label: 'Tasks by Priority', 26 | data: [ 27 | tasks.filter(task => task.priority === 'high').length, 28 | tasks.filter(task => task.priority === 'medium').length, 29 | tasks.filter(task => task.priority === 'low').length, 30 | ], 31 | backgroundColor: ['#f44336', '#ff9800', '#4caf50'], 32 | }] 33 | }; 34 | 35 | return ( 36 |
37 |

Dashboard

38 |
39 |
40 |

Total Tasks

41 |

{tasks.length}

42 |
43 |
44 |

Completed Tasks

45 |

{completedTasks}

46 |
47 |
48 |

Pending Tasks

49 |

{pendingTasks}

50 |
51 |
52 |
53 |
54 |

Task Status

55 | 56 |
57 |
58 |

Tasks by Priority

59 | 60 |
61 |
62 |
63 | ); 64 | } 65 | 66 | export default Dashboard; -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/Tasks.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react'; 2 | import { TaskContext } from '../context/TaskContext'; 3 | import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; 4 | import { format, isValid, parseISO } from 'date-fns'; 5 | 6 | function Tasks() { 7 | const { tasks, addTask, toggleTask, deleteTask, editTask, reorderTasks } = useContext(TaskContext); 8 | const [newTask, setNewTask] = useState({ 9 | title: '', 10 | description: '', 11 | priority: 'medium', 12 | dueDate: format(new Date(), 'yyyy-MM-dd') 13 | }); 14 | const [editingTask, setEditingTask] = useState(null); 15 | const [isFormVisible, setIsFormVisible] = useState(false); 16 | const [filter, setFilter] = useState('all'); 17 | 18 | // ✅ Motivational quotes logic inside component 19 | const motivationalQuotes = [ 20 | "Stay focused and never give up.", 21 | "Your only limit is your mind.", 22 | "Push yourself, because no one else is going to do it for you.", 23 | "Dream it. Wish it. Do it.", 24 | "Don’t watch the clock; do what it does — keep going.", 25 | "Great things never come from comfort zones.", 26 | "Success doesn’t come to you. You go to it.", 27 | "Believe in yourself and all that you are.", 28 | ]; 29 | 30 | const [quoteIndex, setQuoteIndex] = useState(0); 31 | 32 | useEffect(() => { 33 | const interval = setInterval(() => { 34 | setQuoteIndex(prevIndex => (prevIndex + 1) % motivationalQuotes.length); 35 | }, 3000); 36 | 37 | return () => clearInterval(interval); 38 | }, []); 39 | 40 | const formatDate = (dateString) => { 41 | try { 42 | const date = parseISO(dateString); 43 | if (isValid(date)) { 44 | return format(date, 'MMM dd, yyyy'); 45 | } 46 | return 'No due date'; 47 | } catch { 48 | return 'No due date'; 49 | } 50 | }; 51 | 52 | const handleSubmit = (e) => { 53 | e.preventDefault(); 54 | if (editingTask) { 55 | editTask(editingTask.id, newTask); 56 | setEditingTask(null); 57 | } else { 58 | addTask(newTask); 59 | } 60 | setNewTask({ 61 | title: '', 62 | description: '', 63 | priority: 'medium', 64 | dueDate: format(new Date(), 'yyyy-MM-dd') 65 | }); 66 | setIsFormVisible(false); 67 | }; 68 | 69 | const startEdit = (task) => { 70 | setEditingTask(task); 71 | setNewTask({ 72 | title: task.title, 73 | description: task.description, 74 | priority: task.priority, 75 | dueDate: task.dueDate || format(new Date(), 'yyyy-MM-dd') 76 | }); 77 | setIsFormVisible(true); 78 | }; 79 | 80 | const handleDragEnd = (result) => { 81 | if (!result.destination) return; 82 | reorderTasks(result.source.index, result.destination.index); 83 | }; 84 | 85 | const filteredTasks = tasks.filter(task => { 86 | switch(filter) { 87 | case 'completed': 88 | return task.completed; 89 | case 'pending': 90 | return !task.completed; 91 | default: 92 | return true; 93 | } 94 | }); 95 | 96 | return ( 97 |
98 |
99 |

Tasks

100 |
101 | 110 | 116 |
117 |
118 | 119 |
123 | setNewTask({ ...newTask, title: e.target.value })} 128 | required 129 | /> 130 |