Met

Met, Middle-earth travel. Built with React/Redux.

Live

Wiki

Table of Contents

• Introduction
• Features
• Technologies
• Challenges
• Code snippets
• Acknowledgments

Introduction

Met, aka Middle-earth travel, is a clone of Airbnb.

It is a travel booking website built with React/Redux that allows users to browse, book, and review best places to visit in the Middle-earth.

Features

A few of the things you can do with Met:

• View all spot listings and reviews
• Search by spot name, location, landscape, etc.
• Filter by map bounds
• Mobile friendly layout and responsive design
• Create and edit your spot listing when logged in
• Create, view, and delete your bookings when logged in
• Create and delete your reviews when logged in

Technologies

• React
• Redux
• Google Maps API
• PgSearch
• React Rating

Challenges

Google Maps and markers

To create or edit a booking, the user will drag and drop the marker on the map to pin or adjust the spot.

As the map component is independent of other representational parts, I pass a callback to marker and invoke it to close over the spot and marker's coordinates in 'dragend' event listener, then update spot's latitude and longitude by the coordinates.

Mobile responsive design

To enable smooth transition and responsive design, I apply multiple media rules to render layouts by viewport and resolution for different devices.

Code snippets

componentDidMount() {
  let { center, zoom, gestureHandling, draggable, spots } = this.props;

  const mapOptions = {
    center,
    zoom,
    gestureHandling,
    clickableIcons: false
  };

  this.map = new google.maps.Map(this.refs.map, mapOptions);
  this.MarkerManager = new MarkerManager({
    map: this.map,
    draggable,
    handleMarkerDrag: this.handleMarkerDrag.bind(this)
  });

  this.registerListeners();
  this.MarkerManager.updateMarkers(spots);
}

updateMarkers(spots) {
  const spotsObj = {};
  spots.forEach(spot => spotsObj[spot.id] = spot);

  spots.filter(spot => !this.markers[spot.id])
    .forEach(spot => this.createMarkerFromSpot(spot));

  Object.values(this.markers)
    .filter(marker => !spotsObj[marker.spotId])
    .forEach(marker => this.removeMarker(marker));
}

Acknowledgments

Thanks to @niartenyaw @mwojick @cjthom03 @ThinkSalat for help during the project.