Skip to content

Markr is a landmark sharing app where users can share their favorite landmarks and post meaningful reviews on other user's landmarks.

Notifications You must be signed in to change notification settings

jrbauti-09/markr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Markr

  • Geocoding API
  • Maps JavaScript API
  • Places API

Inspired by Flickr, Markr is a Landmark sharing app where people can post their favorite landmarks. Users can also interact with other user's landmark post by putting reviews and suggestions.

All features update the page the user is on without a refresh of the page through use of the Redux store.

Technologies Used

Hosting

Heroku AWS

Backend

Express.js Sequelize Postgres

Frontend

React ReduxJavaScriptHTML5 CSS3

Additional React Libraries used

Googlemaps

Documentation used for google API

https://react-google-maps-api-docs.netlify.app/

https://developers.google.com/maps/documentation/javascript/places-autocomplete

Getting started

  1. Clone this repository

    git clone https://github.com/jrbauti-09/markr.git

  2. CD into the backend directory and install dependencies

    npm install

  3. CD into the frontend directory and install dependencies

    npm install

  4. Create a .env file based on the .env.example given

  5. Create a user in psql based on your .env DB_USERNAME

    psql -c "CREATE USER <username> PASSWORD '<password>' CREATEDB"

  6. Create the database, migrate, and seed

    npx dotenv sequelize db:create

    npx dotenv sequelize db:migrate

    npx dotenv sequelize db:seed:all

  7. Open up two terminals and cd into the backend and frontend directories, respectively. Start the server in each by running:

    npm start

Features

Splash Page & User Authentication

Users can log into an existing account or sign up. Alternatively, users can test the site with the Demo Login feature.

Splash Page Login Form Sign Up Page

User Explore/Collections Page

Navigation

  • The active tab that is currently being displayed is shown on the navigation bar.

Once the user is logged in, they can view all Landmarks posted on the app.

  • Hovering over landmarks creates a transition letting the user know which landmark is in focus.
  • Clicking on a landmark will display a zoomed in modal of that landmark, with a navigation button that directs the user to the landmark details tab.

A user can post a new landmark by clicking "Post landmark" in the navigation bar.

  • Edit and delete buttons only for users that own the landmark post.

This feature is available on the Collections tab which can be viewed by clicking "Your Landmarks" in the navigation bar.

User Explore User Collections LandMark Image

Landmark Form

Users can post their favorite landmarks via the "Post landmark" tab. The landmark form includes:

  • Landmark name input
  • Image file upload via AWS hosting
  • Description of their favorite landmark
  • An address search bar which uses Places API to autocomplete and list address options for user.

Create Landmark Form Edit Landmark Form

  • AWS upload, image files. .png .jpg etc. AWS upload
  • User can also delete their Landmarks on the "Your landmarks" tab. Delete Image Form

Landmark Details and Reviews

When user clicks on a landmark on either the "Your Landmarks" tab or the "Explore" tab they have the option to go to the details page of that specific landmark. After clicking the map logo they are directed to the details page which contain:

  • Landmark reviews posted by user or other users in the community.
  • Description of Landmark and date of post.
  • User who posted Landmark.
  • Image of the Landmark posted.
  • Interactive google map which the user can explore with to discover other places they might stumble upon!

Can fetch image from google api

  • User can add a review clicking the icon below the Landmark Reviews User can post a review icon
  • User can post a review User can post a review
  • User can edit their form User can edit a review

Search

When posting/editing a Landmark, users can search landmark address for latitude and longitude coordinates.

Search coverage: Entire world map

Google Maps API

  • Maps Java script API
    • Unlimited requests per day.
    • 30,000 loads per minute.
    • 300 loads per minute per user.
    • Shows surrounding details via customized radius view option(object).
  • Geocoding API
    • Provides geocoding and reverse geocoding of addresses based on user's input.
    • Converts user's address input into geographic coordinates (like latitude and longitude) via getGeocode in the usePlacesAutoComplete react library.
  • Places API
    • Integrated with Geocoding API (reverse geocoding of address).
    • Map will pan to location based on user's input.
    • Place Search returns list of places based on a user's location or search string.
    • Place Autocomplete automatically fills in the name and/or address of a place as users type.
    • Place photos provides access to the millions of place-related photos stored in Google's Place database.

Prior Search

  • Shows address options for users as they type.

During Search

Option Search

  • Pans map to selected option.

Result

  • Can fetch images around location via google api.

live image

  • Automatically fills in geographic coordinates for user's landmark form.

Post Search

  • Can show surrounding details around centered location.

Fetch Search

Upcoming Features

  • Ability for user to filter their landmark explore page based on the desired region. (North America, South America, Europe, Asia, Africa etc.)
  • User profile page which can have comments and ratings.
  • Ability to message other users in the application.
  • Ratings for Landmark posts.

About

Markr is a landmark sharing app where users can share their favorite landmarks and post meaningful reviews on other user's landmarks.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages