Challenge Overview
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.
Competition Task Overview
The goal of this challenge is to revamp news related pages, using provided HTML UI Prototype and outlined requirements below.
UI Requirements
-
UI Pages : news.html
-
the html prototype is using angular.js to navigate between news listing page and news details page.
-
Routes :
-
/news or /news/:categoryName?/:subcategoryName?
-
category and subcategory names should be separated by hyphen, basically we are replacing spaces with hyphen (i.e. /news/general-discussions or /news/stormbound/general-discussion)
-
-
/news/yyyy?/mm?/dd?/:newsTitle?
-
We will use permalink concept to point at news details page, :newsTitle will be permalink attribute stored in CMS Post. separated by hyphen.
-
yyyy represents year
-
mm represents month (should have leading zero for 1-9)
-
dd represents day (should have leading zero for 1-9)
-
-
-
News Listing page
-
Routes to access the page :
-
/news
-
/news or /news/:categoryName?/:subcategoryName?
-
category and subcategory names should be separated by hyphen, basically we are replacing spaces with hyphen (i.e. /news/general-discussions or /news/stormbound/general-discussion)
-
-
/news/yyyy?/mm?/dd?
-
yyyy represents year
-
mm represents month (should have leading zero for 1-9)
-
dd represents day (should have leading zero for 1-9)
-
-
-
The page is similar to existing listing page.
-
it loads recent news listing items.
-
Or load latest news filtered by category or subcategory.
-
Or load news list filtered by year, or year and month, or year, month and day.
-
-
The page is using angular.js to load content.
-
The page will load the news items via ajax.
-
“NEWS Categories for” is a drop down list to filter news based on selected category. By default it is “Overall News”.
-
Overall News will load news sorted by date from all categories in descending order.
-
When user select from drop down list it will load items via ajax.
-
Change “news categories for” label to “Selected category”
-
-
Note that when items being loaded via ajax, we show loading ajax indicator as grayed news item placeholders.
-
“View More” should appear only when there are more items to load. If no more items to load it should show “No More Stories”.
-
Clicking “View More” will make call to backend to load more news items, it will show loading indicator as news item placeholders as shown in UI prototype when clicking “View More”.
-
News Item components - below screenshot explain what it is :
-
Optional image :
-
Not all news item may have image associated with it, if not, then we don’t display that part. We have example of item with no image in UI prototype.
-
Image should be clickable and link user to news details page.
-
Note that the image width should be exactly same as width of the news item widget, DO NOT RESIZE it, if it is wider than the widget then styling should break and we want to see it broken so we fix it.
-
-
News category : it can be one or more categories, a news can be associated with multiple categories. Each category tag link to news listing page filtered by that category.
-
News title - it links user to news details page.
-
News excerpt - ignore ‘read more’ that exists in some news items in the UI prototype.
-
ShareThis button : on hover sharing icons will appear. This one should be implemented using ShareThis functionality/plugin.
-
The styling should be same as in UI prototype, you need to customize sharethis plugin.
-
When sharing, it should include URL of page, title, excerpt, and news item image if available.
-
-
-
-
News Details page:
-
Route to access this page :
-
/news/yyyy?/mm?/dd?/:newsTitle?
-
-
The page is similar to this existing news details page
-
The new page will have custom route different than existing one as clarified above.
-
Keep existing routes as it is. Don’t change or remove them.
-
The page consist of three main items :
-
News details section.
-
Disqus commenting widget.
-
Related News widget : it is the “news” widget below Disqus comment widget.
-
-
“News Details” section :
-
Consists of :
-
News category tags : it can be one or more categories, a news can be associated with multiple categories. Each category tag link to news listing page filtered by that category.
-
News Title
-
Create date - the format should be one of the following :
-
mm minutes ago - when it is less than hr since posting the news.
-
hh hours ago - i.e. 3 hours ago.
-
month dd, yyyy - i.e August 21, 2014 when it is more than 1 day ago.
-
-
Posted by <username>
-
the username links to user profile page.
-
Hover over the username will show user informatino popup.
-
-
ShareThis sharing icons.
-
The styling should be same as in UI prototype, you need to customize sharethis plugin.
-
When sharing, it should include URL of page, title, excerpt, and news item image if available.
-
-
News content : note that prototype styling was coded to allow following items not to be reset by reset css styles
-
bold
-
italics
-
subheads (H1, H2, and H3)
-
links
-
lists (ordered list and unordered list)
-
blockquotes
-
-
Next/Previous stories : These will show the adjacent stories of current one.
-
-
Disqus comment widget :
-
We already implemented this one, you only need to change styling of div wrapper to match the UI prototype.
-
-
“News” widget :
-
Rename widget to “Related News”.
-
It’s UI is same as News Listing page.
-
It retrieves news items related to current displayed one.
-
View more works same as “news Listing page.
-
-
-
-
Bottom three widgets are out of scope, we implemented them in different challenge and will add it to this page in final fixes.
-
Place new css and js in a new css/js files.
-
Don’t delete or update existing news css/js files. And of course dont include them when loading these revamped pages.
-
Use Angular.js to navigate and manipulate content to be loaded via ajax.
Backend Requirements
-
Don’t update or delete existing news route , views or backend controllers. Keep them as it is.
-
Create new controller methods and views for the new revamped pages.
-
Changes to news cms post :
-
All news cms posts should now store new meta attribute “permalink” that specify a permalink for the news details page.
-
photo meta attribute is now optional.
-
-
Retrieving news listing items :
-
Create new method to serve the listing for the new page.
-
It will search CMS posts either by :
-
Recent news items.
-
By provided categories
-
By provided dates (year, month, day)
-
-
Pagination information should be included in response.
-
View More logic should take into account the filtering used to retrieve items : recent, categories, or date.
-
It will use same route to access first list/page in the news listing with additional query string parameters (offset and limit) to retrieve more items. i.e. /news/2010?offset=2&limit=5
-
-
By default the method should limit number of retrieved items to 5 if limit is not set in url.
-
By default offset is 0 if not set in url.
-
Validate each item news retrieved that it contains a permalink attribute, if it does not contain, then apply following logic :
-
dynamically generate ‘permalink’ value by removing all wildcard characters from title.
-
Replace spaces with hyphens
-
validate generated permalink isn’t already exist in CMS Posts that related to news posts (search both draft and active), if exists, then truncate a word from title and try again.
-
Store the permalink value in CMS Post in DB.
-
-
-
Retrieving news details item :
-
It will use the dates and permalink attribute to retrieve news CMS Post.
-
The CMS Post of the news details will contain same information as existing one in addition to the ‘permalink’ attribute as outlined above.
-
Retrieve adjacent stories of the current cms post, and the algorithm to retrieve these two information should be efficient so it won’t affect performance :
-
Try to find news items by searching posts within the same week as current news item.
-
If the previous step did not work, then try searching posts created within the 3 weeks range (1 week before and 1 week after current post date)
-
If it did not work, then try to search posts created within 3 months range (1 month before and 1 month after current news item date)
-
If it did not work, then try to search posts created within 1 year range (6 months before and 6 months after current news item date)
-
If current news item is the latest news item created in the website then you randomly get a past news item to be placed as “Next story”.
-
-
-
“Related News” widget :
-
It should search for news under same categories as current news item.
-
If no more news under categories of current news item then retrieve news sorted by create date in descending order excluding the categories of currently displayed news item.
-
Documentation Provided
- UI Prototype provided in challenge forums.
- The deployemnt guide of the CSFV websites can be found in the github private repo, in README file. Ask questions in challenge forums. if you have troubles deploying the websites.
Source Code
Source code exists in private github repo https://github.com/topcoderinc/
If you get 404 then you need permission to access it. Request it in challenge forums, copilot will add you to the repository and you should receive email about you being added to github. Post your *github* account name when requesting access.
- csfv_frontend_module
- csfv_cms_module (this is the module that contains frontend application and backend to create CMS Posts)
Final Submission Guidelines
Submission Deliverables
Below is an overview of the deliverables:
- Patch file of changes.
- Detailed document about structure of CMS posts and metadata, and configuration needed by the page.
- A document explain how to create CMS Posts to reviewers.
- Updated csfv_test_data_generator module if needed.
Final Submission
For each member, the final submission should be uploaded to the Online Review Tool.