Task Manager App

A web-based task management application that allows users to create, edit, delete, and manage tasks efficiently. The app features a calendar view to visualize task schedules and persists data using local storage.

Table of Contents

1. Features
2. Installation
3. Usage
4. Folder Structure
5. Technologies Used
6. Contributing
7. License

Features

• Task Creation: Easily add tasks with a title, description, start and end date.
• Task Editing: Edit existing tasks from the list.
• Task Deletion: Remove tasks that are no longer needed.
• Calendar Integration: View tasks on specific dates with dot indicators.
• Local Storage: All tasks are stored and retrieved from the browser’s local storage.
• Search: Quickly find tasks by title using a search bar.

Installation

To get the app running locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-repo/task-manager-app.git

2. Navigate to the project directory:

   cd task-manager-app

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and go to http://localhost:3000.

Usage

1. Adding a Task: Click the "Add Task" button, fill in the task details, and submit.
2. Editing a Task: Click the edit icon next to a task and modify the task in the modal.
3. Deleting a Task: Click the delete icon next to a task to remove it.
4. Viewing Tasks in Calendar: Navigate through the calendar to view tasks on specific dates.

Folder Structure

src/
├── App.jsx                 # Main app component
├── index.jsx               # Entry point of the React app
├── AppRouter/              # Router configuration
├── App.css                 # Global styles
├── main.jsx                # Entry point of the app
├── Components/             # Reusable components
│   ├── AddToTask/          # Components related to task addition
│   ├── CalendarFolder/     # Calendar and related components
│   ├── EditComponent/      # Components for editing tasks
│   ├── TaskManager/        # Task management components
├── Services/               # Utility functions to manage tasks in local storage
│   └── taskService.js      # Functions for interacting with local storage
├── Utils/                  # Additional helper utilities
│   └── SidebarItems.jsx    # Sidebar navigation items
└── styles/                 # Component-specific styles

Technologies Used

• React: Frontend library for building the UI.
• Tailwind CSS: Utility-first CSS framework for styling.
• date-fns: JavaScript date utility library.
• React Icons: Icon library for React.
• Local Storage: Browser’s local storage for persistent data.

Contributing

If you want to contribute to the project, feel free to create an issue or submit a pull request. Follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -m 'Add new feature').
5. Push to the branch (git push origin feature-branch).
6. Open a pull request.

License

This project is licensed under the MIT License.

Contact

For any inquiries or feedback, feel free to reach out:

Email: [email protected] LinkedIn: https://www.linkedin.com/in/nnadozie-chukwuemerie-clara-b65273274/