Awesome

<h1 align="center">Taskwrite: Appwrite - React Demo 💻</h1> <img alt="Project Logo" src="https://raw.githubusercontent.com/muKaustav/Taskwrite-Appwrite-Hacktoberfest-2021/main/assets/thumbnail_taskwritepsd.jpg" target="_blank" /> <h2 align='center'>A demo web app built with React JS and Appwrite backend.</h2>

📚 | Introduction

This web app implements a To-Do list and allows users to add, edit & delete tasks.
This app demonstrates Authentication and Database Management via Google OAuth using an Appwrite backend and Appwrite Database respectively.
Taskwrite is built with React JS and Appwrite Web.

🚀 | Usage

Appwrite Web: <a target='_blank' href='https://appwrite.io/'>Installation</a>, <a target='_blank' href='https://appwrite.io/docs'>Documentation</a> and <a target='_blank' href='https://30days.appwrite.io/'>Resources</a>.
Clone this repository:

git clone https://github.com/muKaustav/Taskwrite-Appwrite-Hacktoberfest-2021.git

Install necessary libraries:

npm install

Enjoy the project! 😉

📁 | Folder Structure

Replace the Endpoint and Project ID in src/Appwrite.js.

const sdk = new Appwrite();
sdk
	.setEndpoint("ENDPOINT_URL") // set your own endpoint
	.setProject("PROJECT_ID"); // set your own project id

Replace the redirect and failure routes for Google OAuth in src/Appwrite.js. (<a target='_blank' href='https://dev.to/appwrite/30daysofappwrite-oauth-providers-3jf6'>Article for reference</a>)

sdk.account.createOAuth2Session(
	"google",
	"http://localhost:3000/",
	"http://localhost:3000/login",
	["profile"]
);

Replace the CollectionID in src/Appwrite.js.

sdk.database.createDocument(
	"COLLECTION_ID", // set your own Collection ID after creating it from the Appwrite console
	obj,
	[`user:${user["$id"]}`],
	[`user:${user["$id"]}`]
);

public
├───index.html
src
├───components
│   ├───Footer
│   │   ├───Footer.jsx
│   │   └───Footer.scss
│   ├───Tasks
│   │   ├───Task.jsx
│   │   └───Task.scss
│   └───Navbar
│       ├───Navbar.jsx
│       └───Navbar.scss
└───Routes
    ├───Application
    │    ├───App.jsx
    │    └───Application.scss
    ├───Login
    │   ├───Login.jsx
    │   └───Login.scss
    └───ProtectedRoute.jsx

📷 | Screenshots

🍻 | Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

🧑🏽 | Author

Kaustav Mukhopadhyay

Linkedin: @kaustavmukhopadhyay
Github: @muKaustav

🙌 | Show your support

Drop a ⭐️ if this project helped you!