Skim

A web-based video editing interface with timeline, drag-drop, and clip controls.

🎬 Demo

🔗 Links

🎥 Skim Workflow Demo Video

https://youtu.be/bAuBT_yFQoM

🌐 Website Link

https://skim-alpha.vercel.app

But it won't work since skim is pre-configured for local use, because production env will break and cause bad user experience follow PRODUCTION DEPLOYMENT GUIDE if u still wish to.

🧠 My Thoughts

https://narendra8pal.hashnode.dev/skim-video-editor

✨ Features

• Timeline-based editor
• Drag-and-drop clips
• Volume & split controls
• Zoom in/out
• One-tap gap deletion between clips

🚧 Coming Soon

• Export (download) edited video
• Image media support
• Transitions between clips
• Fading effects
• Clip duplication

🛠 Tech Stack

• Frontend: React + TypeScript + Next.js
• Backend: NestJS + REST API
• Storage: Cloudinary
• Database: PostgreSQL
• Deployment: Render
• Video Processing: FFmpeg (for thumbnails)

⚠️ Warning: Free tier hosting on render causes significantly slow performance and even cold starts.

Deployment URLs

Environment	Frontend URL	Backend URL
Dev (Local)	http://localhost:3000	http://localhost:3001
Prod	https://skim-alpha.vercel.app	https://skim-66sk.onrender.com

⚠️ IMPORTANT NOTICE

BY DEFAULT, THIS PROJECT IS MEANT TO RUN LOCALLY FOR A SMOOTH AND RICH EXPERIENCE.

IF YOU DON'T CARE ABOUT LAG, COLD STARTS, OR PERFORMANCE ISSUES,
YOU CAN RUN IT IN PRODUCTION USING THE PRODUCTION DEPLOYMENT GUIDE.

I would highly recommend using skim locally using the url provided for dev. Things aren't going to work perfect and smooth in production environment :(

🐳 Docker (Local Development)

git clone https://github.com/NarxPal/skim.git
cd skim

🔧 Frontend (frontend/.env)

Create a .env file in root of frontend folder and add following:

NEXT_PUBLIC_API_BASE_URL=http://localhost:3001

🔧 Backend

Run the following command in backend directory and it will automatically copy the code of .env.example file and will create .env file.

cp .env.example .env

get back to root dir:

cd ..

build images and create container:

docker compose build
docker compose create

Before proceeding, ensure Docker has access to your project directory:

Docker Desktop → Settings → Resources → File Sharing Add the full path to the folder where skim is located. For example: /work/my_projects/skim Click Apply & Restart after adding.

run this now (it will start the backend and postgres container):

docker start skim-backend-1
docker start skim-postgres-1

# here skim-backend-1 and skim-postgres-1 are container name, make sure to change it if u have different container name 

now do migration run to apply db schema and table:

docker compose exec backend npx typeorm migration:run -d dist/data-source.js

build and run images

docker compose up --build

if getting error saying bind: addres already in use than make sure your system postgres service are inactive , if using ubutu/linux than u can do so by running this command sudo systemctl stop postgresql

after that re-run the above command and if u get this error :

Error:

The path /work/my projects/skim/backend is not shared from the host and is not known to Docker. You can configure shared paths from Docker -> Preferences... -> Resources -> File Sharing.

Solution: Go to your docker desktop settings -> select Resources -> File Sharing -> add the path shown in ur error to Virtual file shares section while making sure u remove the child dir from the path (so in our eg. /work/my projects/skim) , hit apply.

now try re-running the docker compose up --build command

done! ur app will be working now, checkout localhost:3000

🚀 Docker (Production Deployment)

make changes inside docker-compose.yml file

Changes n backend environment: take values from .env file add use them at their appropriate place, also set DB_SSL to true

Changes in postgres environment: again take values from .env file and use them for POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_DATABASE.

also change last element value in here:

# healthcheck: 
# also change DB_NAME in the last item of test array, if running in production env 
#  test: ["CMD", "pg_isready", "-U", "postgres"]

  #change postgres here to DB_NAME given in .env

build images

docker compose --build

run migration to apply db schema and table

docker compose exec backend npx typeorm migration:run -d dist/data-source.js

run the app

docker compose up --build

Setup Instructions Without Docker

Before moving with local and production setup make sure to install ffmpeg on ur system

# Mac (Homebrew)
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows
Download from: https://ffmpeg.org/download.html

🧑‍💻 Local Setup Instructions

git clone https://github.com/NarxPal/skim.git
cd skim

Install Dependencies

cd ./frontend
npm install

cd ../backend #if u are in frontend directory do this
#or
cd ./backend #if u are in skim directory do this
npm install

Create environment files

Create a .env file in the root of both frontend and backend folders.

🔧 Frontend (frontend/.env)

NEXT_PUBLIC_API_BASE_URL=http://localhost:3001

🔧 Backend

⚠️ In backend directory i have already included .env.example file which contains temporary demo credentials. Please use responsibly.

Run the following command and it will automatically copy the code of .env.example file and will create .env file.

cp .env.example .env

Run Locally

Frontend

npm run dev

Backend

npm run start:dev

🚀 PRODUCTION DEPLOYMENT GUIDE

⚠️ NOTE: Free-tier hosting (Render) will introduce cold starts and lag, believe me :(

🔧 BACKEND DEPLOYMENT (NestJS)

change origin in main.ts file:

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:3000', // frontend port
    credentials: true,
  });
  await app.listen(process.env.PORT ?? 3001);
}

currently u will see http://localhost:3000 change this to https://skim-alpha.vercel.app

also u have to uncomment psql db hosted environment variables in .env file and comment out environment variables running locally.

and also set DB_SSL to true for production

DB_SSL = true 

change backend port in frontend directory
change this:

NEXT_PUBLIC_API_BASE_URL=http://localhost:3001

to this:

NEXT_PUBLIC_API_BASE_URL=https://skim-66sk.onrender.com