How We Built Our Online Store And Blog Without Coding Anything. For Free. Really.

While all the software we are using is free, we are paying for server space with AWS. Stay tuned for an in-depth rundown on how to set up your AWS server like we did!

by Benji on September 17, 2016

Here at Pass The Piece we are all about the open internet and the power of free knowledge. The internet has an amazing way of transferring massive amounts of information to millions of people in a matter of seconds, in a way that can be unfiltered and open for anyone to learn anything. This is important for an open society, and important for the future of getting along with everyone else in the world before WW3 happens. Creating an international society with the open internet and sharing views and information transparently is the only hope we have as a species before the powers-that-be press the red button and destroy the entire planet for everyone. Read more about the changing world structure, and many more rants about society here.

Anyways, with our love of free knowledge, here’s some! We’ve built our entire platform (our iOS app, Android app, and our online store) all with free, open-source software that is completely viable for anyone to start a business, just like we did. My goal of this post is to describe our online store’s technologies in a way that most people can understand. While we did spend many countless hours writing code for our iOS and Android apps, the online store was possible without writing any code at all! If you have any questions about how this stuff works, go ahead and leave a comment and I would love you help you out!

So first off, what does ‘Open Source’ mean?

Ah, dear reader, I’m glad you asked. In fact, I was just about to tell you all about open source software!

Open source is referring to the open availability of the source code of any software project. If a piece of software is ‘open source’ that means that anyone can download and see the original source code. They are also able to modify the code and submit that change to project’s moderators, who have the power to approve or disapprove that change in the official project.

Open source projects are at the heart of nearly every piece of software that you touch in your surroundings. On your iPhone, Android device, PC, Mac, Linux machine, everything you can think of. (Even those refrigerators… Sigh….) This is because open source projects, especially long-term ones, are on average extremely reliable. The nature of the fact that anyone can contribute to an open source project means that the best minds at different competing companies are going to work together to fix the same problems on the same project.

One open source project you might know is a little thing called Android, for example. But also core technologies like Unix, which is the core kernel code (the ‘heart & soul’) that macOS and iOS are built on top of. You’ve used the latter if you’ve ever touched an Apple product in your life. Others include things like WordPress, WebKit, Swift, Python, Ruby, Java, Bitcoin, Blockchain, among many, many others.

We have managed to use all open source software to build our platform and our brand here at Pass The Piece. Let’s talk about what open source tools we’ve actually used.

The Online Store: WordPress and WooCommerce

At the center of our platform is WordPress. WordPress is an open-source content management system (CMS) that makes it much simpler to build a complex website than it would be to learn to code all these features from scratch.

WordPress was originally designed as a blogging platform, and is based on applying downloadable themes and plugins to add different designs and features to your website. These plugins are extremely powerful and can add a whole suite of new features to your website for various tasks. For us, the most important plugin of all was one that allowed us to become an online store: WooCommerce.

WooCommerce allows you to turn your WordPress website into an e commerce platform for selling goods to customers around the world. It adds features like product pages with descriptions and photos, a full cart and checkout page, PayPal integration, and much, much more, all just by installing this plugin. This is what allows us to list new products on the website for sale.

But the most powerful part of this set up with WordPress and WooCommerce is what it gives to mobile app developers. Something called an API.

API stands for: Application Programming Interface

An API is an extremely powerful acronym. It stands for Application Programming Interface. At it’s core, an API is a set of commands that two computers explicitly understand in order for them to communicate over the internet. This is usually a relationship like a client and a server, where the client will request data, while the server serves the requested data. That might not make sense… Let’s try again…

Have you ever noticed how many websites and apps give you the option to sign in using Facebook? Every one of those developers are using the Facebook API to communicate with Facebook in order to download your profile picture and display it inside their product. Facebook has defined their API so that a client can request someone’s profile picture, and Facebook will serve the requested photo so that the client can display it on the screen.

The WooCommerce API Allows Us To Make Mobile Apps

So here’s the secret to our sauce. WooCommerce has an API built into it for free. Normally while building a website or a digital service of some kind, developers need to build an API so that their app can download data from somewhere. Facebook needs an API, for example, in order for your Facebook app (or client) on your smartphone to download your profile picture. The same way Facebook works in this way, WooCommerce allows us to download all our products, your cart, and confirm a transaction (and everything else we need), all by making requests to passthepiece.com from the iOS or Android app.

Disclaimer: We Did Use A Tiny Bit Of Code When We Built The Website

Okay, so I said that the website can be built without any coding at all. While this is true, a slight grip on CSS styling comes in handy in so many ways while building a WordPress website. If you’re curious about how this works, check out this article on embedding CSS with child themes here.

We want to help you do what we do

This is a complicated world. While WordPress is an amazing platform with so many possibilities, it does become overwhelming if you’ve never played around with it before. Even though the setup we have is simpler than building an API and website from scratch, WordPress is still quite a beast. We will most definitely be posting more about the ins and outs of WordPress and our setup moving forward! Stay tuned!

~ Pass The Piece Team