Release Assembly - CSFV Forums Frontend Revamp Part 1

Project Overview

This project, the CSFV Community Gaming website project will provide the web site infrastructure and integration of the games. This will be a web site that is available on the Internet, and also will be delivered in a form where the server and the games can be installed and used behind a firewall.

 

The goal of this assembly is to update Forums frontend and make some changes to how backend should work.

Competition Task Overview

Categories, Forums, and Threads Restructuring

• We are introducing “FLAT” design concept where display all threads of all categories in a single page.

• In the new approach, we will remove 'Forums' model and threads will now be associated with categories.

• Each category can have many child categories.

• When posting a thread, user will select the "category" to post the thread to.

• We will introduce a new category "Uncategorized" - this one is created by default. Add a logic to check if this category exists on app startup, if not, then create one.

• We will need to implement 'unread' thread concept for all users.

• Pinned and Locked threads should be implemented and managed only by admins.

Updated Pages

• Forums main page : GET /forums

  • UI Prototype page forums-main.html

  • By default it lists all threads under all categories that don’t have a parent category (Excluding pinned threads)

  • The ‘Category’ column represents the category of the post, the category tag is only the post.

  • By default, it retrieve threads of “All categories”.

  • Category column represents the category of the post, if it is ‘Uncategorized’ then don’t display the tag.

  • Drop down list “All Categories” will list all categories that don’t have a parent category

    • If user select a category the page will load threads of that category and it’s child categories

      • Add another drop down list to the header to list all child categories of seleted categories. it should also have ‘No Categories’ option so user can retrieve threads of the selected category without it’s child categories.

      • If user select a subcategory from the 2nd child category drop down list then the page will filter the results to display threads of that selected subcategory.

  • Remove 'Add Forum' Button

  • Remove 'Pipeline' Button

  • 'MY POST' should be 'MY POSTS' in all pages

  • Change 'Add Subcategory' to 'Add Category'

  • Pinned posts are always displayed at the top except when sorting

  • Pinned posts are decided as follow :

    • If ‘All Categories’ (the default) then the ‘Uncategorized’ pinned thread will be displayed.

    • Other than that, Pinned threads are only retrieved for the selected category.

  • Implement sorting as in prototype

  • Implement pagination as in prototype, the backend should send total number of items so “Load more” button don’t display if there is no more posts to load.

  • The new tabs are used to improve UX

    • by default 'Most Recent' is active tab, which display threads that were posted recently, "Pinned" threads are only these from 'Uncategorized'

    • 'Admin Posts' - this tab will pull the posts under configured category that will be used as "Blog" category, the threads will look like 'pinned' threads except that the 'pinned' icon should be removed

    • 'Most Viewed' - this display posts with most viewed

    • 'Most Popular' - display threads sorted by highest number of replies

    • Unread - this tab display unread threads of the user

    • The notification number on the tab represents the number of new/unread threads under that tab, if the number exceed 1000, use the 'k' to reduce the width, for example 1345 should be displayed as 1.3k

  • 'Watch Category' popup - it will list all categories with their descriptions, user can watch/unwatch category from this popup. The "manage categories" link will only be available to Admins.

  • Hover over users photo should display tooltip with the username.

  • Clicking in any 'category' tag will filter the page with threads of the selected category and it's subcategories. Same behavior as selecting category from “All Categories’ drop down list.

  • The route when filter the page with specific category should be "GET /forums/{category-name} where dash (-) should replace spaces.

  • Use JS templates when loading more threads instead of hardcoding the html in the JS files.

  • “Last Poster” column - use the format as shown in prototype :

    • If the post is < 1 minute ago then it should be “< 1 min”

    • If the post is < 1 hr ago, then display it in minutes “34 min”

    • If the post was several days ago use “XX d” where XX number of days

    • if the post was several months ago use “xx m yy d” where xx is number of months, yy is number of days

    • if the post was posted more than a year, use “zz y xx m yy d” where zz number of years, xx number months, yy number of days.

  • the backend should send the total number of threads so that if no more to load then “Load more’ button should not be displayed

• Threads Page

  • Prototype page is : forums-thread.html

  • Must match prototype

  • Move ‘Watch’ and ‘Delete’ buttons from black header to forums menu.

  • Progressive loading to replace pagination

  • The backend should send the total number of threads so that if no more to load then “Load more’ button should not be displayed

  • ‘Share’ button is out of scope, don’t add it to the page.

  • Add ‘Pin Thread’ button at the forums top buttons, it will only be visible to the admins. When clicking that button, the thread will be pinned and a post will be posted automatically in that thread by the user who pinned the post with text “This topic is now pinned. It will appear at the top of its category."

  • Add ‘Lock’ button, when clicking the thread will be locked and no more accepting replies, a post will be posted automatically in that thread by the user who pinned the post with text “This topic is now locked. It will accept no more replies.” you can use the lock icon from forums-my-post.html to be displayed in the forums-main.html

• Post/Update Thread

  • UI prototype page : forums-new-thread.html

  • Update post thread to match prototype

    • Category drop down list will list all categories and child categories.

    • Remove Pin Post checkbox

• Search pages

  • UI Prototyep page : forums-advanced-search.html and forums-search-results.html

  • Should implement progressive loading and sorting

• Manage Categories

  • UI Prototype page : forums-manage-categories.html

  • Only accessed by admins

  • Display list of categories with their descriptions

  • user can delete or edit the categories

  • Sorting to be implemented in the page

  • Progressive loading to be implemented in this page

• Add/Edit Category :

  • Same page as we currently have in the frontend application.

• “MY Posts” page :

  • Should match forums-my-post.html

  • Sorting should be implemented

  • Progressive loading should be implemented

  • Change ‘Forum’ column to ‘Category’ column

• My Watches

  • Should match forums-my-watches.html

  • Sorting, progressive loading should be implemented

  • move “remove selected’ to the top

  • Forums tab should be changed to ‘Categories’

 

Admin Pages

We will no more have admin pages other than the one provided in forums. The admin and users will use the same pages, the only difference that admin pages in prototype and admin functionality will be available via buttons in the main forums menu and buttons in each message in threads.

 

If you have any doubt about specific admin functionality please post in forums to discuss and don’t make any pre-assumption.

 

Cleanup routes and javascript

 

Cleanup the routes to remove the forums routes that is no more needed, remove javascript and css that is no more needed.

 

All javascript code related to Forums MUST be moved to a new file called forums.js

 

General Notes

• All pages must be updated to match the UI Prototype unless it is outlined above that there are changes neede to specific pages.

• Any non-admin page in production are not found in prototype should be kept, don't delete any non-admin page unless it is stated in requirements or confirmed in forums.

• By default we display 20 posts, “Load more” will also pull another 20 posts. In both thread list page and thread details page.

• Any button currently displayed in the black forums bar should be moved ot the top forums buttons menu

 

Technology Overview

• Node.js

• Express.js

• mongo

• ajax

• html

• javascript

• css

• jade

Documentation Provided

UI Prototype is provided in forums.

Github Code

The code is in http://www.github.com/topcoderinc if you don’t have access, please request it in the contest forums.

 

Final Submission Guidelines

Submission Deliverables

Below is an overview of the deliverables:

• Patch file of changes.
• Upated readme file
• Deployment document.

Final Submission

For each member, the final submission should be uploaded to the Online Review Tool.