Make TikToks with JavaScript 1

Stackoverflow video maker

This is the first post in a series of blog posts I'll be writing about an app I'm currently working on. I saw this video on YouTube last week and was super impressed. Lewis, the developer of RedditVideoMakerBot made a bot that makes TikTok length videos out of Reddit question threads. The original app was written in Python and was built to work with Reddit specifically. I decided to build my own version in JavaScript that takes the same idea but is built to work with StackOverflow questions(y'know because who doesn't want to listen to an AI voice read through threads of 'has this been answered?').

I'm still in the process of building the app out, but I have more than enough done to start walking through roughly how the app works. In this post I'll walk through how I've structured the app as well as some of the technologies I've been using.

Structure

I have pretty minimal experience building CLI apps and no experience doing it with Node. I had never even made a CLI app in Node before this, so if the structuring is poor that's totally on me. Currently the basic file structure looks something like this:

StackOverflow-Bot
└─── audio
│
└─── lib
    │   api-call.js
    │   download-video.js
    │   edit-video.js
    │   parse-text.js
    │   screenshot.js
    │   text-to-speech.js
│
└─── node_modules
│
└─── output
│
└─── screenshots
│
└─── videos
│
│   .gitignore
│   index.js
│   package-lock.json
│   package.json
│   README.md

The index.js file has all of the logic for the actual CLI part of the app. It's also importing modules from the lib folder. Each file from lib is exporting one function, they're either being used in index.js or being used in another lib file. The audio, output, screenshots and videos folders are all used to store files generated by the app.

This is by far the largest Node app I've built. With that, initially I didn't know exactly the best way to structure my app. What gets split into a seperate file? Where should I keep these seperate files? How do I share code between files? After some googling and probably 5-6 stackoverflow threads later, I decided that index.js should do as little as possible. Currently all index.js is doing is greeting the user, grabbing user input and calling the functions imported from lib.

I'll probably do a blog post for index and each lib file individually or in groups that make sense. If you have insight into how I could better structure my app I'd love to hear your input and if you have questions about how I structured the app I'll try my best to get back to you in the comments.

Technologies

When I decided to build this project, I had to do quite a bit of research into how I could replicate the principles of Lewis' project in JavaScript. Here is the list of npm packages I'm currently using:

• Inquirer
• Chalk
• Node-fetch
• Puppeteer
• Google cloud text-to-speech
• Ytdl-core
• Etro

Inquirer is used to prompt and receive user input. It's pretty simple to use and gets the job done but plain text in the terminal is super boring, so I'm using Chalk. Chalk allows you to style text that is logged to the terminal. It's also super easy to use, I only really had to glance at the docs before getting what I wanted out of it.

Node-fetch is being used so that I can make requests to Stackoverflows API to get question and answer data. Google Cloud text-to-speech is taking text that's been parsed from html into plain text and returning mp3 files of the question and answers being passed in.

Puppeteer is being used to grab screenshots of the questions title, body and answers.

To download a youtube video Ytdl-core is about as easy as it could get with code.

Lastly I have Etro listed but I'm not having the best luck with it so far. Etro is used to edit video with JavaScript, but there isn't a ton of examples to reference as it's a relatively new package. I've looked into a few other solutions for editing the video with JavaScript but there aren't a ton of options.

If you have any insight into Etro, or similar packages that will let me edit together all of the components I have I'd love to hear about them. As it stands right now I have all of the pieces to the puzzle, I just need a way to fit them all together.

Thanks for reading, I'll have another post going into more detail soon. In the mean time I'll do my best answering questions in the comments and of course if you have any advice I'd love to hear it.