An open API service indexing awesome lists of open source software.

https://github.com/elegantsoft/youtube-task


https://github.com/elegantsoft/youtube-task

Last synced: 8 months ago
JSON representation

Awesome Lists containing this project

README

          

## Notes:
- Add README file with the steps of configuring your app and running it
- Use Git version to preview your project

## Requirements:
- Create SCALEABLE COMPONENT based on JavaScript By using Vue/React
- Consider the project to be SCALEABLE
- Create responsive app
- Don't use CSS frame works (Only CSS components)
- use SASS and follow the guidelines mentioned bellow

- create a responsive YOUTUBE like app
- head bar:
- in mobile it will be scrollable
- in desktop it will be fixed

- the main page:
- is a search page /search?query={txt}

- in mobile:
- it will look like mbile1.png has header, filters, and body
- the header contains logo search text and search icon
- when u click on the search key the search text will convert to search input like in search-control.png
- the loading will be like the mobile-loading-state.png

- in desktop:
- it will looks like desktop-view.png/ desktop-view-1.png
- the heder is fixed when scrolling
- the header has the logo and the search controllers
- the second header had the results count and the filters button
- when u search (write in textbox and press enter or click the search button) the loading bar will appear like in desktop-loading.png

use youtube Apis:
the search Api https://developers.google.com/youtube/v3/docs/search/list

### Preferred:
- Use git and the make sure the commit messages makesense
- try to use css and js linters, be consistent in the way of writing your code
- Use Flux Arch

### Guidelines
- BEM,& SCSS in writing you scss code.
- css guideline:
- http://cssguidelin.es/.
- js guidelines:
- https://github.com/airbnb/javascript/tree/master/es5