• https://github.com/marielleloui
• https://linkedin.com/in/marielle-louise-cruz

This Pie of the Day Finder is a simple web application built using React, and other tools and technologies which will be further described in this README. The application retrieves the following information from the two API endpoints, https://pie.now.sh/pies and https://pie.now.sh/stores:

• name of the pie
• price of the pie
• quantity
• store name
• address
• rating
• contact number

Only the information regarding Pies of the Day (i.e. "isPieOfTheDay": true) are retrieved from the APIs and displayed on the web application.

(When the application is loaded for the first time, it may take a while for the API data to be retrieved.)

• Retrieves and consolidates pie and store information from two API endpoints
• Displays Pie of the Day information via expandable and collapsible UI cards
• Paginates the filtered pies list using pagination controls, based on a 5 pies per page limit
• Enables non-case sensitive searching of pie names via a dynamic search bar

• React for building the UI and managing the presentation logic of the application
• Create React App for providing a modern build setup for React
• Axios for making HTTP GET requests to the API
• Material UI for implementing Google's Material Design on some application components
• Babel for compiling ES2015+ down to ES5 compatible code
• WebPack for bundling code down to a single file and enabling hot module reloading
• Jest + Enzyme for testing
• Heroku for running a live version of the application in the cloud
• Git for tracking changes in the source code
• VSCode, code editor used to build the application

The entire searching logic was done within the application itself, as the base API, https://pie.now.sh, does not support searching. An alternative approach to this is to create a db.json file, use a JSON server, and immediately filter search results using an AJAX call to the server.

Similarly, pagination logic was also completely done within the application, without the help of an API. The base API (https://pie.now.sh/pies?_page=1&_limit=5) supports pagination; however, the API's pagination functionality does not work with this application's requirement —which is to only include items where "isPieOfTheDay" is true.

A few simple tests were created for two of the components within the React application. Jest was used for running tests, and Enzyme was used for providing testing utility functions (e.g. shallow) for components. Further tests may likewise be designed for other components.

In terms of application functionality, a sorting feature may be added in order to enable the sorting of pie prices in ascending or descending order.

Regarding the structure of the application itself, Redux may be used to manage state more effectively. React Hooks may also be utilised if function-based components —as opposed to class-based components —are desired.

(Best viewed on desktop via Google Chrome)

If you want to run this application locally, you may use the following:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Launches the test runner in the interactive watch mode.