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.
- Create the project via the Appwrite Admin Console
- ID: places
- Name: Places
- Copy the
appwrite.json.defaulttoappwrite.json - Deploy the collections
echo a | appwrite deploy collection
- Create an API Key
appwrite projects createKey --projectId places --name "Places Functions" --scopes documents.read documents.write files.read files.write- Take note of the
secret
- Deploy the functions
- Update variables in the
appwrite.json-
APPWRITE_FUNCTION_ENDPOINT- your HTTPS Appwrite endpoint -
APPWRITE_FUNCTION_API_KEY- thesecretfrom the previous step
-
- Compile each of the functions in the
appwrite-functionsfolder:- Go into the function folder
- Run
npm i && npm run build
- Go back up to the folder with
appwrite.jsonand deploy all the functions:echo a | appwrite deploy function
- Update variables in the
- Create the storage buckets
-
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)