- π₯ NextJS - Because it's one of the best frontend JS Frameworks
βΆοΈ Remotion - For the video and rendering- πͺ£ Linode S3 Storage - For quickly storing uploaded video files in storage buckets
- π Sass - For making the app look beautiful
- π± MongoDB (w/ Linode) - For caching renders with the same input params
- π« React Recoil - For app-wide state management
- π React Hot Toast - For the notifications
- π React Confetti - For the joyous animations
- π¦ React Dropzone - For handling advanced drag-drop animations
- NodeJS 14+
- NPM installation
- A S-3 compatible storage bucket with read and write access. (Optional)
- An Serverless account for rendering, (Optional)
The videos will only render to an mp4 file if you have all of this set-up. However, you would still be able to preview the videos in the browser without the last two.
- Setup an Object storage bucket with Linode or any other cloud provider.
- Rename the
.env.example
file to.env
. - Install packatges using
npm install
- Follow the installation instructions at Remotion Lambda Installation docs, till step 6 .
- Once you have the key ID and Secret from the lambda console, edit these values into the
.env
file along with other values. - Verify
.env
setup usingnpx remotion lambda policies validate
. Only proceed if you get checkmarks on everything, else repeat from step4
. - Edit your preferred regions in
src/deploy/regions.ts
file. - Deploy the functions using the command
npm run deploy
. Wait for deployment.
- Run the development server using
npm run dev
. Navigate to the address displayed in the terminal to view the app. Verify that everything works. - Create a production build using
npm run build
and serve usingnpm start
.