Boba BAE

Motivation

You walk into a place that you have never been to before. It has good yelp reviews, but you become overwhelmed by the number of options. What if there was some way to know what the "Top Rated" items are?

Current Status

In Development

Currently only styled for mobile screen size

Working on homepage and search functionality

Features

• Displays information retrieved from Yelp Fusion Api
• Integrated Google Maps Embed Api to easily search for directions

Tech/frameworks used

Frontend

• React
• Redux
• Styled Components

Backend

• Ruby on Rails
• Axios
• PostgreSQL

APIs

• Yelp Fusion
• Google Maps Embed

Code Examples

• Thinking in React to ensure code is modular and scalable

const StoreInformation = ({ store }) => (
  <div>
    <StoreName>{store.name}</StoreName>
    <StarRating rating={store.rating} />
    <Text>{store.review_count} Reviews</Text>
    <StoreHours hours={store.hours} />
    <StoreActionButtons />
    <StoreMap name={store.name} location={store.location} />
    <StoreAddress location={store.location.display_address} />
    <CallButton phone={store.phone} displayPhone={store.display_phone} />
    <StoreMoreInfo />
  </div>
);

• Stores are added to the database dynamically making sure to only add Boba stores

   def show
    yelp_store_info = get_store_info(params[:id])
    @store = Store.find_by(yelp_store_id: yelp_store_info["alias"])

    unless yelp_store_info["error"]
      if @store 
        render json: yelp_store_info.to_json
      elsif find_categories(yelp_store_info).include?("bubbletea")
        create(yelp_store_info)
      else
        render json: { error: "Business is not a Boba Shop" }, status: 422
      end 
    else 
      render json: { error: "Business does not exist" }, status: 404
    end 
  end 

• Used Styled Components to easily manage and organize styling

import styled from "styled-components";

export const BottomLabeledButtons = styled.button`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 30vw;
  border: none;
  background: none;
`;

Future Features

• Reviews
• Users Auth
• Check-In