Skip to content
View Aliuihb's full-sized avatar
🤴
Pro
🤴
Pro

Block or report Aliuihb

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
Aliuihb/README.md

Informations

On Progress...

Frontend Developer Challenge: YouTube Clone SPA

Working Prototype: https://youtube-clone-pi.vercel.app/

Cloning Features:

  1. YouTube Theme:
    • Dark
    • Light
  2. Browsing, YouTube pages:
    • Home page
    • Results page
    • Watch page
    • Channel page
    • Watch later page
    • Liked videos page
    • History page
    • Library page
  3. Cloning YouTube Queue.
  4. Adding, removing and sorting and playing videos from watch later list, liked videos list and Queue.
  5. Cloning YouTube filter bropdown and get playlists, channels, and videos on results page.
  6. You can view a playlist on result's page (VIEW FULL PLAYLIST) link button.
  7. Cloning all the Navigation bar Features:
    • Dropdowns
    • Autosuggestion Dropdown
    • Ability to remove suggestions
    • Fake Notifications
  8. You are able to drag and drop a video item in a list using your mouse.

Tech / Stack:

  1. React (web framework).
  2. State management with Redux.
  3. React Helmet.
  4. React Router.
  5. SCSS.
  6. module with SCSS.
  7. Handling YouTuve v3 API requests with React axios and Redux thunk.
  8. Using BEM (Block, Element, Modifier methodology) naming convention for classes in HTML5 and SCSS.
  9. Using jest for unit testing.

Screenshots:

Homepage - Light Mode:

Homepage - Dark Mode:

Responsive:

Watch Later Page:

Queue:

Search Page:

Watch Page:


This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm install

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Popular repositories Loading

  1. Aliuihb Aliuihb Public

    Yeet

    JavaScript

  2. Ali-Mohammed-Farruoh Ali-Mohammed-Farruoh Public

  3. Aliuihb- Aliuihb- Public

  4. meme meme Public

    gogo gaga

    TypeScript

  5. php-snapchat php-snapchat Public

    Forked from JorgenPhi/php-snapchat

    A PHP library for the Snapchat API - With Commit History

    PHP

  6. Discord-Token-Grabber Discord-Token-Grabber Public

    Forked from NYAN-x-CAT/Discord-Token-Grabber

    Gets discord token form ldb files c#

    C#