Awesome

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

📚 | 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: <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/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. (<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"]
);

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

📷 | 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!