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

npm install

npm run dev

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.