Open Source Spotlight: Star Wars Intro Creator with Bruno Orlandi

When "The Force Awakens" was released in theatres, Bruno Orlandi, a frontend developer from Sao Paolo made his own 'Star Wars Intro Creator'. A thoroughly nostalgic project, it lets you type any text and see it roll across the screen like Star Wars opening credits.  

Within the next year, Bruno's website would get 4 million visitors and 50,000 accesses per month.

He could not have imagined that this Star Wars Intro Creator would be used at birthdays, weddings, funerals, college graduations, baby birth announcements—and a NASA lecture!

It has even been used by a child psychologist treating children with behavioral and emotional problems.

Encouraged by the success of this project, Bruno has also launched intro creators for Westworld, Stranger Things, and Game of Thrones.

What got you started with Star Wars Intro Creator?

A few months before December 2015, I had created a website where you could put 2 words in, and it would look like the Breaking Bad logo. It was really fun, and the website got a few thousand visitors.

Then in December 2015, Star Wars came back to theaters, after a 10 year-long wait from the last one. I was on vacation from my first job and had some time on my hands.

I wanted to make a fun project related to Star Wars, like I did with the Breaking Bad series.

I created the Star Wars Intro Creator based on the same concept—a website where you typed in text to see it play like the Star Wars opening animation.

What do you have in mind for the short-term and long-term future of Star Wars Intro Creator?

After years of improving the project (based on user feedback), there aren't many big features to be developed. There are some minor UI improvements and translations we plan to make.

In the earliest weeks of the project, a friend of mine joined me to work on new features users were requesting. We developed features to enable video downloads, logo changes, and image customizations.

When I did the first version of the project, I never thought that I would be working on it for the next few years, so the code was not very maintainable. Because of this, we had to rebuild the product from scratch, so we could improve it at any time without handling old code.

Soon, we created 3 more websites that allowed users to create custom theme videos—one for Stranger Things, one for Westworld, and one for Game of Thrones.

For Westworld and Game of Thrones, the frontend and back end were built again from scratch, to allow future improvements—and make it easy to create similar websites with forks of this project.

In the future, we plan to reuse components from older projects instead of forking and creating a copy of all the code, but this is a challenge too.

I believe the success of these projects is due to one thing: allowing users to easily create personalized videos. That's our main goal and we are working on this, so more creative tools will be released soon.

How do you plan out your work? What’s your style of preparation?

Most of the time, I'm the kind of developer that just puts their hands on the keyboard and starts coding, getting ideas out of the mind and into the computer, experimenting as much as possible.

However, the more experience I gain, the more I realize that that's not always the best way to develop projects. You need to take some time out before coding to make UI drafts on paper, draft software architecture, and figure out how to connect parts to each other. The more you do it, the more clearly you'll start to see your project.

I am not a UI designer, so I use pen and paper to prototype. It's the best! For the architecture, I use Google Drive Presentation, but you can use any tool that allows you to draw boxes and arrows.

Sometimes I also like to dive into the code of some open source project that I use a lot, to learn from it or help to improve it. Seeing how other good developers created code to accomplish complex tasks gives me ideas for my own problems.

What’s your advice to developers who are on the fence about contributing to open source? How can one 'sustain the momentum' once they’ve started?

Just do it! Develop software that solves a problem for you, publish it, share it, and maybe other people will find it useful for them too.

Start sharing your ideas with your friends, and then start developing it. Some people may help you develop it, some may give awesome feedback, and some may tell you how it saved their life. For instance, I have a repository that was just a proof of concept—until one day, after more than 3 years without any update, a guy from work come to thank me because he was looking for code exactly like the one I made.

You should also try to check code from open source projects you use. You will learn a lot! Try to contribute to the project, and even if the contribution is not accepted, you will learn something.

I once tried to contribute to an open source admin panel plugin a couple of years ago. The plugin had an input box to type the ID of the item you want to associate with another entity. I realized that it could be a select box (to find the item by name instead of typing in ID). I made a Pull Request and the maintainer rejected it.

He explained to me the select box I developed made a big query on the database, bringing all items to the frontend just to filter them, and that’s why he only put in a simple input. So even though my code was not merged, I still learned something.

The Star Wars Intro Creator, for a long time, didn’t use the best tools and frameworks available, and the project still worked.

This is another lesson I learned—you don’t always have to master the latest tools and technologies to make something great. You can start with the tools you have, and gradually learn what you need to.

I created the first version of my project with jQuery, Bower and Gulp for the frontend and Python for the backend. Now, the project doesn’t have jQuery. It mostly has pure JavaScript with some React.js, Parcel for building and NPM. Most of the backend is now in Node.js.

There is a good sentence that fits me very well: "A successful software tool is one that was used to do something undreamed of by its author." Open source is a good way to do this.

Were there any low-points or roadblocks? Did you ever think of stepping away from the project?

Not much. Sometimes, I didn’t find the time to work on this project, but the feedback kept coming, and this always inspired and motivated me to do more.

I've recieved feedback from psychologists, physicists, teachers, folks in marketing, sales people, speakers, and researchers. I've learned that my project has helped all of them express themselves more creatively.

One particular psychologist who works with children even told me that he used my project to help his patients, making them write stories about difficulties they overcame and playing those stories in Star Wars format.

He said it had a very positive impact on their treatments. This feedback was very important to me, and taught me that we could make incredible things just by collaborating with the web and other open source projects.

How important is testing for your project? What tools do you use to test?

It’s very important, but I mostly measure the cost of the benefits. If the code is well defined, easy to test manually and is not going to change much, I don't write automated tests for it.

But if it's a critical part of your software that may change in the future, or has a lot of integrations with other parts of the system, it would save lot of time to create tests at the beginning itself.

As for the tools, I use Jest because it's feature-rich. I use it for unit testing and checking the inputs and outputs of my code methods. I use the Istanbul tool to check test coverage.

For end to end tests, I strongly recommend Cypress—it's a very complete tool.

What does your average day look like? How does it compare to your ‘regular day job’ years?

Before, I used to work a regular day job in a team with 6 people, where the company had all the directions and instructions for the project, while we planned and executed them.

Now, I lead a small team of 3 including myself, all of us working remotely from home. It's a challenge to work from home, what with all the distractions and trying to keep the team aligned.

We have to clearly define the directions of whatever we're developing, which is much harder than coding. Still, it's very satisfying to be able to work on my own projects.

Mac, Windows, or Linux and why? Also, Tabs or Spaces?

I have developed with all the three OSes. Now, I use a Mac (and don't plan on migrating). It brings a good OS with some good hardware.

I have worked a lot with Linux, and it's awesome as well, but sometimes can be painful (depending on the hardware). Linux has a lot of good open source software that allow you to tweak the OS however you want.

Windows was never a good option for me, but since Microsoft created the Windows Subsystem Linux, Windows has become a good development OS too.

Since most of my tools are cross platform, the OS hasn't really impacted my work.

Tabs or spaces? I used to code with four spaces in the past, and now I've reduced it to two spaces. I am trying to get rid of semicolons in JavaScript. :D

Check out Star Wars Intro Creator on GitHub.

We ❤️ open source. Fill out this form to get free, unlimited access to BrowserStack for your project's testing needs.

(Responses are edited for clarity.)

Recommended reading