Skip to content

README.md

Latest commit

 

History

History
163 lines (120 loc) · 3.39 KB

README.md

File metadata and controls

163 lines (120 loc) · 3.39 KB
Raw

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:

📄 License

This project is licensed under the MIT License.

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