BranchesTags

Repository files navigation

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

Author

Pedro Vitor

License

This project is available under the MIT License.

About

ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.

task-manager-react-eight-navy.vercel.app/

Topics

frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development

Resources

Readme
MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
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
Author
Pedro Vitor
License
This project is available under the MIT License.
About
ReactJS Task Manager built to practice component composition, state management, client-side routing, localStorage persistence, and reusable frontend components.
task-manager-react-eight-navy.vercel.app/
Topics
frontendjavascriptlearning-projectlocalstoragelucide-reactreactreact-routerreactjstailwindcsstask-managertodo-appviteweb-development
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages