{"id":20980263,"url":"https://github.com/ali-sdg90/todo-app-firebase","last_synced_at":"2026-05-05T14:32:27.320Z","repository":{"id":190845397,"uuid":"683458219","full_name":"Ali-Sdg90/Todo-App-Firebase","owner":"Ali-Sdg90","description":"Todo App with Firebase backend for CS_Internship","archived":false,"fork":false,"pushed_at":"2023-10-27T15:40:31.000Z","size":272,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-30T15:50:49.966Z","etag":null,"topics":["css","firebase","firebase-database","javascript","todo-app"],"latest_commit_sha":null,"homepage":"https://ali-sdg9093-todo-app.web.app/","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/Ali-Sdg90.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}},"created_at":"2023-08-26T16:30:50.000Z","updated_at":"2023-09-08T14:56:11.000Z","dependencies_parsed_at":"2025-01-20T06:28:29.344Z","dependency_job_id":"f64e1de6-6118-4235-a122-a6adc5ea3584","html_url":"https://github.com/Ali-Sdg90/Todo-App-Firebase","commit_stats":null,"previous_names":["ali-sdg90/todo-app-firebase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ali-Sdg90/Todo-App-Firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FTodo-App-Firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FTodo-App-Firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FTodo-App-Firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FTodo-App-Firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ali-Sdg90","download_url":"https://codeload.github.com/Ali-Sdg90/Todo-App-Firebase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ali-Sdg90%2FTodo-App-Firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32653530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","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":["css","firebase","firebase-database","javascript","todo-app"],"created_at":"2024-11-19T05:17:32.130Z","updated_at":"2026-05-05T14:32:27.307Z","avatar_url":"https://github.com/Ali-Sdg90.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eTodo-App-Firebase🗂\u003c/h1\u003e\n\u003cp\u003e\u003cimg src=\"Assets/readme-img.png\" alt=\"Todo-App-img\" /\u003e\u003c/p\u003e\n\u003ch2\u003eIntroduction\u003c/h2\u003e\n\u003cp\u003e\n    Welcome to the Todo App with Firebase repository! In this project, I've\n    created a JavaScript-based Todo app that showcases the integration of\n    Firebase for backend services. This app allows users to manage their todos,\n    leveraging Firebase to store and retrieve data.\n\u003c/p\u003e\n\u003cp\u003e\n    The code in this repository has been developed professionally and is\n    organized into two main sections within the \u003ccode\u003epublic\u003c/code\u003e folder:\n\u003c/p\u003e\n\u003col\u003e\n    \u003cli\u003e\n        \u003cstrong\u003eTodo Files\u003c/strong\u003e: Contains the core files for the Todo app.\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cstrong\u003eWork-w-firebase\u003c/strong\u003e: Includes base files that demonstrate\n        how to interact with Firebase to send and retrieve data using both the\n        traditional and snapshot methods.\n    \u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2\u003eGetting Started\u003c/h2\u003e\n\u003cp\u003eTo run the code locally on your machine, follow these steps:\u003c/p\u003e\n\u003col\u003e\n    \u003cli\u003e\u003cp\u003eClone or download this repository to your local system.\u003c/p\u003e\u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            Open a terminal in the repository's folder and run the following\n            command:\n        \u003c/p\u003e\n        \u003cpre\u003e\u003ccode\u003efirebase serve\u003c/code\u003e\u003c/pre\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            Open your web browser and navigate to\n            \u003ca href=\"http://localhost:5000/\" target=\"_new\"\n                \u003ehttp://localhost:5000/\u003c/a\n            \u003e\n            to access the running code.\n        \u003c/p\u003e\n    \u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\n    Alternatively, you can also experience the live demo of the app at\n    \u003ca href=\"https://ali-sdg9093-todo-app.web.app/\" target=\"_new\"\n        \u003ehttps://ali-sdg9093-todo-app.web.app/\u003c/a\n    \u003e.\n\u003c/p\u003e\n\u003ch2\u003eFeatures\u003c/h2\u003e\n\u003cp\u003eThis Todo app offers the following features:\u003c/p\u003e\n\u003cul\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cstrong\u003eAdd Tasks\u003c/strong\u003e: You can add tasks by typing into the\n            input field and clicking the \"Add\" button.\n        \u003c/p\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cstrong\u003eFilter Tasks\u003c/strong\u003e: Tasks can be filtered by clicking the\n            \"All,\" \"Active,\" or \"Completed\" buttons.\n        \u003c/p\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cstrong\u003eClear Tasks\u003c/strong\u003e: Easily clear all tasks by clicking the\n            \"Clear\" button.\n        \u003c/p\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003cstrong\u003ePersistence\u003c/strong\u003e: Tasks are saved to Firebase, ensuring\n            they persist even after the browser is closed or refreshed.\n        \u003c/p\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eCode Structure\u003c/h2\u003e\n\u003cp\u003e\n    The code is well-organized and utilizes various variables to interact with\n    the HTML elements and Firebase:\n\u003c/p\u003e\n\u003cul\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            \u003ccode\u003eaddBtn\u003c/code\u003e, \u003ccode\u003etodoCounter\u003c/code\u003e,\n            \u003ccode\u003ependingFilter\u003c/code\u003e,\n            \u003ccode\u003eclearAll\u003c/code\u003e, \u003ccode\u003etodoInput\u003c/code\u003e,\n            \u003ccode\u003etodoList\u003c/code\u003e are used to select\n            different parts of the HTML for manipulation.\n        \u003c/p\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cp\u003e\n            An array named \u003ccode\u003etodoSaves\u003c/code\u003e is employed to store tasks,\n            while another array, \u003ccode\u003efilteredTodoSaves\u003c/code\u003e, is used to\n            store filtered tasks. The\n            \u003ccode\u003efilterTodoSavesFunc()\u003c/code\u003e function filters tasks based on\n            the filter mode (\u003ccode\u003eall\u003c/code\u003e, \u003ccode\u003eactive\u003c/code\u003e, or\n            \u003ccode\u003ecompleted\u003c/code\u003e). The\n            \u003ccode\u003eupdateHTML(addNewTodo)\u003c/code\u003e function refreshes the DOM to\n            display the list of tasks.\n        \u003c/p\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003eSteps\u003c/h2\u003e\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eSteps\u003c/th\u003e\n            \u003cth\u003eGithub\u003c/th\u003e\n            \u003cth\u003eJSFiddle\u003c/th\u003e\n            \u003cth\u003eLive Demo\u003c/th\u003e\n            \u003cth\u003eShowcase Video\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eStep 3 (base file)\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://github.com/Ali-Sdg90/Todo-App/tree/2471d1bfbd34de78b451684a90d3c6db4ac20350\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://jsfiddle.net/Ali_Sdg90/v60okbum/\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e---\u003c/td\u003e\n            \u003ctd\u003eComing soon...\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eStep 4 (todo btns + SCSS)\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://github.com/Ali-Sdg90/Todo-App\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://jsfiddle.net/Ali_Sdg90/k4Lwxare/\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e---\u003c/td\u003e\n            \u003ctd\u003eComing soon...\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eStep 5 (knockout.js)\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://github.com/Ali-Sdg90/Todo-App-KnockoutJS\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://jsfiddle.net/Ali_Sdg90/v7nac15g/4/\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://ali-sdg90.github.io/Todo-App-KnockoutJS/\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003eComing soon...\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eStep 6 (localStorage)\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://github.com/Ali-Sdg90/Todo-App\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://jsfiddle.net/Ali_Sdg90/tz105ux4/1/\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://ali-sdg90.github.io/Todo-App/\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003eComing soon...\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eStep 6 (Firebase)\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://github.com/Ali-Sdg90/Todo-App-Firebase\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://jsfiddle.net/Ali_Sdg90/bfLrwtxg/2/\" target=\"_new\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ca href=\"https://ali-sdg9093-todo-app.web.app/\"\u003eLink\u003c/a\u003e\u003c/td\u003e\n            \u003ctd\u003eComing soon...\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\u003cp\u003eEnjoy using the app❤️\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-sdg90%2Ftodo-app-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fali-sdg90%2Ftodo-app-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-sdg90%2Ftodo-app-firebase/lists"}