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 pageS.
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
NOTE: Ignore the search component in all forum pages. This is being handled in another challenge.
05_00-Web-Forum-Landing.png
Route: /forum/product/:productId
Explanation: http://take.ms/E4Jsm
05_03-Web-Forum-Start-a-New-Post.png
Route: /forum/product/:productId/forums/:forumId/threads/:threadId/create
Explanation:
-
You may use any open source WYSIWYG editor. Please try to match the design if possible.
-
Remove the preview button.
05_05-Web-Forum-Reply-Thread.png
Route: /forum/product/:productId/forums/:forumId/threads/:threadId/posts/:postId
Explanation:
-
The upvote/downvote should work. The required actions are already implemented.
-
Originally, the reply form should be hidden.
-
Clicking the reply link in any existing reply will open the reply form.
-
You can remove the ‘Leave a comment about the price’ section.
-
You can remove the Preview button.
-
The filters don’t have to be functional.
-
Remove the ‘Price start - to’ from the filters popup.
05_07-Web-Forum-New-Thread.png
Route: /forum/product/:productId/forums/:forumId/create
Explanation:
-
You may use any open source WYSIWYG editor. Please try to match the design if possible.
-
Remove the preview button.
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.