{"id":15657221,"url":"https://github.com/rosekamallove/youtemy","last_synced_at":"2025-05-02T17:22:45.879Z","repository":{"id":40378081,"uuid":"390791560","full_name":"rosekamallove/youtemy","owner":"rosekamallove","description":"A great way to learn from YouTube courses without any distractions and the ability to enroll in courses and track them with a daily streak to become more consistent.","archived":false,"fork":false,"pushed_at":"2022-06-26T05:51:40.000Z","size":6375,"stargazers_count":40,"open_issues_count":11,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-01T15:07:11.975Z","etag":null,"topics":["firebase","firestore-database","hacktoberfest","hacktoberfest2021","javascript","reactjs","youtube","youtube-data-api"],"latest_commit_sha":null,"homepage":"https://youtemy-bc22a.firebaseapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rosekamallove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-29T16:45:53.000Z","updated_at":"2024-11-30T17:56:51.000Z","dependencies_parsed_at":"2022-07-26T04:32:21.272Z","dependency_job_id":null,"html_url":"https://github.com/rosekamallove/youtemy","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosekamallove%2Fyoutemy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosekamallove%2Fyoutemy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosekamallove%2Fyoutemy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosekamallove%2Fyoutemy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rosekamallove","download_url":"https://codeload.github.com/rosekamallove/youtemy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251895480,"owners_count":21661345,"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":["firebase","firestore-database","hacktoberfest","hacktoberfest2021","javascript","reactjs","youtube","youtube-data-api"],"created_at":"2024-10-03T13:05:46.979Z","updated_at":"2025-05-01T15:07:19.548Z","avatar_url":"https://github.com/rosekamallove.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- **Note: This project is currently _NOT_ in development!** --\u003e\n\u003c!-- Logo Block --\u003e\n\u003ch1 align=\"center\"\u003e\n\t\u003ca href=\"https://youtemy.tech\"\u003e\u003cimg height=100 src=\"src/Components/Navbar/Logo.png\" alt=\"YouTemy\"/\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003c!-- Main Badges Block (for Quick Actions) --\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://youtemy.tech\"\u003e\n        \t\u003cimg src=\"https://img.shields.io/website?down_color=red\u0026down_message=down\u0026label=Website%20Status\u0026up_color=green\u0026up_message=online\u0026url=https%3A%2F%2Fyoutemy.tech\" alt=\"Website State\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://github.com/rosekamallove/youtemy/releases\"\u003e\n        \t\u003cimg src=\"https://img.shields.io/github/v/release/rosekamallove/youtemy\" alt=\"Latest Release\"\u003e\n\t\u003c/a\u003e\n    \u003ca href=\"https://github.com/rosekamallove/youtemy/blob/main/LICENSE\"\u003e\n        \t\u003cimg src=\"https://img.shields.io/github/license/rosekamallove/youtemy?color=blue\" alt=\"License\"\u003e\n\t\u003c/a\u003e\n    \u003ca href=\"https://github.com/rosekamallove/youtemy/graphs/contributors\"\u003e\n        \t\u003cimg src=\"https://img.shields.io/github/contributors/rosekamallove/youtemy?color=green\" alt=\"Contributors\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\nYouTemy is a platform to accelerate learning from YouTube courses. Users can learn from YouTube courses without any distractions and have the ability to enroll in courses and track them with a daily streak to become more consistent.\n\n\u003c!-- Tech Stack Block --\u003e\n\n# 🚀 Tech Stack\n\n\u003c!-- \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://firebase.google.com\"\u003e\u003cimg width=32 height=32 src=\"https://firebase.google.com/downloads/brand-guidelines/SVG/logo-logomark.svg\" alt=\"Firebase logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e --\u003e\n\nYouTemy is a web app built with the following:\n\n- [Javascript](https://www.javascript.com)\n- [ReactJS](https://reactjs.org/)\n- [Firebase](https://firebase.google.com)\n- [YouTube Data API V3](https://developers.google.com/youtube/v3)\n\n\u003c!-- CI/CD Block --\u003e\n\n# 🤖 CI/CD\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/rosekamallove/youtemy/actions/workflows/firebase-hosting-pull-request.yml\"\u003e\n        \t\u003cimg src=\"https://github.com/rosekamallove/youtemy/actions/workflows/firebase-hosting-pull-request.yml/badge.svg\" alt=\"Firebase Deploy on PR\"\u003e\n\t\u003c/a\u003e\n    \u003ca href=\"https://github.com/rosekamallove/youtemy/actions/workflows/firebase-hosting-pull-request.yml\"\u003e\n        \t\u003cimg src=\"https://github.com/rosekamallove/youtemy/actions/workflows/firebase-hosting-merge.yml/badge.svg\" alt=\"Firebase Deploy on Merge\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\nDeployment to Firebase is automated and controlled through GitHub Actions.\n\n\u003c!-- Page Hierarchy Block --\u003e\n\n# 🗺 Page Hierachy\n\n- ### Pages:\n\n  - [**Landing Page**](https://youtemy.tech/) (Middleware goes here if not logged in)\n    - LogIn or Contribute\n  - **Dashboard**:\n\n    - Courses currently enrolled\n    - Streak Tracker\n      - Daily Goal (Progress)\n    - All-time Progress (Across Courses)\n\n  - [**Course Curriculum**](https://youtemy.tech/courses)\n\n    - Different Tracks\n      - Web-Dev Track\n        - HTML\\CSS\n        - JavaScript\n        - React/Vue/Angular\n        - Node.JS / Express\n\n  - **User Dashboard**\n\n    - Courses currently enrolled in\n    - Charts for the progress\n    - Tutorial Hell Warnings\n    - Maybe percentile\n    - Suggested next course\n\n  - [**Explore Page**](https://youtemy.tech/explore)\n    - Search for new Courses on Youtube\n    - Add them to bookmrks or enroll in them\n  - **Settings**\n    - Delete all Bookmarks\n    - Delete all enrolled courses\n\n\u003cdetails\u003e\n\u003csummary\u003e Folder Strucure\u003c/summary\u003e\n\n\u003cpre\u003e\n.\n├── src\n│   ├── App.js\n│   ├── Components\n│   │   ├── Footer\n│   │   │   ├── Footer.css\n│   │   │   └── Footer.js\n│   │   ├── Navbar\n│   │   │   ├── Logo.png\n│   │   │   ├── Navbar.css\n│   │   │   └── Navbar.js\n│   │   └── PrivateRoute.js\n│   ├── Pages\n│   │   ├── BookmarksPage\n│   │   │   ├── BookmarksPage.css\n│   │   │   └── BookmarksPage.js\n│   │   ├── CoursesPage\n│   │   │   ├── CoursesPage.css\n│   │   │   └── CoursesPage.js\n│   │   ├── Dashboard\n│   │   │   ├── Dashboard.css\n│   │   │   └── Dashboard.js\n│   │   ├── ExplorePage\n│   │   │   ├── ExplorePage.css\n│   │   │   ├── ExplorePage.js\n│   │   │   ├── PlaylistItem.js\n│   │   │   ├── PlaylistsList.js\n│   │   │   ├── SearchBar.css\n│   │   │   └── SearchBar.js\n│   │   ├── SettingsPage\n│   │   │   ├── SettingsPage.css\n│   │   │   └── SettingsPage.js\n│   │   └── VideoPlayer\n│   │       ├── RenderWithTracking.js\n│   │       ├── RenderWithoutTracking.js\n│   │       ├── VideoPlayer.css\n│   │       └── VideoPlayer.js\n│   ├── UserContext.js\n│   ├── apis\n│   │   ├── demoObject.json\n│   │   ├── getVideos.js\n│   │   └── youtube.js\n│   ├── css\n│   │   ├── App.css\n│   │   └── index.css\n│   ├── firebase.js\n│   ├── firestore\n│   │   ├── addBookmarks.js\n│   │   ├── addCourse.js\n│   │   └── updateCourse.js\n│   └── index.js\n└── yarn.lock\n\u003c/pre\u003e\n\u003c/details\u003e\n\n\u003c!-- Snapshot Block --\u003e\n\n\u003e # 📷 Snapshots of the Hosted Projects\n\n\u003e ### ![Dashboard](protoypes/Website1.png)\n\n\u003e ### ![CoursesPage1](protoypes/Website2.png)\n\n\u003e ### ![CoursesPage2](protoypes/Website3.png)\n\n\u003e ### ![ExplorePage](protoypes/Website4.png)\n\n\u003e ### ![BookmarksPage](protoypes/Website5.png)\n\n\u003c!-- Development Block --\u003e\n\n# ⚙ Running the Project\n\n## Starting the Dev Server\n\n- Clone the repository to your local system. `https://github.com/rosekamallove/youtemy`\n\n- Firebase API Setup:\n\n  1.  Go to [Firebase Console](https://console.firebase.google.com) and follow the steps to create a new Firebase project.\n  2.  Select `\u003c/\u003e` , _Add a project via Code_.\n\n  3.  Create a new web app using the steps provided on the console.\n\n  4.  You will recieve a firebasConfig object with the first paramter as API key. Copy it, which will look something like:\n\n      ```js\n              cosnt firebaseConfig = {\n              apiKey: \"process.env.REACT_APP_FIREBASE\",\n              authDomain: \"AUTH_DOMAIN\",\n              projectId: \"PROJECT_ID\",\n              storageBucket: \"STORAGE_BUCKET\",\n              messagingSenderId: \"*************\",\n              appId: \"******************************\",\n              measurementId: \"*************\"\n            };\n      ```\n\n  5.  After you get the Firebase API key, create a .env file in the root folder of the repository\n\n  6.  Insert the folowing snippet in the file\n\n           REACT_APP_FIREBASE=\"API_KEY_HERE\"\n\n- Youtube API Setup:\n\n  1.  Go to the following link and set up a new project from \u003chttps://console.cloud.google.com/apis/\u003e\n\n  2.  Go the the project's dashboard and click on **Enable APIs and Services**\n\n  3.  Select **Youtube Data API v3**\n\n  4.  Click on Credentials to create new credentials for the API client\n\n  5.  Select API Key out of the 3 options available (API Key, OAuth Client ID, Service Key)\n\n  6.  A new API key will be generated. Copy it in the .env file.\n\n               REACT_APP_YOUTUBE=\"API_KEY_HERE\"\n\n- Ensure that .env is added in .gitignore file.\n\n- In the root folder and enter the following commands in the CLI\n\n          npm i or yarn\n          npm start or yarn start\n\n- If you wish to contribute, either look for issues already created or create an issue if you have a new idea.\n\n# 👨‍🔬 Contributors\n\n\u003ca href=\"https://github.com/rosekamallove/youtemy/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=rosekamallove/youtemy\" /\u003e\n\u003c/a\u003e\n\n_Contribution list made with [contrib.rocks](https://contrib.rocks)._\n\n\u003c!--\n### MVP Flow:\n![NavBar](protoypes/Youtemy-Flow.png) --\u003e\n\n\u003c!-- ### MVP Mockups:\n\n**Navbar and Footer:**\n![NavBar](protoypes/NavBar.jpg)\n![Footer](protoypes/Footer.jpg)\n**Dashboard:**\n![Dashboard](protoypes/Dashboard.jpg)\n\n**Course Curriculam:**\n![CourseCurriculam](protoypes/Course-Curriculum.jpg)\n\n**Video Player:**\n![Player](protoypes/Player.png) --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frosekamallove%2Fyoutemy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frosekamallove%2Fyoutemy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frosekamallove%2Fyoutemy/lists"}