divanov11 / appwrite-react-quickstart

Fullstack Appwrite 🤝 React notes app with authentication

Appwrite 🤝 React

Appwrite + React fullstack todo app with integrated auth.

Understanding Folder Structure

This project is part of a multi part video series, so our folders are structured in a way to represent the code at the end of each video. i.e. Video 1 == Part 1, and so on.

Part	Topic	Description	View
1	CRUD	Basic setup and CRUD with Appwrite + React	View
2	Theme Switcher	Added theme switcher	View
2	Theme Switcher (Template Only)	Theme switcher with no backend.	View
3	Authentication	Login, Logout, Registration & Protected Routes	View

See tutorial part 1 here: https://youtu.be/_JDeJgsU-bI

Setup instructions

Before you can clone and setup a local instance of this project you'll need to setup an Appwrite backend and gain the nessesary credentials + have the correct database setup and permisisons configured.

Setting up appwrite backend

1. Create a new appwrite project + app. Easiest way to get started is by heading to appwrite.io

2. Add a platform and set hostname registration

This can be done by going to overview -> Add Platform -> Web App.

3. Add a user

4. Add a database and a collection

Add the following attributes in your collection

Name	Type	Details
body	string	100 chars
completed	boolean	Default to false

5. Set collection perissions

This can be done under from your collection tab unde settings -> permissions.

Set permissions to users + create

Enable document level security

Setup local repo

Clone Repo Clone repo: git clone <repo url>

Add .env file and fill in your Appwrite project credentials:

VITE_PROJECT_ID=YOUR-PROJECT-ID
VITE_DATABASE_ID=YOUR-DATABASE-ID
VITE_COLLECTION_TASKS=YOUR-COLLECTION-ID

• cd <PART #>
• npm i && npm run dev