This is a walkthrough detailing how to create a single paged software application in which our stand in for a real world product is going to be a fun exercise displaying a catalog of Star Wars planets. In addition to the fun aspects of animating planets, our development process, will include implementations for two different business models.
By the end of this journey, we will have lleveraged a large number of digital tools & Resources..
Digital Tool List:
- Sketch
- SCSS
- JavaScript
- Webpack
- React.js
- Excel
- IaaS
Most of those tools are for pixel pushing. While some have to do with business logic. And only a few are for running the product.
Development Timeline
An outline of basic steps:
- Deliverable/Actionable Brainstorming
- Setting up Infrastructure for continuous and piecemeal improvements.
- Development & Iterative Feedback
- Research & Optimization & Growth
Our development timeline will go something like this. Initial conception, followed by iterative brainstorming.
Once we have a good handle on defining the design direction we will be focusing in parallel on two types of tasks:
One being grunt-esque work such as scripts for build, testing and deployment; Project Documentation for code; And other business forms or legalese.
In parallel, on the other side we will be doing the fun stuff. Actual iterative development. This includes implementing UI’s, business logic, and product features.
Going a little bit more specific, we will be building out our website front-end mostly leveraging React.js and the javascript ecosystem around build its tools, I will go into the reasons as to why, later. Next, our stateless app will be served up as lightweight static site using a simple golang server. Again, the rationale on this choice I will go into later.
For this specific tutorial I’ll be using Sketch by Bohemian, to build out interesting interactive planets and animating them with CSS.
Whats Covered In Here
I’ll be covering numbers 2 & 3 today.
- Setting up Infrastructure for continuous and piecemeal improvements.
- Development & Iterative Feedback
Read through to the end for the other sections.
Setting Up Infrastructure:
- build scripts
- folder structure