Task Manager

Task Manager is a browser-based task management application developed while studying React through the React for Beginners course by Felipe Rocha • Full Stack Club).

The project puts fundamental React concepts into practice through a working interface for creating and managing tasks. It is both a learning project and a portfolio artifact that documents the implementation completed during the course.

Features

• Add tasks with a title and description
• Validate that a task title is not empty
• Mark tasks as completed or incomplete
• Delete tasks
• Display an empty state when no tasks exist
• Persist the task list in the browser with localStorage
• Open a separate details page showing a task's title, description, and completion status
• Navigate between views with React Router and pass task details through URL search parameters

Technologies

• React 18
• JavaScript and JSX
• React Router DOM 6
• Tailwind CSS 3 with PostCSS and Autoprefixer
• Lucide React
• Vite 5
• ESLint 9

React and Frontend Concepts Practiced

• Functional components and component composition
• Reusable UI components driven by props and children
• State management with useState
• Side effects and browser storage synchronization with useEffect
• Controlled form inputs, event handling, and basic validation
• Immutable list updates using array mapping, filtering, and spread syntax
• Dynamic list rendering and conditional rendering
• Client-side routing with createBrowserRouter and RouterProvider
• Programmatic navigation with useNavigate
• Reading and writing URL search parameters with URLSearchParams and useSearchParams
• Utility-first styling with Tailwind CSS

Key Project Structure

src/
├── components/
│   ├── AddTask.jsx
│   ├── Button.jsx
│   ├── Input.jsx
│   ├── Tasks.jsx
│   └── Title.jsx
├── pages/
│   └── TaskDetailsPage.jsx
├── App.jsx
├── index.css
└── main.jsx

• App.jsx owns the task state and task operations, and synchronizes the list with localStorage.
• components/ contains the task form, task list, and shared interface elements.
• TaskDetailsPage.jsx reads task data from the URL and renders the details view.
• main.jsx configures the application's routes and renders the router.

Running the Project Locally

You need Node.js and npm installed.

git clone https://github.com/PedroVitor237/TaskManager_ReactCourse.git
cd TaskManager_ReactCourse
npm install
npm run dev

Vite will print the local development URL in the terminal.

Other available commands:

npm run build    # Create a production build
npm run lint     # Run ESLint
npm run preview  # Preview the production build locally

Development Status

The task-management flows listed above are implemented. Data is stored only in the user's browser; the application does not currently use a backend, external API, authentication, or database.

This project is still being polished and refined. Educational comments, experiments, future ideas, and intermediate implementation decisions from the learning process may therefore still be present in the codebase. Those items provide learning context and should not be interpreted as completed features.

Course Reference

• React for Beginners Course — Felipe Rocha, Full Stack Club

Author

Pedro Vitor

License

This project is available under the MIT License.