Building a Startup on the Web
Our processes & thoughts about building a modern web-app as developers
When we were approached in mid-2016 by a Calgary service marketplace Pareto about building a web app, we at Field were excited by the opportunity to build something really special. As a newly minted partnership, we wanted to create something that would scale, was future-proof (or at least future-ready!), and was extremely lightweight and fast. In order to execute on the project, we decided to develop Pareto using the MEAN stack.
The MEANest Stack
Node.js and Express proved the most enticing server setup for us, since they were both specifically designed for larger scale setups, were easily scaled, and had tons of community support (as reflected by the massive uptick in packages on NPM, Node’s package manager).
MongoDB was a natural fit, since its less structured approach to data storage meant that Pareto could store objects significantly easier, and tapping MongoDB Atlas for the storage back-end helped reduce the workload of the server, making it even faster.
Angular was decided on because of its wide-scale community support as well as the ease of use in creating a SPA application with routing, data models, validation, animation and more.
Another huge consideration at the start was applications, which Node.js allowed us to accommodate by designing our application logic RESTfully.
REST
A REST API allow us to follow through on our ideal of scaling with the customer. It opens the door for applications and other non-web devices to access the same content the same way the website would. And with the rise of frameworks like Ionic and React Native, it allows us to re-use web tech to easily port to phones. This is a huge priority for startups, who often will target an app launch after launching on the web.
With our structure/stack setup, we turned to design.
UX
We’ve always valued UX as a company and as designers, so making sure we did an excellent job translating Chris’ idea into a solid product was paramount. Our primary goal was to make the site as accessible as possible, since the target market extended into t he 60–85 demographic. This was addressed in three ways —
- We scoped our general aesthetic design. We took elements from Google’s excellent Material Design, which helped inspire the ‘card’ UI we established for Pareto. We also looked at platforms such as eBay, craigslist, and other service platforms to find UX principles people already knew and loved so that we could riff of of them.
- We kept the interactions as simple as possible. At it’s core, Pareto users, once logged in, can reach any part of the website or payment/selling process in two clicks or less. This simplicity meant the website was accessible.
- Testing. We tested out the application with users from across demographics, and worked based on that feedback.
Prototyping
Once we had our UX sussed out, we need to prototype, and fast. The biggest strength of Angular and Node.js (in my opinion), is the speed in which you can prototype. With Pareto, this meant we could create interaction prototypes to test functionality extremely quickly, something that allowed me as a developer to create at a much more rapid pace. Within a single day, I had created most of the routes for the entire application and connected it to a Node.js server and MongoDB. Being able to test an API endpoint from HTML with the dead simple ngModel structure of Angular was a godsend for early interaction testing.
Node.js’s speed of setup is incredible as well. With Express, you can essentially setup your app in four lines:
const express = require(‘express’)
const app = express()app.get(‘/’, function (req, res) {
res.send(‘Hello World!’)
})app.listen(3000, function () {
console.log(‘Example app listening on port 3000!’)
})
This rapid prototyping capability meant we hit the ground running and saved valuable time at the project start.
Product Development
SEO
Once the product was developed and tested, we needed to make sure it could be shared and found. Social media is the primary avenue of discovery for many users, so we needed to make sure it looked and worked stellar. To that end we targeted three SEO avenues and made sure they looked and read fantastic:
- Facebook Open Graph
- Twitter Card API
Of course, with an an Angular front-end, we needed a way to render our content for crawlers, especially for Facebook and Twitter (Google’s crawler can now render JavaScript, hooray!). For that, we turned to prerender.io, which easily served up our pretty cards for social media.
Final word
Overall we are very happy with the outcome of Pareto and the tools and process we developed, but more importantly, Chris was:
My experience with [Field] was nothing short of exceptional. Not only were they able to capture the vision that previously existed only in my head, but they executed it perfectly and exactly as promised. On top of their work, Jesse and Brett are awesome people and an absolute pleasure to deal with.
If you have a project that deserves the same treatment Pareto received and think that we might be a good fit, visit us over at our website. We’d love to chat.
