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.
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!
- 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.
- Overview and Details
- Frontend: React Component Hierarchy and Routes
- Frontend: Redux Sample State
- Backend: Rails API Endpoints
- Database: Schema
- Design: Yelp
- Web Developer: Ge "David" Feng
- Icons: Font Awesome
- Bara logo designer: Meng Zhang