{"id":22559739,"url":"https://github.com/taurusilver7/youtube-ui","last_synced_at":"2025-03-28T12:12:16.849Z","repository":{"id":46747506,"uuid":"514580687","full_name":"taurusilver7/youtube-UI","owner":"taurusilver7","description":"A UI design to the popular video streaming application powered by react, and styled-components.","archived":false,"fork":false,"pushed_at":"2022-07-19T17:07:34.000Z","size":273,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T12:35:53.858Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taurusilver7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-16T13:06:40.000Z","updated_at":"2022-07-16T13:07:53.000Z","dependencies_parsed_at":"2022-08-26T23:41:04.476Z","dependency_job_id":null,"html_url":"https://github.com/taurusilver7/youtube-UI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fyoutube-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fyoutube-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fyoutube-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fyoutube-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/youtube-UI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246026111,"owners_count":20711581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T21:08:54.204Z","updated_at":"2025-03-28T12:12:16.833Z","avatar_url":"https://github.com/taurusilver7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Youtube Video sharing UI\n\n\u003e A react powered video sharing application, with styled components \u0026 functional components with hooks.\n\n## Build\n\nRefactor the starter template to suit the basic requirements of the application.\nimport `react-router-dom` and `styled-components` dependencies to the build.\n\nSplit the index page into Menu \u0026 Main components wrapped in a Container. The Main component holds a Navbar \u0026 Video Wrapper components.\nSplit the Menu \u0026 Main components in 1:7 aspect ratio on the screen.\n\n- Create nav buttons in the Menu components and customize a theme provider. Creata a state to mangage the theme modes.\n\nStyle the Navbar with an Input \u0026 Search styled-components. Add the sign-in button from Menu component.\n\n- Add specific routes to the project to add navigation between pages. The main routes are the index \u0026 video pages (with an video:id) identifier.\n\n- Create the Card component to display the video thumbnails in the home page.\n\n- Specify the routes for navigating between the home \u0026 videos pages using the Link elements.\n- Style the Video component, add the features into the components.\n- Create a comments wrappers, and an induvidual comment component.\n\n- The Recommendation section has video thumbnails as in the home page, but in horizontal display. Use props to change the orientation of the component and other minor adjustments.\n\nCustom utility class: `display: ${(props) =\u003e props.type === 'sm' \u0026\u0026 \"flex\"}`\n\n- Add hover effects on menu buttons in the home page.\n\n## Login Component\n\n- Add a route to the routes for Login page. Create a login page in the pages. Style the login form for sign-in and register fields in the login form with styled-components.\n\n## UI - Server.\n\n- Create a state to manage the fetched videos from the server \u0026 a useEffect() to fetch the data on refresh.\n\n- Map the fetched items into the Card component, and populate the data-values in the component.\n\n- Import axios and fetch the data from server API endpoint. Create a proxy in the package.json to avoid repetetions.\n\n- Add two more paths to the App (trends \u0026 sub) and add the route paths in the Menu component. If the axios fetch doesn't respond to the proxy, restart the react-app to kickstart the server to link up with the react-application.\n\n- Implement the sign-in function on the UI. create pieces of states for every input field \u0026 populate the values to an handler function.\n\n- The handler function fires a post request to the server to provide with the user data to the UI.\n  To populate the user information in various no-linking components, a context-api, or a global state-management is imported.\n\n### Redux-toolkit.\n\n- Create a userSlice in /redux directory. Import the [redux-toolkit](https://redux-toolkit.js.org/) dependency.\n\n- Create a redux store in `/app/store.js`. Import the configuration API from redux toolkit.\n- Make the redux store available to react by putting a react-redux provider around the application `App` in `src/index.js`. Pass the store as props in the Provider.\n\n- Create a redux state slice in `/redux/userSlice.js` \u0026 import createSlice method from redux-toolkit.\n- Create an initial state to the store. The initial state of the user is null, and upon fetching the data from the login page, update the state of the user. On failure, an error is displayed.\n\n- Create reducer actions {loginStart, loginSuccess, loginFailure, logout} and assign corresponding state and action.payload to them.\n\n- Add the userReducer to the redux store. And fire the dispatch events in the handleLogin function in Login page.\n\n- The actions dispatched changes the initial state with a user data. Analyze the state changes in Redux toolkit google extension.\n\n- Use the currentUser state data in several unrelated components (far away non-child components) - Navbar \u0026 Menu.\n- Change the Avatar image, currentUser name in the Navbar. Add an video create button. Hide the login block in the Menu component.\n\n- Import `redux-persist` library to make persistant user login. Import the necessary middlewares to persist the function, and make the store persist with a persisitor from the library.\n\n- Wrap the App component with persistStore \u0026 add the persistor as props. The application will remain persistant with te login.\n\n- To add google Authentcation to the project, add a firebase project and google Provider to the react application. Post the user details to the server, to create the sign-in method with google in the auth controller.\n\n- Create a videoSlice in the store for handling video related actions.\n- In the Video page, employ useLocation() hook from react-router-dom to trace the url path. split the path name to get the video_url into the recommandation cards.\n- Set two states to manage the video \u0026 channels, and fetch the data from server.\n\nThe fetched video data would not be called from the state variable, because it would lead to continous refreshing to update the state (likes, dislikes) on the video. A videoSlice to dispatch actions was preferred.\n\nUpdate the videoSlice state wth the fetched data. Populate the fetched data in Video component in fields, except for the video iframe element. Youtube videos are subjected to company policy and are not allowed to be used outside the site. But embeded videos could be used from youtube api.\n\n- Create the like \u0026 dislike handler functions in the Video component, with their relevant fetch request paths. The new results (likes) are only displayed after a database refresh (refetch the likes). To prevent, dispatch an action to update the like state in the videoSlice.\n\n- Check if the current user has liked the video. Only add the currentUser.\\_id into the likes array, and remove the id from the array on dislike action.\n\n- Verfity if the current user has subscribed to the channel, and create a subscribed action in the videoSlice.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes.\\\nYou may also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `yarn build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fyoutube-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Fyoutube-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fyoutube-ui/lists"}