{"id":19279448,"url":"https://github.com/thepuskar/todoist-clone","last_synced_at":"2025-04-22T00:32:49.360Z","repository":{"id":38986907,"uuid":"252139272","full_name":"thepuskar/todoist-clone","owner":"thepuskar","description":"Built Todo App Using React (Custom Hooks, Context), Firebase \u0026 React Testing Library. In addition to the latter technologies, I had styled the application using SCSS (CSS) and following the BEM naming methodology.","archived":false,"fork":false,"pushed_at":"2023-03-03T11:40:32.000Z","size":2453,"stargazers_count":24,"open_issues_count":12,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-07T21:09:05.686Z","etag":null,"topics":["custom-hooks","firebase","react","scss"],"latest_commit_sha":null,"homepage":"","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/thepuskar.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}},"created_at":"2020-04-01T10:09:49.000Z","updated_at":"2023-02-24T04:18:44.000Z","dependencies_parsed_at":"2023-02-05T01:02:35.390Z","dependency_job_id":null,"html_url":"https://github.com/thepuskar/todoist-clone","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepuskar%2Ftodoist-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepuskar%2Ftodoist-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepuskar%2Ftodoist-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepuskar%2Ftodoist-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thepuskar","download_url":"https://codeload.github.com/thepuskar/todoist-clone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223883675,"owners_count":17219270,"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":["custom-hooks","firebase","react","scss"],"created_at":"2024-11-09T21:15:02.752Z","updated_at":"2024-11-09T21:15:02.850Z","avatar_url":"https://github.com/thepuskar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eTodo App\u003c/h1\u003e\n\u003cp\u003e\nIn this repo, I am had created the popular \u003ca href=\"https://todoist.com\"\u003eTodoist\u003c/a\u003e application using \u003cb\u003ecreate-react-app\u003c/b\u003e as a base from scratch using React (Custom Hooks, Context), Firebase \u0026 React Testing Library (unit \u0026 integration testing). In addition to the latter technologies, I had styled the application using SCSS (CSS) and following the BEM naming methodology and I had to make sure that the application is fully responsive.\n\u003c/p\u003e\n\n\u003ch2\u003eScreenshot\u003c/h2\u003e\n\u003cimg src=\"./src/images/ss.png\" style=\"box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\" /\u003e\n\n\u003ch1\u003e🛠 Installation \u0026 Set Up\u003c/h1\u003e\n\n#### 1. Install and use the correct version of Node\n\n```\nnpm install\n```\n\n#### 2. Install dependencies\n\n```\n+ npm install --save-dev @testing-library/jest-dom\n\n+ npm install --save-dev @testing-library/react\n\n+ npm install @testing-library/user-event --save-dev\n\n+ npm install --save firebase\n\n+ npm install moment --save\n\n+ npm install node-sass\n\n+ npm install react react-dom\n\n+ npm install react-icons --save\n```\n\n#### 3. Start the development server\n\n```\nnpm start\n```\n\n# 🛠 Set Up for firebase\n\n1. Create a Firebase project in the \u003ca href=\"https://console.firebase.google.com/\"\u003eFirebase console\u003c/a\u003e, click Add project, then follow the on-screen instructions to create a Firebase project or to add Firebase services to an existing GCP project.\n\n2) Navigate to the Database section of the Firebase console. You'll be prompted to select an existing Firebase project. Follow the database creation workflow.\n3) Select a starting mode for your Firebase Security Rules:\n\n   - Test mode\n\n     Good for getting started with the mobile and web client libraries, but allows anyone to read and overwrite your data. After testing, **make sure to review the [Understand Firebase Realtime Database Rules](https://firebase.google.com/docs/database/security) section.**\n     To get started with the web, iOS, or Android SDK, select test mode.\n\n\n    - Locked mode\n\n      Denies all reads and writes from mobile and web clients. Your authenticated application servers can still access your database.\n\n4.  Click **Done**.\n\nWhen you enable Realtime Database, it also enables the API in the [Cloud API Manager](https://console.cloud.google.com/projectselector/apis/api/firebasedatabase.googleapis.com/overview).\n\n## Firebase config object\n\nTo initialize Firebase in your app, you need to provide your app's Firebase project configuration.\n\n```\nimport  firebase  from  \"firebase/app\";\nimport  \"firebase/firestore\";\n\nconst  firebaseConfig = firebase.initializeApp({\napiKey:  \"API-KEY\",\nauthDomain:  \"\"project-id.firebaseapp.com\"\",\ndatabaseURL:  \"https://project-id.firebaseio.com\",\nprojectId:  \"project-id\",\nstorageBucket:  \"project-id.appspot.com\",\nmessagingSenderId:  \"sender-id\",\nappId:  \"app-id\",\nmeasurementId:  \"G-measurement-id\",\n});\n\nexport { firebaseConfig  as  firebase };\n```\n\n\u003cbr /\u003e\n\n# #🚀HappyCoding\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepuskar%2Ftodoist-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthepuskar%2Ftodoist-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepuskar%2Ftodoist-clone/lists"}