varunmanju / brewery-react-app

A website that allows you to search for Breweries based on State, City and Number.

A brewery react app that implements search functionality. The user can search the breweries based on the location like san diego, address, state,city and number.Used this api https://www.openbrewerydb.org.

The code is hosted on this url:

https://hidden-tor-29864.herokuapp.com/

The front page appears like this (https://user-images.githubusercontent.com/82792752/125203075-7885bd80-e294-11eb-8511-fe21cb1fd1c9.png)

The user can type his search query like the place of the brewery Examle place: San Diego and the code returns the list of breweries that have san diego in the text box.Sample search of san doego look like this. Please dont forget to click the search button after typing the search query.

The user also has the option to click on the Remove button after the user clicks Search and gets a list of breweries based on the search query text.Once the remove button is clicked then the screen is empty with no breweries.

The user can also click on the address and the user is redirected to the google maps that shows the exact location of the place based on the address.

Also on clicking on the website link the user is redirected to the brewery website.

Code repo:

The code repo comprises of the app.py backend flask application and the frontend React application code ( App.js).

In the app.py file there is an @app.route method that implements the GET api call.The frontend react application calls this api vis the fetch method url https://hidden-tor-29864.herokuapp.com/breweries/search?query=${input}.The backend code then takes in this api call from the frontend server, passes the input given by the user in the search bar present in the frontend as a parameter and then calls the external api server via the url https://api.openbrewerydb.org/breweries/search?query=' str(list).Here list is the input parameter that the frontend passes to the backend.The results of the query are returned to the frontend fetch function in json format.

Now lets consider the App.js frontend file present in src folder.

In this file the statements are used to store the number of breweries (num) and input to pass it as a parameter when calling the backend api as well as clearing the screen when the remove button is pressed.The return statement is rendered whenever the input or num variable changes.The return statement comprises of the search bar,search button and remove button.When the search button is clicked then the brewery function to fetch the results based on the input of the search bar on frontend is run and a list of breweries is obtained based on the input.When the Remove button is clicked then the input variable (input) state and num state variable is set to 0 so that no contents are displayed.

Call Stack:

The React frontend first calls the flask backend via https://hidden-tor-29864.herokuapp.com/breweries/search?query=${input}. The flask backend then calls the external brewery api server via https://api.openbrewerydb.org/breweries/search?query=' str(list).The external api server fetches the contents from an openbrewery postgresql database server and then returns it back to the external api server.Then the external api server returns the content to the flask backend server and the flask backend server back to the frontend react application where the results are displayed.