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.
YouTemy is a web app built with the following:
Deployment to Firebase is automated and controlled through GitHub Actions.
Landing Page (Middleware goes here if not logged in)
LogIn or Contribute
Dashboard:
Courses currently enrolled
Streak Tracker
All-time Progress (Across Courses)
Different Tracks
User Dashboard
Courses currently enrolled in
Charts for the progress
Tutorial Hell Warnings
Maybe percentile
Suggested next course
Search for new Courses on Youtube
Add them to bookmrks or enroll in them
Settings
Delete all Bookmarks
Delete all enrolled courses
. βββ 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
Clone the repository to your local system. https://github.com/rosekamallove/youtemy
Firebase API Setup:
Go to Firebase Console and follow the steps to create a new Firebase project.
Select </>
, Add a project via Code.
Create a new web app using the steps provided on the console.
You will recieve a firebasConfig object with the first paramter as API key. Copy it, which will look something like:
cosnt firebaseConfig = {
apiKey: "process.env.REACT_APP_FIREBASE",
authDomain: "AUTH_DOMAIN",
projectId: "PROJECT_ID",
storageBucket: "STORAGE_BUCKET",
messagingSenderId: "*************",
appId: "******************************",
measurementId: "*************"
};
After you get the Firebase API key, create a .env file in the root folder of the repository
Insert the folowing snippet in the file
REACT_APP_FIREBASE="API_KEY_HERE"
Youtube API Setup:
Go to the following link and set up a new project from https://console.cloud.google.com/apis/
Go the the project's dashboard and click on Enable APIs and Services
Select Youtube Data API v3
Click on Credentials to create new credentials for the API client
Select API Key out of the 3 options available (API Key, OAuth Client ID, Service Key)
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.
Contribution list made with contrib.rocks.