The task is to create a web app to view information about youtube clips by user request. YouTube REST API should be accessed via cross-domain XHR requests.
- Search box is viewed by the user when he starts the app.
- The user inputs a request in the search box. e.g. - javascript
- The app processes the request to YouTube REST API and displays loaded clips in form of horisontal list.
- The horisontal list can be scrolled with a swipe (on a desktop via mouse swipe). Swipe should be animated, e.g. user can click and pull the list sidewise. Paging event should be triggered when mouseUp is released. If a user makes X quick swipes the app should list X pages. The number of clips on a page depends on the page size (from 1 to 4 clips per page).
- The additional navigation buttons (paging control) are set on the bottom of the page.
- As listing the pages, the app should load new data by chunks ( 15 clips per chunk). It would be good to manage "smooth" data loading which means preloading data chunks in advance to emulate infinite scrolling experience.
-
Perfect for latest Chrome;
-
Support at least one mobile browser(e.g. iOS / Android / WP);
-
Clips (aka components) are listed pagely. Resizing the page increases/decreases the number of clips on a page. After a resize event the first left clip from previous state should presented on a new state (but its position can be different). The futher resizing would take into account the first left component from the new state.
-
During a mousedown event on a paging component the tooltip with page number should popup.
-
Your complete app should be uploaded to github pages (gh-pages branch) or to any other hosting.
-
Each clip-component should provide for information about a single YouTube clip. Minimal info:
- title (clickable link to YouTube)
- clip preview as a picture
- description
- author
- publication date
- view rate (count)
Showing the other information is optional.
- https://www.googleapis.com/youtube/v3/search?key=AIzaSyCTWC75i70moJLzyNh3tt4jzCljZcRkU8Y&type=video&part=snippet&maxResults=15&q=js
- https://www.googleapis.com/youtube/v3/videos?key=AIzaSyCTWC75i70moJLzyNh3tt4jzCljZcRkU8Y&id=nq4aU9gmZQk,REu2BcnlD34,qbPTdW7KgOg&part=snippet,statistics
- How to get API key - https://www.youtube.com/watch?v=JbWnRhHfTDA
- More detailed manual is here - https://developers.google.com/youtube/v3/
- HTML rendering via JavaScript (a page is loaded without html tags inside document.body);
- CSS preprocessors can be used;
- CSS3 Animations with Transitions & Transforms;
- Use of jQuery and other frameworks and libs is forbidden (except for https://lodash.com/);
.editorconfig
is requiredeslint
is requiredeslint-config-airbnb-base
is required- JS code should be splitted in modules and assembled by Webpack. Usage of babel and babel-loader is required.
- Private repository
- Branch name
youtube-client
. - Once a task is completed, please open a pull request
youtube-client
->master
- Assign PR to you mentor
- At least 7 commits
- Use Conventional Commits format
- Subject line requirements:
* Allowed Types:
* docs: - *documentation only changes*
* feat: - *a new feature*
* fix: - *a bug fix*
* perf: - *a code change that improves performance*
* refactor: - *a code change that neither fixes a bug nor adds a feature*
* style: - *сhanges that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)*
* ...
* Use the present tense ("add feature" not "added feature")
* Use the imperative mood ("move cursor to..." not "moves cursor to...")
* Limit the first line to 72 characters or less
* Reference issues and pull requests liberally after the first line
- PR name should contains the task name and probably additional info.
- Changes must not contain commented code, unnecessary files, changes from other branches and generated files like *.bundle.js. Please review your changes before contributing. .editorconfig, .gitignore, etc. can be included.
- Comments in the PR are good practice.
- How to write the perfect Pull Request
- Repository Guideline violation -25 point
- Commit Message Guideline violation -25 point
- Pull Request Guideline violation -25 point
eslint-config-airbnb-base
errors or warnings -25 point- animation is not smooth -30 point
- The following ES6+ features were used - promises, destructuring assignment, classes +10 points
- reasonable amount of unit-tests +30 points
- functional requirements are met +100 point