Thanks for viewing Kelp!

Kelp is a seafood based business information and review website.

Live

Techonologies

Backend

• Ruby on Rails

Front-end

• React and Redux

Database

• PostgreSQL

Web design and styling

• HTML & CSS

Image Hosting

• Amazon S3

Map

• Google Maps API

Highlights

User Authentication

• Users can signup for an account and login (or use the demo-login button provided).
• Errors are styled and do not persist

Create/ Edit Delete Reviews

• Users must be logged in to be able to create, edit, or delete reviews.
• Custom Rating Bar that highlights previous rating (if editing) and keeps track of current rating.
• Error handling to show rating and review must be provided for a valid submission.

Business Index

• Shows a list of Businesses with their location on a map, average rating, categories, a sample comment, and a link to their show page

Business Show

• Shows the business's information including their:
  • Business name
  • Business Cost
  • Business Categories (clickable)
  • Time open/close (along with whether they're currently open or not)
  • Map centered on their longitude and latitude
  • Address, a long with a get directions link
  • Phone number
  • Reviews. If the current logged in user previously left a review, they have the option to edit their review.

When I first started this MVP, i had no idea how much information actually goes into a show page. I had to grab various pieces of information from the business, the reviews, and the users, all of which are on different tables of my database. Additionally, I had to contend with image hosting on amazon S3 for the first time. I was able to successfully gather all this information by abstracting out components and pulling information needed through jbuilder.

json.extract! business, :id, :title, :phone_num, :time_open, :time_close, :cost, :address, :state, :city, :zip_code, :longitude, :latitude

categories = []
business.categories.each do |cat|
    categories.push(cat.title)
end
json.categories categories

json.photosUrl business.photos.map {|file| url_for(file)}

Search

• Users can search for Businesses based on their location, title, or category

This functionality was pretty challenging. I was able to accomplish this via comparing the query string to the various associations and columns of my businesses.

    filter(find, near){
        let businesses = this.props.businesses
        let findArr = [];
        if (this.props.find === '0' && this.props.near === '0') findArr = businesses
        if (this.props.find && this.props.near) {
            if (find !== '0'){
                let title = (businesses.filter(business => this.includes(business.title, find)))
                let category = businesses.filter(business => business.categories.some(cat => this.includes(cat, find)))
                findArr = findArr.concat(title, category)
            }
            if (near !== '0'){ 
                if (find === '0') {
                    findArr = businesses.filter(business => 
                        this.includes(business.address, near) 
                        || this.includes(business.state, near)
                        || this.includes(business.city, near) 
                        || this.includes(business.zipCode, near)
                    )
                } else {
                    findArr = findArr.filter(business => 
                        this.includes(business.address, near) 
                        || this.includes(business.state, near) 
                        || this.includes(business.city, near) 
                        || this.includes(business.zipCode, near)
                    )
                }
            } 
        }
        this.setState({b: findArr})
    }