Giter VIP home page Giter VIP logo

waterbnb's Introduction

Fullstack Project: WaterBnB

WaterBnB is an affordable water-themed travel booking site -- a clone of Airbnb. Like Airbnb, WaterBnB allows users to views different listings around the world, make reservations, and leave ratings and reviews. It uses the Google Maps API to give exact locations and let users search by location. The splash page is an index of all the listings, with a map centered in New York City by default.

Technologies and libraries used:

  • Ruby on Rails
  • JavaScript
  • React/Redux
  • PostgreSQL
  • Google Maps
  • Debugger
  • Amazon Web Storage (AWS)

With WaterBnB, users can:

  • See Listings, with detailed information and photos

Each listing has a show page showing multiple photos, location, ameninities, and other important information.

  • Reserve listings (CRUD feature), with costs calculated dynamically

Users (who are logged in) can reserve listings and watch as costs change based on their length of stay and number of guests. This is a full CRUD feature -- users can also read, modify, or cancel reservations for upcoming trips. The reservations index page shows a user all of their upcoming reservations (from soonest to latest), with basic info, a link to the show page, and buttons to modify and delete.

  • Search specific locations and see nearby attractions using Google Maps

Users can use Google Maps to search specific locations, with each property having a popup summarizing key information. Every page uses Google maps, either for or to show the exact location of a specific listing.

The MapContainer object uses locations passed into it that are already fetched elsewhere on the page. Rather than pass the entire listing object for each location, this passes only the variables the map is going to use (ieither to show in the popup or to filter appropriately):

    const locations = []

    for (let i = 0; i < listings.length; i++) {
        locations.push({
            id: listings[i].id,
            title: listings[i].listerName+"'s " + listings[i].buildingType,
            rating: (parseFloat(listings[i].rating).toFixed(1)),
            place: listings[i].city + ', ' + listings[i].country,
            price: listings[i].price,
            location: {
                lat: parseFloat(listings[i].latitude),
                lng: parseFloat(listings[i].longitude)
            },
            typeOfWater: listings[i].typeOfWater,
            numberOfRatings: listings[i].numberOfRatings,
            petsAllowed: listings[i].petsAllowed
        })
    }

  • See ratings and reviews; rate/review a property

Users can read reviews of each listing, see ratings, and leave their own ratings/reviews. This is not a full CRUD feature -- like Airbnb, WaterBnB doesn't allow users to delete or modify reviews, because it could create a conflict of interest. Average rating is stored with each listing and dynamically recalculated whenever a user rates a property. Here's the calculation:

def create
  @review = Review.new(review_params)
  if @review.save
    @listing = Listing.find(@review.listing_id)
    rating = params[:rating]
    @listing.rating = (@review.listing.rating * @review.listing.number_of_ratings + rating) / (@review.listing.number_of_ratings + 1)
    @listing.number_of_ratings += 1
    @listing.save
    render :show
  else
    render json: { errors: @review.errors.full_messages}, status: 422
  end
end

Note that people can rate without reviewing (though not vice versa), so most listings have more ratings than reviews.

  • Filter listings by categories and max price

Rather than looking at all properties at once, users can filter by the body of water it's near (ocean, sea, lake, or falls), by maximum price (this photo shows a max price of $100/night), or to show only places that allow pets or are highly rated (at least 5 ratings with average of at least 4.75 stars). Because filters show fewer listings, the default map with filters is a full world map.

I used different urls to represent different filters, including a catch-all number for maximum price. (React is fast enough that redirecting isn't a problem, and this stores users' filters in their browser history.) I filtered it right at the useSelector to prevent errors with undefined variables.

const listings = useSelector(getListings)
    .filter((listing) => {
        switch(filter.filter) {
            case 'ocean':
                return listing.typeOfWater == 'ocean' ? listing : null
            case 'lake':
                return listing.typeOfWater == 'lake' || listing.typeOfWater == 'lagoon' ? listing : null
            case 'sea':
                return listing.typeOfWater == 'sea'|| listing.typeOfWater == 'lagoon' ? listing : null
            case 'falls':
                return listing.typeOfWater == 'falls' ? listing : null
            case 'pets':
                return listing.petsAllowed ? listing : null
            case 'popular':
                return listing.numberOfRatings >= 5 && listing.rating >= 4.75 ? listing : null
            default:
                if (parseInt(filter.filter)) {
                    return (listing.price <= parseInt(filter.filter)) ? listing : null
                } else {
                    return listing
                }
        }
    })

This project also includes:

  • Extensive seed data
  • Photos stored on AWS
  • A production README

Implementation Timeline:

  • Friday-Monday: User Authorization
  • Tuesday-Friday: Listings
  • Saturday-Monday: Reservations
  • Tuesday: Google Maps
  • Wednesday: Ratings/Reviews
  • Thursday: Filters

Future Features:

  • More categories (and more seed data to show them)
  • Ratings for specific items (location, communication, boat quality, etc.)
  • Carousel for photos
  • Search function
  • CUD functionality for listings
  • Recenter default index map based on user's location

Sources:

  • Photos, descriptions, some reviews, and amenity icons taken from Airbnb
  • Filter Icons taken from here

waterbnb's People

Contributors

dtkalla avatar

Stargazers

Bharat Rajora avatar Evan Ryan avatar avatar avatar

Watchers

avatar

Forkers

nextthread

waterbnb's Issues

Fronted Routes

Frontend Routes

  • Frontend routes contains wildcard variables written in camelCase
  • Correctly formatted
    • Routes are displayed with inline coding text (backticks)

Show page doesn't match Airbnb

Shouldn't have latitude longitude (but not sure about address), should have longer description and something like aircover, etc.

Sample State

Sample State

  • State shape is flat!
  • State's keys are camelCased
  • All keys within the values in the state are accessible in the schema
  • Correctly formatted
    • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
    • Top level slices
      • entities
      • session
      • errors (here or in ui)
      • ui (if needed)
    • Should NOT have nested slices, aka comments inside of posts
    • Some info from other tables is ok, for instance:
    • the author username and imageurl for a post. basically any info that the user can't change
    • like count and a boolean on whether the user likes the post instead of a likes slice

Database Schema

Database Schema

  • Contains correct datatypes
  • Contains appropriate constraints/details
    • primary key
    • not null
    • unique
    • indexed
    • foreign key
  • Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
  • foreign key and table name are lowercased, snake_cased and back_ticked
  • Correctly formatted
    • schema is written in a table format
    • the table's name are lowercased, snake_cased and back_ticked
    • the table header column names are bolded
    • columns names are lowercased and snaked_cased and back_ticked

Multiple things to fix

-Update design docs
-Modal background should cover header navbar
-Sticky map on side of page
-Style filter by max price
-Have upcoming and past reservations, with reviews tied to past reservations
-Needs more data populated
-Fix the negatives with reservation dates
-Add Github, LinkedIn, etc.
-Link to WaterBnb in README

Exact GPS locations

Locations are in the right cities, but some need to be by the water's edge

Wiki Home Page

Wiki Home Page

  • Is the first page you see upon entering the wiki
  • Contains a welcome message
  • Contains a link/placeholder for a link to the live page
  • All links in the right sidebar should contain each wiki page and link to the correct page
  • Correctly formatted
    • each wiki page is listed in bullet points
    • all links route the correct page

Backend Routes

Backend Routes

  • Contains the following sections: HTML, API Endpoints(Backend)
  • Each route has a description
  • API Endpoint routes contains wildcard variables written in snake_case
  • Routes does not contain superfluous routes
  • Have API routes that will allow the front end to get all info it needs and does not have unneeded routes:
    • probably doesn't need a GET likes api endpoint because that info comes through the post show

Show page missing picture view

The listing show page should let users click on a picture and have a modal with all the pictures pop up. (Forgot to implement this before starting new branch, so I'll have to come back to it later...)

MVP List

MVP List

  • Should have 7 MVPs.
    • 3 of those are User Auth, Render, and Production README.
    • The other 4 are from the Approved Apps List or your PM will have clarified them with you
  • Contains a description sentence of the app
  • Includes two to three detailed bullets on functionality and presentation of feature
  • At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
  • Estimates how long it will take the code each MVP
  • Correctly formatted
    • MVPs are listed in an ordered list
    • Each MVP is broken down into bullet points

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.