{"id":13533907,"url":"https://github.com/appwrite/demo-todo-with-react","last_synced_at":"2025-09-29T06:30:51.316Z","repository":{"id":37766858,"uuid":"352349362","full_name":"appwrite/demo-todo-with-react","owner":"appwrite","description":"A basic demo example for integrating between Appwrite \u0026 React JS 💙","archived":true,"fork":false,"pushed_at":"2023-10-06T16:23:42.000Z","size":637,"stargazers_count":199,"open_issues_count":22,"forks_count":127,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-01-15T11:06:55.670Z","etag":null,"topics":["appwrite","hacktoberfest","react","reactjs"],"latest_commit_sha":null,"homepage":"https://appwrite-todo-with-react.vercel.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/appwrite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-03-28T14:20:54.000Z","updated_at":"2025-01-01T05:44:32.000Z","dependencies_parsed_at":"2024-01-14T02:33:11.803Z","dependency_job_id":"79369eb6-64c3-42df-81d2-8ecd933a64f9","html_url":"https://github.com/appwrite/demo-todo-with-react","commit_stats":null,"previous_names":["appwrite/todo-with-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appwrite%2Fdemo-todo-with-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appwrite%2Fdemo-todo-with-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appwrite%2Fdemo-todo-with-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appwrite%2Fdemo-todo-with-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appwrite","download_url":"https://codeload.github.com/appwrite/demo-todo-with-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234597573,"owners_count":18857980,"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":["appwrite","hacktoberfest","react","reactjs"],"created_at":"2024-08-01T07:01:24.193Z","updated_at":"2025-09-29T06:30:45.948Z","avatar_url":"https://github.com/appwrite.png","language":"JavaScript","readme":"# 🔖 Todo With React\n\n![Easter Eggs Claimed](https://img.shields.io/github/issues-pr-closed-raw/appwrite/todo-with-react/easter-egg?label=Easter%20Eggs%20Claimed\u0026style=flat-square\u0026logo=data:image/png;base64,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)\n\nA simple todo app built with Appwrite and React\n\nIf you simply want to try out the App, go ahead and check out the demo at https://appwrite-todo-with-react.vercel.app\n\n\n## 🎬 Getting Started\n\n### 🤘 Install Appwrite \nFollow our simple [Installation Guide](https://appwrite.io/docs/installation) to get Appwrite up and running in no time. You can either deploy Appwrite on your local machine or, on any cloud provider of your choice. \n\n\u003e Note: If you setup Appwrite on your local machine, you will need to create a public IP so that your hosted frontend can access it.\n  \nWe need to make a few configuration changes to your Appwrite server. \n\n1. Add a new Web App in Appwrite and enter the endpoint of your website (`localhost, \u003cproject-name\u003e.vercel.app etc`)\n![Create Web App](https://user-images.githubusercontent.com/20852629/113019434-3c27c900-919f-11eb-997c-1da5a8303ceb.png)\n\n2. Create a new collection with the following properties\n* **Attributes**\n* \nAdd the following attributes to the collection. \n\u003e Make sure that your Attribute ID exactly matches the key in the images\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"744\" alt=\"Content Attribute\" src=\"https://user-images.githubusercontent.com/29069505/155617343-6ff674b3-9809-42ac-8175-0f76271b1189.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"744\" alt=\"IsComplete Attribute\" src=\"https://user-images.githubusercontent.com/29069505/155617393-f30270af-aa07-4392-a7b2-75b8ce9c60da.png\"\u003e\n\u003c/p\u003e\n\n* **Permissions**\n\nAdd the following permissions to your collections. These permissions ensure that only registered users can access the collection.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/20852629/113019801-99bc1580-919f-11eb-9a94-13b1529cb925.png\" alt=\"Collection Permissions\" width=\"400\"/\u003e\n\u003c/p\u003e\n\n### 🚀 Deploy the Front End\nYou have two options to deploy the front-end and we will cover both of them here. In either case, you will need to fill in these environment variables that help your frontend connect to Appwrite.\n\n* REACT_APP_ENDPOINT - Your Appwrite endpoint\n* REACT_APP_PROJECT - Your Appwrite project ID\n* REACT_APP_COLLECTION_ID - Your Appwrite collection ID \n\n### **Deploy to a Static Hosting Provider**\n\nUse the following buttons to deploy to your favourite hosting provider in one click! We support Vercel, Netlify and DigitalOcean. You will need to enter the environment variables above when prompted.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fappwrite%2Ftodo-with-react\u0026env=REACT_APP_COLLECTION_ID,REACT_APP_PROJECT,REACT_APP_ENDPOINT\u0026envDescription=Your%20Appwrite%20Endpoint%2C%20Project%20ID%20and%20Collection%20ID%20)\n\n[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/appwrite/demo-todo-with-react)\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/appwrite/todo-with-react)\n\n[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/appwrite/todo-with-react/tree/main)\n\n\n### **Run locally**\n\nFollow these instructions to run the demo app locally\n\n```sh\n$ git clone https://github.com/appwrite/todo-with-react\n$ cd todo-with-react\n```\n\nRun the following command to generate your `.env` vars\n\n```sh\n$ cp .env.example .env\n```\n\nNow fill in the envrionment variables we discussed above in your `.env`\n\nNow run the following commands and you should be good to go 💪🏼\n\n```\n$ npm install\n$ npm start\n```\n\n## 🤕 Support\n\nIf you get stuck anywhere, hop onto one of our [support channels in discord](https://appwrite.io/discord) and we'd be delighted to help you out 🤝\n\n## 😧 Help Wanted \nOur access credentials were recently compromised and someone tried to ruin these demos. They decided to leave behind 15 easter eggs 🥚 for you to discover. If you find them, submit a PR cleaning up that section of the code (One PR per person across all the repos). You can track the number of claimed Easter Eggs using the badge at the top.\n\nThe first 15 people to get their PRs merged will receive some Appwrite Swags 🤩 . Just head over to our [Discord channel](https://appwrite.io/discord) and share your PR link with us.  \n\n\u003e *UPDATE **17-11-2021**:* The easter egg contest is now closed. \n","funding_links":[],"categories":["Showcase (Built with Appwrite 📣)"],"sub_categories":["React"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappwrite%2Fdemo-todo-with-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappwrite%2Fdemo-todo-with-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappwrite%2Fdemo-todo-with-react/lists"}