Challenge Overview
In the previous challenge, we created a set of pages for the IBM Self Help app.
In this challenge, you need to implement the Forum Search Box component and Search Results page.
Almost all actions/reducers/services are already implemented and you will just have to reuse/extend them in order to complete the requirements of this challenge.
Also, the routes you need to use are already implemented.
Tech stack
-
ReactJS
-
Redux
Detailed Requirements
Search Component
The following screens show the different states of this component:
-
05_00-Web-Forum-Landing.png
-
05_01-Web-Forum-Search-Result.png
-
05_02-Web-Forum-Smart-Search.png
-
05_04-Web-Forum-Click-on-Quick-Reply.png
Requirements explanation:
-
The products menu is part of this component. The action to fetch the available products is already implemented.
-
While typing, you need to fetch and show search suggestions. The action to fetch search results is already implemented.
-
Each search result will have a type field with values THREAD or POST. This attribute will help to determine which actions to show.
-
Quick Reply should be functional. The action to reply to a post is already implemented but you may have to extend the search method to return all required fields for each post (productId, forumId, threadId).
-
You can remove the Preview button from the quick reply.
Search Results Page
Screen: 05_01-Web-Forum-Search-Results.png
Requirements explanation:
-
Pagination should work.
-
Remove the ‘Collapse All’ link.
-
Search results may contain both Threads and Posts.
-
Remove the ‘Price’ column.
-
You may remove a column if there’s no data to populate it.
Supported Devices
You need to support:
-
Mobile <768px
-
Tablet 769px - 1365px (Use fluid layout of mobile storyboard)
-
Desktop >1366px (Use fixed layout with fluid backgrounds for larger screens)
Typography
You need to use IBM Plex font (https://ibm.github.io/type)
Code Requirements
-
You need to use ReactJS with ES6 and follow the latest best practices.
-
Write clean reusable components to avoid code duplication.
-
Use React Router to handle route management.
-
Data should be stored in JSON files. Do not hardcode any data in your source code.
-
Please use SVG for icons. If any icon is not available in SVG format, you can use PNG but make sure it looks good on retina.
-
Use flex instead of floats.
Forum hierarchy
Product > Forum > Thread > Post > Reply
Web Browsers Requirements
-
IE11
-
Microsoft Edge
-
Latest Firefox version
-
Latest Safari version
-
Latest Chrome version
-
Latest Safari version on tablet/mobile
-
Latest Chrome version on tablet/mobile
Final Submission Guidelines
-
Git patch for the latest commit in develop branch.
-
[Optional] The whole project folder just in case your patch file is broken.
-
[Optional] A video showing your submission in action.
The winner will be requested to create a merge request if a git patch was not provided.