├── Icon.png
├── Logo.png
├── Readme.md
├── Youtube Assignment Design.fig
└── design
    ├── Frame 1.png
    ├── Frame 2.png
    └── Frame 3.png


/Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/ph-tube-resources/108d319255ffb4113bf0ad40ce535fc797b1d7c0/Icon.png


--------------------------------------------------------------------------------
/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/ph-tube-resources/108d319255ffb4113bf0ad40ce535fc797b1d7c0/Logo.png


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <img src="Logo.png"  />
 3 | </p>
 4 | <p align="center" style="font-size: 24px;">
 5 |   PH Tube is a web-based video streaming application where users can browse and watch videos sorted by categories such as music, comedy, and tutorials.
 6 | </p>
 7 | 
 8 | <hr/>
 9 | <p align="center" style="font-size: 34px; font-weight:bold">
10 |  REST API
11 | </p>
12 | 
13 | <p style=" font-weight:bold">
14 |  GET: Categories 
15 | </p>
16 | 
17 | Endpoint: [https://openapi.programming-hero.com/api/phero-tube/categories](https://openapi.programming-hero.com/api/phero-tube/categories) <br/>
18 | 
19 | <hr/>
20 | <p style=" font-weight:bold">
21 |  GET: Videos 
22 | </p>
23 | 
24 | Endpoint: [https://openapi.programming-hero.com/api/phero-tube/videos](https://openapi.programming-hero.com/api/phero-tube/videos) <br/>
25 | 
26 | <hr/>
27 | <p style=" font-weight:bold">
28 |  GET: Video based on Catagory  [ params ]
29 | </p>
30 | Endpoint : https://openapi.programming-hero.com/api/phero-tube/category/categoryId
31 | 
32 | Example: [https://openapi.programming-hero.com/api/phero-tube/category/1001](https://openapi.programming-hero.com/api/phero-tube/category/1001) <br/>
33 | 
34 | <hr/>
35 | 
36 | <p style=" font-weight:bold">
37 |  GET: Video based on Title  [ Query ]
38 | </p>
39 | Endpoint : https://openapi.programming-hero.com/api/phero-tube/videos?title=videoTitle
40 | 
41 | Example: [https://openapi.programming-hero.com/api/phero-tube/videos?title=shape](https://openapi.programming-hero.com/api/phero-tube/videos?title=shape) <br/>
42 | 
43 | <hr/>
44 | <p style=" font-weight:bold">
45 |  GET: Video Details by video_id  [ Query ]
46 | </p>
47 | Endpoint : https://openapi.programming-hero.com/api/phero-tube/video/video_id
48 | 
49 | Example: [https://openapi.programming-hero.com/api/phero-tube/video/aaac](https://openapi.programming-hero.com/api/phero-tube/video/aaac) <br/>
50 | 
51 | <hr/>
52 | <p align="center" style="font-size: 34px; font-weight:bold">
53 |  Requirements
54 | </p>
55 | 
56 | ### Create a responsive Navbar which have following elements
57 | 
58 | - Logo of PH-Tube at Left
59 | - A Search Box with Search Button at Center
60 | - A Sort Button at the Right
61 | - (Add a border at bottom of the Navbar)
62 | 
63 | ### Create Dynamic Category Section
64 | 
65 | - Load all the Catagory Button From API and Show them in a centered position
66 | - on click on a certain button, Load specific Catagory Data
67 | - Integrate active button functionality for better UX
68 | 
69 | ### Create Dynamic Video Sections
70 | 
71 | - Load all the videos from API
72 | - use the Card Layout mentioned in Design part
73 | - Show Verified badge (if Verified)
74 | - on click Show Video Details with Author info in a modal
75 | - Show No Video Icon if specific category have no videos
76 | 
77 | ## Additional Features
78 | 
79 | ### Search Functionality
80 | 
81 | - Integrate search functionality
82 | - on input change  de-activate active button on category and show matched videos only
83 | 
84 | 
85 | 
86 | <hr/>
87 | 
88 | <p align="center" style="font-size: 34px; font-weight:bold">
89 |  Design Idea's
90 | </p>
91 | Basic Layout
92 | <img src="design/Frame 1.png">
93 | <hr/>
94 | Error Layout
95 | 
96 | <img src="design/Frame 3.png">
97 | 
98 | <hr/>
99 | 


--------------------------------------------------------------------------------
/Youtube Assignment Design.fig:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/ph-tube-resources/108d319255ffb4113bf0ad40ce535fc797b1d7c0/Youtube Assignment Design.fig


--------------------------------------------------------------------------------
/design/Frame 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/ph-tube-resources/108d319255ffb4113bf0ad40ce535fc797b1d7c0/design/Frame 1.png


--------------------------------------------------------------------------------
/design/Frame 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/ph-tube-resources/108d319255ffb4113bf0ad40ce535fc797b1d7c0/design/Frame 2.png


--------------------------------------------------------------------------------
/design/Frame 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/ph-tube-resources/108d319255ffb4113bf0ad40ce535fc797b1d7c0/design/Frame 3.png


--------------------------------------------------------------------------------