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

stnguyen90 / places

Places

Places

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

Getting Started

Appwrite

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.read documents.write files.read 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…

View on GitHub

Additional Resources / Info

A live demo can be accessed here.

Technical details of the app can be found here.