Last week I saw my friend share a post about Koji platform. I invited me to make a template on this platform. I just completed it few days ago and I want to share my experience with you in this blog post 😊

The template that I made is a Minesweeper game. I choose this game because it is fun and it can teach us thinking logically. This is an important skill for any programmer. You can find it at here.

And yeah, this is the game 😎

My Minesweeper template on Koji

This game has some basic features of a Minesweeper game:

Play game

Pick level from easy, normal to hard

Leaderboard

Auto-resize to fit board to any device screen size.

It is written in React, Redux and styling with styled-components

Using Koji customization, we can make some changes to the game, include:

Change images, colors, sounds and every texts in the game

Change title, description, insert GA tracking code….

Change board size for any level

Here is slightly different version of the game, after using the customization

So the purpose of Koji is helping newbie programmer to clone, customize and deploy an app from a template. Beside that, we can invite other people to our project and help us get through any obstacle. It’s similar to the live collaboration feature on google doc!

I like the idea of Koji platform and it still in beta so it is not perfect yet!

Create a new project

In order to create a new project, you need to choose a template. There are various templates for many purposes from making an app to a game. Since my game is simple, I choose create-react-app template which is pretty similar to what I usually use to start a new React project.

Select a template for your own projects

Click on a template will show you template details page. On this page, you can read the introduction first to make sure it’s template that you need. Click on “Use template” button to enter template name. After that enter a cool name for your project and click “Create project”. Now you are using this template for your new project.

This is my Minesweeper template which was published just few days ago 😎

First look at the Koji project editor

Koji project editor

This is the project editor, there are many important features:

Project settings, deployment, domain…

Customization

File List

Code editor

Terminal

Embedded preview

Let’s go into details for each section.

Customization

Customization is an important feature of Koji platform. Using the picker input in customization, we can quickly change any property like text, image, sound, color, etc….

Customization for images

There is “Code” button on the top, clicking on that button will switch from visual view to code view so you can change setting name, description, label by yourself in that JSON file.

What if you want to create a new customization? At the time of writing, there is no button to do it yet, you have to use the terminal at the bottom and run a command create a file inside .koji/customization folder. This is my command to do it:

cp .koji/customization/colors.json .koji/customization/game.json

You will see a another Colors customization after running this command. Open it and click on “Code” button to switch to code view and change name, icon and other fields configuration.

Switch to code view and edit the name, icon, source, fields…

How to use the customization in your app?

In order to load Koji config, you have to call Koji.pageLoad(). We also can listen for config change and store the new config. In the Minesweeper template, I store my Koji config in Redux store, so my code looks like this:

import Koji from 'koji-tools'; export const initGame = () => dispatch => {

Koji.pageLoad();

dispatch(setKojiConfig(Koji.config));

Koji.on('change', (scope, key, value) => {

Koji.config[scope][key] = value;

dispatch(setKojiConfig({...Koji.config}));

});

};

This is how I use Koji config in my React, Redux and styled-components app:

We use initGame method to load Koji config and store this config in our Redux store. After that we pass Koji config into styled-components ThemeProvider so we can use the config in our components like this:

Embedded preview

Koji doesn’t provide just only a code editor, it also give you a web server to run our website on the platform.

Any changes we make to our app will be displayed in the embedded preview, so we can see changes immediately without switching between another code editor and browser.

We can also click on the detached link to open our website at full-screen in another tab. It still reloads when we make changes.

Koji embedded preview

Code editor

The code editor of Koji is still limited in term of functionality if you compare it to a mature code editor like VS Code or Sublime text. But for me it’s enough to work on a simple project. You can double click on a file in file list to open it in a tab in code editor.

We can click on + button on file list to create a new file, but we don’t have a button to create a folder. In order to create a folder I have to run this command in the terminal.

cd frontend/src

mkdir components && touch components/MyComponent.js

Note: empty folder won’t show up in file list so we have to put an empty file in that folder.

Live Collaboration

The “Collaborate” button stays on the top right of project editor. Click on that button will show a dialog which gives you a link that you can share to other people. Anyone who is invited to your project can only see and edit the file that you are opening.

Create a collaboration link on Koji

Deployment

After finishing coding, you can go to this section and create a production build for your app.

Just click on deploy button and it automatically does its job. You go to Domains section below to choose a nice domain for your project!

Git support

Koji uses git to store your project. You can get the git url in Overview -> Settings -> General.

So if you want to work from your own code editor. You can copy the git url and clone to the project to your computer. After finishing your work, you can commit and pull from terminal in Koji project editor.

Convert your project to a template

After finishing your project, we can convert it to a template. Make sure there is no bug in your project, because we don’t newbie programmer lost any hair while debugging their projects 😂

You can go to the developer portal: https://gokoji.com/developer and click on “New template” link.

The steps to create a new template should be easy. In the beta version, we can only publish free template but we can publish and sell commercial template when Koji platform is finally released!

Conclusion

I think Koji is a great platform for anyone who want to learn programming. Using this platform, users can quickly clone and make an app by themselves. The most interesting feature would be the live collaboration. Users can invite anyone to his project and fix bugs together.

If you are a newbie developer, you should sign up today to use it. I am pretty sure you will love it!

Join Koji discord group chat at here: https://discord.gg/GF4pN3v. The community is very supportive and response almost immediately for any question.

Thanks for reading my post, I hope this post can help more people to become a better programmer!