DEV Community

Cover image for Places: Appwrite and Maps

Posted on • Updated on

Places: Appwrite and Maps

Overview of My Submission

Places is an app that allows users to tag a location on a map and comment and/or upload photos for the location.

The app is a responsive web app to ensure easy access without the need to download another app. The front end uses React, MUI, React Leaflet, and Redux Toolkit.

I got the idea for the app after using Plug Share and thought it would be useful to have a similar app to provide information about where dog waste bag dispensers were and if they were in stock or not. In addition, it was a good way for me to play around with maps as there have been people on the Appwrite Discord server asking about how to work with location data on Appwrite. As I started building the app, however, I realized I didn't need to narrow the use case to just dog waste dispensers; the app can actually serve as a starting place for any location based app!

Submission Category:

Web2 Wizards

Link to Code


This app allows users to add comments and photos to locations on a map.

Getting Started


The following steps use the Appwrite CLI to set up Appwrite.

  1. Create the project via the Appwrite Admin Console
    • ID: places
    • Name: Places
  2. Copy the appwrite.json.default to appwrite.json
  3. Deploy the collections
    1. echo a | appwrite deploy collection
  4. Create an API Key
    1. appwrite projects createKey --projectId places --name "Places Functions" --scopes documents.write files.write
    2. Take note of the secret
  5. Deploy the functions
    1. Update variables in the appwrite.json
      1. APPWRITE_FUNCTION_ENDPOINT - your HTTPS Appwrite endpoint
      2. APPWRITE_FUNCTION_API_KEY - the secret from the previous step
    2. Compile each of the functions in the appwrite-functions folder
      1. Go into the function folder
      2. Run npm i && npm run build
    3. Go back up to the folder with appwrite.json and deploy all the functions
      1. echo a | appwrite deploy function
  6. Create the storage buckets
    1. appwrite storage createBucket --bucketId photo-uploads --name

Additional Resources / Info

A live demo can be accessed here.

Technical details of the app can be found here.

Top comments (0)