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

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

📝 | License

Copyright © 2021 Kaustav Mukhopadhyay.
This project is MIT licensed.

---