How To Build A Digital Prototype For Your Social Enterprise — Part 2: Build It!

Published in

Positive Procurement

12 min readOct 9, 2019

Putting your idea into a product is a very exciting, but work intensive phase of any new company. It can help you test-drive ideas for your digital product or service in a fast, safe, and effective way. This is the second part of the “How to build a digital prototype for your Social Enterprise” blog series. In this entry, I present a collection of learning resources that I used to build our prototype, for you to follow along.

You might be driven by technological curiosity, or a tight budget. I certainly was. This is my journey going from a “not very technical CTO” to building a prototype for my social enterprise.

I started by figuring out what our prototype needed. Our technical specifications were quite straight-forward. We required a log-in protected environment that could access the profiles of pre-vetted social enterprises, notification functionality, and some forms. After speaking to agencies, I was stunned by how much this would cost. I also had to factor in on-going support costs and depend on them for future development.

At the same time, London’s code bootcamp scene was buzzing. It gave me a sense that with proper commitment and enthusiasm, learning web development would be an achievable goal.

First, I spoke to some developer friends about my plan to learn programming and build the prototype myself. To my surprise, they were very encouraging and supporting of my plan. I decided to give myself 2 months of full time coding to see how far I could get.

Where to start ?

Programming is one of the most valuable skills you can pick up in these days. It is useful for building MVPs, change career or simply to stretch your brain. It is a very specific way of problem solving that will be beneficial in many different areas of your life and work. As Steve Jobs said, “Everybody should learn how to program a computer because it teaches you how to think.” In programming, you have to dissect problems very thoroughly. Therefore, you become very picky about which problems you commit to solving. I believe these are qualities that social entrepreneurs should have.

Once you start programming, you will forever be a student. Embrace this learning mindset.

A glimpse into computer science

I found it very useful to get a broader understanding of computer science, and how this field is usually taught. Here are a very short, medium and long introductions to computer science, that I very much enjoyed.

Decide on your technology stack

A technology stack is a set of technologies, programming languages, and software products that are used to create a web or mobile applications. A typical web application is divided into two parts:

Backend (concerning the server side)
Frontend (concerning the client side)

Backend Tech Stack

Backend is the umbrella term for programming the business logic, working with the database, setting up the server hosting, and other deployments. It’s where your data lives and how your app interacts with the data.

The client side (website/app) communicates with the backend for processing user requests — for example, what happens when the user clicks a button.

A popular choice for prototyping is Ruby on Rails. Ruby on Rails has many readymade solutions for time consuming, repetitive tasks. Things like building menus, tables, or forms on a website are easy to make with Ruby on Rails.

For a long time, Javascript was mainly a browser scripting language. But recently, it has seen tremendous rise in popularity as a server side programming language. A complete Javascript based stack (including the frontend) called MEAN has become one of the more popular choices for tech stack for MVPs. MEAN stands for MongoDB, Express.js, Angular.js and Node.js. Due to its open source nature and the availability of extensive libraries, a lot of modern web applications are being built on the MEAN stack.

There’s no one ‘best’ programming language, and once you’ve learned one, it’s fairly easy to pick up another, so don’t get too hung up on choosing your first one.

One thing worth considering from the start are the needs of your prototype to find the right stack. Some technologies simply are more suitable for specific problems.

Frontend Tech Stack

Frontend is the part of the application a user interacts with. It could be a website, web or mobile app. When building for the web, the frontend consists of three technologies:

HTML — the markup language
CSS — the style sheet
Javascript — browser scripting language

Google’s AngularJS and Facebook’s ReactJS are two of the most popular frontend Javascript frameworks in the market today. You can pair them with pretty much any backend technology.

What to consider when choosing your stack?

There are certain things you should consider before making a decision on your stack. First of all, you need to evaluate the complexity of the problem you are solving. How much and what type of data are you working with? Do you need to run any complicated business logic? Do you need to serve large amounts of data?

Next, think about the availability of talent you have access to when choosing a technology. This can make it easier or harder to hire technical people later on in the process. You also want to take into account how advanced the support of the community is and who is supporting the technology. Lastly, you should consider how well your technology adjusts to scaling.

For my problem, most people suggested working with either Ruby on Rails or Node.js. I also decided to build my MVP in React.js and Node.js, both of which are based on JavaScript and are very popular solutions for full-stack web apps with a large community and multiple online resources.

Design your Application Architecture

In order to understand the technical complexity of your project create a rough sketch of what your application architecture might look like. Apps are mostly based on multi-tier architecture, which consists of three layers: a presentation , business logic , and data storage tiers. The presentation tier is also known as the frontend or GUI — graphical user interface. The second tier is the web server, and this is where the logic is stored. The third tier represents the database server. The second and third tiers are together known as the backend of the application. Sketch up your user interface, think about how it might request and send data to your back end, and where any middleware systems might potentially be included.

Start Writing Code

And we’re off! I followed the bootcamp of Founders & Coders (F&C) in the form of a self study routine. I began by going through the course pre-requisites. These give you a broad overview of the topic and some of the concepts needed to begin your journey. I also added other useful resources on the way before starting with the F&C bootcamp course.

These were the main elements of my programming journey:

Theory: Reading books, online resources, and documentations.
Practice: Get to a decent level of programming with tutorials, and then go through the syllabus of a coding bootcamp such as the one from Founders and Coders.
Trial & Error: Reverse engineer someone else’s code, test each line to see how it works until you get a better understanding of the big picture.
Projects: Put your newly learned skills into projects. I built dozens of little apps before I moved on to the real thing.
Keep it engaging: As I was not part of a coding bootcamp group and studied by myself, I listened to a lot of talks and podcasts from tech founders and code newbies.
Mentor: Once I had the rough structure of the web app up and running, I looked for a mentor who would guide me on my journey, overlook my work, and give me tips (and hope). I turned to Twitter and found my mentor Tim who has since spent lots of time pair programming with me, encouraging me through every step of the way.

Your Set up

To write, manage and edit code, you will need a code editor. I use Visual Studio Code which is a free text editor that has lots of neat libraries to customise your programming depending on your language, style, and needs.

Fundamentals

As author Neal Stephenson famously wrote, “In the Beginning… Was the Command Line.” I learned most of the fundamentals from Michael Hartl’s “Learn enough to be dangerous” series. As he describes it, tech is the new literacy. Michael Hartl focuses not only on teaching you technical topics and programming languages, but something he calls ‘technical sophistication’.

Technical sophistication means that as a developer, you require a certain set of skills to elevate your overall vision and see with a broader sight. One need not be technically proficient at everything but having a good understanding of fundamentals enables us to debug and reach solutions faster. In other words, remain calm and google the error message!

These are the first courses I did from his material:

HTML

HTML stands for Hyper Text Markup Language and is the standard markup language for web pages. Its elements are the building blocks of HTML pages. HTML and CSS are the basic programming languages for web development and design. Pretty much everything you see on the web has been formatted in those two languages. Understanding the basics of these languages is an important starting point.

CSS

CSS — short for Cascading Style Sheets — is the styling language of the World Wide Web. With CSS you define what a web page looks like and how it behaves, including how its different elements are positioned in the browser.

JavaScript

JavaScript is the programming language for the web. It can update and change both HTML and CSS, and can calculate, manipulate, and validate data. JavaScript allows you to build interactive websites. JavaScript has become an essential web technology along with HTML and CSS, as most browsers implement JavaScript. It’s considered versatile as you can use it in the frontend as well as in the backend thanks to libraries such as React.js and Node.js. More about this later. It is crucial to understanding the basics of this programming language before moving on.

React.js

Now that we’ve covered the basics, we are going to pick up the pace a little bit. I started with a couple of general introductions to React before building a few practise projects. When I moved on to my prototype project, I broke down the product into some key technical elements (log-in environment, forms, search functionality, newsletter integration, authorisation, and authentication). For each of these I studied solutions through the following tutorials:

Node.JS & Express

Now it is time to integrate a backend to the app. Node.js will read and write files to your backend and communicate with databases or APIs. Here is when I began the Founders & Coders course book which heavily focuses on Node.js & Express. There are other great resources where you can learn about Node.js:

MongoDB / PSQL in Express / Alternative Backends

Most prototypes use open source solutions such as MongoDB or PSQL as the backend to store the data in. The big difference between the two is that PSQL is an object-relational database, while MongoDB is schema-free (i.e. NoSQL database). There are other choices that are particularly suitable for prototyping such as Airtable. Airtable is a web app that stores data and lets you access the data through a web interface. This is convenient if non-technical members of your team need to be able to see the content of your database, without the need for you to build an admin environment (or for them to learn SQL!). Airtable has an API that lets you treat it like a database.

Authentication vs. Authorisation

If your prototype includes a log in environment you should get familiar with the concepts of authentication and authorisation. In terms of user management, Google Firebase is a very convenient solution. It allows you to add and remove users through an interface, manage password encryption, and handle resets.

API Authentication with Node
React Firebase Log In
Build a deployed react app with auth in Firebase

Styling your app

When it comes to efficiently styling your app, there are many solutions out there. Many decide to go for a CSS framework such as Bootstrap. The components can be optimised for mobile devices and all current browsers, as well as being easily adapted to your requirements. An excellent resource for optimising the look and feel or your prototype is the book Refactoring UI which is full of practical examples on how to make your app look and feel clean and professional. The following are some excellent tutorials on styling:

Styling in REACT Tutorial
Reactstrap (Bootstrap for React)

Designing for web accessibility and inclusion

When building digital products, it is important to build products for users with all abilities and backgrounds. Here are some great tools to help you build an inclusive product:

Deploying Your App

Enough of localhost! When you are ready to put your product out into the real world, it’s time to deploy (i.e. the most stressful day of this journey). Heroku is a great solution for hosting your project. It provides a pre-installed operating system and servers, eliminating the need to configure the infrastructure. Even a person who is new to the Heroku cloud platform can easily get a hold of it on deployment, without worrying about the hassles of infrastructure management. Heroku is a pay-what-you-use product and users can easily select a subscription plan according to their own needs. Don’t forget to test your app on different browsers!

Getting your Node jS app into Heroku

What next?

Once your app is up and running, go back to the initial hypothesis that you wanted to test with your prototype. Give yourself a specific timeframe to capture feedback and data on the performance of the prototype. This can be done digitally through products such as Hotjar or event trackers, or through user research sessions with your users. Be honest and specific with the feedback, and evaluate if your prototype is solving your users problem as anticipated.

Some final thoughts

Finally, I’d like to share a few insights I gained on this journey. The first one is that to learn something new, especially something as vast and complex as programming, you have to dedicate time and focus. I know this is a cliché, but it is worth a reminder. My advice would be, try to make at least an hour of practice every day.

For a lot of the problems I had to solve, I also learned that chances are high that someone had to solve them before me. My suggestion on this matter is: make sure you don’t try to reinvent the wheel. There are a lot of nifty frameworks or libraries that have already solved a lot of common problems. Use those rather than building everything from scratch.

Learning to program and building a prototype is hard and will require a lot of dedication and motivation from you. For me, it was working on something that I deeply cared about which kept me going through the many rough patches. Passion will motivate you to get through these hard times when you hit them. If your the city where you live has meetups for code newbies, go to those and engage with the community.

There are lots of paths and opinions out there on how to build a prototype. Once you’ve made a decision on a path, my suggestion is to try to stick to the plan you’ve set out from the start. Even if a Stackoverflow comment might dislikes the specific track you chose, you will always find loads of support for a specific technical solution. In the end, chose what works for you. You will be the one who will have to live and work with it.

Also show your product around for feedback. Don’t be shy or defensive about it, embrace what others say. Everyone will have opinions about the colours of the buttons, and very few people will have an opinion about the design of your APIs, even though you’ve spent much of your time and energy working on those. Whatever people say, don’t take it personal.

Finally, try to find a mentor. I was very lucky to meet Tim who taught me loads and with who I spent copious amount of time pair programming. The programming community is full of people who are willing to help the next generation of programmers. Hack.pledge() is one site that will connect you to a mentor. Look around for someone that suits your goals and once you feel ready, try to sign up to mentor someone else in return. Mentoring other people and sharing your experience will help you to truly understand how many of these things work while paying it forward.

Verena Wimmer is the Co-Founder and CTO of Supply Change
Supply Change designs solutions for social enterprises to win more public sector contracts while maximising social value in public sector supply chains.
www.supplychange.co.uk