{"id":15392249,"url":"https://github.com/crud0626/youtube_clone","last_synced_at":"2026-04-10T13:31:16.735Z","repository":{"id":38450988,"uuid":"437431919","full_name":"crud0626/youtube_clone","owner":"crud0626","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-20T12:06:08.000Z","size":1107,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T16:22:53.759Z","etag":null,"topics":["firebase","html5","javascript","netlify","postman","react","redux","scss","yarn"],"latest_commit_sha":null,"homepage":"","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/crud0626.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-12T02:05:34.000Z","updated_at":"2022-11-29T05:17:25.000Z","dependencies_parsed_at":"2024-10-18T23:09:25.690Z","dependency_job_id":null,"html_url":"https://github.com/crud0626/youtube_clone","commit_stats":{"total_commits":225,"total_committers":2,"mean_commits":112.5,"dds":0.03111111111111109,"last_synced_commit":"20c9baa779820695a335367bfc9697906c53c041"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/crud0626/youtube_clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crud0626%2Fyoutube_clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crud0626%2Fyoutube_clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crud0626%2Fyoutube_clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crud0626%2Fyoutube_clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crud0626","download_url":"https://codeload.github.com/crud0626/youtube_clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crud0626%2Fyoutube_clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31645190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["firebase","html5","javascript","netlify","postman","react","redux","scss","yarn"],"created_at":"2024-10-01T15:14:21.963Z","updated_at":"2026-04-10T13:31:16.716Z","avatar_url":"https://github.com/crud0626.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Youtube-clone\n\n\u003cdiv align=center\u003e\u003cimg src=\"https://user-images.githubusercontent.com/72868495/219651157-ae7e4358-036d-4391-acff-6d57f6ce38a8.png\"\u003e\u003c/div\u003e\n\n\u003cdiv align=center\u003e\u003ca href=\"https://crud0626-clone-youtube.netlify.app\"\u003eYoutube-clone Demo Link\u003c/a\u003e\u003c/div\u003e\n\n유튜브 클론 코딩 프로젝트로 CSS의 디테일 및 Youtube API에서 제공하는 데이터를 활용하여 실제 유튜브의 기능을 최대한 구현하는데 비중을 둔 프로젝트입니다.\n\n## 사용 기술\n\n\u003cdiv align='center'\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-^18.2.0-61DAFB?logo=react\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Redux-^4.2.0-764ABC?logo=redux\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/SCSS-^1.55.0-CC6699?logo=sass\u0026logoColor=white\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript\u0026logoColor=white\" /\u003e\n\u003c/div\u003e\n\u003cdiv align='center'\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Postman-FF6C37?logo=postman\u0026logoColor=white\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Yarn-2C8EBB?logo=yarn\u0026logoColor=white\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Netlify-00C7B7?logo=netlify\u0026logoColor=white\" /\u003e\n\u003c/div\u003e\n\n### 미리보기\n\n| 영역 | 미리보기 |\n| --- | :-: |\n| - Home 영역 | \u003cimg width=800 src=\"https://user-images.githubusercontent.com/72868495/219651157-ae7e4358-036d-4391-acff-6d57f6ce38a8.png\" /\u003e |\n| - Watch 영역 | \u003cimg width=800 src=\"https://user-images.githubusercontent.com/72868495/219650733-177d42d6-39fe-4f83-be25-0eb705852210.png\" /\u003e |\n| - Search 영역 | \u003cimg width=800 src=\"https://user-images.githubusercontent.com/72868495/219651594-49844252-eeb3-4162-a6fe-108838029f27.png\" /\u003e |\n\n## 기능\n\n- 비디오 관련\n\n```\n조회수, 채널 정보, 제목, 재생시간, 업로드일자 등의 데이터를 Youtube API로부터 응답받아 알맞게 렌더링되도록 구현하였습니다.\n\n또한, 실제 유튜브에서 적용하고 있는 기능인 설명 부분에 가변 토글 기능을 구현 후 적용하였습니다.\n```\n\n- 댓글\n\n```\n작성일자, 작성자의 썸네일, 댓글 총 개수 등의 정보를 알맞은 영역에 렌더링되도록 구현하였습니다.\n\n비디오 영역과 마찬가지로 가변 토글 기능을 적용하였습니다.\n```\n\n- 검색기능\n\n```\nReact router를 활용하여 query부분에 검색어를 포함하여 라우팅 처리를 할 수 있도록 구현하였습니다.\n```\n\n- 로그인 기능\n\n```\nFirebase의 Auth를 활용하여 로그인 기능을 구현하였으며 OAuth 2.0 인증을 통해 좋아요 및 싫어요와 같은 인터랙션 기능을 구현하였습니다.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrud0626%2Fyoutube_clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrud0626%2Fyoutube_clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrud0626%2Fyoutube_clone/lists"}