TaskManager_ReactCourse

Project developed in ReactJS during my studies with the React for beginners course from the channel Felipe Rocha • Full Stack Club.

The main goal of this project was to practice fundamental React concepts such as componentization, state management, props, dynamic rendering, and event handling through the development of a task management application.

---

🚀 Technologies Used

• ReactJS
• JavaScript
• Vite
• React Router DOM
• Tailwind CSS
• Lucide React
• HTML5
• CSS3
• ESLint

---

📚 Concepts Practiced

During the development of this project, several important React ecosystem concepts were applied:

• Reusable components
• Props
• useState
• React events
• Conditional rendering
• Dynamic list rendering
• React Router
• Query parameter manipulation
• React project structure organization

---

📸 Features

• ✅ Add tasks
• ✅ Remove tasks
• ✅ Mark tasks as completed
• ✅ Data persistence using LocalStorage
• ✅ Task details page
• ✅ Navigation between pages with React Router
• ✅ Query Parameters usage
• ✅ Interface styled with Tailwind CSS
• ✅ Component-based architecture
• ✅ Icons using Lucide React

---

⚙️ How to Run the Project

1. Clone the repository

git clone https://github.com/PedroVitor237/TaskManager_ReactCourse.git

2. Access the project folder

cd TaskManager_ReactCourse

3. Install dependencies

npm install

4. Run the project

npm run dev

---

📂 Project Structure

TaskManager_ReactCourse
├── public
├── src
│   ├── assets
│   ├── components
│   │   ├── AddTask.jsx
│   │   ├── Button.jsx
│   │   ├── Input.jsx
│   │   ├── Tasks.jsx
│   │   └── Title.jsx
│   │
│   ├── pages
│   │   └── TaskDetailsPage.jsx
│   │
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
│
├── eslint.config.js
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
├── package.json
├── LICENSE
└── README.md

---

🎯 Project Purpose

This project was developed with a focus on practical learning of modern ReactJS using functional components, hooks, and routing.

Besides the main task manager implementation, this project also served as a learning environment for:

• state management with useState
• side effects with useEffect
• browser data persistence
• componentization
• page navigation
• URL parameter manipulation
• basic React project organization best practices

The code also contains study comments, implementation tests, and future ideas for expanding the system.

---

🔮 Future Implementations

Some features planned for future versions of the project:

• Task editing
• Filtering and sorting
• Database integration
• Authentication system
• Categories and tags
• Mobile responsiveness
• Drag and drop functionality
• Custom themes
• Task export/import
• Offline support
• Accessibility improvements

---

👨‍💻 Credits

Course used as reference:

• React for Beginners Course - Felipe Rocha • Full Stack Club

---

📄 License

This project is licensed under the MIT License.

Feel free to study, modify, and use the code for educational purposes.