{"id":28315771,"url":"https://github.com/marrcelp/task-manager","last_synced_at":"2026-02-21T13:01:33.571Z","repository":{"id":289119841,"uuid":"970179624","full_name":"marrcelp/Task-Manager","owner":"marrcelp","description":"⏱️🧠 A simple task timer app where users can track time spent on tasks, mark them as completed, and remove them when finished. 👨‍💻 All task data is stored in API I set up myself on AWS - served securely over HTTPS using Nginx as a reverse proxy.","archived":false,"fork":false,"pushed_at":"2025-04-25T15:28:23.000Z","size":214,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-22T05:33:09.025Z","etag":null,"topics":["api","aws","aws-ec2","css","fetch-api","javascript","react","rest-api"],"latest_commit_sha":null,"homepage":"https://marrcelp.github.io/Task-Manager/","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/marrcelp.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-04-21T15:54:01.000Z","updated_at":"2025-04-25T15:36:24.000Z","dependencies_parsed_at":"2025-06-22T08:46:02.453Z","dependency_job_id":null,"html_url":"https://github.com/marrcelp/Task-Manager","commit_stats":null,"previous_names":["marrcelp/task-manager"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marrcelp/Task-Manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FTask-Manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FTask-Manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FTask-Manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FTask-Manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marrcelp","download_url":"https://codeload.github.com/marrcelp/Task-Manager/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marrcelp%2FTask-Manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29681468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T12:30:22.644Z","status":"ssl_error","status_checked_at":"2026-02-21T12:29:55.402Z","response_time":107,"last_error":"SSL_read: 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":["api","aws","aws-ec2","css","fetch-api","javascript","react","rest-api"],"created_at":"2025-05-25T01:12:29.469Z","updated_at":"2026-02-21T13:01:33.561Z","avatar_url":"https://github.com/marrcelp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![demo gif](./src/styles/assets/demo-task2.gif)\n\n# TasksManager – Your Personal Task Timer\n\nSee the live version of this project:\n\n- 🕒 [User interface](https://marrcelp.github.io/Task-Manager/)\n\nThe goal of this project is to create a simple but functional task timer app that demonstrates interaction with a REST API. Users can add tasks, track the time spent on them, and mark tasks as completed or removed. All operations are persisted via a backend API.\n\nEach task has a built-in stopwatch, which can be started and stopped manually. Once a task is marked as done, it becomes eligible for deletion from the UI. However, all tasks (including removed ones) are still stored in the backend for future reference.\n\n**Main features**:\n- Adding new tasks with a custom name.\n- Tracking time for each task individually with start/stop buttons.\n- Marking tasks as completed (displays a green tick).\n- Removing completed tasks from the list (but not from the database).\n- Persisting all task data to an external API (`https://13.60.90.67/data`).\n\n---\n\n## ❗️ First-time setup notice\n\nFor security reasons, the API is hosted with a **self-signed HTTPS certificate**.  \nBefore using the app for the first time, you need to manually visit the API link and confirm your browser's security exception:\n\n🔗 https://13.60.90.67\n\nSteps:\n\n1. Open the link above in your browser.\n2. Click **“Advanced”** → **“Proceed to 13.60.90.67 (unsafe)”**.\n3. Return to the app – it will now be able to fetch data from the API correctly.\n\n\u003e ✅ This only needs to be done **once per browser**.\n\n\n## 💡 Technologies\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n![REST API](https://img.shields.io/badge/REST%20API-%23000000.svg?style=for-the-badge\u0026logo=api\u0026logoColor=white)\n![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge\u0026logo=amazon-aws\u0026logoColor=white)\n\n---\n\n## 💿 Installation\n\nThe project uses [npm](https://www.npmjs.com/). To install it, type into the terminal:\n\n```bash\nnpm install\n```\nTo run the project locally:\n\n```bash\nnpm start\n```\nThen open:\n\n- `http://localhost:4000` to view the app in the browser.\n\nTo start the backend, you don't need to run anything locally. The API is already live and running on a server I configured myself on AWS using json-server. It is served over HTTPS with a self-signed certificate using Nginx as a reverse proxy.\n\nAPI endpoints:\n\n🔗 `https://13.60.90.67/data`\n\n## 🛠️ AWS Server Configuration (short overview)\n\nI manually set up an **Ubuntu-based EC2 instance on AWS** to host the API for this project.\n\nAfter configuring the firewall and opening the necessary ports (4000 for the app and 443 for HTTPS), I:\n\n- Installed **Node.js** on the server.\n- Globally installed **json-server** for quick REST API setup.\n- Created a `data.json` file to store the task data.\n- Used **PM2** to run the json-server process in the background and keep it alive after reboots.\n\nThe API runs on port `4000`, and I configured **Nginx as a reverse proxy** to expose it securely via HTTPS on port `443`.\n\n### 👇 Example PM2 setup command:\n\n```bash\npm2 start json-server --name tasks-api -- \\\n  --watch /home/ubuntu/tasksmanager/data.json --port 4000\npm2 save\n```\n\n---\n\n## 🔧 Core functionality\n\n| Feature               | Implementation                                    | Code Snippet                           |\n|-----------------------|----------------------------------------------------|----------------------------------------|\n| Add a task            | Using form and POST request to the API            | `sendTask(url, newTask)`               |\n| Track time with timer | `setInterval` updates time every second           | `this.timer = setInterval(...)`        |\n| Mark task as done     | PATCH with `isDone: true`                         | `updateTask(url, id, { isDone: true })`|\n| Remove task           | PATCH with `isRemoved: true`                      | `updateTask(url, id, { isRemoved: true })`|\n\n### ⏱ Time formatting\n\nEach task's time is displayed in `hh:mm:ss` format. Example output: `00:10:32`\n\n```js\nformatTime = (totalSeconds) =\u003e {\n  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');\n  const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');\n  const seconds = String(totalSeconds % 60).padStart(2, '0');\n  return `${hours}:${minutes}:${seconds}`;\n}\n```\n## 🔮 Future Improvements\n\nIn future versions of the **TasksManager**, I would like to enhance the app with the following features:\n\n#### 📅 Task Date \u0026 Time History\n\nCurrently, the app tracks the **total time** spent on a task, but it doesn’t store **when** the task was performed. I want to implement:\n\n- Saving the **exact date** and **time range** (start → stop) for each session a task is running.\n- Creating a **list of time entries** for each task – so users can view the full history of when a task was worked on.\n\n**Example:**\n\n```text\n✅ Task: \"Write blog post\"\n▶ 2025-04-24 | 14:03 – 14:45\n▶ 2025-04-25 | 09:00 – 09:25\n```\n\nThis will make the app more useful for time reporting and personal productivity.\n\n---\n\n## 🙋‍♂️ Feel free to contact me\n\nWrite sth nice ;) Find me on:\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/marcel-piaszczyk-200ba8181/)\n[![Gmail](https://img.shields.io/badge/Gmail-%23D14836.svg?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:marcel.piaszczyk@gmail.com)\n\n---\n\n## 👏 Special thanks\n\nThanks to my [Mentor - devmentor.pl](https://devmentor.pl/) – for support and code review.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarrcelp%2Ftask-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarrcelp%2Ftask-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarrcelp%2Ftask-manager/lists"}