/youtube-task

Primary LanguageTypeScript

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