DEV Community

Cover image for Places: Appwrite and Maps
Steven
Steven

Posted on • Edited on

6 4

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

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

Additional Resources / Info

A live demo can be accessed here.

Technical details of the app can be found here.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay