Trackathon is a full-stack MERN application that transforms ordinary YouTube playlists into a distraction-free learning workspace. Instead of simply watching videos, learners can track progress, stay consistent with learning streaks and a GitHub-style heatmap, organise notes, and resume exactly where they left off.
🌐 Website: https://trackathon-tau.vercel.app
|
|
|
While learning Data Structures & Algorithms through Striver's roadmap, I realised how motivating a structured learning path can be. Every topic had a clear roadmap, progress tracking, and a sense of accomplishment.
However, YouTube playlists lacked that experience.
There was no structured dashboard, no consistency tracking, no organised progress, and no dedicated workspace for learning.
So I built Trackathon to bring that same structured learning experience to YouTube—helping learners stay focused, track their progress, maintain learning streaks, visualise consistency through a GitHub-style heatmap, and organise long playlists into manageable learning journeys.
- Secure JWT Authentication
- Register & Login
- Logout
- Password Encryption using bcrypt
- Import Public YouTube Playlists
- Playlist Library
- Playlist Details
- Playlist Re-sync
- Delete Playlist
- Embedded YouTube Player
- Resume Watching
- Continue Learning
- Playlist Queue
- Video Progress Tracking
- Video Notes
- Dashboard Overview
- Recent Playlists
- Learning Streak
- GitHub-style Heatmap
- Total Playlists
- Total Videos
- Completed Videos
- Profile Update
- Password Change
- About Section
- Danger Zone
- Responsive Design
- Modern Dark Theme
- Toast Notifications
- Smooth Navigation
- Distraction-free Learning Interface
Keep your imported playlists up to date.
Whenever new videos are added to the original YouTube playlist, Trackathon can fetch and append them while preserving your existing learning progress.
Note: Deleted videos from the original YouTube playlist are currently retained in the imported playlist.
| Landing | Import Playlist |
|---|---|
 |
 |
| Register | Login |
|---|---|
 |
 |
| Dashboard | Library |
|---|---|
 |
 |
| Playlist Details | Learning Player |
|---|---|
 |
 |
| Video Notes | Settings |
|---|---|
 |
 |
flowchart TD
User([👤 User]) --> FE
subgraph FE ["🎨 Frontend (React + Vite)"]
direction TB
F1["Responsive UI"]
F2["Authentication"]
F3["Dashboard"]
F4["Playlist Management"]
F5["Learning Workspace"]
F6["Settings"]
end
FE <===>|"║ REST API / HTTP ║"| BE
subgraph BE ["⚙️ Backend (Node.js + Express)"]
direction TB
B1["JWT Authentication"]
B2["Playlist Management"]
B3["Progress Tracking"]
B4["Video Notes"]
B5["YouTube Integration"]
end
BE <---> DB
BE <---> YT
subgraph DB ["🗄️ MongoDB Atlas"]
direction TB
D1["Users"]
D2["Playlists"]
D3["Video Progress"]
D4["Notes"]
D5["Streak & Heatmap"]
end
subgraph YT ["📡 YouTube Data API v3"]
direction TB
Y1["Playlist Metadata"]
Y2["Videos"]
Y3["Durations"]
Y4["Thumbnails"]
end
%% Custom Styling
style User fill:#38bdf8,stroke:#0284c7,color:#fff,stroke-width:2px
style FE fill:#1e293b,stroke:#3b82f6,color:#fff,stroke-width:2px
style BE fill:#1e293b,stroke:#22c55e,color:#fff,stroke-width:2px
style DB fill:#1e293b,stroke:#10b981,color:#fff,stroke-width:2px
style YT fill:#1e293b,stroke:#ef4444,color:#fff,stroke-width:2px
- React 19
- Vite
- Tailwind CSS v4
- React Router DOM
- Axios
- React YouTube
- React Hot Toast
- Lucide React
- Node.js
- Express.js
- JWT Authentication
- bcrypt.js
- REST APIs
- CORS
- MongoDB Atlas
- Mongoose ODM
- YouTube Data API v3
- Git
- GitHub
- Postman
- ESLint
Trackathon
├── client
│ ├── public
│ └── src
│ ├── api # Axios API layer
│ ├── components
│ │ ├── common
│ │ ├── layout
│ │ ├── modals
│ │ ├── playlist
│ │ └── settings
│ ├── context # Global state management
│ ├── hooks # Custom React hooks
│ ├── pages # Application pages
│ ├── utils # Helper utilities
│ ├── App.jsx
│ └── main.jsx
│
├── server
│ ├── config # Database configuration
│ ├── controllers # Request handlers
│ ├── middleware # JWT authentication
│ ├── models # Mongoose schemas
│ ├── routes # REST API routes
│ ├── services # Business logic & YouTube API
│ ├── utils # Helper utilities
│ ├── app.js
│ └── server.js
│
├── assets
│ ├── screenshots
│ ├── authentication-demo.gif
│ ├── learning-workflow-demo.gif
│ └── productivity-demo.gif
│
├── README.md
└── LICENSE
Follow these steps to set up Trackathon locally.
Make sure you have the following installed:
- Node.js (v18 or later)
- npm
- MongoDB Atlas account
- YouTube Data API v3 Key
- Git
git clone https://github.com/dyson-025/Trackathon.git
cd Trackathoncd client
npm installcd ../server
npm installPORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
YOUTUBE_API_KEY=your_youtube_api_keyVITE_API_URL=http://localhost:5000/apicd server
npm run devcd client
npm run devhttp://localhost:5173
The application should now be running locally.
The following features are planned for future releases:
- AI-powered playlist summaries
- Smart video recommendations
- Search videos within imported playlists
- Learning analytics dashboard
- Playlist categories & tags
- Export & import learning progress
- Public profile & achievements
- Mobile-friendly PWA support
Contributions are welcome!
If you'd like to improve Trackathon:
- Fork the repository
- Create a new feature branch
- Commit your changes
- Push to your branch
- Open a Pull Request
Please ensure your code follows the existing project structure and coding style.
This project is licensed under the MIT License.
See the LICENSE file for more information.
If you found this project helpful, consider giving it a ⭐ on GitHub.
It helps others discover the project and motivates future development.