{"id":50434614,"url":"https://github.com/top-submissions/fullstackjs-todo-list","last_synced_at":"2026-05-31T16:30:38.934Z","repository":{"id":330675980,"uuid":"1123553787","full_name":"top-submissions/fullstackjs-todo-list","owner":"top-submissions","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-28T04:04:17.000Z","size":137,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-28T21:50:26.500Z","etag":null,"topics":["css3","date-fns","es6-modules","factory-functions","frontend","html5","javascript","local-storage","modern-ui","productivity","project-management","responsive-design","single-page-application","task-manager","the-odin-project","todo-app","todo-list","vanilla-javascript","web-development","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/top-submissions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-27T05:43:43.000Z","updated_at":"2025-12-28T04:04:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/top-submissions/fullstackjs-todo-list","commit_stats":null,"previous_names":["top-submissions/fullstackjs-todo-list"],"tags_count":null,"template":false,"template_full_name":"MatimotTheTimoters/templates-solo-default","purl":"pkg:github/top-submissions/fullstackjs-todo-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/top-submissions%2Ffullstackjs-todo-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/top-submissions%2Ffullstackjs-todo-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/top-submissions%2Ffullstackjs-todo-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/top-submissions%2Ffullstackjs-todo-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/top-submissions","download_url":"https://codeload.github.com/top-submissions/fullstackjs-todo-list/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/top-submissions%2Ffullstackjs-todo-list/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33739860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"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":["css3","date-fns","es6-modules","factory-functions","frontend","html5","javascript","local-storage","modern-ui","productivity","project-management","responsive-design","single-page-application","task-manager","the-odin-project","todo-app","todo-list","vanilla-javascript","web-development","webpack"],"created_at":"2026-05-31T16:30:37.784Z","updated_at":"2026-05-31T16:30:38.929Z","avatar_url":"https://github.com/top-submissions.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TaskFlow - Modern Todo List Application\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/top-submissions/fullstackjs-todo-list)](https://github.com/top-submissions/fullstackjs-todo-list/commits)\n[![GitHub issues](https://img.shields.io/github/issues/top-submissions/fullstackjs-todo-list)](https://github.com/top-submissions/fullstackjs-todo-list/issues)\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/top-submissions/fullstackjs-todo-list)](https://github.com/top-submissions/fullstackjs-todo-list/pulls)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA modern, feature-rich todo list application built as part of The Odin Project's Full Stack JavaScript curriculum. This project demonstrates mastery of ES6 modules, webpack bundling, factory functions, and local storage persistence.\n\n## ✨ Features\n\n- 📁 **Project Management**: Organize todos into multiple projects\n- ✅ **Full CRUD Operations**: Create, read, update, and delete todos\n- 🎯 **Priority Levels**: Categorize tasks as low, medium, or high priority\n- 📅 **Due Date Tracking**: Set and track due dates with relative time display\n- 💾 **Local Storage**: Automatic data persistence across sessions\n- 🎨 **Modern UI/UX**: Beautiful gradient design with smooth animations\n- 📱 **Responsive Design**: Works seamlessly on desktop, tablet, and mobile\n- ⚡ **Performance Optimized**: Fast loading and smooth interactions\n- 🔄 **Real-time Updates**: Instant UI updates without page refresh\n\n## 🚀 Live Demo\n\nVisit the live application: [TaskFlow Demo](https://top-submissions.github.io/fullstackjs-todo-list/)\n\n## 🛠️ Built With\n\n### Core Technologies\n\n- **Vanilla JavaScript (ES6+)**: Modern JavaScript features and syntax\n- **HTML5**: Semantic markup\n- **CSS3**: Custom properties, Grid, Flexbox, animations\n\n### Build Tools\n\n- **Webpack 5**: Module bundling and asset management\n- **webpack-dev-server**: Development server with hot reload\n- **webpack-merge**: Configuration management for dev/prod environments\n\n### Dependencies\n\n- **date-fns**: Modern date utility library for formatting and manipulation\n\n### Development Tools\n\n- **html-webpack-plugin**: Automatic HTML generation\n- **css-loader**: CSS module processing\n- **style-loader**: Style injection\n- **html-loader**: HTML asset handling\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** (v14 or higher)\n- **npm** (v6 or higher)\n- A modern web browser\n- Git for version control\n\n## 🔧 Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/top-submissions/fullstackjs-todo-list.git\n   cd fullstackjs-todo-list\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Start development server**\n\n   ```bash\n   npm run dev\n   ```\n\n   The application will open automatically at `http://localhost:8080`\n\n## 📦 Available Scripts\n\n### Development\n\n```bash\nnpm run dev          # Start development server with hot reload\nnpm run watch        # Watch mode - rebuilds on file changes\n```\n\n### Production\n\n```bash\nnpm run build        # Create optimized production build\nnpm run build:dev    # Create development build for debugging\n```\n\n## 🏗️ Project Structure\n\n```\nfullstackjs-todo-list/\n├── dist/                      # Compiled output (auto-generated)\n├── docs/                      # Project documentation\n├── src/\n│   ├── modules/\n│   │   ├── todoLogic.js      # Todo factory functions and methods\n│   │   ├── projectLogic.js   # Project management and state\n│   │   ├── storage.js        # LocalStorage persistence layer\n│   │   └── domController.js  # DOM manipulation and UI updates\n│   ├── styles.css            # Global styles and animations\n│   ├── template.html         # HTML template\n│   └── index.js              # Application entry point\n├── .gitignore\n├── LICENSE\n├── README.md\n├── package.json\n├── webpack.common.js          # Shared webpack configuration\n├── webpack.dev.js             # Development webpack configuration\n└── webpack.prod.js            # Production webpack configuration\n```\n\n## 🎯 Core Concepts\n\n### Factory Functions\n\nThe application uses factory functions for creating todos and projects, demonstrating object-oriented programming principles without classes:\n\n```javascript\n// Example: Creating a todo\nconst todo = createTodo(\n  \"Complete project\", \n  \"Finish the todo list app\", \n  \"2025-01-15\", \n  \"high\"\n);\n```\n\n### Module Pattern\n\nLogic is separated into distinct modules:\n\n- **todoLogic.js**: Business logic for individual todos\n- **projectLogic.js**: Project management and app state\n- **storage.js**: Data persistence using localStorage\n- **domController.js**: UI rendering and event handling\n\n### Local Storage Persistence\n\nAll data is automatically saved to localStorage:\n\n- Survives browser refreshes and closures\n- JSON serialization with method restoration\n- Graceful handling of missing or corrupted data\n\n## 💡 Usage\n\n### Creating a Project\n\n1. Click \"New Project\" in the sidebar\n2. Enter a project name\n3. Click \"Create\"\n\n### Adding a Todo\n\n1. Select a project from the sidebar\n2. Click \"Add Task\" button\n3. Fill in the todo details:\n   - Title (required)\n   - Description\n   - Due date (required)\n   - Priority level\n   - Additional notes\n4. Click \"Save Task\"\n\n### Managing Todos\n\n- **View/Edit**: Click the \"View/Edit\" button to modify todo details\n- **Complete**: Mark todos as complete with the \"Complete\" button\n- **Delete**: Remove todos with the \"Delete\" button\n\n### Managing Projects\n\n- **Switch Projects**: Click on any project in the sidebar\n- **Delete Project**: Click the \"Delete\" button next to a project (requires at least 2 projects)\n\n## 🎨 Design Philosophy\n\nThe application features a modern, professional design inspired by contemporary web applications:\n\n- **Gradient Backgrounds**: Beautiful purple gradient backdrop\n- **Glass Morphism**: Subtle transparency effects\n- **Smooth Animations**: Polished transitions and hover effects\n- **Visual Hierarchy**: Clear information architecture\n- **Color-Coded Priorities**: Instant visual feedback\n- **Responsive Layout**: Adapts to any screen size\n\n## ⚡ Performance\n\nThe application is optimized for performance:\n\n- Minimal JavaScript bundle size\n- Efficient DOM updates\n- CSS animations using GPU acceleration\n- Lazy loading where applicable\n- Optimized asset delivery\n\n## 🔒 Data Storage\n\nData is stored locally in your browser using the Web Storage API:\n\n- **Location**: `localStorage` under key `todoAppData`\n- **Format**: JSON serialized objects\n- **Privacy**: Data never leaves your device\n- **Inspection**: View in DevTools → Application → Local Storage\n\n## 🧪 Testing\n\nThe application can be tested manually:\n\n1. Create multiple projects\n2. Add todos with various priorities\n3. Edit and complete todos\n4. Delete todos and projects\n5. Refresh the page to verify persistence\n6. Test on different screen sizes\n\n## 🌐 Browser Support\n\n- Chrome (latest 2 versions)\n- Firefox (latest 2 versions)\n- Safari (latest 2 versions)\n- Edge (latest 2 versions)\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes:\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📝 Development Notes\n\n### The Odin Project Requirements\n\nThis project fulfills the following requirements:\n\n- ✅ Factory functions for todos\n- ✅ Separate application logic from DOM\n- ✅ Multiple projects/lists\n- ✅ Full CRUD operations\n- ✅ LocalStorage persistence\n- ✅ Webpack module bundling\n- ✅ Date handling with external library\n- ✅ Modern UI with priority indicators\n\n### Future Enhancements\n\n- [ ] Drag and drop todo reordering\n- [ ] Todo search and filtering\n- [ ] Export/import data functionality\n- [ ] Dark mode toggle\n- [ ] Keyboard shortcuts\n- [ ] Todo subtasks/checklists\n- [ ] Calendar view\n- [ ] Task reminders\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [The Odin Project](https://www.theodinproject.com/) - Comprehensive web development curriculum\n- [date-fns](https://date-fns.org/) - Modern JavaScript date utility library\n- [Webpack](https://webpack.js.org/) - Module bundler\n- Design inspiration from modern productivity apps\n\n## 👤 Author\n\n**MatimotTheTimoters**\n\n- GitHub: [@MatimotTheTimoters](https://github.com/MatimotTheTimoters)\n- Repository: [top-submissions/fullstackjs-todo-list](https://github.com/top-submissions/fullstackjs-todo-list)\n\n## 📞 Support\n\nIf you encounter any issues or have questions:\n\n- Open an [issue](https://github.com/top-submissions/fullstackjs-todo-list/issues)\n- Check existing [documentation](./docs)\n- Review the code comments\n\n---\n\n**Made with ❤️ as part of The Odin Project curriculum**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftop-submissions%2Ffullstackjs-todo-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftop-submissions%2Ffullstackjs-todo-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftop-submissions%2Ffullstackjs-todo-list/lists"}