https://github.com/elegantsoft/youtube-task
https://github.com/elegantsoft/youtube-task
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/elegantsoft/youtube-task
- Owner: ElegantSoft
- Created: 2020-01-22T22:25:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:32:04.000Z (almost 3 years ago)
- Last Synced: 2025-01-03T11:47:22.339Z (9 months ago)
- Language: TypeScript
- Size: 5.29 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
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.pnguse 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