react-app-simple-restaurant-app

A Simple Restaurant Application using React JS, a JavaScript library to make awesome UI by Facebook, Node JS, Express JS and MongoDB.

This application uses component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.

Babel is used to transpile all JSX code to vanilla JavaScript. For UI creation HTML5 and CSS3 are used.

This is a responsive web application for viewing in both Mobile and Desktop.

Back end is implemented using Node JS, Express JS and MongoDB Atlas.

Features

• Code is rewritten with latest version of React JS and Node JS.
• Latest features of JavaScript i.e. ESNext is used.

• This is Full Stack Simple Restaurant Application.

• All the restaurant details namely cusines, establishment type, address, locality, rating, cost for two persons are stored in the MongoDB Atlas. This example uses a free/ shared account. So Please use it wisely.

• Searching facility using locality, name and cuisines
  • Searching can be done from two places - the Search box and clicking on the several features of a restaurant like name, locality and so on.
• Sorting of the searched restaurants can be done using price both ascending and descending order and rating in descending order only.
• Filters namely cost for two persons, establishment type, locality can be applied on a list of searched results.
• Only one filter can be selected from a particular category.
• Click on an active filter will deselect the filter.

• Viewing the details of a restaurant can be done clicking the photo/ logo of the restaurant or clicking the View Details button.
• Viewing the details of all restaurants can be done by clicking the <- of the individual restaurant page.
• Listing of restaurants both all and individual are done using React Router.
• All the restaurant details are stored in the database i.e. persistant.
• All the currencies are shown in INR ₹ format.

Installation

Clone the repository: Navigate inside the directory and install all the necessary dependecies:

$ cd react-app-simple-restaurant-app


# Install all the dependencies
$ npm install

Now, Run the server

$ npm run server

Open the web browser and typehttp://localhost:3000 in the address bar to load the application.

Search

1. Search restaurants using name, cuisines, locality etc.
2. Filter the search results by cost for 2 persons, establishment type and locality.
3. Sort the results by price and rating.
4. View details of each restaurant by clicking View Details button.

tested with latest version of Google Chrome and Mozilla Firefox

Screenshots

Some screens of the application is given below for better understanding.

Desktop as well as Mobile version of the screenshots are given side by side.

Home Screen

Entering search text

Loading results

When results are loaded

View Individual restaurant

Sorting with ascending prices

Apply the filter bar