CalCamper is a web application that allows users to view, search for, and book unique camping, glamping, and rv experiences, located in a selection of California's greatest national and state parks. Each location displays listing-specific information to allow users to make fully informed and satifying booking decisions. While booking features are exclusive to signed-in users, all are welcome to browse. Signed-in users are able to create, view, update, and cancel bookings and reviews. CalCamper is inspired by and designed in the spirit of Hipcamp.

Check out the live site here.

Technologies Used

PostgreSQL
Ruby on Rails
React/Redux
HTML
CSS
Amazon Web Services (S3 Storage)
Google Map API
React-dates

Key Features

Search for Listings

Users can search for listings using the search bar located towards the top of the splash page or in the nav bar of all other pages. The search bars filter listings by park name. As the user types in a park name, the search bar dropdown will list all available parks matching the user input. The user can click on a dropdown item or press enter to bring them to the listing index page of choice.

logo

Listing index pages show all available listings by the user's selected park or category (camping, glamping, RV) and can be filtered further by selecting the category button located at the top of the page. Listing index pages display high level information about each listing, including the listing's name, cost, and park, as well as the listing's location, enabled by the Google Maps API.

logo

Browse Listing Amenities

Once on the listing page, users can view all the different features that listing has on offer. The comprehensive information available about the listing allows users to make well-informed booking decisions.

These listing pages were developed using a boolean-based detail entry system to more efficiently seed listing information. Within the listing's react component, conditions were utilized to dynamically categorize amenities as present or not present to customize HTML and CSS. An example of these conditions is displayed below:

booleanEntries(attributeName) {
    if (this.props.spot[attributeName] !== true) {
        return "amenity-false"
    }
}

renderCorrectSpotType() {
    const byot = this.props.spot.bring_your_own_tents ? "Bring your own tents" : "Tents provided";
    const pat = this.props.spot.park_at_listing ? "Park at listing" : "No parking at listing"; 
    const ada = this.props.spot.ada_access ? "ADA access" : "No ADA access";

    let heading;
    if (this.props.spot.spot_type === "RV") {
        heading = "RV camping area"; 
    } else if (this.props.spot.spot_type === "camping") {
        heading = "Campsite area";
    } else {
        heading = "Lodging provided";
    }

    let firstItem; 
    if (this.props.spot.spot_type === "glamping") {
        const name = this.props.spot.lodging_type;
        const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1);
        firstItem = (
            <li>
                <div className="box-icons"><FontAwesomeIcon icon={faHome} /></div>
                <p>{nameCapitalized}</p>
            </li>
        )
    } else {
        firstItem = (
            <li className={this.booleanEntries("bring_your_own_tents")}>
                <div className="box-icons"><FontAwesomeIcon icon={faCampground} /></div>
                <p>{byot}</p>
            </li>
        )
    }

    return (
        <ul className="amenity-box">
            <h1>{heading}</h1>
            {firstItem}
        </ul>
    )
}

Book Listing (CRUD Feature)

Users can create, view, update, and destroy bookings. The create bookings form is located on each listing page. Users must be logged in to create a booking. To view bookings, logged in users can navigate to the "Trips" page, linked in the nav bar. When on the "Trips" page, users can either update or cancel their bookings. The create and update forms use the React-dates package to allow for complex date picking.

Create Booking

View Bookings

Update Booking

Add a Review (CRUD Feature)

While all users are able to view listing reviews located at the bottom of each listing show page, logged in users are able to create reviews, view the reviews they have written, and update or destroy their reviews.

Once, logged in, a create review form will appear above the written reviews on each listing page. The review will immediately appear on the listing page once it is submitted. To view all reviews written by the user, a user can navigate to the "Your Reviews" page linked in the dropdown of the nav bar. The user can update or destroy their reviews by either clicking the update button of the review on the listing page or "Your Reviews" page.

Create Review

View Your Reviews

Update/Destroy Review

Coming Soon

Create listing saves feature

Love a site, but not ready to book? Soon you will be able to add a campsite, glampsite, or RV park to your saved list to keep track of your favorite listings. When you are ready for your next adventure, all you have to do is look at your saves and book!

anyahirota / calcamper