lustdante / owlspot Goto Github PK

Prerequisite: make deployment easy so that it can be tested on mobile

A button (like that in Facebook) which either shows an option to take photo using camera in device or load it from gallery

List of Hotspots

Hotspot data

• Thumbnail
• Name
• Description
• Geolocation data

Option 1:
If possible, try just having an embedded Google Map on the page.

Option 2:
Embed a map and show a list of hotstops

Options 3:
If cannot show an embedded map with multiple pin points, than use screenshot.

Embed Google Map on the webpage.

• Minimum: show single location
• Ideal: show multiple locations

https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2

ISSUES:

• Image size for big images mess up the page

• Find a way to show a list of images in grid

• Add filter for chronological order and random order

• By clicking each grid, show an image and timestamp

• Slide to traverse through images

• Setup frontend and backend and devops using all tech stacks

Fetch a list of hotspots from database

• Accept user's geolocation to sort by distance

Using some Google Maps API from mobile browser, get user's location permission and then console.log meaningful geolocation data.

Util at server that can do this.

• Show the sample image of the hotspot
• Show sample gallery of the hotspot with a link to the gallery page
• Depending on the user's current location, decide whether to activate the upload photo button or not
  • If deactivated, find a way to refresh the availability

Option:
Embed a Google Map showing that location

Prerequisite: have a graphql server ready

A button on the page which loads photo to server, and that server uploads that photo to S3 and receive url

Get individual spotspot data using unique id

• List of sample photos
• List of all photos which accept sorting option as argument