Shuttery: Appwrite - React Demo 💻

A demo web app built with React JS and Appwrite backend.

📚 | Introduction

This web app fetches and lets users download beautiful pictures from Unsplash to satisfy their artistic needs.
Current parameters: Search, Orientation, Count (currently capped to 10).
This app demonstrates Authentication via Google OAuth using an Appwrite backend.
Shuttery is built with React JS, Appwrite Web, and Unsplash API.

🚀 | Usage

Appwrite Web: Installation, Documentation and Resources.
Clone this repository:

git clone https://github.com/muKaustav/Appwrite-DemoApp-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. (Article for reference)

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

public
├───index.html
src
├───components
│   ├───Footer
│   │   ├───Footer.jsx
│   │   └───Footer.scss
│   ├───Form
│   │   ├───Form.jsx
│   │   ├───Form.scss
│   │   └───loader.png
│   ├───Image
│   │   ├───Image.jsx
│   │   └───Image.scss
│   └───Navbar
│       ├───Navbar.jsx
│       └───Navbar.scss
└───routes
    ├───Application
    │    ├───App.jsx
    │    └───Application.scss
    ├───Login
    │   ├───Login.jsx
    │   └───Login.scss
    └───ProtectedRoute.jsx