{"id":29875726,"url":"https://github.com/praisespjmt/plans","last_synced_at":"2025-07-31T02:42:48.028Z","repository":{"id":306134851,"uuid":"1024497253","full_name":"PraisesPJMT/Plans","owner":"PraisesPJMT","description":"To do application","archived":false,"fork":false,"pushed_at":"2025-07-23T19:32:02.000Z","size":127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-23T21:55:45.937Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PraisesPJMT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-22T19:45:10.000Z","updated_at":"2025-07-23T19:32:06.000Z","dependencies_parsed_at":"2025-07-23T21:55:48.790Z","dependency_job_id":"b3258b30-97c5-40e2-8dfb-846c97e15b10","html_url":"https://github.com/PraisesPJMT/Plans","commit_stats":null,"previous_names":["praisespjmt/plans"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/PraisesPJMT/Plans","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PraisesPJMT%2FPlans","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PraisesPJMT%2FPlans/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PraisesPJMT%2FPlans/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PraisesPJMT%2FPlans/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PraisesPJMT","download_url":"https://codeload.github.com/PraisesPJMT/Plans/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PraisesPJMT%2FPlans/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267978326,"owners_count":24175254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-31T02:42:47.289Z","updated_at":"2025-07-31T02:42:47.972Z","avatar_url":"https://github.com/PraisesPJMT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📋 Plans - Modern Task Management\n\n\u003e A sleek, accessible, and feature-rich todo application built with React, TypeScript, and Vite. Manage your tasks with style using modern drag-and-drop functionality, real-time filtering, and beautiful modal dialogs.\n\n![Light Plans Preview](./src/assets/light-preview.png)\n![Dark Plans Preview](./src/assets/dark-preview.png)\n\n## 📑 Table of Contents\n\n- [✨ Features](#-features)\n- [🛠️ Tech Stack](#️-tech-stack)\n- [🚀 Getting Started](#-getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Development](#development)\n- [📱 Usage](#-usage)\n- [🎨 Styling](#-styling)\n- [♿ Accessibility](#-accessibility)\n- [🚀 Deployment](#-deployment)\n  - [Build for Production](#build-for-production)\n  - [Deploy to Netlify](#deploy-to-netlify)\n- [🔧 Configuration](#-configuration)\n- [📖 API Reference](#-api-reference)\n- [👨‍💻 Author](#-author)\n\n## ✨ Features\n\n### Core Functionality\n- ✅ **Create, Read, Update, Delete** tasks with full CRUD operations\n- 🎯 **Priority Management** - Set task priorities (Low, Medium, High)\n- 📅 **Due Date Tracking** - Never miss a deadline\n- ✔️ **Status Management** - Track pending and completed tasks\n- 🔍 **Smart Filtering** - Filter by status, overdue items, or view all\n- 🔎 **Real-time Search** - Find tasks instantly by title or description\n\n### User Experience\n- 🖱️ **Drag \u0026 Drop Reordering** - Intuitive task organization\n- ⚡ **Real-time Loading States** - Visual feedback for all operations\n- 💾 **Persistent Storage** - Tasks saved automatically in localStorage\n- 📱 **Responsive Design** - Works perfectly on all devices\n- 🎨 **Modern UI** - Clean, professional interface with smooth animations\n\n### Accessibility\n- ♿ **WCAG Compliant** - Full keyboard navigation support\n- 🎤 **Screen Reader Friendly** - Proper ARIA labels and announcements\n- ⌨️ **Keyboard Shortcuts** - Tab navigation and escape key support\n- 🔍 **Focus Management** - Logical focus flow and visual indicators\n- 📢 **Live Regions** - Real-time status updates for assistive technologies\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 18** - Modern React with hooks and concurrent features\n- **TypeScript** - Type-safe development with excellent IntelliSense\n- **Vite** - Lightning-fast build tool and development server\n\n### Styling\n- **CSS Modules** - Scoped styling with zero naming conflicts\n- **Modern CSS** - Flexbox, Grid, Custom Properties, and Animations\n- **Responsive Design** - Mobile-first approach with breakpoints\n\n### State Management\n- **Custom Hooks** - Clean separation of logic with `usePlans` hook\n- **React State** - Efficient local state management\n- **LocalStorage Integration** - Persistent data without external dependencies\n\n### Development Tools\n- **ESLint** - Code quality and consistency\n- **Prettier** - Automatic code formatting\n- **TypeScript Strict Mode** - Maximum type safety\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nBefore you begin, ensure you have the following installed:\n- **Node.js** (version 18.0 or higher)\n- **npm** (version 8.0 or higher) or **yarn** (version 1.22 or higher)\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone git@github.com:PraisesPJMT/Plans.git\n   cd Plans\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n4. **Open your browser**\n   \n   Navigate to `http://localhost:5173` to see the application running.\n\n### Development\n\n#### Available Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm run dev` | Start development server with hot reload |\n| `npm run build` | Build the app for production |\n| `npm run preview` | Preview the production build locally |\n| `npm run lint` | Run ESLint to check code quality |\n| `npm run type-check` | Run TypeScript type checking |\n\n#### Development Workflow\n\n1. **Start the dev server**: `npm run dev`\n2. **Make your changes** - The app will hot reload automatically\n3. **Check types**: `npm run type-check`\n4. **Lint your code**: `npm run lint`\n5. **Build for production**: `npm run build`\n\n## 📱 Usage\n\n### Creating Tasks\n1. Click the **\"Add Plan\"** button\n2. Fill in the task details:\n   - **Title** (required) - Brief description of the task\n   - **Description** (required) - Detailed task information\n   - **Due Date** (required) - When the task should be completed\n   - **Priority** - Low, Medium, or High priority level\n3. Click **\"Add Plan\"** to save\n\n### Managing Tasks\n- **Edit**: Click the edit button on any task to modify its details\n- **Mark Complete**: Use the status dropdown in edit mode\n- **Reorder**: Drag and drop tasks to reorganize them\n- **Delete**: Use the delete functionality (implement as needed)\n\n### Filtering \u0026 Search\n- **Search**: Type in the search bar to find tasks by title or description\n- **Filter by Status**: Show all, pending, completed, or overdue tasks\n- **Sort**: Tasks maintain the order you set with drag and drop\n\n## 🎨 Styling\n\nThe application uses **CSS Modules** for styling, providing:\n\n### Key Style Features\n- **Scoped Styles** - No CSS conflicts between components\n- **Modern Design** - Clean, professional interface\n- **Dark/Light Mode Ready** - CSS custom properties for theming\n- **Smooth Animations** - Subtle transitions and micro-interactions\n- **Responsive Layout** - Mobile-first design approach\n\n### Customization\nModify styles in the respective `.module.css` files:\n- `Dialog.module.css` - Modal dialog styling\n- `App.module.css` - Main application layout\n- Add your own modules for custom components\n\n## ♿ Accessibility\n\nPlans is built with accessibility as a first-class citizen:\n\n### Features\n- **Keyboard Navigation** - Full app functionality without a mouse\n- **Screen Reader Support** - Comprehensive ARIA labels and descriptions\n- **Focus Management** - Logical tab order and visible focus indicators\n- **Error Handling** - Clear error messages with proper announcements\n- **Color Contrast** - WCAG AA compliant color combinations\n- **Semantic HTML** - Proper heading structure and landmark regions\n\n## 🚀 Deployment\n\n### Live Demo\n[Live Demo](https://plansapp.netlify.app/)\n\n### Build for Production\n\nCreate an optimized production build:\n\n```bash\nnpm run build\n```\n\nThis generates a `dist` folder with optimized, minified files ready for deployment.\n\n### Deploy to Netlify\n\n1. **Build the project**\n   ```bash\n   npm run build\n   ```\n\n2. **Deploy via Netlify CLI**\n   ```bash\n   npm install -g netlify-cli\n   netlify deploy --prod --dir=dist\n   ```\n\n3. **Or drag and drop** the `dist` folder to [Netlify Drop](https://app.netlify.com/drop)\n\n## 📖 API Reference\n\n### Custom Hook: `usePlans`\n\nThe main state management hook for the application.\n\n```typescript\nconst {\n  plans,              // All plans\n  filteredPlans,      // Filtered plans based on search and filter\n  searchTerm,         // Current search term\n  filter,             // Current filter setting\n  loading,            // Loading states for different operations\n  addPlan,            // Function to add a new plan\n  editPlan,           // Function to edit an existing plan\n  deletePlan,         // Function to delete a plan\n  togglePlanStatus,   // Function to toggle completion status\n  setSearchTerm,      // Function to update search term\n  setFilter,          // Function to update filter\n  // Drag and drop handlers\n  handleDragStart,\n  handleDragOver,\n  handleDrop,\n  movePlan\n} = usePlans();\n```\n\n### Types\n\n```typescript\ninterface Plan {\n  id: string;\n  title: string;\n  description: string;\n  status: 'pending' | 'completed';\n  dueDate: string;\n  createdAt: string;\n  priority: 'low' | 'medium' | 'high';\n}\n\ntype FilterType = 'all' | 'pending' | 'completed' | 'overdue';\n```\n\n\n## 👨‍💻 Author\n\n**Your Name**\n- GitHub: [@PraisesPJMT](https://github.com/PraisesPJMT)\n- Email: dev.praises@gmail.com\n- LinkedIn: [Praises Tula](https://www.linkedin.com/in/praises-tula)\n- Portfolio: [Praises Tula](https://https://praisestula.com.ng/)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eBuilt with ❤️ using React, TypeScript, and Vite\u003c/p\u003e\n  \u003cp\u003e\n    \u003ca href=\"#-table-of-contents\"\u003eBack to Top\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpraisespjmt%2Fplans","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpraisespjmt%2Fplans","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpraisespjmt%2Fplans/lists"}