Giter Club home page Giter Club logo

food-help's Introduction

food help logo

Food Help is a crowdsourced business review website for rating and ranking Restaurants and other Food related Businesses. Food Help leverages a Ruby on Rails server coupled with a PostgreSQL Database on the Backend, along with React for presentation, and Redux for state on the Frontend.

Key Features

  • Login, Create a New Account, or simply browse as a Guest
  • Add Businesses, and help fill Food Help's communal database
  • Search for Businesses, and receive a list ranked by relevance!
  • Need help finding a place? No problem. Click on the business' static map to get an interactive google maps modal!
  • Write a review, watch your review always appear first for you!
  • Create, Edit, Delete your review in place, on the same page of your browser!
  • Don't like a review you posted? Change it, or even do away with it altogether!

How To Get

Head on over to Food Help and start reviewing!

Cool Features

Ranked Search by Relevance

search usage gif

Reviews

  • Write/edit/delete reviews on the same page
  • Your reviews are always on top

search usage gif

Behind the Scenes

Search

  • Splits Search Phrase into search term Words
  • Records number of times a business is returned by searching for businesses with relevant fields that match
  • Also checks businesses that fall under categories that include search terms in the category name
  • Returns businesses in descending order of most pinged
def index
    p params[:search_string]
    search_string = params[:search_string]
    business_hash = Hash.new(0)

    unless search_string.nil? || search_string.empty?
      search_string.split(/[ ,]/).reject { |str| str.empty? }.each do |term|
        record_business_query_results(term, business_hash)
        record_category_query_results(term, business_hash)
      end
      top_five_in_hash = business_hash.sort { |l, r| r[1] <=> l[1] }.first(5)
      top_five_business_ids = top_five_in_hash.map { |id, count| id }

      unless top_five_business_ids.empty?
        @business_ids = top_five_business_ids
        @businesses = Business.find_with_ids(top_five_business_ids)
        render "api/search/index"
      else
        render json: ["No results found"], status: 422
      end
    else
      render json: ["Search string can't be empty"], status: 422
    end
  end
  
  def record_business_query_results_by_field(field, term, hash)
    like_field_businesses = Business.where("lower(#{field}) like ?", "%#{term}%".downcase)
    like_field_businesses.each do |business|
      hash[business.id] += 1
    end
  end

  def record_business_query_results (term, hash)
    record_business_query_results_by_field("name", term, hash)
    record_business_query_results_by_field("neighbourhood", term, hash)
    record_business_query_results_by_field("address", term, hash)
  end

  def record_category_query_results (term, hash)
    like_categories = BusinessCategory.where("lower(category) like ?", "%#{term}%".downcase)
    like_categories.each do |category|
      category.businesses.each do |business|
        hash[business.id] += 1
      end
    end
  end

In Place Reviews

  • Decide what to render/do based on two criteria
    1. Is the review form open?
    2. Does the current user already have a review?
    constructor (props) {
        //
        this.state = {
          formOpen: false,
        };
        //
    }
    
    userHasReview () {
        return this.props.userReview !== undefined;
    }

    renderUserReviewThings () {
        return (this.state.formOpen ? this.renderReviewForm() : this.renderUserReview() );
    }
    
    renderCreateReviewThings () {
        return (this.state.formOpen ? this.renderReviewForm() : this.renderCreateReviewButton());
    }

    render () {
        //
        {
            this.userHasReview() ?
              this.renderUserReviewThings()
            :
              this.renderCreateReviewThings()
          }
        }
        //
    }

Technology Choices

Why Ruby on Rails?

Ruby on Rails is a great tool for faster development cycles. Rails allows developers to start a project, and start seeing results almost immediately. In fact, Food Help was built over the course of two weeks.
"Move Fast and Break Things" - Facebook

For its speed and many other reasons Ruby on Rails has been used for many other products and services you may have encountered before. Namely,

Why PostgreSQL?

Food Help's core product features are based on crowdsourcing information, which requires a high degree of reliability, and stability, especially during significant read/write traffic (crowdsourced adding, rating, reviewing businesses). PostgreSQL provides a beautiful implementation of MVVC, or Multi Version Concurrency Control.
"Multi-Version Concurrency Control (MVCC) allows Postgres to offer high concurrency even during significant database read/write activity. MVCC specifically offers behavior where 'readers never block writers, and writers never block readers'." - http://momjian.us/main/presentations/internals.html#mvcc

Why React?

Efficiency

Rerendering and conditional rerendering essentially boils down to editing/transforming the DOM/CSSOM tree in your browser, which can be pretty hairy considering trees are combinatorial(think n choose k, factorials) data structures in nature. Thankfully, where combinatorics is involved, similar problems faced in real life tend to be quite amenable to heuristic solutions. As is the case with React's conditional rerendering Reconciliation algorithm:
"There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the state of the art algorithms have a complexity in the order of O(n3) where n is the number of elements in the tree. If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm..."
- https://reactjs.org/docs/reconciliation.html

Why Redux?

DFA Properties

Redux is essentially based on the Deterministic Finite Automata computational model which has plenty of useful and interesting properties. Of which, one of the more identifiably useful properties is determinism.
Determinism between state transitions in Redux allows for replayability of user interactions with your product which leads to robust and reliable debugging of errors and features, resulting in an overall better product.

Separation of Concerns

Using Redux in conjunction with React allows for greater separation of concerns on the frontend between presentational components, and stateful components that keep track of the user's session and browser state. This Separation of Concerns allows for a much cleaner and robust codebase which means that easily convoluted programming patterns such as prop threading are no longer necessary (unless of course, your codebase happens to be a labyrinth and your name happens to be Theseus).

Credits

This webapp uses APIs and assets hosted by other sources.

  • Login Art and Cityscape Footer Art: Yelp
  • Maps: Google Maps Static and Interactive Maps APIs
  • Business trifold and Stock profile images: Hosted by Instagram (Images from my instagram, links from pictaram.net's instagram scraper)

Other

Possible Future Directions/Features

  • Redirect user back to page that required they log in
  • Include search filters
  • Implement user profile page

food-help's People

Contributors

brtsai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

food-help's Issues

PA Review: Reviews and Ratings

  • Users can write reviews of a business the business' Food Help page
  • Users can leave ratings out of 5 on the business' Food Help page
  • Users can update their own reviews
  • Users can delete their own reviews

PA Review: Production README

Content

  • Has a Production README in the project's github repository
  • Has a # Title
  • Links to the Wiki design documents
  • Describes technologies used
  • Describes core functionality
  • Lists future directions
  • Fills out Description and Website at the top of the repo.

Format:

  • Uses markdown formatting
  • Includes code snippets (with triple backticks, and the language ``)
  • Includes screenshots / gifs

Optional

  • Add topics to the top of the repo

PA Review: Hosting on Heroku

Initial Deployment:

  • Initial push to heroku

Final Deployment

  • Remove console statements: debuggers, console.logs, errors, minification warnings, mixed content warnings
  • Use dev tools in dev environment

Bonus:

  • Use custom domain name

PA Review: Search

  • Users can search for businesses
  • Users can search for business categories and get related businesses
  • Search ranks businesses based on reasonable search criteria

PA Review: User Authentication

  • Backend: DB, model, controller, views
  • Redux Loop: ajax, actions, reducer
  • Presentational Components
  • Styling
  • Smooth, bug-free navigation
  • Adequate and appropriate seeds
  • Users can sign up, sign in, log out
  • Users can use a demo login to try the site
  • Users can't use certain features without logging in (create reviews, ratings, business pages)

PA Review: Business Page

  • Backend: DB, model, controller, views
  • Redux Loop: ajax, actions, reducer
  • Presentational Components
  • Styling
  • Smooth, bug-free navigation
  • Adequate and appropriate seeds
  • Users can add/own business pages
  • Users can view a business' page
  • A business page has a list of information for the business (ie. Name, Address, Hours of operation, price range, other info)
  • A business page has a static image of its location on a map
  • A business page has a trifold of images that enlarge when hovered over
  • A business page has a list of reviews and their ratings

PA Review: Map

  • The map image on a business' page expands into an interactive map modal when clicked on

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.