{"id":30194121,"url":"https://github.com/harsh-141cmd/task-manager","last_synced_at":"2026-04-09T01:32:19.423Z","repository":{"id":308177677,"uuid":"1031892028","full_name":"Harsh-141cmd/Task-Manager","owner":"Harsh-141cmd","description":"A full-stack task management application built with React and Node.js featuring user authentication, CRUD operations, task filtering, due date management, and responsive design. Perfect for personal productivity and learning modern web development.","archived":false,"fork":false,"pushed_at":"2025-08-04T14:14:41.000Z","size":1338,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-13T02:57:49.673Z","etag":null,"topics":["expressjs","jwt-authentication","nodejs","reactjs","sqlite","task-manager"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Harsh-141cmd.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-08-04T13:41:38.000Z","updated_at":"2025-08-04T14:34:20.000Z","dependencies_parsed_at":"2025-08-04T18:26:20.854Z","dependency_job_id":null,"html_url":"https://github.com/Harsh-141cmd/Task-Manager","commit_stats":null,"previous_names":["harsh-141cmd/task-manager"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Harsh-141cmd/Task-Manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harsh-141cmd%2FTask-Manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harsh-141cmd%2FTask-Manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harsh-141cmd%2FTask-Manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harsh-141cmd%2FTask-Manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Harsh-141cmd","download_url":"https://codeload.github.com/Harsh-141cmd/Task-Manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harsh-141cmd%2FTask-Manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31581864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["expressjs","jwt-authentication","nodejs","reactjs","sqlite","task-manager"],"created_at":"2025-08-13T02:50:23.823Z","updated_at":"2026-04-09T01:32:19.412Z","avatar_url":"https://github.com/Harsh-141cmd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Task Manager App\n\nA full-stack task management application built with React and Node.js + Express.js. This application allows users to register, login, and manage their personal tasks with features like creating, editing, deleting, and marking tasks as complete.\n\n## 🚀 Features\n\n### Core Features\n- **User Authentication**: Secure registration and login with JWT tokens\n- **Task CRUD Operations**: Create, read, update, and delete tasks\n- **Task Status Management**: Mark tasks as pending or completed\n- **Task Filtering**: Filter tasks by status (All, Pending, Completed)\n- **Task Properties**: Title, description, status, created_at, updated_at\n\n### Bonus Features ✨\n- **Due Date Support**: Set and track task due dates\n- **Sort by Due Date**: Organize tasks by urgency\n- **Responsive Design**: Mobile-friendly interface\n- **Real-time Statistics**: View task counts and completion status\n- **Modern UI/UX**: Clean, intuitive design with smooth animations\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 18** - Modern UI library with hooks\n- **React Router DOM** - Client-side routing\n- **Axios** - HTTP client for API calls\n- **CSS3** - Custom styling with flexbox and grid\n\n### Backend\n- **Node.js 18** - JavaScript runtime\n- **Express.js** - Web application framework\n- **JWT (JSON Web Tokens)** - Secure authentication\n- **bcryptjs** - Password hashing\n- **SQLite3** - Embedded database\n- **CORS** - Cross-origin resource sharing\n\n### Database\n- **SQLite** - Embedded relational database\n\n## 📁 Project Structure\n\n```\ntask-manager-app/\n├── backend-node/               # Node.js/Express Backend\n│   ├── config/                # Configuration files\n│   │   └── database.js        # Database setup\n│   ├── controllers/           # Request handlers\n│   │   ├── authController.js  # Authentication logic\n│   │   └── taskController.js  # Task management logic\n│   ├── middleware/            # Custom middleware\n│   │   └── auth.js           # JWT authentication\n│   ├── models/               # Data models\n│   │   ├── User.js           # User model\n│   │   └── Task.js           # Task model\n│   ├── routes/               # API routes\n│   │   ├── auth.js           # Authentication routes\n│   │   └── tasks.js          # Task routes\n│   ├── server.js             # Main server file\n│   ├── package.json          # Dependencies\n│   └── taskmanager.db        # SQLite database\n├── frontend/                  # React Frontend\n│   ├── public/\n│   ├── src/\n│   │   ├── components/       # Reusable React components\n│   │   ├── pages/           # Page components\n│   │   ├── services/        # API calls and context\n│   │   └── App.js\n│   └── package.json\n└── README.md\n```\n\n## 🚦 Getting Started\n\n### Prerequisites\n- **Node.js 16** or higher\n\n### Backend Setup (Node.js/Express)\n\n1. Navigate to the backend directory:\n```bash\ncd backend-node\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the backend server:\n```bash\nnpm start\n```\n\nThe backend will start on `http://localhost:8080`\n\n### Frontend Setup\n\n1. Navigate to the frontend directory:\n```bash\ncd frontend\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm start\n```\n\nThe frontend will start on `http://localhost:3000`\n\n## 🔗 API Endpoints\n\n### Authentication\n- `POST /api/auth/signup` - Register a new user\n- `POST /api/auth/signin` - Login user\n\n### Tasks\n- `GET /api/tasks` - Get all tasks for authenticated user\n- `GET /api/tasks?status=PENDING` - Get tasks by status\n- `GET /api/tasks?sortByDueDate=true` - Get tasks sorted by due date\n- `POST /api/tasks` - Create a new task\n- `PUT /api/tasks/{id}` - Update a task\n- `PUT /api/tasks/{id}/complete` - Mark task as completed\n- `DELETE /api/tasks/{id}` - Delete a task\n\n## 🧪 Testing\n\n### Backend Testing\n```bash\ncd backend\nnpm test\n```\n\n### Frontend Testing\n```bash\ncd frontend\nnpm test\n```\n\n## 🎯 Usage Guide\n\n### 1. Registration\n1. Visit `http://localhost:3000`\n2. Click \"Sign up\" if you don't have an account\n3. Fill in your name, email, and password\n4. Click \"Create Account\"\n\n### 2. Login\n1. Enter your email and password\n2. Click \"Sign In\"\n3. You'll be redirected to the dashboard\n\n### 3. Managing Tasks\n1. **Create Task**: Click \"Add New Task\" button\n2. **Edit Task**: Click the edit icon (✏️) on any task\n3. **Complete Task**: Click \"✓ Complete\" button on pending tasks\n4. **Delete Task**: Click the delete icon (🗑️) on any task\n5. **Filter Tasks**: Use the dropdown to filter by status\n6. **Sort Tasks**: Check \"Sort by Due Date\" to organize by urgency\n\n## 🎨 Design Approach\n\n### Frontend Architecture\n- **Component-based Architecture**: Modular, reusable components\n- **Context API**: Global state management for authentication\n- **Protected Routes**: Secure route access based on authentication\n- **Responsive Design**: Mobile-first approach with CSS Grid and Flexbox\n- **Error Handling**: User-friendly error messages and loading states\n\n### Backend Architecture\n- **Layered Architecture**: Clear separation of concerns\n- **RESTful API Design**: Standard HTTP methods and status codes\n- **JWT Authentication**: Stateless authentication mechanism\n- **Input Validation**: Server-side validation for data integrity\n- **Exception Handling**: Comprehensive error handling\n\n### Security Features\n- **Password Encryption**: BCrypt hashing\n- **JWT Tokens**: Secure token-based authentication\n- **CORS Configuration**: Controlled cross-origin requests\n- **Authorization**: Role-based access control\n\n## 🚧 Challenges Faced \u0026 Solutions\n\n### 1. CORS Issues\n**Challenge**: Cross-origin requests between React (port 3000) and Node.js (port 8080)\n**Solution**: Configured CORS in Express server with proper allowed origins and methods\n\n### 2. JWT Token Management\n**Challenge**: Handling token expiration and automatic logout\n**Solution**: Implemented axios interceptors for automatic token attachment and logout on 401 errors\n\n### 3. State Management\n**Challenge**: Managing user authentication state across components\n**Solution**: Used React Context API for global authentication state\n\n### 4. Responsive Design\n**Challenge**: Creating a mobile-friendly interface\n**Solution**: Implemented CSS Grid and Flexbox with mobile-first approach\n\n## 🔮 Future Enhancements\n\n- **Drag \u0026 Drop**: Trello-style task management\n- **Task Categories**: Organize tasks by categories\n- **Team Collaboration**: Share tasks with other users\n- **Push Notifications**: Reminders for due tasks\n- **Advanced Filtering**: Search, date ranges, priority levels\n- **Dark Mode**: Theme switching capability\n- **File Attachments**: Add files to tasks\n- **Task Comments**: Collaborative notes on tasks\n\n## 📸 Screenshots\n\n### Signup Page\n![Signup Page](./images/signup-page.png)\n*User registration interface with form validation and clean design*\n\n### Login Page\n![Login Page](./images/login-page.png)\n*Clean, modern login interface with form validation*\n\n### Dashboard\n![Dashboard](./images/dashboard.png)\n*Comprehensive dashboard with task statistics, filtering, and responsive grid layout*\n\n### Task Creation\n![Task Creation Modal](./images/task-creation.png)\n*Modal-based task creation with due date support*\n\n### Task Management\n![Tasks View](./images/tasks-view.png)\n*Task list with CRUD operations, status management, and filtering options*\n\n### Mobile View\n![Mobile Responsive Design](./images/mobile-view.png)\n*Fully responsive design that works seamlessly on mobile devices*\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharsh-141cmd%2Ftask-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharsh-141cmd%2Ftask-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharsh-141cmd%2Ftask-manager/lists"}