Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rosekamallove/youtemy
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.
https://github.com/rosekamallove/youtemy
firebase firestore-database hacktoberfest hacktoberfest2021 javascript reactjs youtube youtube-data-api
Last synced: 6 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/rosekamallove/youtemy
- Owner: rosekamallove
- License: mit
- Created: 2021-07-29T16:45:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-26T05:51:40.000Z (over 2 years ago)
- Last Synced: 2024-10-30T00:20:25.903Z (16 days ago)
- Topics: firebase, firestore-database, hacktoberfest, hacktoberfest2021, javascript, reactjs, youtube, youtube-data-api
- Language: JavaScript
- Homepage: https://youtemy-bc22a.firebaseapp.com/
- Size: 6.08 MB
- Stars: 39
- Watchers: 1
- Forks: 12
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
YouTemy 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.
# 🚀 Tech Stack
YouTemy is a web app built with the following:
- [Javascript](https://www.javascript.com)
- [ReactJS](https://reactjs.org/)
- [Firebase](https://firebase.google.com)
- [YouTube Data API V3](https://developers.google.com/youtube/v3)
# 🤖 CI/CD
Deployment to Firebase is automated and controlled through GitHub Actions.
# 🗺 Page Hierachy
- ### Pages:
- [**Landing Page**](https://youtemy.tech/) (Middleware goes here if not logged in)
- LogIn or Contribute
- **Dashboard**:
- Courses currently enrolled
- Streak Tracker
- Daily Goal (Progress)
- All-time Progress (Across Courses)
- [**Course Curriculum**](https://youtemy.tech/courses)
- Different Tracks
- Web-Dev Track
- HTML\CSS
- JavaScript
- React/Vue/Angular
- Node.JS / Express
- **User Dashboard**
- Courses currently enrolled in
- Charts for the progress
- Tutorial Hell Warnings
- Maybe percentile
- Suggested next course
- [**Explore Page**](https://youtemy.tech/explore)
- Search for new Courses on Youtube
- Add them to bookmrks or enroll in them
- **Settings**
- Delete all Bookmarks
- Delete all enrolled courses
Folder Strucure
.
├── src
│ ├── App.js
│ ├── Components
│ │ ├── Footer
│ │ │ ├── Footer.css
│ │ │ └── Footer.js
│ │ ├── Navbar
│ │ │ ├── Logo.png
│ │ │ ├── Navbar.css
│ │ │ └── Navbar.js
│ │ └── PrivateRoute.js
│ ├── Pages
│ │ ├── BookmarksPage
│ │ │ ├── BookmarksPage.css
│ │ │ └── BookmarksPage.js
│ │ ├── CoursesPage
│ │ │ ├── CoursesPage.css
│ │ │ └── CoursesPage.js
│ │ ├── Dashboard
│ │ │ ├── Dashboard.css
│ │ │ └── Dashboard.js
│ │ ├── ExplorePage
│ │ │ ├── ExplorePage.css
│ │ │ ├── ExplorePage.js
│ │ │ ├── PlaylistItem.js
│ │ │ ├── PlaylistsList.js
│ │ │ ├── SearchBar.css
│ │ │ └── SearchBar.js
│ │ ├── SettingsPage
│ │ │ ├── SettingsPage.css
│ │ │ └── SettingsPage.js
│ │ └── VideoPlayer
│ │ ├── RenderWithTracking.js
│ │ ├── RenderWithoutTracking.js
│ │ ├── VideoPlayer.css
│ │ └── VideoPlayer.js
│ ├── UserContext.js
│ ├── apis
│ │ ├── demoObject.json
│ │ ├── getVideos.js
│ │ └── youtube.js
│ ├── css
│ │ ├── App.css
│ │ └── index.css
│ ├── firebase.js
│ ├── firestore
│ │ ├── addBookmarks.js
│ │ ├── addCourse.js
│ │ └── updateCourse.js
│ └── index.js
└── yarn.lock
> # 📷 Snapshots of the Hosted Projects
> ### 
> ### 
> ### 
> ### 
> ### 
# ⚙ Running the Project
## Starting the Dev Server
- Clone the repository to your local system. `https://github.com/rosekamallove/youtemy`
- Firebase API Setup:
1. Go to [Firebase Console](https://console.firebase.google.com) and follow the steps to create a new Firebase project.
2. Select `>` , _Add a project via Code_.
3. Create a new web app using the steps provided on the console.
4. You will recieve a firebasConfig object with the first paramter as API key. Copy it, which will look something like:
```js
cosnt firebaseConfig = {
apiKey: "process.env.REACT_APP_FIREBASE",
authDomain: "AUTH_DOMAIN",
projectId: "PROJECT_ID",
storageBucket: "STORAGE_BUCKET",
messagingSenderId: "*************",
appId: "******************************",
measurementId: "*************"
};
```
5. After you get the Firebase API key, create a .env file in the root folder of the repository
6. Insert the folowing snippet in the file
REACT_APP_FIREBASE="API_KEY_HERE"
- Youtube API Setup:
1. Go to the following link and set up a new project from
2. Go the the project's dashboard and click on **Enable APIs and Services**
3. Select **Youtube Data API v3**
4. Click on Credentials to create new credentials for the API client
5. Select API Key out of the 3 options available (API Key, OAuth Client ID, Service Key)
6. A new API key will be generated. Copy it in the .env file.
REACT_APP_YOUTUBE="API_KEY_HERE"
- Ensure that .env is added in .gitignore file.
- In the root folder and enter the following commands in the CLI
npm i or yarn
npm start or yarn start
- If you wish to contribute, either look for issues already created or create an issue if you have a new idea.
# 👨🔬 Contributors
_Contribution list made with [contrib.rocks](https://contrib.rocks)._