Recipe Finder - Purepoint

Description

A recipe finder app using the RecipePuppy API: http://www.recipepuppy.com/about/api/

API Query:

Users can type in a search query for the name of a recipe:

q : normal search query

Example:

To fetch all search query results for "omelet" http://www.recipepuppy.com/api/?&q=omelet

Set Up / Running App

Download & unpack Hassan_Purepoint.zip file
Assuming you already have Node or NPM, while inside purecipe folder, install node_modules (express dependencies) using npm install
Go to the frontend folder, while within, install node_modules (frontend dependencies) using npm install (if not, check out How to install Node )
To Run Express server that fetches API, run the command npm start (while inside root folder)
To Run React App, run the command npm start (while inside frontend folder)
On your browser, go to http://localhost:3000 to run application

Requirements

As the user types in a search query for the name of a recipe, search results should be displayed in a list (i.e. each time the user adds or removes a character to the search term, the list may update).
Only the first 20 results of a search are displayed.
You may use a framework like create react app if this suits

Technology Stack Used

HTML5 / CSS
REACT JS (Frontend)
Node / Express (Backend/API)

External Library:

Axios (API call)

Configuration

Using Express as a proxy server

React standalone app doesn't come with an actual server and thus unable to access APIs that have CORS-enabled
Using Express, created a new API route that fetches the API data by sending response headers.

router.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Set the express port to 3001

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Added express proxy to package.json of frontend: "proxy":"http://localhost:3001"
Created search query from React app using the express proxy route axios.get(/api/?q=${e})
Ran react app on port 3000: http://localhost:3000

How the App Works

1) No Search:

2) List Search Result:

A scroll is if list of results exceeds the display's height

3) No Result Found:

Folder Structure

Hassan_PurePoint
    ├── README.md
    ├── purecipe
    ├── frontend
    │   ├── README.md
    │   ├── build
    │   │   ├── asset-manifest.json
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   ├── manifest.json
    │   │   ├── service-worker.js
    │   │   └── static
    │   │       ├── css
    │   │       │   ├── main.a203576f.css
    │   │       │   └── main.a203576f.css.map
    │   │       ├── js
    │   │       │   ├── main.c96fb44e.js
    │   │       │   └── main.c96fb44e.js.map
    │   │       └── media
    │   │           └── intro-bg.fb30f247.jpg
    │   |
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── src
    │   │   ├── App.js
    │   │   ├── App.test.js
    │   │   ├── css
    │   │   │   ├── App.css
    │   │   │   └── index.css
    │   │   ├── img
    │   │   │   └── intro-bg.jpg
    │   │   ├── index.js
    │   │   ├── logo.svg
    │   │   └── registerServiceWorker.js
    │   └── yarn.lock
    ├── bin 
    |   └── www
    ├── routes
    |   └── index.js
    ├── app.js
    ├── package.lock.json
    └── package.json

Scalability

This app is built for development to meet the requirements of the task in a short time but can be easily updated & deployed to run on Heroku (or other services)

hassanbadru / purecipe