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
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
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.
Top comments (1)
ohh Nice👏