Video Annotator

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

VNote is a video annotation tool.

By adding a Youtube video URL to the input field on the landing page, users can access a note-taking interface integrated with the video player. This enables users to create timestamped notes directly linked to specific moments in the video, aiding in comprehension, retention, and collaboration through a shareable link.

Target Users

• Educators: Create interactive video lessons with embedded notes, questions, or links to supplementary materials.

• Students: Collaborate on study guides by annotating lecture videos or documentaries.

• Researchers: Analyze and code qualitative video data with precise timestamps and linked resources.

• Content Creators: Include additional context, behind-the-scenes details, or interactive elements to videos.

Demo

Demo Link

VNote Pro

Annotate, share, and learn from videos.

vnote.pro

Video Demo

Github Repo

perplexedyawdie / video-annotator

Annotate, share, and learn from videos.

Welcome to VNote Pro 👋

Capture and share key moments from any video with time-stamped notes, links, etc. Easily collaborate and learn by sharing your annotated videos.

🏠 Homepage

Install

Make a copy of the .env.example file and rename it to .env.local then add the required env vars.

npm install

Usage

You can run the command below or use the provided Dockerfile.

npm run dev

Author

👤 Javel Rowe

• Website: https://javel.dev
• Github: @perplexedyawdie
• LinkedIn: @javel-rowe

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

View on GitHub

Landing Page

Taking Notes

Platform Primitives

Netlify Blobs made it super easy to quickly store/retrieve notes data.

Specifically, I was able to interact with Netlify Blobs by using the Typescript client. First, I initialized the client like so:

import { getStore } from '@netlify/blobs';

const store = getStore({
    name: 'note-store',
    siteID: process.env.NETLIFY_SITE_ID,
    token: process.env.NETLIFY_API_TOKEN,
})

then I was able to easily save data like so:

export async function saveNote(noteData: VNote): Promise<boolean> {
    try {
        await store.setJSON(noteData.id, noteData)
        return true
    } catch (error) {
        console.error(error)
        return false
    }
}

and retrieving was just as simple:

export async function getNoteData(noteId: string): Promise<VNote | null> {
    try {
        const noteData = await store.get(noteId, {
            type: "json"
        });
        if (noteData) {
            return {
                id: noteData.id,
                url: noteData.url,
                noteDetails: noteData.noteDetails ?? null
            }
        } else {
            throw new Error("Unable to retrieve note!");

        }
    } catch (error) {
        console.error(error)
        return null
    }
}

This site was hosted on Netlify & I added a custom domain.

Comments

[Joel Jose]

ohh Nice👏