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

abhay_yt_52a8e72b213be229 profile image

Understanding Docker Image Layers: Best Practices for Building Efficient Docker Images

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering Docker Hub: A Guide to Storing, Sharing, and Managing Docker Images

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering Docker Image Building: A Complete Guide to Creating Efficient Docker Images

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Everything You Need to Know About Docker Containers: Creation, Management, and Best Practices

Abhay Singh Kathayat -