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
• ReactJS
• Firebase
• YouTube Data API V3

🤖 CI/CD

🗺 Page Hierachy

• Pages:

  • Landing Page (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

    • 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

    • 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

⚙ 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 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:

             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 https://console.cloud.google.com/apis/

  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.