NYC Pizza Reviews – Rails backend with React Frontend Web App Project

"One Bite Everybody Knows the Rules!" – Dave Portnoy, el Presidente of Barstool Sports

Hey there!

I created this website to tribute to Dave Portnoy’s New York Pizza reviews. After scavenging the web for a list of places he’s reviewed, like many of you I came up empty handed. What ignited during this tragedy was a feeling of determination, a calling if I’m so inclined. After many hours of video, and many hours of data-entry, I am proud to present to Dave and his fans a working v1 of Dave Portnoy’s New York City Pizza Review Collections list. Why? Because farewell crappy, NYC pizza, farewell frustrated sighs of indecisive hunger and farewell finger strains from google search. So frolickly (I’m sure that’s not even a word) search to your heart’s content whether it be by best-rating or by location etc. In hopes of ensuring the accuracy of the data, please be obliged to send edit requests to [email protected].

HOMEPAGE

I wanted to create an easy UI with pictures/icons. Here is what I did:

Users must sign in through Facebook to take a look at the El Presidente Reviews, Submit the next review, and to vote on the next review. Forums, Connect, and Create a List are still:

REVIEWS PAGE

My reviews page was pretty tricky. Essentially it was the manipulation of state because I wanted my users to be able to filter AND sort through the available content.

RECOMMENDATIONS PAGE

In the recommendations page, users will be able to submit a restaurant for review. Users can also vote on the submitted recommendations and also make a comment. I used a nested route here to show the recommendations show page when the user clicks on “view comments”.

HOW I ORGANIZED MY PROJECT

I had been reading a ton of forums and there are very many different opinions about this. I found that the bigger my app gets, the easier it is to maintain by organizing the folders by routes. For example, I have a Reviews Route /reviews. I have a directory for reviews. All of the content including images and components are placed inside this directory. If I have to fix something, I know exactly where to look =)

You can barely see it in the gif, but here is a photo:

I used Google Map’s API and Facebook! The map was very difficult but once you get the hang of it, it’s totally worth the trouble. It took me very long because I couldn’t find very many resources on it and when I did, they were pretty outdated. Facebook’s sign in API was a bit tricky for React. Essentially I had to scour the internet for similar situations but eventually got it to work.

REDUX STORE

For my redux store I incorporated redux thunk and used compose to add the devToolsExtension:

You’ll notice that I also have persistedReducer. This is from redux-persist. It basically persists my store onto the user’s local storage so that in between a refresh, the user is still left with the exact same state before they refreshed the page. If the store is manipulated or has changed in any way, redux persist will essentially record the state and persist it to the local storage. When it does this, it’s called rehydration =)

Sorry for the horrendous quality. What I’m demonstrating below is how redux persist works. You will see that i refreshed the page and my store is how I left it.