Solution

This project required three new areas of functionality to be created.

1. The ‘Team’ site – This is RideWraps internal website, where staff members manage product inventory. processes and so on. It was here that I created a new database table to store the FAQ’s, and a new site area with a UI to manage them.

2. API Endpoints – It was now a requirement for this newly managed FAQ data to be pulled into other systems and output on the front end. I created API endpoints on the team site to achieve this, which could be called upon to serve the FAQ data.

3. The ‘front end’ – The ‘front end’, in this case, was the www.ridewrap.com website. This was where the React web app would be placed, containing functionality to make API calls to the team site endpoints, in order to retrieve the FAQ data, with a dynamic UI for the user to interact with.

 

The React app.

The app uses two main components, built up of sub-components. The two main UI elements are the filter tagging ( on the left of the UI ), and the results pane ( on the right ).

1. The filter tags component:

The API call to the teams site returns all FAQ data, including the various tags that an FAQ item can be assigned. When this data is returned to the ‘front end’, the filter tags component is built, and populated with all of the returned tags from all FAQ items.

2. The results pane component:

This is populated in the first instance, by all the FAQ items stored in the team site, and therefore available via API call.

Then, when the user makes tag selections, we pass data up and down the component heirachy to determine which FAQ items should render.

The user can make selections from the tag filters, and the results dynamically filter based on the user selection.

Then when a user wants to view one of the filtered FAQ items, they click it, and a full screen overlay renders with the FAQ details.