Audio data is saved as chunks, stitched into a Blob object, and converted into an audio element when the IDE component mounts. With the help of MediaRecorder, a user can overlay audio onto a post. The second set of information stored by the playback reducer is audio metadata. This is accomplished by keeping a timestamped record of text input and updating the state of the React component inside a setTimeout() call. Text is displayed sequentially as it was typed. The first data set is stored in the speed and position of text as it is rendered during playback. The playback reducer also keeps track of two sets of data.
REDUX REDUCER UPDATE
I register custom input event listeners to each of the objects in the windowGrid such that an action is dispatched to update the redux store when a user interacts with the IDE. The second set of data stored by the canvas reducer is user input.
These objects are rendered in the UI by mapping over the windowGrid and displaying the objects as corresponding React elements. This is a 2D array of objects where each object can be a file editor, notepad, or terminal type. The first is the layout of the IDE called the windowGrid. The canvas reducer is responsible for storing two sets of data. The main application consists of two reducers: canvas and playback. Redux allows me to persist application state while passing information between React elements. This is accomplished using Redux, setTimeout(), and MediaRecorder. The application’s core functionality is the ability to monitor a user’s action and create a playback as an interactive video. The two microservices are deployed as individual nodes in an AWS ECS cluster and communicate via WebSockets. The IDE currently supports 14 of the most popular programming languages. The server is provisioned with a NixOS environment that pre-installs the required packages to compile various languages and frameworks. The language compilation server encompasses a Docker container running a Node server that exposes a pseudo-terminal interface using Node-pty. It also features a notes section with multimedia support made with Quill and a terminal UI made with Xterm.js.
REDUX REDUCER CODE
The code editor uses Ace editor for its rich syntax highlighting. React is my bread and butter, and I am a huge fan of Material UI’s components. A non-relational database like MongoDB was perfect since the type of data stored would vary significantly based on the layout of the IDE and the code being written by a user. I went with the classic MERN ( MongoDB, Express, React, Node) stack for the main application. The application is structured as two microservices: the main application and a language compilation server. With the click of a button, the editor generates a playback of the user’s actions which they can share on the platform for others to view and interact with. In the background, it tracks and stores every action a user performs - writing in files, running commands, and making notes. The thought arose that there needs to be a tool that provides just the right amount of context to a concept, is as detailed as a Medium article, as engaging as a video, but isn’t a huge time cost for the creator.įeeling energized, I tasked myself to build such a thing - a browser-based IDE where users simply code as they normally would in editors like VSCode and Atom. Therefore, they make longer videos about broader topics to reach wider audiences - a nightmare for more experienced developers. But it isn’t time-efficient for creators to make short content because it takes too long to edit videos. Video content sites like YouTube are a bit better - they provide even more context than Medium, and they’re engaging to watch. But sometimes, posts feel like essays, making it hard to parse relevant information (hopefully, this post is an exception).
Medium is the next best thing because it provides more context than Stack Overflow, and it is usually very detailed. However, more detail is required than a few lines of code when a question is rather complex or esoteric. Stack Overflow is a developer’s best friend due to its convenience - You can view code snippets and apply them to your work.
REDUX REDUCER SOFTWARE
There are two things software engineers constantly do - learn new programming concepts and explain their code to other people. I released and deployed the project you can find here (try on the desktop for the best user experience). These past few months, I challenged myself to solve a problem that many software content creators encounter - wanting to create video tutorials without the hassle of video editing.