PM Yourself - Productivity Tracker

Overview

PM Yourself is a productivity web application designed to simulate the experience of a Tech Project Manager (PM) and Developer, focusing on task and note management. Developed to showcase the dynamic capabilities possible within a static site context using GitHub Pages, this app stands out by providing a highly responsive and user-friendly interface for managing daily tasks and notes associated with them. The application emphasizes local storage utilization, ensuring data persistence across browser sessions without the need for server-side storage solutions.

Features

• Task Management: Create, view, edit, and delete tasks with deadlines and priorities.
• Note Attachment: Add notes to tasks, simulating communication between a PM and Developer.
• Dynamic Filtering and Sorting: View tasks by priority, deadline, or creation date, with custom filtering options for date ranges.
• Responsive Charts: Visualize tasks and notes with interactive charts, offering insights into your productivity trends.
• Dark Mode: Customize your viewing experience with a toggleable dark mode.

Key Technical Highlights

• Local Storage: Utilizes browser local storage to persist data across sessions, offering a seamless experience without the complexity of backend data management.
• Static Site Dynamics: Despite GitHub Pages' limitations to static content, PM Yourself leverages JavaScript to deliver a dynamic, interactive user experience.
• Responsive Design: Ensures a smooth, responsive interface across devices, showcasing advanced CSS techniques and JavaScript interactivity.

Getting Started

Prerequisites

• A modern web browser with JavaScript and local storage support (e.g., Chrome, Firefox, Safari, Edge).

Usage Instructions

1. Accessing the App

   • Navigate to the PM Yourself app hosted on GitHub Pages.

2. Creating Tasks

   • Enter the task name, select a deadline, and choose a priority level (High, Medium, Low).
   • Click "Add Task" to save the task.

3. Adding Notes to Tasks

   • Select a task from the "Add Note To" dropdown.
   • Choose the note author (PM or Developer).
   • Enter your note and click "Add Note to Task".

4. Viewing and Managing Tasks

   • Tasks are listed with options to edit or delete.
   • Use the "Sorting and Filtering" section to organize tasks by priority, date, or custom date ranges.

5. Understanding Data Persistence

   • All data is stored in your browser's local storage, ensuring it persists through browser reloads but is not accessible across different browsers or devices.

6. Engaging with Charts

   • Explore various charts for a graphical representation of tasks and notes distribution.

Customizing the Experience

• Toggle dark mode using the "Enable Dark Mode" switch for a personalized UI experience.

Technical Improvements and Suggestions

• Consider implementing a cloud-based storage option (e.g., Firebase) to enable cross-device synchronization.
• Explore the possibility of user authentication to personalize and secure user data.
• Enhance the UI/UX design with modern frameworks like React or Vue.js for improved interactivity and component management.

Conclusion

PM Yourself is a productivity tool and demonstration of innovative web development techniques, showcasing how static sites can be transformed into dynamic, user-centric applications. It exemplifies the power of local storage and advanced JavaScript to create a meaningful, responsive user experience.