Day 157 — The Nuts and Bolts of Course Creation at Invincible (Part 4)
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:
- Part 1: Creating the new module
- Part 2: Creating the new lesson
- Part 3: Customizing the new lesson
- 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.
Once added, we add the module to the initial state — this helps us track user progress through the module.
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.
And here’s what it looks like once done:
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:
Then we’ll add the lesson to the Monitoring Module
Finally we’ll add it to the user progress:
And voila: we have a new module and lesson!
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.
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:
- First, I name all the images in Figma.
- 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
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.
There are a few minor issues I uncovered in this new process that still need some work:
- Copy/paste with apostrophe screws everything up (due to formatting of code).
- Color of teachings screen needs to be customizable.
- 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!