Skip to content

johnhong1206/phototravelmap

Repository files navigation

Photo Travel Map

This is The website call photo travel map This website built by NextJS, Sanity,tailwind CSS, Geoapify and react-map-gl

Main Function

  1. the main functions of this website is to present and share my photo which related to food photo and travel
  2. all of the post able to shown on the map
  3. user able to filter and find the photo on the map
  4. by refering the info, user able to create own travel plans

current release funtion for public

  1. post rating function
  2. filter photo by tag
  3. creaate travel plans
  4. find info on the maps

user guide

--General

  1. sign up an account
  2. click the photo on main page to view the post details
  3. rate the photo
  4. click the category or location to find related post
  5. from location section click the refreh icon to get area info for the post,such as similar restaurant , accomodation entertaiment etc...

--food section

  1. click the utensils icon and nav to food page
  2. this page will show the post related to food
  3. user can filter or search the post by tag

--travel and photo section

  1. click the camera icon and nav to travel page
  2. this page will show the post related to travel and photo
  3. user can filter or search the post by tag

--travel plans section

  1. Click the board icons and nav to travel plan page
  2. this page allow user to create own travel plan
  3. user should fill in the title date and location to create the travel plans
  4. if the location not exist on database use can click the plus icon to open modal to search the location
  5. when open the modal user able to search the location and fill in the form in order to create the locattion
  6. when all requirement filled, the travel plans can created
  7. click the card and nav to travel plans

--travel plans detail

  1. in travel plans detail pagge
  2. for the suggestion first step
  3. click the 'click for the info' button to get the location area info
  4. user should fill in the title date, time and location to create the travel plans
  5. if the location not exist on database use can click the plus icon to open modal to search the location (steps are same as section above)
  6. after submit the plan be patient or click the refresh icon on the title to get the plan details
  7. if the plan did not update click back button on web browser and nav in the page again
  8. after the first plan details created, the red mark will shown on the map
  9. user can click on the red mark to open the modal
  10. user can click on the 'get area info' purple button to fetch default area infomation for the first place
  11. the infomation will be related to food, accomodation,toutism entertaiment,heritage
  12. the areainfomation will the location which 5km near the first place
  13. user can click any color icon and then on the 'get area info' purple button to find specific area info
  14. he infomation will be specific where refer to which icon you click
  15. click the icons on the map to the popup will shown
  16. click the text to open the modal to look for infomation
  17. with the area info user can used as reference to look for second place of the trips
  18. if favourite location not exist on the database
  19. click the icons on the map to the popup will shown
  20. click the text to open the modal to look for infomation
  21. click the blue add icons to open the location modal to add the location
  22. after submit the location be patient or click the refresh icon on the title to get the plan details
  23. if the plan did not update click back button on web browser and nav in the page again

future release plan

  1. release public to post the photo or post
  2. more advance filter function
  3. edit page for the post to update post details
  4. edit page for travel plans
  5. user profile page
  6. routing on the map
  7. might include the blog form
  8. due to current trends , the video posting function will included

ambitious ambition

  1. to make the website like tripadvisor and power enough can replace it

technical limitation

  1. due to free using the api,the searh result are limited