appwrite/demo-todo-with-react

A basic demo example for integrating between Appwrite & React JS 💙

Our Appwrite Init event has concluded. You can check out all the new and upcoming features on our Init website 🚀

Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for developer experience in the coding languages you love.

English | 简体中文

Announcing Appwrite Cloud Public Beta! Sign up today!

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps packaged as a set of Docker microservices. Appwrite abstracts the complexity and repetitiveness required to build a modern backend API from scratch and allows you to build secure apps faster.

Using Appwrite, you can easily integrate your app with user authentication and multiple sign-in methods, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.

Find out more at: https://appwrite.io

Table of Contents:

• Installation
  • Unix
  • Windows
    • CMD
    • PowerShell
  • Upgrade from an Older Version
• One-Click Setups
• Getting Started
  • Services
  • SDKs
    • Client
    • Server
    • Community
• Architecture
• Contributing
• Security
• Follow Us
• License

Installation

Appwrite is designed to run in a containerized environment. Running your server is as easy as running one command from your terminal. You can either run Appwrite on your localhost using docker-compose or on any other container orchestration tool, such as Kubernetes, Docker Swarm, or Rancher.

The easiest way to start running your Appwrite server is by running our docker-compose file. Before running the installation command, make sure you have Docker installed on your machine:

Unix

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.5.4

Windows

CMD

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:1.5.4

PowerShell

docker run -it --rm `
    --volume /var/run/docker.sock:/var/run/docker.sock `
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw `
    --entrypoint="install" `
    appwrite/appwrite:1.5.4

Once the Docker installation is complete, go to http://localhost to access the Appwrite console from your browser. Please note that on non-Linux native hosts, the server might take a few minutes to start after completing the installation.

For advanced production and custom installation, check out our Docker environment variables docs. You can also use our public docker-compose.yml and .env files to manually set up an environment.

Upgrade from an Older Version

If you are upgrading your Appwrite server from an older version, you should use the Appwrite migration tool once your setup is completed. For more information regarding this, check out the Installation Docs.

One-Click Setups

In addition to running Appwrite locally, you can also launch Appwrite using a pre-configured setup. This allows you to get up and running quickly with Appwrite without installing Docker on your local machine.

Choose from one of the providers below:

DigitalOcean

Gitpod

Akamai Compute

Getting Started

Getting started with Appwrite is as easy as creating a new project, choosing your platform, and integrating its SDK into your code. You can easily get started with your platform of choice by reading one of our Getting Started tutorials.

Platform	Technology
Web app	Quick start for Web
	Quick start for Next.js
	Quick start for React
	Quick start for Vue.js
	Quick start for Nuxt
	Quick start for SvelteKit
	Quick start for Refine
	Quick start for Angular
Mobile and Native	Quick start for React Native
	Quick start for Flutter
	Quick start for Apple
	Quick start for Android
Server	Quick start for Node.js
	Quick start for Python
	Quick start for .NET
	Quick start for Dart
	Quick start for Ruby
	Quick start for Deno
	Quick start for PHP
	Quick start for Kotlin
	Quick start for Swift

Products

• Account - Manage current user authentication and account. Track and manage the user sessions, devices, sign-in methods, and security logs.
• Users - Manage and list all project users when building backend integrations with Server SDKs.
• Teams - Manage and group users in teams. Manage memberships, invites, and user roles within a team.
• Databases - Manage databases, collections, and documents. Read, create, update, and delete documents and filter lists of document collections using advanced filters.
• Storage - Manage storage files. Read, create, delete, and preview files. Manipulate the preview of your files to perfectly fit your app. All files are scanned by ClamAV and stored in a secure and encrypted way.
• Functions - Customize your Appwrite project by executing your custom code in a secure, isolated environment. You can trigger your code on any Appwrite system event either manually or using a CRON schedule.
• Messaging - Communicate with your users through push notifications, emails, and SMS text messages using Appwrite Messaging.
• Realtime - Listen to real-time events for any of your Appwrite services including users, storage, functions, databases, and more.
• Locale - Track your user's location and manage your app locale-based data.
• Avatars - Manage your users' avatars, countries' flags, browser icons, and credit card symbols. Generate QR codes from links or plaintext strings.

For the complete API documentation, visit https://appwrite.io/docs. For more tutorials, news and announcements check out our blog and Discord Server.

SDKs

Below is a list of currently supported platforms and languages. If you would like to help us add support to your platform of choice, you can go over to our SDK Generator project and view our contribution guide.

Client

• ✅   Web (Maintained by the Appwrite Team)
• ✅   Flutter (Maintained by the Appwrite Team)
• ✅   Apple (Maintained by the Appwrite Team)
• ✅   Android (Maintained by the Appwrite Team)
• ✅   React Native - Beta (Maintained by the Appwrite Team)

Server

• ✅   NodeJS (Maintained by the Appwrite Team)
• ✅   PHP (Maintained by the Appwrite Team)
• ✅   Dart (Maintained by the Appwrite Team)
• ✅   Deno (Maintained by the Appwrite Team)
• ✅   Ruby (Maintained by the Appwrite Team)
• ✅   Python (Maintained by the Appwrite Team)
• ✅   Kotlin (Maintained by the Appwrite Team)
• ✅   Swift (Maintained by the Appwrite Team)
• ✅   .NET - Beta (Maintained by the Appwrite Team)

Community

• ✅   Appcelerator Titanium (Maintained by Michael Gangolf)
• ✅   Godot Engine (Maintained by fenix-hub @GodotNuts)

Looking for more SDKs? - Help us by contributing a pull request to our SDK Generator!

Architecture

Appwrite uses a microservices architecture that was designed for easy scaling and delegation of responsibilities. In addition, Appwrite supports multiple APIs, such as REST, WebSocket, and GraphQL to allow you to interact with your resources by leveraging your existing knowledge and protocols of choice.

The Appwrite API layer was designed to be extremely fast by leveraging in-memory caching and delegating any heavy-lifting tasks to the Appwrite background workers. The background workers also allow you to precisely control your compute capacity and costs using a message queue to handle the load. You can learn more about our architecture in the contribution guide.

Contributing

All code contributions, including those of people having commit access, must go through a pull request and be approved by a core developer before being merged. This is to ensure a proper review of all the code.

We truly ❤️ pull requests! If you wish to help, you can learn more about how you can contribute to this project in the contribution guide.

Security

For security issues, kindly email us at [email protected] instead of posting a public issue on GitHub.

Follow Us

Join our growing community around the world! Check out our official Blog. Follow us on X, LinkedIn, Dev Community or join our live Discord server for more help, ideas, and discussions.

License

This repository is available under the BSD 3-Clause License.

demo-todo-with-react's Issues

🚀 Feature: Animation on the landing page

🔖 Feature description

Would look great if the landing page text renders with a smooth animation. And also the button click will be nice if its made the click look like button pushed. Thank you.

🎤 Pitch

This will make the webpage look attractive and yes this will make more interactive page

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Please let me know, If I can take this up.
Thank you

Signup Error

👟 Reproduction steps

When I try to signup to the demo app.

👍 Expected behavior

It should either signup or show the error message.

👎 Actual Behavior

It actually does nothing with no error message.

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Linux

🧱 Your Environment

version: 0.12

Request:
POST https://demo.appwrite.io/v1/account
Error:

code: 400
message: "Param \"userId\" is not optional."
version: "0.12.0"

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

📚 Documentation: database_id

💭 Description

where i can find the database id?

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🚀 Feature: Title and Icon both are changed

🔖 Feature description

hello @codercatdev ,
I Request to you regarding your todo-app in which its Icon and Title both are not given by your app these are automatically on creating a react app. icon change to Appwrite icon , "React App" title change to "Todo App".
I want to work on this issue ..please assign me

🎤 Pitch

I Request to you regarding your todo-app in which its Icon and Title both are not given by your app these are automatically on creating a react app. icon change to Appwrite icon , "React App" title change to "Todo App".

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🚀 Feature: Enhance User Interface and Update Project Title

🔖 Feature description

• Alignment Fix: The current login/register form alignment in the application is off, as it's positioned to the left. This feature aims to fix the alignment and center it for a more visually appealing user experience.

• Twitter Logo Update: The current application uses an outdated Twitter logo. We'll update it with the new "X" logo and ensure that the logo links to the correct Twitter profile. (Currently its been linked to the old appwrite page)

• Project Title Change: Currently, the project is titled "React App." This change aims to update the project title to "ToDo App" to better reflect its purpose.

🎤 Pitch

Issue Context: The current user interface in the "demo-todo-with-react" repository could benefit from some visual enhancements. This includes centering the login/register form, updating the Twitter logo, and making the project title more descriptive.

Screenshots

1. Alignment Fix:
   

2. Twitter Logo Update:
   
   

3. Project Title Change:
   

Assignment and Label:

I would like to be assigned to this issue.
Label this issue as "hacktoberfest" to encourage participation and contribution during Hacktoberfest.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report: Account made with invalid password

👟 Reproduction steps

1. Try to create an account with a short password (for example, test)
2. Try to change the password to a complying password (for example, testing123)

👍 Expected behavior

The account shouldn't be created with the invalid password

👎 Actual Behavior

The account is created with the invalid password. It is impossible to re-create it with the correct password or even login with the invalid version

🎲 Appwrite version

Version 0.10.x

💻 Operating system

Linux

🧱 Your Environment

No

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report: No Error Message On adding invalid email and password or login failure

👟 Reproduction steps

When enter an invalid email or password or an email that has already been registered it does not show any sort of error or error message which looks very bad.

👍 Expected behavior

It should throw an error message in the form of an toast notifying the user of the error and error type.

👎 Actual Behavior

I am planning to use react-toastify to solve this problem and notify the users whenever there is an incorrect login or message and show the user the correct error message.

🎲 Appwrite version

Version 0.10.x

💻 Operating system

Windows 10

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and did find a bug raised almost a year ago but no one has yet worked on it

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Failed to compiled

Hello,

Got the following error when trying to npm start the project
`
Failed to compile.

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
TypeError: [(...variantsValue),(...extensions)].flat is not a function
`

npm 7.15.0

🚀 Feature: Changing the Theme of the app to match the color code of appwrite. (Pinkish)

🔖 Feature description

Changing the theme of the buttons to the official pinkish color of appwrite,

and same for login button, and so on...
To match the theme with the branding of appwrite.

🎤 Pitch

Implementing is as easy as changing the color, and it will make the web app better and aligned with the branding of appwrite.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report: It creates new To do list on hitting enter event if no input is provided.

👟 Reproduction steps

After logging in, I created a new To do. Then again I focus the input field and hit enter and created a new empty To do which was unexpected.

👍 Expected behavior

It should show pop up that ask user for input.

👎 Actual Behavior

It creates new empty To do list element.

🎲 Appwrite version

Version 0.10.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report: Reloading of Todo page will redirect to login page

👟 Reproduction steps

When I refresh the todos page I redirect me to the login page.

👍 Expected behavior

It should reopen the todos app if we hit refresh on the todos page.

👎 Actual Behavior

appwrite-todo-react-example-bug-with-refresh.mp4

🎲 Appwrite version

Version 0.10.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🚀 Feature: Display Error messages

🔖 Feature description

I noticed when I was trying to log in to the app with a non-existent account, the app just did nothing. It did not display an error message to say what was going wrong.

Display error messages in the form itself or like a toaster could be a nice improvement to the UX

🎤 Pitch

It can be frustrating for those testing out the app when they get no feedback for their actions. Displaying an error message can help the user know exactly what they are doing wrong and make necessary adjustments.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report:

👟 Reproduction steps

When I fill in the login or sign up form and press the submit button, nothing happens

👍 Expected behavior

I should be able to sign up and maybe route to another page

👎 Actual Behavior

Nothing happens. The buttons don't work

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Something else

🧱 Your Environment

Mobile phone. Chrome browser . I am not sure of the AppWrite version

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🚀 Feature: Update the logo to AppWrite from React default logo and change name from React App to "To Do App"

🔖 Feature description

Appwrite logo in PNG format instead of React default logo
Change name from React App to " To Do App"

🎤 Pitch

It looks professional

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🚀 Feature: autofill attributes to login and signup forms

🔖 Feature description

I want to add attributes to the forms on the login and signup pages such that each field gets autofill help from the browser.

🎤 Pitch

A survey conducted by Google found that users fill forms 30% faster with autofill. Now, I've seen that this project is to demonstrate how React and Appwrite work with a simple ToDo app. In my opinion, since this is a demo application, we don't want our developers spending time on the login page during testing the app and learning about it. So, I thought if I add attributes that make autofill enabled/faster, it would help the application and the developer.

If you think this would help others, please assign this issue to me and I will make a PR!

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report: Unable to add todo tasks

👟 Reproduction steps

Try adding any task. The request fails with message "The current user is not authorized to perform the requested action.".

👍 Expected behavior

The task should get added successfully.

👎 Actual Behavior

Request for adding task fails

🎲 Appwrite version

Version 0.10.x

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Upgrade our issue templates to use GitHub issue forms ✍️

Introduction

GitHub has recently rolled out a public beta for their issue forms feature. This would allow you to create interactive issue templates and validate them 🤯.

Appwrite currently uses the older issue template format. Your task is to create GitHub issue forms for this repository. Please use Appwrite's issue templates as a reference for this PR.

Tasks summary:

• Fork & clone this repository
• Prepare bug report issue form in .github/ISSUE_TEMPLATE/bug.yaml
• Prepare documentation issue form in .github/ISSUE_TEMPLATE/documentation.yaml
• Prepare feature request issue form in .github/ISSUE_TEMPLATE/feature.yaml
• Push changes to master and test issue forms on your fork
• Submit pull request

If you need any help, reach out to us on our Discord server.

Are you ready to work on this issue? 🤔 Let us know, and we will assign it to you 😊

Happy Appwriting!

🚀 Feature: Light and Dark mode

🔖 Feature description

𝐈 𝐰𝐢𝐥𝐥 𝐚𝐝𝐝 𝐥𝐢𝐠𝐡𝐭 𝐚𝐧𝐝 𝐝𝐚𝐫𝐤 𝐦𝐨𝐝𝐞 𝐫𝐢𝐠𝐡𝐭 𝐜𝐨𝐫𝐧𝐞𝐫 𝐨𝐟 𝐰𝐞𝐛𝐬𝐢𝐭𝐞.

🎤 Pitch

𝐂𝐡𝐚𝐧𝐠𝐢𝐧𝐠 𝐭𝐡𝐞 𝐭𝐡𝐞𝐦𝐞 𝐟𝐨𝐫 𝐚 𝐮𝐬𝐞𝐫 𝐭𝐨 𝐢𝐧𝐜𝐥𝐮𝐝𝐞 𝐛𝐨𝐭𝐡 𝐥𝐢𝐠𝐡𝐭 𝐚𝐧𝐝 𝐝𝐚𝐫𝐤 𝐦𝐨𝐝𝐞𝐬 𝐢𝐬 𝐚 𝐜𝐨𝐦𝐦𝐨𝐧 𝐟𝐞𝐚𝐭𝐮𝐫𝐞 𝐢𝐧 𝐦𝐨𝐝𝐞𝐫𝐧 𝐮𝐬𝐞𝐫 𝐢𝐧𝐭𝐞𝐫𝐟𝐚𝐜𝐞𝐬, 𝐩𝐚𝐫𝐭𝐢𝐜𝐮𝐥𝐚𝐫𝐥𝐲 𝐟𝐨𝐫 𝐰𝐞𝐛𝐬𝐢𝐭𝐞𝐬. 𝐓𝐡𝐢𝐬 𝐟𝐞𝐚𝐭𝐮𝐫𝐞 𝐞𝐧𝐡𝐚𝐧𝐜𝐞𝐬 𝐭𝐡𝐞 𝐮𝐬𝐞𝐫 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞 𝐛𝐲 𝐚𝐥𝐥𝐨𝐰𝐢𝐧𝐠 𝐮𝐬𝐞𝐫𝐬 𝐭𝐨 𝐜𝐡𝐨𝐨𝐬𝐞 𝐭𝐡𝐞𝐢𝐫 𝐩𝐫𝐞𝐟𝐞𝐫𝐫𝐞𝐝 𝐯𝐢𝐬𝐮𝐚𝐥 𝐬𝐭𝐲𝐥𝐞 𝐛𝐚𝐬𝐞𝐝 𝐨𝐧 𝐭𝐡𝐞𝐢𝐫 𝐩𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞𝐬 𝐚𝐧𝐝 𝐞𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭𝐚𝐥 𝐜𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐬.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Add deploy to heroku button

In the documentation (https://github.com/appwrite/demo-todo-with-react#deploy-to-a-static-hosting-provider), there are multiple methods to deploy to a hosting provider, but Heroku is not one of them. I can work on this issue. BTW, here is how it will look:

🚀 Feature: Password field validation before submission and show/hide password feature

🔖 Feature description

Password field validation - Right now the user is unable to figure out the reason for signup failure. I also had to check the network tab to figure all out. Having validation before sending request will reduce unnecessary requests to backend and provide a better user experience.

Show/Hide password - Adding a show/hide feature for password field will improve the UX.

🎤 Pitch

Users need to know the requirements for each field in a form. For this purpose, form validation is essential. Also it will improve the user experience and reduce unnecessary failed requests.
Also one would like to see what password they have entered. Giving the flexibility to switch between show/hide password is essential.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report: Cannot convert undefined or null to object

👟 Reproduction steps

Clone the repo, run npm install.

👍 Expected behavior

Successful installation of dependencies.

👎 Actual Behavior

The installation fails with

➜  demo-todo-with-react git:(main) ✗ npm i
npm ERR! Cannot convert undefined or null to object

After brief googling, I suspect this may be related to tailwind, but updating tailwind versions did not fix the issue.

🎲 Appwrite version

Version 0.10.x

💻 Operating system

MacOS

🧱 Your Environment

npm v8.4.0, node v16.4.1

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🐛 Bug Report:

👟 Reproduction steps

same database collection are showing for any user login or sign up

👍 Expected behavior

need a separate DB collection for individual users. what went wrong? in my cloud appwrite config need to be work on?

👎 Actual Behavior

same database collection are showing for any user login or sign up

🎲 Appwrite version

Version 0.10.x

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🚀 Feature: Let's introduce priority levels !

🔖 Feature description

To allow users to decide priority levels (high, medium, low) for their tasks, helping them focus on what's most important.
We can associate each level with a color code for ex -

High Priority: Red
Medium Priority: Orange
Low Priority: Green

🎤 Pitch

Adding color-coded priority levels to tasks in a to-do app makes it easier for people to see which tasks are most important. This helps to get things done faster and stay organized as humans are visual beings.

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct