ScreenLink is a lightweight web application that allows users to record their screen and microphone directly in the browser, preview the recording, upload it, and share it via a public link. Each shared recording includes basic engagement analytics such as views and completion rate.
This project was built as an MVP-style assignment to demonstrate practical handling of browser media APIs, backend integration, deployment constraints, and real-world product decisions.
🔗 Live Demo (Vercel):
https://screenlink-live.vercel.app/
Anyone can use the deployed version to record and share a screen recording.
- In-browser screen and microphone recording using the MediaRecorder API
- Start and stop recording controls
- Local video preview before upload
- Upload recordings in
.webmformat - Public shareable link with embedded video player
- View count and completion percentage analytics
- Fully deployed and usable on Vercel
- Frontend: Next.js (App Router), TypeScript, Tailwind CSS
- Browser APIs: MediaRecorder, getDisplayMedia, getUserMedia
- Backend: Next.js API routes
- Storage: Supabase Storage
- Database: PostgreSQL (Supabase)
- Deployment: Vercel
- Node.js v18 or higher
- A Supabase project (PostgreSQL + Storage enabled)
Create a .env.local file with the following variables:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEYDATABASE_URL
DATABASE_URL is the PostgreSQL connection string provided by Supabase (used for server-side access and admin operations). All values should be defined as plain strings, for example:
DATABASE_URL="postgresql://postgres:password@db.xxxxx.supabase.co:5432/postgres"
-
Clone the repository
git clone https://github.com/krishnapschauhan/screenlink.git -
Navigate into the project directory
cd screenlink -
Install dependencies
npm install -
Start the development server
npm run dev
The application will be available at:
http://localhost:3000
Client-side recording:
All screen and audio capture is performed in the browser using native Media APIs. This avoids server-side recording complexity and works reliably in a serverless environment.
Direct-to-storage uploads (Vercel-ready):
To support Vercel’s serverless limitations, videos are uploaded directly from the client to Supabase Storage using the public anon key. Server-side FFmpeg processing and large file handling are intentionally avoided in production.
Preview-first UX:
A local preview is generated after recording so users can verify the recording before uploading, improving usability and reducing failed uploads.
Public sharing model:
Videos are accessible via simple public URLs without authentication to keep friction low and match MVP requirements.
Minimal analytics:
Only views and completion counts are tracked, focusing on meaningful engagement metrics rather than heavy analytics.
Deployment-aware changes:
The project was explicitly adapted for Vercel deployment by removing server-side video processing, disabling filesystem reliance, and aligning with Supabase Storage and RLS policies.
- Add background workers for video processing (trimming, transcoding, compression)
- Implement presigned upload URLs instead of direct client uploads
- Serve videos through a CDN for better performance at scale
- Add authentication and private sharing options
- Improve trimming UX with a timeline-based editor
- Add rate limiting and abuse protection
- Implement structured logging, monitoring, and error reporting
- Add automated cleanup and retention policies for stored recordings
- Expand analytics with session-level engagement tracking
There is no static demo video included.
Instead, the project is fully deployed and usable live on Vercel:
https://screenlink-live.vercel.app/
Users can record, upload, and share recordings directly using the live application.