A Practical Implementation of classic software design patterns using Vue3 (Composition API).

Live Demo: https://vue3-design-pattern.netlify.app/

• Framework: Vue 3 (Composition API)
• State Management: Pinia
• Validation: Vuelidate
• Styling: Tailwind

The TaskFactory is responsible for creating different tasks (Simple, Urgent, Project).

Vue's Reactivity System acts as the Observer here. Components subscribe to store changes and are automatically notified and re-rendered.

Logger class ensures only one instance exists throughout the app.

Used for undo functionality - the last action performed is the first to be undone (undoStack).

• Reactive State: Managed via Pinia stores for clean separation of concerns.
• Form Validation: Vuelidate ensures that tasks are only created when data satisfies business rules.
• History Tracking: Using the Stack structure to allow users to revert recent changes.

1. Clone the repository

   git clone https://github.com/Osama6622/Design-Pattern-practice.git
   

2. Install Dependencies

   npm install
   

3. Run The Project

   npm run dev