Instead of an app, I decided to build a reusable app template
I’ve been wanting to make a 9Gag clone for a while, and decided to see if I could make it as a template, so that others could easily customize it and launch it as their own app.
It’s difficult for junior developers to clone a GitHub repository, customize it, and launch it as a new app.
I recently stumbled across Koji, a relatively new platform that makes it much easier and faster to clone Git repositories, customize them, and launch new apps. While it isn’t proven out yet, I am fascinated by the idea of more senior devs creating templates that can be reused by junior devs, and thought I would give it a try.
Here are some thoughts from my experience :
To create a new project on Koji, you select a template and give it a new name. There are dozens of templates to clone, and new ones are being added every day.
Instead of downloading the repository to your computer, Koji sets everything up for you on the Amazon cloud. Within 30 seconds, you get an entire development environment with all kinds of awesome, including a hot reloadable, embedded live preview, a web-based code editor (Monaco, same one as used by VSCode), Visual Customization Controls (VCCs) which allow for abstraction of hyper-variables (making it easy for even non-techies to customize the template), single click deploy, and a whole lot more.
Unlike things like CodePen, JSFiddle, and other JavaScript playgrounds, Koji supports Full Stack projects and covers the entire development and deployment process. In fact, Koji goes way beyond that in helping you get users, measure, and grow.
You can find my template here :)
App features
These are features of our 9gag app template:
Newsfeed:
There are two sections in newsfeed: Hot and Fresh. Hot section contains posts that have over 200 points (upvotes-downvotes) and limited to 50 posts. Fresh section contains posts below 200 points and is ordered by created date.
Create new post
Users can create 3 types of posts: YouTube video, image, and link. Users must be logged in to create a post
Comment, upvote, downvote
Just like 9gag, we have three important features: comment, upvote and downvote. Users can’t spam upvote or downvote because their votes are stored database and we validate voting information before saving it to database.
Login and signup
In order to create a post, comment, upvote and downvote, users must have an account. We use a simple username and password login because it’s easier for newbie developer to understand.
Admin tools
We also have a moderation tools in our 9gag clone. In order to use it, user must login by admin account (admin/pass). We have a simple protection mechanism to make sure that actions like: delete post, delete comment and ban user only come from admin account.
Data generation script
To make it easier during development, I created a data generation script that loads the database with some sample posts. These can be deleted during deploy. This script runs by itself after template is cloned.
Get started
Our app template has two parts: backend APIs and frontend.
The Frontend
Our frontend is built with React and styled-components.
Let’s me go through each folder in frontend section :)
common
This folder contains some reusable components like Button, PageContainer, form inputs and even Post component because it is reused in feed, post details and create post page.
pages
This folder contains components for pages in our app. Inside each folder, we have a file called koji.json. This is a sample content of koji.json.
This file defined the route, name, path and whether our page should require login or not.
We will use the page information in /frontend/helpers/router/index.js so you should take a look at that file to understand how our routing work!
Beside that, koji.json also affects to the Embed Preview. When you open any file in pages folder, the Embed Preview will redirect to the route that was defined in koji.json!
contexts
I decided to use React Context which is easier to understand and handles this use case quite well. You could easily add Mobx or Redux if you prefer those.
helpers
This folder contains some helper files for our frontend, including route helpers and api helpers. We use react-router-dom to handle routing.
The Backend
In 9gag template, we use ExpressJS to power our backend API endpoints. In order to store data, we could use any database, but I chose to use Jiro store, it’s a key value data store provided by Koji platform (Jiro store is an API wrapper around Google Firebase, that doesn’t require that you create a new Firebase account).
This is how we create an endpoint for create a post API:
So it’s similar to Firebase or MongoDb. Here are methods you can use to get and set data using Jiro store:
- Store.set(collectionName, key, data): this method is used to store data to a particular collection, identified by a key.
Example: Store.set(‘posts’, 1234, { hello: “world” })
- Store.get(collectionName, keyValue): we use this method to get a single record from a collection, identified by keyValue
Example: Store.get(“users”, 1234)
- Store.getWhere(collectionName, queryKey, operator, queryValue) the getWhere method is a little bit more flexible then get method because we can query data using a field name, operator and query value. The return value will be an array
// Example: find the records where username equals "davidtran"
Store.getWhere('users', 'username', '==', 'davidtran')There is no order by or sort by for this method, so you have to it by yourself using Javascript. This is how I do it in the GetFeed API:
Customization
In this 9gag app template, we can customize images, texts and colors for the frontend.
We use React context and styled-components ThemeProvider to make sure our changes in customization will be updated whenever user changes anything.
This is how we receive message that contains changes from Koji server
Since our components are using theme data provided by ThemeProvider, new changes will be updated automatically.
Conclusion
It took 10 days to implement this template, but now that it is a template, many people can easily clone, customize, and deploy it. I am eager to see what you can do with this template :)
To get live help from other developers, you can join Koji Discord group here: https://discordapp.com/invite/GF4pN3v. I’ve found the group to be extremely friendly and supportive.
