DEV Community

Cover image for Image Uploader Using Appwrite

Posted on


Image Uploader Using Appwrite

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

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:


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


Read Access: 'role:all'

Write Access: 'role:all'

5.Clone this repo

  git clone
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)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.