Build Captions Generator with Next.js and React

Опубликовано: 04 Октябрь 2024
на канале: Coding With Dawid

21,086

898

In this tutorial I am going to show you how to build captions generator that takes a video, transcribes it and than applies captions on it. The captions will be adjustable with a nice editor and the app will have more options like colors, margins, etc.
This is a cool and unique app if you want to have a project that stands out from the crowd and will be useful during any interview. I am sure it will amaze your future boss and will help you find a new job.
This project is built from scratch using latest next.js 13, react, tailwind.css and webassebly. For storage we use an aws s3 bucket and for transcription we use aws transribe service.

Source code:
https://github.com/dejwid/epic-captions

Timestamps:
00:00:00 - Intro
00:01:11 - Flow diagram
00:10:27 - Homepage
00:45:11 - File upload
01:14:47 - Video transcription
02:26:39 - Captions editor and preview
02:59:36 - Creating new video with captions
04:21:32 - Progress bar
04:47:01 - Making it responsive and mobile friendly
04:58:28 - Outro