As a food lover, I’ve always enjoyed exploring new restaurants and trying out different cuisines. However, I found that traditional restaurant review websites often had cluttered and overwhelming interfaces, making it difficult to quickly find restaurants that matched my specific preferences and “vibe.”

Inspired by the simplicity and visual appeal of Instagram, I decided to build my own restaurant discovery application that would make it easy for users to discover and review restaurants in their area based on a specific “vibe.” In this blog post, I’ll share the inspiration behind this project and walk through the process of building the full web stack for the application using React on the front end and Rails on the back end.

Infinite Scroll Functionality:

One of the key features of the Instagram app is the ability to scroll through an endless feed of photos. I wanted to replicate this experience in my restaurant discovery app by allowing users to scroll through an infinite list of restaurants.

To implement this feature, I initially tried using the window.scrollTo method in JavaScript to manually trigger pagination and load more restaurants as the user scrolled down the page. However, I found that this approach was prone to bugs and performance issues, especially on mobile devices.

After some research, I discovered the react-infinite-scroll-component library, which provided a simple and reliable solution for implementing infinite scroll functionality in my React app. With just a few lines of code, I was able to set up an infinite scroll list of restaurants that seamlessly loaded more restaurants as the user scrolled down the page.

 <div ref = {scrollElement} id = "scroll" className = "justify-content-center" style={{height:'1000px' , overflow: 'scroll'}}>
        <InfiniteScroll 
        dataLength = {restaurants.length}  
        next = {handleLoadMore} 
        hasMore={true}
        endMessage = {<p style={{textAlign: 'center'}}>End</p>} 
        scrollableTarget = "scroll"
        initialScrollY={0}
        >

Rails Pagination:

To ensure that the infinite scroll feature would perform well and not overwhelm the back end, I needed to set up pagination on the Rails side to efficiently retrieve and filter the restaurants from the database.

I used the will-paginate gem to easily set up pagination in my Rails app. This gem provided a simple API for paginating ActiveRecord collections, as well as various customization options for controlling the pagination behavior.

    def index
        page = params[:page] || 1
        if params[:food_type] == "All" 
            restaurants = Restaurant.paginate(page: page, per_page: 10)
        else
            restaurants = Restaurant.where(food_type: params[:food_type]).paginate(page: page, per_page: 10)
        end
            render json: restaurants
    end

With the will-paginate gem, I was able to efficiently retrieve and filter the restaurants by food type, ensuring that the infinite scroll feature on the front end would perform smoothly and scale well with a growing number of restaurants in the database.

User Login Feature:

To allow users to review and save restaurants, I needed to set up a user login feature in my application. I decided to implement this feature using browser sessions in Rails, as it provided a simple and secure way to track user sessions and handle authentication.

To set up the user login feature, I created a SessionsController in my Rails app and implemented the login and logout actions using the session method. I also created a UsersController to handle user registration and added form validation to ensure that only valid and unique user credentials were accepted.

With these controllers in place, I was able to easily add user login and registration forms to my React app using HTTP requests to the appropriate endpoints. This allowed users to log in and out of their accounts and review and save restaurants as they explored the app.

Conclusion:

Building an Instagram-like restaurant discovery app with React and Rails was a fun and challenging project that allowed me to explore new technologies and solve a variety of problems along the way. From setting up an infinite scroll feature and pagination on the back end, to implementing a user login feature using browser sessions, I was able to bring my vision of a simple and intuitive restaurant discovery app to life.

I hope this blog post has provided some insight into the inspiration and process behind building this application. If you’re interested in building your own restaurant discovery app or have any questions about the technologies used in this project, don’t hesitate to reach out. Happy coding!