Challenge Overview
Describe what you want to accomplish.
A previous challenge has implemented a set of REST APIs for handling video assets, including storing them and managing them (create, retrieve, update, delete). This challenge will build a simple admin interface to allow an admin to tweak the data in the database and returned by the JSON REST endpoints. It will also fix up a few minor issues to this point.
Existing API
The existing Node application and deployment details are in Gitlab, and the URL to the repository can be found in the forum.
Existing issues
These issues must be fixed in your submission:
* https://gitlab.com/hercules-tv-web-apps/web/issues/6
* https://gitlab.com/hercules-tv-web-apps/web/issues/7
Administrator interface
The admin interface will be accessible on the "/admin" endpoint of the deployed application.
Administrator interface definition
Please base the administrator interface in Bootstrap and use this theme to define the UI:
https://bootswatch.com/sandstone/
Administrator login
The admin UI must be protected by a username / password. This username and password can be configured manually through a node command after deployment. The username and password should be stored in the MongoDB, and it's important that an unauthenticated user will be redirected back to the login prompt when they attempt to access any admin UI page. The admin login should set a cookie that expires after 2 weeks so the user gets "remembered" when they come back to the admin UI.
Routes
Please make sure the routes for the admin UI are sensible. For instance, to edit a video record, you can choose something like "/admin/videos/{video ID}/edit". Or to view the videos table, the path could just be "/admin/videos". The same would apply to the scrapers as well.
Header
The UI should have a header with two navigation buttons or tabs:
* Videos
* Scrapers
View the current database
The main goal of the admin interface will be to view the data in the database. This will be the "Videos" tab. Please make the first screen a list of the video records on the database, in a table with these columns:
* Video category
* Video provider
* Video thumbnail
* Video title
* Video duration
* Publish date
* Expiration date
* "Play" button (green) that opens the MP4 video in a separate window
* "Edit" button (blue)
* "Delete" button (red)
The user should be able to:
* Search the table on the fly by typing in a text box
* Sort by the title, category, provider, publish date, and expiration date
* Filter to just a certain category and / or provider with checkboxes
Edit
If the user clicks "Edit" for a specific video, they should go to a new screen with a form where they can edit the data for the video record, including:
* Category
* Provider
* Publish Date / Time
* Expiration Date / Time
* Title
* Description
* Thumbnail URL
* Video URL
The publish and expiration date / times should be editable through a control that allows the user to pick a date and time - don't expect the user to manually enter a date time in a specific format.
Delete a video
If the admin clicks "Delete" for a video, we will pop up a modal dialog (skinned with the Bootstrap theme, not browser native) that says "Are you sure you want to delete this video? Yes / No". If the user clicks the "Yes" button, the video will be deleted and the table of videos will be refreshed. If the user clicks "No", the modal dialog will be closed.
Scrapers tab
The "Scrapers" tab will allow the admin to configure specific scrapers, like the "Wall Street Journal" / News scraper we used in the example. This goes along with this Gitlab ticket: https://gitlab.com/hercules-tv-web-apps/web/issues/7
The user should see a table of scrapers with this information:
* URL
* Parser type (wsj, rss, etc...)
* Name
* "Edit" button (blue)
* "Delete" button (red)
Add a scraper
Above the table list of scrapers should be an "Add Scraper" (green) button that allows the user to enter the name, URL, and parser type information on a form and then insert it into the database. The "Add Scraper" screen should have the form details and two buttons - "Cancel" and "Save". If the user clicks "Cancel", they will get redirected back to the list of scrapers. If the user clicks "Save", the record will be saved to the database and the user will get redirected back to the list of scrapers. Make sure that the table shown to the user is always up to date - if a record is added, it should show up in the table.
Edit a scraper
If the user clicks "Edit" for a particular scaper in the scraper table, they will be redirected to a form where they can edit the scraper details, including the URL to scrape, the parser, and the name used to identify the scraper.
Delete a scraper
If the admin clicks "Delete" for a scraper, we will pop up a modal dialog (skinned with the Bootstrap theme, not browser native) that says "Are you sure you want to delete this scraper? Yes / No". If the user clicks the "Yes" button, the scraper will be deleted and the table of scrapers will be refreshed. If the user clicks "No", the modal dialog will be closed.
Heroku deploy
Make sure the Heroku deployment information is up-to-date and that you keep the package.json up to date as well. Don't expect the deployment to be anything other than "npm install" / "npm start" locally and "git push heroku master" for Heroku deployment.
Existing API
The existing Node application and deployment details are in Gitlab, and the URL to the repository can be found in the forum.
Existing issues
These issues must be fixed in your submission:
* https://gitlab.com/hercules-tv-web-apps/web/issues/6
* https://gitlab.com/hercules-tv-web-apps/web/issues/7
Administrator interface
The admin interface will be accessible on the "/admin" endpoint of the deployed application.
Administrator interface definition
Please base the administrator interface in Bootstrap and use this theme to define the UI:
https://bootswatch.com/sandstone/
Administrator login
The admin UI must be protected by a username / password. This username and password can be configured manually through a node command after deployment. The username and password should be stored in the MongoDB, and it's important that an unauthenticated user will be redirected back to the login prompt when they attempt to access any admin UI page. The admin login should set a cookie that expires after 2 weeks so the user gets "remembered" when they come back to the admin UI.
Routes
Please make sure the routes for the admin UI are sensible. For instance, to edit a video record, you can choose something like "/admin/videos/{video ID}/edit". Or to view the videos table, the path could just be "/admin/videos". The same would apply to the scrapers as well.
Header
The UI should have a header with two navigation buttons or tabs:
* Videos
* Scrapers
View the current database
The main goal of the admin interface will be to view the data in the database. This will be the "Videos" tab. Please make the first screen a list of the video records on the database, in a table with these columns:
* Video category
* Video provider
* Video thumbnail
* Video title
* Video duration
* Publish date
* Expiration date
* "Play" button (green) that opens the MP4 video in a separate window
* "Edit" button (blue)
* "Delete" button (red)
The user should be able to:
* Search the table on the fly by typing in a text box
* Sort by the title, category, provider, publish date, and expiration date
* Filter to just a certain category and / or provider with checkboxes
Edit
If the user clicks "Edit" for a specific video, they should go to a new screen with a form where they can edit the data for the video record, including:
* Category
* Provider
* Publish Date / Time
* Expiration Date / Time
* Title
* Description
* Thumbnail URL
* Video URL
The publish and expiration date / times should be editable through a control that allows the user to pick a date and time - don't expect the user to manually enter a date time in a specific format.
Delete a video
If the admin clicks "Delete" for a video, we will pop up a modal dialog (skinned with the Bootstrap theme, not browser native) that says "Are you sure you want to delete this video? Yes / No". If the user clicks the "Yes" button, the video will be deleted and the table of videos will be refreshed. If the user clicks "No", the modal dialog will be closed.
Scrapers tab
The "Scrapers" tab will allow the admin to configure specific scrapers, like the "Wall Street Journal" / News scraper we used in the example. This goes along with this Gitlab ticket: https://gitlab.com/hercules-tv-web-apps/web/issues/7
The user should see a table of scrapers with this information:
* URL
* Parser type (wsj, rss, etc...)
* Name
* "Edit" button (blue)
* "Delete" button (red)
Add a scraper
Above the table list of scrapers should be an "Add Scraper" (green) button that allows the user to enter the name, URL, and parser type information on a form and then insert it into the database. The "Add Scraper" screen should have the form details and two buttons - "Cancel" and "Save". If the user clicks "Cancel", they will get redirected back to the list of scrapers. If the user clicks "Save", the record will be saved to the database and the user will get redirected back to the list of scrapers. Make sure that the table shown to the user is always up to date - if a record is added, it should show up in the table.
Edit a scraper
If the user clicks "Edit" for a particular scaper in the scraper table, they will be redirected to a form where they can edit the scraper details, including the URL to scrape, the parser, and the name used to identify the scraper.
Delete a scraper
If the admin clicks "Delete" for a scraper, we will pop up a modal dialog (skinned with the Bootstrap theme, not browser native) that says "Are you sure you want to delete this scraper? Yes / No". If the user clicks the "Yes" button, the scraper will be deleted and the table of scrapers will be refreshed. If the user clicks "No", the modal dialog will be closed.
Heroku deploy
Make sure the Heroku deployment information is up-to-date and that you keep the package.json up to date as well. Don't expect the deployment to be anything other than "npm install" / "npm start" locally and "git push heroku master" for Heroku deployment.
Submission format
Your submission should be provided as a Git patch file against commit hash d38722d9957e102a9a742d51dd90e1a91884fad2. MAKE SURE TO TEST YOUR PATCH FILE!