1. Set up a React project
   1. Created a new React project using Create React App.
2. Design the layout.
   1. Designed a low-fidelity layout of the web page on a desktop using Figma.
      1. Designed the home page and the video player.
   2. Replicated some elements from the Netflix UI, including the different pages (Home, Recent, Watched) as well as the carousel design for recommended videos.
   3. Included a large thumbnail of the featured media.
   4. The video player design is standard, with a vertical carousel of recommended videos off to the side.
   5. Link to Figma.

1. Identify required components to implement the features in the wireframe
   1. Components needed for Page 1:
      1. Buttons for the Home, Recent and Watched pages.
      2. Buttons for the settings and profile icons.
      3. Search functionality and search bar.
      4. Horizontal carousels with recommended video thumbnails.
      5. Featured Media display.
      6. Settings and Account buttons on the top right.
   2. Components needed for Page 2:
      1. Buttons for the Home, Recent and Watched pages.
      2. Buttons for the settings and profile icons.
      3. Video player with playback and other standard video controls.
      4. Video title and description.
      5. Vertical carousel with recommended video thumbnails.
      6. Search functionality and search bar.
      7. Settings and Account buttons on the top right.
2. Implement the home page.
   1. I started implementing the home paged based on my wireframe that I created in Figma, but then I chose to pivot to the video player section because I wanted to build the rest of the homepage around the player functionality and routing method.
   2. Below is an outline of some of the steps I took for the carousel implementation.
      1. Installed the library react-responsive-carousel and imported the component Carousel.
      2. Included video thumbnails into the carousel. Ideally, the thumbnails should come from our database, but I added some images manually to demonstrate how it would look and test my display in the meantime.
3. Implement the video player.
   1. Identified a suitable video player library - used ReactPlayer
   2. Installed the video player library - installed react-player.
   3. Set up a new component (called PlayerPage), in which I imported modules from the react-player library.
      1. Needed to connect the home page to the player page so that a button on the home page will take you to the player page. In the finished product, this will be more complex and include a route from each video thumbnail in the carousel to the corresponding video player page.
         1. Currently fixing issues with the route. The initial plan was to use the module Switch from the react-router-dom library, but this component does not exist in the latest version of react-router-dom. Currently investigating the possibility of implementing the modules Router or Link instead.
   4. Configure the video source.
      1. In the final product, the video source would be our chosen database, but I included a Youtube URL in my code for the meantime to test the video player implementation.
4. Implement basic search.
   1. Remaining step: Implement playback controls and style the video player.
   2. Created a new component for the search bar, Search.js. Chose to encapsulate the search functionality in order to be able to use it in multiple pages, as described in the problem statement.
   3. Implemented React's useState hook in order to manage the search state.
   4. Remaining step: Use onChange ****to handle search input changes.
   5. Remaining step: Add a Submit search capability.
   6. Data retrieval portion.
      1. I set up a backend server using Node.js ( as well as Express Node and Mongoose).
      2. Connected a sample db in MongoDB using a connection string (hosted by Azure).
      3. Tested the connection
      4. Remaining step: Define API endpoints on the server side.
      5. Remaining step: Make API requests from your React application.
   7. Remaining step: Display results.
   8. Remaining step: Style search bar.
   9. Remaining step: Connect React components with the backend.

The followings are the components I still need to tackle:

1. Implement video upload functionality.
2. Adding administrative functionality.
3. Consideration for handling large databases.

Here is the link to the Github repository: https://github.com/amanserhan/react-web-app