Create an application that will list all available articles for the user to select and view in detail. The frontend application will need to talk to a proxy API that caches data from Zendesk's FAQs API for an hour.
Ensure the backend is running before the frontend.
The finished product can be viewed on Zendesk FAQs and can also be installed from npm as a react component. This skips the proxy API and connects directly to Zendesk's FAQs API.
The application was developed on Ubuntu 18.04
Modules and Libraries used:
- NPM v6.4.1
- Node v10.15.1
- React v16.8.x (using create-react-app)
- Axios - HTTP client
- Enzyme/Jest - testing
- Zendesk Garden React Components - component library
- Babel - Transpiler
- Webpack - Bundler
First clone repository.
git clone https://github.com/devadeka/zd_tickets_fe.git
Install dependencies.
npm install
After cloning and installing dependencies.
npm test src/
After cloning and installing dependencies. Ensure backend application is running.
npm start
Building static files/output of the front end application was done on a separate branch.
Checkout the branch
git checkout publish_main
Clean install node modules
rm -rf node_modules
npm install
Build static file
npm run build
To view the built frontend application, ensure proxyAPI/backend application is running, and then open dist/index.html.
To run only the frontend application - talking directly to the Zendesk's FAQs API, without the proxyAPI/backend application.
Checkout the branch
git checkout fe_only
Clean install node modules
rm -rf node_modules
npm install
Run application
npm start
The main design decision came in the form of what content to request from the proxy API. The current implentation requests for the articles/FAQs for the page with id, title and body, and when one is select the whole payload for the item is set to be displayed. A different solution would be to return the id and title only when requesting for the page, and then making another request when an article/FAQ is selected. The first method was used because, though it may be a longer request, the number of requests to the backend would be fewer.
Currently the application manages state by passing props from base component down to children components. A better practice may be to use ReactHooks version of Redux. Though for a small application like this it may not be necessary.