Day 157 — The Nuts and Bolts of Course Creation at Invincible (Part 4)

Coding the New Modules

Over the past few days, I shared how I’m developing our new content modules. Parts 1–3 were all about the design; today is all about the code. We’ll complete the work in 4 parts:

1. Part 1: Creating the new module
2. Part 2: Creating the new lesson
3. Part 3: Customizing the new lesson
4. Part 4: Customizing the Images

Here’s how we go from design to code at Invincible.

Part 1 — Creating a New Module

The first thing I need to do is add the new module within our codebase. We have a file within our code that contains each of the modules and the sequencing between each of them.

Adding the new module to the code

Once added, we add the module to the initial state — this helps us track user progress through the module.

Adding the new module Part 2

Done! We’ve got our module.

Part 2 — Creating a New Lesson

Now we’re ready to start adding lessons within the new module. These are the bite-sized pieces of functionality within the app.

Adding File Structure

The first thing we’ll do is add a new Module Directory within our lessons structure.

Adding New Lessons

Each module folder contains 1 to many lessons. We’ll add a new JavaScript file for each of them.

Adding The New Lesson Files

And here’s what it looks like once done:

Files Added!

Finally, within our newly-created file we’ll add an export statement with the lesson name:

Updating our Module Code

Within our Monitoring Module, we now can add the new lesson.

First, we’ll import the file we just created:

Importing the New Lesson

Then we’ll add the lesson to the Monitoring Module

Customizing the Lesson Text

Finally we’ll add it to the user progress:

Tracking Lesson Progress

And voila: we have a new module and lesson!

The Final Result

Part 3 — Customizing the New Lesson

Now we’re ready to actually write the content code for the new lesson. This piece can be really tedious, so I spent some time this week improving the process of going from spreadsheet to code.

I set up my Excel file to output formatted code I can just copy/paste into my code. Everything starts with the Excel file:

Within each row, depending on the type of content, I created some simple formulas to output code that I copy/paste into my codebase.

Here’s the result. For the initial version, I just use a placeholder image for each of the screens.

Updating Content, Starting with Placeholder Images

I then do this for the entire lesson plan, including teachings, play, and conclusions.

Part 4 — Adding Images

Finally, it’s time to add the polish, and replace the image placeholders with the images I designed.

I start in Figma, but I need to get these images into the app. I do this in 4steps:

1. First, I name all the images in Figma.
2. Then I export them locally.

3. Then I import them into our code.

4. Finally, I replace the placeholder images with the locations of the new assets

Done!

The End Result

Rinse and Repeat

I repeat this process for each new module / lesson we have. For the module I created this week, I have 5 new lessons. I’m finding the vast majority of the work is now spent on the structure and design of the module vs. the coding — which is how it should be.

Outstanding Issues:

There are a few minor issues I uncovered in this new process that still need some work:

1. Copy/paste with apostrophe screws everything up (due to formatting of code).
2. Color of teachings screen needs to be customizable.
3. Overall Time Spent is still pretty high.

We’ll continue to improve this process over time, but it’s a good start. My goal is to get this process to a place where we can allow contributors to help us build new content . If I can code this, then anyone can!