Motiveio (motivation + I/O) aggregates high-quality tech courses from across the web and organizes them into structured career roadmaps. Browse, discover, and follow clear learning paths — no account required.
50+ courses from top platforms (edX, Coursera, freeCodeCamp, Udemy, Scrimba, and more) with filtering by level, price, tags, and roadmap association.
12 structured learning paths spanning web development, DevOps, AI/ML, data science, cybersecurity, mobile, game dev, blockchain, and DSA.
Course content broken into steps with embedded YouTube videos, resource links, and practice questions.
All public content — courses, roadmaps, blogs, reviews — accessible without authentication.
Full CRUD for courses, steps, questions, resources, blogs, and reviews with moderation workflows.
User-submitted blog posts and reviews with a moderation approval flow.
Spring-based hover effects, staggered reveals, and page transitions with zero layout shift.
| Layer | Technology | Version |
|---|---|---|
| Framework | Next.js (App Router) | ^16.2.6 |
| Language | TypeScript | ^6.0.3 |
| UI Framework | Tailwind CSS | ^4.3.0 |
| Animation | Framer Motion | ^12.40.0 |
| Backend / Database | Supabase (PostgreSQL + Auth) | ^2.106.1 |
| Auth (SSR) | @supabase/ssr | ^0.10.3 |
| Icons | Lucide React | ^1.16.0 |
| Validation | Zod | ^4.4.3 |
| Linting | ESLint + next/core-web-vitals |
^9.39.4 |
| Package Manager | npm | — |
- Node.js 18+
- npm
- A Supabase project (free tier works)
# 1. Clone
git clone https://github.com/Yuvraj-Sarathe/Motiveio.git
cd Motiveio
# 2. Install dependencies
npm install
# 3. Set up environment
cp .env.example .env.local
# Fill in: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY
# 4. Initialize the database
supabase db push
# Alternatively, run supabase/migrations/ in the Supabase SQL editor
# 5. Seed the database with courses, roadmaps, and resources
# Run the migration files in order to populate the database
# 6. Start the dev server
npm run dev
# Open http://localhost:3000motiveio/
├── app/ # Next.js App Router
│ ├── (main)/ # Public pages (with sidebar)
│ │ ├── courses/ # Course listing, detail, step view
│ │ ├── roadmaps/ # Roadmap listing and detail
│ │ ├── dashboard/ # User dashboard
│ │ ├── blog/ # Blog listing and detail
│ │ ├── reviews/ # Reviews listing
│ │ └── tags/ # Tag-based browsing
│ ├── (admin)/manage/ # Admin panel (protected)
│ │ ├── dashboard/ # Admin analytics dashboard
│ │ ├── courses/ # Course CRUD management
│ │ ├── blogs/ # Blog moderation
│ │ └── reviews/ # Review moderation
│ ├── (auth)/ # Authentication pages
│ ├── layout.tsx # Root layout
│ ├── globals.css # Tailwind CSS v4 + theme variables
│ └── page.tsx # Landing page
├── components/ # React components
│ ├── admin/ # Admin forms and tables
│ ├── blog/ # Blog card and submission form
│ ├── courses/ # Course filtering, detail, video, steps
│ ├── dashboard/ # Dashboard bento-grid tiles
│ ├── landing/ # Hero, features, course preview
│ ├── reviews/ # Review cards and forms
│ ├── roadmaps/ # Roadmap cards, detail, steps
│ ├── sidebar/ # Navigation sidebar
│ └── ui/ # Shared primitives
├── lib/ # Server logic and data layer
│ ├── actions/ # Server Actions (admin mutations)
│ ├── auth/ # Session and admin assertion helpers
│ ├── data/ # Data access repositories
│ ├── supabase/ # Supabase client config and types
│ ├── types/ # Domain types and normalizers
│ ├── utils/ # Utility functions
│ ├── animation.ts # Framer Motion primitives
│ ├── config.ts # Environment validation
│ ├── icons.ts # Lucide icon map
│ └── navigation.ts # Navigation item definitions
├── supabase/ # Database schema
│ ├── schema.sql # Combined schema (13 tables + RLS)
│ ├── reset.sql # Schema reset script
│ └── migrations/ # Migration files (run in order)
├── middleware.ts # Supabase auth middleware
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS v4 configuration
├── tsconfig.json # TypeScript configuration
├── eslint.config.mjs # ESLint flat configuration
└── package.json # Dependencies and scripts
Full architecture documentation is in ARCHITECTURE.md.
┌──────────────────────────────────────────────┐
│ L4: PAGES — Server Components (app/) │
├──────────────────────────────────────────────┤
│ L3: SERVER ACTIONS (lib/actions/) │
├──────────────────────────────────────────────┤
│ L2: DATA ACCESS (lib/data/) — Repository │
│ Normalizers (lib/types/) │
├──────────────────────────────────────────────┤
│ L1: SHARED — config, icons, animations │
├──────────────────────────────────────────────┤
│ L0: INFRASTRUCTURE — supabase/, middleware │
└──────────────────────────────────────────────┘
- Component Model: Server-first. Client Components receive data as props, never fetch.
- Data Access: Repository pattern —
lib/data/*-repo.tsabstracts Supabase. - Three Supabase Clients: Server (anon, RLS), Browser (anon, RLS), Admin (service_role, bypass).
- Auth: 4-layer defense — middleware → layout guard → action guard → RLS.
- Type System: Three layers — DB row types → domain normalizers → application types.
13 tables with Row-Level Security:
| Table | Purpose |
|---|---|
courses |
Course metadata with publish toggle |
profiles |
User profiles linked to auth.users |
user_course_progress |
Per-user per-course step tracking |
course_steps |
Individual lessons / steps within a course |
resources |
Learning resources linked to steps |
practice_questions |
MCQ, open-ended, and task questions |
roadmaps |
Career roadmaps with slug and metadata |
roadmap_steps |
Phase-organized steps within roadmaps |
course_tags |
Course-to-tag M:N associations |
roadmap_courses |
Roadmap-to-course M:N associations |
user_roadmap_progress |
Per-user per-roadmap step completion |
blogs |
Blog posts with admin approval flow |
reviews |
Course reviews with admin approval |
| # | Roadmap | Category | Difficulty | Duration | Steps |
|---|---|---|---|---|---|
| 1 | Frontend Developer | Web Dev | Beginner | 6-12 months | 15 |
| 2 | Backend Developer | Web Dev | Intermediate | 8-14 months | 13 |
| 3 | Fullstack Developer | Web Dev | Intermediate | 12-18 months | 11 |
| 4 | DevOps / Cloud Engineer | DevOps | Advanced | 10-16 months | 13 |
| 5 | AI / ML Engineer | AI/ML | Advanced | 12-18 months | 16 |
| 6 | Data Scientist | Data | Intermediate | 8-12 months | 13 |
| 7 | Data Engineer | Data | Advanced | 10-14 months | 12 |
| 8 | Cybersecurity Engineer | Security | Advanced | 14-20 months | 20 |
| 9 | Mobile Developer | Mobile | Intermediate | 8-14 months | 8 |
| 10 | Game Developer | Other | Intermediate | 10-16 months | 7 |
| 11 | Blockchain / Web3 Developer | Other | Advanced | 8-14 months | 10 |
| 12 | DSA & Competitive Programming | Web Dev | Intermediate | 6-12 months | 9 |
Each roadmap is organized into phases with typed steps (lesson, project, quiz, resource, language, tool, framework, certificate, concept) and linked to external learning resources.
The seed data includes 226+ unique external URLs pointing to learning resources from 30+ platforms:
| Platform Type | Count | % |
|---|---|---|
| Official documentation (MDN, Python, PostgreSQL, etc.) | ~100 | 36% |
| YouTube (playlists + videos) | ~20+ | 9% |
| Community / learning sites | ~15 | 7% |
| Blog articles and tutorials | ~30 | 14% |
| Course platforms (edX, Coursera, Udemy, Scrimba) | ~12 | 5% |
| GitHub repositories | ~6 | 3% |
| Certification programs (CompTIA, AWS, CISSP) | ~15 | 7% |
| Other platforms | ~28 | 19% |
Contributions are welcome! Please read:
- CONTRIBUTING.md — full guide on how to get started
- CODE_OF_CONDUCT.md — community standards
Quick summary:
- Fork the repository
- Create a feature branch (
feat/your-feature-name) - Make your changes
- Run
npm run lintto verify code quality - Submit a pull request
This project is licensed under the MIT License — see the LICENSE file for details.
Copyright © 2026 Yuvraj Sarathe.
Built with Next.js, Supabase, Tailwind CSS, and Framer Motion