{"id":19784424,"url":"https://github.com/vanbui1995/youtube-share-app","last_synced_at":"2026-04-11T09:06:31.352Z","repository":{"id":203321411,"uuid":"709292739","full_name":"vanbui1995/youtube-share-app","owner":"vanbui1995","description":"Its just a small application that allow the user can see the shared youtube videos","archived":false,"fork":false,"pushed_at":"2023-10-24T14:00:09.000Z","size":14841,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T13:21:43.951Z","etag":null,"topics":["authentication","firebase","react","simple","tailwind","vitest"],"latest_commit_sha":null,"homepage":"https://funny-movies-vanbui.netlify.app","language":"TypeScript","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/vanbui1995.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}},"created_at":"2023-10-24T12:30:21.000Z","updated_at":"2023-10-24T14:01:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"fbf8e27a-b5f0-4406-886f-b9418ab3eaf2","html_url":"https://github.com/vanbui1995/youtube-share-app","commit_stats":null,"previous_names":["vanbui1995/youtube-share-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vanbui1995/youtube-share-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Fyoutube-share-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Fyoutube-share-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Fyoutube-share-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Fyoutube-share-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanbui1995","download_url":"https://codeload.github.com/vanbui1995/youtube-share-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanbui1995%2Fyoutube-share-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31674633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"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":["authentication","firebase","react","simple","tailwind","vitest"],"created_at":"2024-11-12T06:11:27.504Z","updated_at":"2026-04-11T09:06:31.335Z","avatar_url":"https://github.com/vanbui1995.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction: Funny Video Application\n\nIts just a small application that allow the user can see the shared youtube videos, with un-authen user they can access the video list, they can sign up and login as logged user. With logged user they can share any post from youtube by simple paste the youtube link. They also can get a small notification with any new video shared by other logged user.\n\nThe nicest thing on this application, We use 100% Backend features on firebase, so we don't need any backend service, but i still cover all features: authentication, realtime for youtube videos and the in-app notification.\n\nDemo Link : https://funny-movies-vanbui.netlify.app/\n\n\u003cimg width=\"1284\" alt=\"Screenshot 2023-10-24 at 18 58 52\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/23db4d32-8306-4658-b9da-c90fb6adb02f\"\u003e\n\n\n# Prerequisites: \n\n- NodeJS: Version \u003e= 18\n- Yarn: \u003e= 1.22 (optional you are OK to use npm)\n\n# Installation \u0026 Configuration\n- Make sure you are the root of the project\n- Run `yarn install` with yarn or `npm install` with npm\n- I build application with firebase (backend + database + authentication), you can use frontend application only that default connect with my firebase, if you really need to touch and use new firebase, please take a look on Backend/Database Setup\n\n# Installation \u0026 Configuration\n\n## Running the application\n- Make sure you are the root of the project and install dependencies like section: \"Installation \u0026 Configuration\"\n- Run `yarn dev` or `npm run dev` to start application in dev server locally\n- The URL will be shown like the image below, just click on the link to access the application\n\u003cimg width=\"743\" alt=\"Screenshot 2023-10-24 at 18 50 23\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/20ce9459-807e-4362-b82a-a5e2b398d998\"\u003e\n\n\n## Run the test suite\n- Make sure you are the root of the project and install dependencies like section: \"Installation \u0026 Configuration\"\n- Run `yarn test` or `npm run test` to run the test suite\n- The test result will be shown on the console like the image below\n\u003cimg width=\"1209\" alt=\"Screenshot 2023-10-24 at 18 49 35\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/200990b7-5106-4a19-9294-c4f35010e45b\"\u003e\n\n## Build \u0026 Deploy\n### Build\n- Make sure you are the root of the project and install dependencies like section: \"Installation \u0026 Configuration\"\n- yarn build\n- the build folder is \"./build\"\n### Deploy\n- Upload the dist folder file to whatever CDN service that you want to host: netlify, github page... eg: https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/\n\n# Backend/Database Setup\n- I recommend you can use directly my firebase config on the current frontend code, you don't need to create a new firebase project to test out the app, but if you really want to setup a new one, please follow these steps:\n\n    - 1. Create new firebase project\n\n\t\u003cimg width=\"692\" alt=\"Screenshot 2023-10-24 at 18 35 53\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/475f1539-51ef-43ae-9ec1-3772ae2b2a49\"\u003e\n    - 2. Add new web application on the new firebase project\n\n\t\u003cimg width=\"1056\" alt=\"Screenshot 2023-10-24 at 18 38 28\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/6bf92092-4c4f-4029-b94a-2759ffd6010e\"\u003e\n\n    - 3. After create new application please copy the config object\n\n\t\u003cimg width=\"687\" alt=\"Screenshot 2023-10-24 at 18 41 57\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/4429fc4b-f5bd-4376-b0f3-85ab4bb995f9\"\u003e\n\n    - 3. Add new authentication provider \"Email \u0026 Password\", just make sure turn on it\n\n\t\u003cimg width=\"1637\" alt=\"Screenshot 2023-10-24 at 18 38 42\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/0ecaed9c-3e90-429a-8b0f-1ef256a65e40\"\u003e\n    - 4. Create video collection and first record\n\n\t\u003cimg width=\"1463\" alt=\"Screenshot 2023-10-24 at 18 39 56\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/c2099f45-bb7c-46f8-841d-a1b73013effc\"\u003e\n\n    - 5. Replace firebase config object to the file `src/modules/common/firebase/firebase.ts`\n\n\t\u003cimg width=\"712\" alt=\"Screenshot 2023-10-24 at 18 43 36\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/867a0af1-f407-461c-b183-b554e285b047\"\u003e\n\n    - 6. You are done, you can restart the server or rebuild again\n\n# Usage\n- User can access the shared videos via home page, they don't have share button to share until they register or login\n- Register \u0026 login:\n\t- Just make sure fill correctly format for email \u0026 password\n\t- I have a validation on almost form, after register i will let the user login successfully\n  \t- I keep the user session by using the sessionStorage, so every tab will have different session for easier testing\n\n\t\u003cimg width=\"349\" alt=\"Screenshot 2023-10-24 at 19 12 05\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/c02337aa-3fb6-4bfa-b3c4-8c5b021a5616\"\u003e\n\n\t\u003cimg width=\"679\" alt=\"Screenshot 2023-10-24 at 19 12 09\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/6fd14f05-d2f4-4d8a-9d8e-1d8bc080e7d2\"\u003e\n\n- User can click on share button when logged\n\n\t\u003cimg width=\"520\" alt=\"Screenshot 2023-10-24 at 19 13 11\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/6e6eff7e-39c4-4ef6-8190-4cfee1a73c25\"\u003e\n\n\t\u003cimg width=\"826\" alt=\"Screenshot 2023-10-24 at 19 13 26\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/1c66e970-5ea9-4d88-8fc1-ce28cb44bb4c\"\u003e\n\n- When user submit successfully, all users can see new post\n\n- When user submit successfully, all logged users receive a notificaiton about new shared post\n\t\n\t\u003cimg width=\"321\" alt=\"Screenshot 2023-10-24 at 19 18 22\" src=\"https://github.com/vanbui1995/learn-tailwind-healthy-design/assets/47735787/495a4caa-f6e3-4a9f-a024-bb67535fb531\"\u003e\n\n\t\n\n\n\n\n# Folder structure\n    .\n    src\n    ├── ...\n    ├── pages                     # Contain all main pages, the root component of each page\n    │   ├── my-page               # My Page\n    ├── components                # Contains all common/general/layout components\n    ├── services                  # HTTP service layer, the one connect with backend api\n    └── enums                     # Define all enums or const variables\n    └── types                     # Define all interface \u0026 type of the project (except the component types)\n    └── public                    # All public resources (image, svg, font...)\n    └── main.tsx                  # React entry point file (Root)\n    └── index.css                 # CSS entry point file (Root)\n    └── tailwind.config.cjs       # Tailwind config, I configured all colors/spacing of the guideline via this file\n    \n    \n    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanbui1995%2Fyoutube-share-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanbui1995%2Fyoutube-share-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanbui1995%2Fyoutube-share-app/lists"}