emmastrienko / ViewTube-styled-components

ViewTube

Introduction

OTT – Over-the-top media is no longer the future of entertainment but is now the reality.​

With over 50% of North Americans maintaining Netflix subscriptions, it is evident that the consumers love OTT content. It is the most popular form of entertainment today across all age groups. ​

All that a consumer needs to have, is a compatible hardware device enabled with a good internet connection.​

An “over-the-top” media service is an online content provider that offers streaming media as a standalone product. An OTT conversation largely revolves around video-on-demand. However, it also supports audio, messaging, and VOIP.​

Any application or service that provides a product over the internet while bypassing traditional media services is an OTT application.​

Popular OTT applications for video streaming are Netflix, Amazon Video, YouTube, HBO, etc.​

ViewTube - Phase1

Seeing the demand of OTT applications, the team at Ezone Pvt. Ltd., which is popular in providing software solutions in the field of entertainment, has started with a project to develop an OTT application – ViewTube. ​

To attract good viewership the application should provide a rich user experience.​

Styled-component is a package for CSS language of design that helps to develop applications with high-quality design.​

Hence the team at Ezone wants to design UI implementing the principles followed by styled-component.​

The application should attract different types of users:​

1. One set of users who are all keen on viewing the videos over this OTT platform.​

2. The second set of users who are interested in creating and publishing their own videos, and schedule live events over this OTT platform.

In the first phase, to stay ahead in the heavily competitive market, the Ezone Pvt. Ltd. wants to release the ViewTube application quickly to market.​

React applications can be designed and styled using CSS quickly by incorporating styled-component package.

Problem Statement

You as a frontend developer have been assigned the responsibility to quickly get the first version of ViewTube ready.​

In the first version, the landing view of the application should be rendered with video cards having brief description, number of views, duration since it was published, and the length of the video.​

The application should have a header with a search box, links with icons and tooltips, and a collapsible sidebar with navigation links with icons.​

ViewTube UI Component Design Requirements

Card Component

1. The Card component is defined in file Card. jsx and it uses styled-components.
2. Create styled components StyledCard(<div>), VideoImage(<img>), CardSubtitle(<h5>), CardTitle(<h4>) in the file Card.jsx using styled-component package to complete the Card component design.
3. Add various style attributes like background color, font-family, font-weight to the styled components to add styles to the Card component.

Chip Component

1. The Chip component is defined in file Chip. jsx that uses the ChipWrapper styled component.
2. Create styled component ChipWrapper(<button>) in file Chip.jsx using styled-components package.
3. Add style attributes like color, border, background color, font-family, padding, border-radius to the ChipWrapper component to render the Chip component as a chip to render category items.

Icon Component

1. The file Icon.jsx contains Icon component that uses the StyledIcon component to style the Icon.
2. Create component StyledIcon(<i>) in file Icon.jsx using styled-components package
3. Add style attributes like color, font size, padding-left to style the Icon component.
4. Try to use class name props in the StyledIcon component using the attrs property of styled-component which will help in passing the value of icon name provided by props.

Input Component

1. The file Input.jsx contains definition of Input component that uses StyledInput component for styling.

2. Create component StyledInput(<input>) in the file Input.jsx using styled-component package.

3. Add style attributes like background-color, height, font-size, width, border to the styled component.

4. Try to add placeholder to StyledInput component using selector property of styled-component.

Instructions

1. Download and unzip the boilerplate code.
2. Run the command npm install to install the dependencies.
3. Open the boilerplate code in VSCode to develop the assignment solution.
4. The boilerplate consists of the solution code for the ViewTube app.
5. The boilerplate also contains the videoData.json file located inside the data 4older.
6. The video data is by default imported into the component, and you can use those data 4o directly render in card data.
7. The above instructed ViewTube components will be created into component files already in the component folder.
8. All existing components declared in the boilerplate should be implemented 4sing styled-component package of React.
9. While defining styled-components, start from the outermost component and 4roceed towards the inner comments.
10. Comment out the components not defined in the rendering logic to test the 4utput at every stage of design.
11. Zip the solution code with the name same as the assignment name.
12. Upload the zipped solution for submission.