Bara

Live

Bara is a Yelp-inspired single-page web app where users can CRUD businesses and reviews. It is built with React.js, Redux, Ruby on Rails, and a PostgreSQL database.

Recent Updates

4/19/2020 v2.0 Updating Rails

• Updated Ruby, Rails, and Paperclip (diff)
• Updated the stack from heroku-16 to heroku-18 for better support down the road

4/2/2018 v1.0 Refactored homepage

I have completely refactored the frontend React code for the homepage (Take a look! Here is a Medium story about the process). Compared to the original version, now the code is easier to read, has no ESLint errors, and we have some snapshot tests (npm test). However, in the foreseeable future, it's unlikely that I will have time to keep improving this project. 😞 Bara is my first full stack project; I worked really hard, and I am happy with what I have now. During this process I have learned a lot, I am a much better programmer now compared to when I started. However, probably it's time for me to move on to explore other great things beyond web app development. 😏 Look out for my other exciting projects in the future!

Features

• Each React component loads data from the backend based on URL, not from the Redux store, therefore the user can directly visit a specific page by its URL (the business search page with certain filters or the business show page of a particular business), and users can share pages by their URLs.
• Businesses can be searched by its name, address, city, state, zipcode, price range, tags, and their combinations.
• When logged in, a user can create/update/delete businesses and reviews. For demonstration purposes, there are no constraints for operations on businesses, i.e. any user can add businesses and edit/delete any existing businesses. (In reality, you probably do not want to allow that!) On the other hand, a user can only review a business once, and only the author is allowed to edit/delete a review.
• The business form fetches the latitude and longitude based on address using the Google Maps Geocoding API.

Development on localhost

• Make sure you have Ruby, Node.js, and PostgreSQL installed on your machine.
• Install dependencies.
  • gem install bundler (if you see open ssl errors, try brew switch openssl 1.0.2s ref)
  • bundle install
  • npm install
• Setup the database.
  • For local development, download and run PostgreSQL on your local machine.
  • bundle exec rake db:setup
  • We use gem Figaro to get AWS credentials from config/application.yml. The file is ignored by git, so that the credentials are not uploaded to GitHub. We use AWS S3 to store user avatars.

Sample application.yml:

s3_region: "region"
s3_access_key_id: "ABCDEFG"
s3_secret_access_key: "12345678"

development:
  s3_bucket: "dev"

production:
  s3_bucket: "prod"

GOOGLE_MAPS_API_KEY: "AIzaSyB42USxCYSP5SVIAjZz3hGSmWglUma3zok"

• Turn on the Rails server in a terminal window: rails s.
• Turn on webpack watching in a second terminal window: npm start.
• Visit http://localhost:3000/#/ in browser.
• Now you can modify your frontend files, save them, wait for webpack to update the bundle file, then refresh you browser to see the changes.

Implementation

• Overview and Details
• Frontend: React Component Hierarchy and Routes
• Frontend: Redux Sample State
• Backend: Rails API Endpoints
• Database: Schema

Credits

• Design: Yelp
• Web Developer: Ge "David" Feng
• Icons: Font Awesome
• Bara logo designer: Meng Zhang