DEV Community

Cover image for Image Uploader Using Appwrite
TEJENDER UPADHYAY
TEJENDER UPADHYAY

Posted on

Image Uploader Using Appwrite

#appwritehack

Overview of My Submission

Through our interactive Image uploader, user can store their precious and memorable images and safe them for future use.

Submission Category:

Wacky Wildcards

Link to Code

https://github.com/Tejender1521/ImageUploader

System Setup/Installation Guide

  1. Install Appwrite by following the installation guide.

  2. Open the Appwrite console and create a new project.

  3. Navigate to Database and add a new Collection called Photos.

  4. Add the following rules and permissions:

Rules:

Label Key Type Required Array
Username username Text true false
Avatar avatar URL true false
Location location Text false false
Image imageUrl URL true false

Permissions:

Read Access: 'role:all'

Write Access: 'role:all'

5.Clone this repo

  git clone https://github.com/Tejender1521/ImageUploader.git
Enter fullscreen mode Exit fullscreen mode

6.Install dependencies

  npm install
Enter fullscreen mode Exit fullscreen mode

7.From the Appwrite console, note down the API Endpoint, Project ID and Collection ID of the Photos Collection and enter these in src/config.js.

8.The project is ready to run! 🚀

  npm start
Enter fullscreen mode Exit fullscreen mode

Tech Stack Used

  • React
  • AppWrite

Top comments (0)

Read next

smehnert profile image

Retro Games React App

Sonja -

paddybyers profile image

Ably’s four pillars: no scale ceiling

Paddy Byers -

suyash_04 profile image

Don’t Miss These 5 Game-Changing UI/UX Design Inspiration Platforms

Suyash Borikar -

marianmoldovan profile image

Do you need a No Code tool for Firebase?

Marian Claudiu Moldovan -