{"id":19945900,"url":"https://github.com/blackiq/timetracker-react","last_synced_at":"2025-05-03T16:32:40.173Z","repository":{"id":40253699,"uuid":"476279440","full_name":"BlackIQ/TimeTracker-React","owner":"BlackIQ","description":"Time-Tracker is a cross platform software integrated with Firebase and this is the web version created with React.","archived":false,"fork":false,"pushed_at":"2023-02-02T19:21:57.000Z","size":2932,"stargazers_count":9,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T18:42:50.132Z","etag":null,"topics":["firebase","firestore","react","web"],"latest_commit_sha":null,"homepage":"https://time-tracker-f3ebc.web.app","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/BlackIQ.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},"funding":{"custom":["https://paypal.me/meBlackIQ","https://www.patreon.com/BlackIQ","https://idpay.ir/amirhosseinmohammadi"]}},"created_at":"2022-03-31T11:39:48.000Z","updated_at":"2022-07-25T13:59:49.000Z","dependencies_parsed_at":"2023-02-08T06:16:34.370Z","dependency_job_id":null,"html_url":"https://github.com/BlackIQ/TimeTracker-React","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackIQ%2FTimeTracker-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackIQ%2FTimeTracker-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackIQ%2FTimeTracker-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackIQ%2FTimeTracker-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackIQ","download_url":"https://codeload.github.com/BlackIQ/TimeTracker-React/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252216099,"owners_count":21713099,"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","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":["firebase","firestore","react","web"],"created_at":"2024-11-13T00:27:23.876Z","updated_at":"2025-05-03T16:32:39.833Z","avatar_url":"https://github.com/BlackIQ.png","language":"JavaScript","funding_links":["https://paypal.me/meBlackIQ","https://www.patreon.com/BlackIQ","https://idpay.ir/amirhosseinmohammadi"],"categories":[],"sub_categories":[],"readme":"# Time Tracker | React\n\nTime tracker is a cloud based task manager where you can manage your tasks in your mobile or web browser in a same time or in a most appropriate way, **Real-time**.\n\n## How?\n\nThe Back-End for both web and mobile platform is by **Google Firebase services**. So there is no worry about missing data, authentication and any other things.\n\n## Mobile application\n\nMobile app is created with Flutter and it is also open source. You can see it from these links:\n\n- [Github source](https://github.com/BlackIQ/TimeTracker-Flutter)\n- \u003e APK is not available, It will be release today.\n\n## Firebase\n\nFirebase is a cloud service provider for many frameworks. Like **Authentication**, **Cloud Firestore** and **Hosting**.\n\n### Authentication\n\n![Auth page](public/images/react-auth.png)\n\nAuthentication with Firebase is so easy. You can turn on Auth providers in your project part in Firebase and add their methods in your source project.\n\nOur application has 3 ways to authenticating.\n\n![Auth providers](public/images/auth-providers.png)\n\nIn the Firebase authentication part, there is a part you can see users and the uid.\n\n![Users](public/images/users-authentication.png)\n\n#### Email \u0026 Password Authentication\n\n![Login email and password](public/images/ep-login.png) ![Register email and password](public/images/ep-register.png)\n\nYou can use your Email and Password to register or login. There is also a way to reset your password.\n\n#### Google Authentication\n\nIf you have a Google account, you can easily authenticate with your Google account.\n\n#### Anonymous Authentication\n\nIf you want to use the app as a guest or testing app, you can use Anonymous authentication where you don't need to have any Google account or any other emails.\n\n### Firestore\n\nAs we said before, we save data in **Firestore**. Firestore is a NoSQL database, there are 2 collections that I will describe them.\n\n#### Tasks collection\n\n![Tasks collection](public/images/task-collection.png)\n\nIn this collection, there are task documents. Every document has 4 keys. Like a Json file.\n\n```json\n{\n  \"uid\": \"user uid\",\n  \"status\": true,\n  \"created\": \"Time stamp\",\n  \"name\": \"Task name\"\n}\n```\n\nThe `status` can be `true` or `false`.\n\n#### Users collection\n\n![Users collection](public/images/user-collection.png)\n\nThere are only 2 items that store in users collection.\n\n```json\n{\n  \"user\": \"user id\",\n  \"name\": \"user name\"\n}\n```\n\nIf user authenticate with Google account, the `name` will be your Google account name. If not, the `null` will be store in that field.\n\n\u003e Name can change in your panel.\n\n### Hosting\n\nApp is hosting in **Firebase Hosting**. More details are described in the end of the document.\n\n## Application components\n\n![Panel](public/images/react-panel.png)\n\nApplication user panel has 3 components. A navbar, Task component and adding task component.\n\n### Adding task component\n\nValidation for adding task is the mos simple way. It check the value of input and if it is not null, the button will be enabled.\n\n![Disable button](public/images/react-add-disable.png) ![Enable button](public/images/react-add-enable.png)\n\n### Task component\n\nTask component contains a checkbox that shows that task is done or not. Inside of checkbox, there is task name. To delete a task, there is a delete span that has an onClick event.\n\n![Done task](public/images/react-task-done.png) ![Not task](public/images/react-task-not.png)\n\n## Application deployment\n\nThis app is running in **Firebase Hosting** and you can access to it via [this link](https://time-tracker-f3ebc.firebaseapp.com) or [this link](https://time-tracker-f3ebc.web.app).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackiq%2Ftimetracker-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackiq%2Ftimetracker-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackiq%2Ftimetracker-react/lists"}