JustEat is a clone of OpenTable, a website that allows users to search through a variety of restaurants in order to find a reservation. Signed in users can favorite restaurants, and view their reservations and favorited restaurants on their account page. Signed in users can also write reviews, but are limited to one per restaurant.
The project was designed and built within a two-week timeframe, although I plan to continually add extra features and expand in order to achieve a fully cloned website.
Rails was chosen due to its flexibility and and well-supported framework. The pragmatism of Ruby allowed for a quick turnover in the creation of this project.
Frontend Redux states were created in order to have individual reducers and actions for restaurants, reviews, favorites, users, and errors. This allows the state to have a true redux cycle that is dynamic to the changing database.
JustEat was designed with clean interface in mind that reminded the user instantly of OpenTable. With the two-week time frame in mind, Time was spent ensuring that the restaurant show page was close to being pixel-perfect to the actual site, and that clickability would persist throughout the functionality. The project relied heavily on preproduction, in order to ensure a smooth creation. As OpenTable has many complex features, it was necessary to step into the process being fully familiar with the website and with a strong foundation, as is illustrated by the in-depth schema.
This is best illustrated by the table for a Restaurant, which had many associations and join tables. The schema illustrates the preproduction that was done in order to ensure a beautiful product.
The challenge was to display the complex information embedded in each restaurant show page. Emphasis was placed upon creating a scrapper that would dynamically scrape information from a variety of locations. The scrapper allows the clone to become more engaging, as searching will yield a large pool of restaurants. Additionally, scraping allowed the restaurant show page to be an almost pixel-perfect clone of the restaurant show page on OpenTable, and includes true information pertaining to the restaurant.
doc.xpath('//div[starts-with(@itemprop, "review")]').each do |el|
currReview = {}
el.children.each do |child|
case child.attr("class")
when "_53e0a71b"
child.xpath('.//span[starts-with(@itemprop, "name")]').each do |name|
currReview["username"] = name.text
end
child.xpath('.//div[starts-with(@class, "_491257d8")]').each do |rating|
currReview["rating"] = rating.children[0].text.to_i
currReview["date_created"] = rating.children[1].text
end
when "reviewBodyContainer _73484bf6"
child.xpath('.//p[starts-with(@id, "review-body-original")]').each do |body|
currReview["body"] = body.text
end
end
end
restaurant_reviews << currReview
end
Signed in users can write reviews for restaurants, and can save them to their favorites. Additionally, code was always written with the intent to be true to the actual restaurant, and demonstrates the emphasis placed on the user's experience.
Users can search for restaurants and are returned an in-depth list due to the large database.
Creating the search was done through a query, which got all the entries for which the name contains the string that was searched for. This added breadth to the clone, and creates a more interactive user experience.
export const fetchRestaurants = (query) => {
return $.ajax({
method: "GET",
url: `/api/restaurants?query=${query}`
});
}
In the future, I plan on adding:
- A map of all surrounding restaurants
- Search by city (both internationally and locally)