DevTaskManager

Description

DevTaskManager is a Chrome extension developed to facilitate project and task management directly within the browser. This project was initiated as part of a university assignment. During a brainstorming session, the idea emerged to create a tool that integrates project management functionalities with the convenience of a browser extension, and I decided to bring this idea to life.

With an intuitive interface and a robust API, DevTaskManager allows users to create, update, delete, and view projects and their respective tasks efficiently, promoting better organization and productivity for development teams.

Features

• Project Management:

  Allows the creation, updating, and deletion of projects. Each project can contain multiple tasks, facilitating the organization of activities.

  // Example of creating a project in the backend
  await projectService.CreateProjectAsync("New Project");
          

  Related file: backend/Services/ProjectService.cs

• Task Management:

  Addition, editing, and removal of tasks associated with projects. Tasks can have different statuses such as "To Do," "In Progress," and "Completed."

  // Example of creating a task in the backend
  await taskService.CreateTaskAsync(projectId, "Implement API", "To Do");
          

  Related file: backend/Services/TaskService.cs

• Notifications:

  Notification system to inform users about successful actions or errors, providing immediate feedback.

  // Example of a notification in the frontend
  showNotification("Project created successfully!", "success");
          

  Related file: frontend/src/pages/home/App.tsx

• Responsive Interface:

  Adaptive design for mobile devices and desktops, ensuring a consistent user experience across different platforms.

  Responsible components: Header.tsx, Sidebar.tsx, MobileMenu.tsx

• Documented API:

  Comprehensive API documentation using Swagger, facilitating integration and understanding of the provided functionalities.

  Configuration file: backend/Program.cs

• Chrome Extension:

  DevTaskManager is implemented as a Chrome extension, enabling task management directly within the browser without the need to access a separate web application.

  // Example of the extension's manifest configuration
  import { defineManifest } from "@crxjs/vite-plugin";
  import packageJson from "../../package.json";
  const { version, name, description } = packageJson;
  const [major, minor, patch] = version.replace(/[^\d.-]+/g, "").split(/[.-]/);
  export default defineManifest(async () => ({
  manifest_version: 3,
  name: name,
  description: description,
  version: ${major}.${minor}.${patch},
  version_name: version,
  icons: {
  "16": "frontend/src/assets/icons/icon-16.png",
  "48": "frontend/src/assets/icons/icon-48.png",
  "128": "frontend/src/assets/icons/icon-128.png"
  },
  background: {
  service_worker: "frontend/src/pages/background/index.ts",
  },
  action: {
  default_icon: {
  "16": "frontend/src/assets/icons/icon-16.png",
  "48": "frontend/src/assets/icons/icon-48.png",
  "128": "frontend/src/assets/icons/icon-128.png"
  },
  },
  permissions: ["tabs", "storage", "scripting", "unlimitedStorage", "sidePanel", "activeTab", "windows"],
  web_accessible_resources: [{
  resources: ["frontend/src/pages/home/index.html*"],
  matches: ["http:///", "https:///"],
  use_dynamic_url: true
  }],
  host_permissions: [
  "http://localhost:5146/",
  "https://localhost:5146/",
  "http://127.0.0.1:5146/",
  "https://127.0.0.1:5146/"
  ]
  }));
  

  Related file: frontend/src/manifest.config.ts

Requirements

Hardware Requirements

• Backend: Machine with support for .NET 8.0 and capacity to run SQLite.
• Frontend: Computer with support for Node.js (version 14 or higher).

Software Requirements

• Backend:
  • .NET 8.0 SDK
  • SQLite
• Frontend:
  • Node.js (version 14 or higher)
  • npm or Yarn

Installation and Setup

General Steps

1. Clone the Repository:

   git clone https://github.com/Yagoox/DevTaskManager.git
   cd DevTaskManager
           

2. Set Up the Backend:

   cd backend
   dotnet restore
   dotnet ef database update
   dotnet run
           

   The backend will be available at http://127.0.0.1:5146.

3. Set Up the Frontend:

   In a new terminal tab:

   cd frontend
   npm install
   npm run dev
           

   The frontend will be available at http://localhost:5173.

Database Configuration

DevTaskManager uses SQLite as its database. Migrations are already set up to create the necessary tables. To reset the database:

dotnet ef database drop
dotnet ef database update

Usage

1. Access the Application:

   Open your browser and navigate to http://localhost:5173.

2. Manage Projects:
   • Add Project: Click the add (+) button in the sidebar to create a new project.
   • Edit Project: Click the edit icon next to an existing project.
   • Delete Project: Click the delete icon next to an existing project.
3. Manage Tasks:
   • Add Task: Select a project and click the add (+) button in the tasks section.
   • Edit Task: Click the edit icon next to an existing task.
   • Delete Task: Click the delete icon next to an existing task.
   • Update Status: Edit the task to change its status.
4. Notifications:

   Receive immediate feedback on your actions through the notification system.

5. Chrome Extension:

   After installing the extension in Chrome, you can access DevTaskManager directly in the browser, allowing you to manage your tasks without leaving your favorite pages.

API Endpoints

The DevTaskManager API provides the following endpoints:

Projects

• GET /api/projects - Retrieves all projects.
• GET /api/projects/{id} - Retrieves a specific project by ID.
• POST /api/projects - Creates a new project.
• PUT /api/projects/{id} - Updates an existing project.
• DELETE /api/projects/{id} - Deletes an existing project.

Tasks

• GET /api/projects/{projectId}/tasks - Retrieves all tasks for a specific project.
• GET /api/projects/{projectId}/tasks/{taskId} - Retrieves a specific task from a project.
• POST /api/projects/{projectId}/tasks - Creates a new task within a specific project.
• PUT /api/projects/{projectId}/tasks/{taskId} - Updates an existing task within a project.
• DELETE /api/projects/{projectId}/tasks/{taskId} - Deletes an existing task from a project.

API Documentation

The API documentation is available through Swagger. After starting the backend, visit http://127.0.0.1:5146/swagger to view and interact with the API.

Advanced Features

• Data Validation: Ensures data integrity and consistency through robust validations in the backend.
• Error Handling: Error handling system to provide clear and helpful feedback to users.
• Scalability: Modular structure that facilitates the addition of new features and system scalability.
• Testing: Implementation of unit and integration tests to ensure code quality.
• Task Automation: Automated scripts to ease the development and maintenance of the project.

Contribution

Contributions are welcome! Feel free to open issues or submit pull requests to improve DevTaskManager.

1. Fork the Repository: Click the fork button on GitHub to create a copy of the repository in your account.
2. Create a Branch for Your Feature:

   git checkout -b my-new-feature

3. Commit Your Changes:

   git commit -m 'Add new feature'

4. Push to the Branch:

   git push origin my-new-feature

5. Open a Pull Request: Provide a detailed description of your changes and open a pull request for review.

Testing

To ensure the quality and functionality of DevTaskManager, follow the steps below to run tests:

1. Set Up the Test Environment:
   • Backend:
     • Ensure the test database is properly configured.
     • Run the necessary migrations.
   • Frontend:
     • Install the testing dependencies.
2. Run Backend Tests:

   Navigate to the backend folder and execute:

   dotnet test

3. Run Frontend Tests:

   Navigate to the frontend folder and execute:

   npm run test

4. Review Test Results:

   Analyze the logs and results to ensure all tests pass as expected.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

If you have any questions or suggestions, feel free to reach out:

• Email: yagoaborba@hotmail.com
• LinkedIn: Yago A. Borba

References and Additional Resources

• .NET Documentation
• React Documentation
• Tailwind CSS
• Entity Framework Core
• Swagger
• Vite
• Heroicons