eaconway / airbnb-clone

README

Hi! Welcome to AirbnAnime! This is a site where you can book anime homes/locations for your Otaku-filled vacations with your friends. You can book trips, create homes, leave reviews, and search based on different criteria. More features incoming!

AirbnAnime

Setup

• git clone the repo
• bundle install to install gemfiles
• npm install to install npm packages
• bundle exec rails db:setup to create, seed, and migrate database
• npm run start to start your webpack The project should then be available at the address localhost:3000 in your browser

Technologies Used

• FrontEnd: JavaScript (React, Redux, AJAX, Jquery, Vanilla DOM), HTML, CSS
• BackEnd: Ruby on Rails
• Database: PostgreSQL

Awesome Features

Google Maps Integration

• Feature: Airbnanime implements a mapping feature that does a few things.

  • When searching, the map both:

    1. Shows all homes that are being displayed on the map
    2. Filters homes displayed based on the view window of the map

    registerListeners() {
      google.maps.event.addListener(this.map, 'idle', () => {
        const { north, south, east, west } = this.map.getBounds().toJSON();
        const bounds = {
          northEast: { lat: north, lng: east },
          southWest: { lat: south, lng: west } };
        this.props.updateFilter('bounds', bounds);
      });
    
      google.maps.event.addListener(this.map, 'click', (event) => {
        const coords = getCoordsObj(event.latLng);
        this.handleClick(coords);
      });
    }

      updateMarkers(homes){
        const homesObj = {};
    
        homes.forEach(home => homesObj[home.id] = home);
    
        homes
          .filter(home => !this.markers[home.id])
          .forEach(newHome => this.createMarkerFromHome(newHome)); //, this.handleClick))
    
        Object.keys(this.markers)
          .filter(homeId => !homesObj[homeId])
          .forEach((homeId) => this.removeMarker(this.markers[homeId]));
      }
    
      createMarkerFromHome(home) {
        const position = new google.maps.LatLng(home.lat, home.lng);
        const marker = new google.maps.Marker({
          position,
          map: this.map,
          homeId: home.id
        });
    
        // marker.addListener('click', () => this.handleClick(home));
        this.markers[marker.homeId] = marker;
      }

  • When created a home, you can choose your location directly on the map (clicking on map for lat/lng)

  • When updating/editing a home, displays current location and allows for updating through map directly

Search Functionality

• Feature: You can search for homes based on city, with an auto updating recommendations below, based on your potential query
  • Filters: you can filter by bounds (based on map), beds, guests, bedrooms, etc

Bookings

• Feature: You can book locations at different Airbnb's, even starting on the same day that someone else completes their stay.
  • You can't pick a start time that's after your end time, or vise versa
  • You can't book a time in the past
  • You can't book over other's stays

airbnb-clone's Issues

PA Review: Reviews CRD

Hey Stephen, this should be good to go!

PA Review: User Auth

I DID THE THINGS

PA Review: Search Functionality w/ Auto Fill

Working search is up and running. You can only search by clicking the divs within the results, but this should be mvp for searching and getting an appropriate search page.

Thanks!
E.J.

Heroku up and running

We already chatted about this, but documenting anyway.

PA Review: Bookings CRUD

Hey, you can now create, update, and delete bookings. They also show on the homes show page. Let me know what you think.

Proposal: Feedback

Hey E.J! Hope you're doing well 🙂 Here's my feedback for your proposal:

Nothing!

Well, that was a lie, one thing:

• Frontend routes, wrap your routes in backticks instead of 'single quotes'

But that's really it! This is a really comprehensive proposal, great job! 😄 You should be good to go for tomorrow as soon as you fix that one thing.

PA Review: Homes CRUD

Hey Stephen,

Homes CRUD is finished. You can create a home through the add a listing page (4 pages long). You can see all the homes form '/'. If you click on the user, and click on 'my homes', you can edit and delete the homes.

Thanks!
E.J.