Scribd
Upload
26 views

Project_TaskManagementSystem_195389

Uploaded by

sampannapiya13
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

Project_TaskManagementSystem_195389

Uploaded by

sampannapiya13
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Project: Task Management System

Objective: To build a fully functional front-end Task Management System using React. This
app will allow users to manage their daily tasks, set priorities, and organize tasks into
projects. The current implementation will store all data locally, and students will later
integrate it with a Node.js backend to persist data and handle user authentication.

Task Management System: Front-End Specifications


Features:

1. Dashboard
○ A summary of all tasks categorized by status (e.g., To Do, In Progress,
Completed).
○ Display task counts and upcoming deadlines.
○ Search bar to filter tasks.
2. Task Management
○ Create Task: A form to add new tasks with fields for task name, description,
due date, priority (Low, Medium, High), and status (To Do, In Progress,
Completed).
○ Edit Task: Ability to update task details.
○ Delete Task: Remove tasks from the list.
○ Task List: Display all tasks with sorting and filtering options.
3. Project Management
○ Create Project: Add a new project with a name and description.
○ View Project Tasks: Display tasks associated with a specific project.
○ Project List: Display all projects with options to view, edit, or delete.
4. User Interface
○ Navigation Bar: Links to Dashboard, Tasks, Projects, and Settings.
○ Responsive Design: The app should be fully responsive, adjusting to
different screen sizes.
○ Dark Mode: Toggle between dark and light themes using Context API.

Technical Requirements:

● State Management: Use React's useState and useReducer to manage local


state.
● Routing: Implement routing using React Router for navigating between Dashboard,
Tasks, Projects, and Settings pages.
● Context API: Use Context API for managing global state, such as theme settings
and user preferences.
● Performance Optimization: Implement useMemo and useCallback to optimize
performance where necessary.
● Custom Hooks: Create custom hooks for managing repetitive logic (e.g., handling
form inputs, sorting tasks).

Future Backend Integration with Node.js:


Once students have completed the front-end app, they will later:
1. Set Up a Node.js/Express Backend:
○ Create a RESTful API for managing tasks and projects.
○ Implement user authentication and authorization using JWT.
○ Use a database (e.g., MongoDB) to persist tasks, projects, and user data.
2. Connect Front-End to Back-End:
○ Replace local state management with API calls using Axios or Fetch.
○ Implement CRUD operations (Create, Read, Update, Delete) by interacting
with the backend API.
○ Handle user sessions and store tokens using local storage or cookies.

Submission Guidelines:
● Initial Submission (Front-End Only):
○ Students will submit the complete front-end React application before moving
on to the backend integration.
● Final Submission (With Node.js Integration):
○ After learning Node.js, students will integrate the front-end with the Node.js
backend and submit the final version.

Evaluation Criteria:
● Front-End:
○ Proper use of React concepts and best practices.
○ UI/UX design and responsiveness.
○ Clean, well-documented code.
● Back-End Integration (Later):
○ Successful connection between front-end and back-end.
○ Functionality of CRUD operations.
○ Security and error handling.

You might also like