VidSnap: Effortless Screen Recording powered by Pinata

This is a submission for the The Pinata Challenge

What I Built

VidSnap is a screen recording app to easy capture and share your screen. All you need to do is click "Start Recording" and share the preview URL with anyone. It is private and your recordings are stored securely on Pinata Cloud.

Demo

You can see VidSnap in action here: https://vidsnap-app.vercel.app/

Or in this quick screen recording 😉: https://vidsnap-app.vercel.app/v/019288f7-d95f-7eef-bcd4-7c2f00693508

You can start capturing anonymous recordings or feel free to sign up with a username and password. Signing Up will also store the videos under your account so you can access all of your recordings within the homepage.

Recording Feature:

This is the preview of your video recordings; you can share the URL with anyone so they can view the recording too.

My Code

fredoist / vidsnap

VidSnap: Effortless Screen Recording App

VidSnap is a screen recording app to easy capture and share your screen. All you need to do is click "Start Recording" and share the preview URL with anyone. It is private and your recordings are stored securely on Pinata Cloud.

Get Started

1. Clone the project into your local machine.
2. Link it to a Vercel project for API function testing (use npm i -g vercel).
3. Sign up at Pinata Cloud and create a new API key.
4. Grab the JWT key and add it as an environment variable in Vercel vercel env add PINATA_JWT
5. Replace your Gateway domain at /api/video.js
6. Run the dev server vercel dev

Screenshots

Home page

Recording preview

View on GitHub

More Details

Pinata was used for all of file and metadata storage.

I have created four API endpoints which interact with the Pinata API.

• /api/file.js handles all of the file upload and metadata manipulations as well as file deletion. Here we use different HTTP Methods for each action. I'd like to note an advantage of Pinata is that we can send different types of file data such as blobs, so in this use case we can convert the recording stream to a blob and send it directly to the API.
• /api/files.js retrieves all of the files within a group_id. This is an interesting and useful feature from Pinata which allowed to store each user files separately without the need to implement a database.
• /api/group.js creates a new group for each user, the group_id is then used to identify user's files in the files endpoint.
• /api/video.js gets a signed URL for a video recording and redirects the request to it, this endpoint is used for embedding the videos in the app.

The web app was made using AlpineJS for interactivity, TailwindCSS for styling, Clerk for user authentication, and Vercel for deployments. This stack allowed me to quickly build and deploy an MVP within 24 hours.