As we start this journey together, I thought I'd put together a game plan for how I approach this project, what to expect from each step of the process, and to serve as a reminder if I get distracted along the way. I'll update this page as we go along if any step seems to be dragging on or if I realize I forgot something important alomg the way.

The Project

Create a web application using modern Javascript tools in an iterative fashion, until the application is production-ready and deployed.

Step One: The Bare Bones

We'll create the first iteration of our app using a modern front-end framework, starting with React. This will be a purely client-side version, and to be honest, it'll probably be pretty janky.

Step Two: Style Over Substance

Using the final product from Step One, we'll add styling and reorganize our app to make it beautiful on any device—well, "beautiful." Since having many different options here multiplies the work involved, we'll go through three styling options before settling on one.

  • Vanilla CSS
  • A UI Kit
  • Tailwind CSS

Step Three: Function Over Form

We'll return to the functional side and start adding the parts of web applications that don't get top billing. We'll refine our application, separate our concerns, and prepare for the next step. This is where the scary shit starts, so we'll take it slow and do a lot of unnecessary logging to the console so it's clear what we're adding.

  • Using SSO for authentication
  • Reactive programming and observables
  • Using browser storage
  • Other refinements TBD

Step Four: Datalore

Before we jump to a public-facing app, we'll get down and dirty with exactly what our application will do and what we want (and don't want) people to do with it. We'll also think about our data and how to generate, store, and manage it. We'll compare the different approaches, choose one, and write up a plan. This is where we start to get serious!

  • Key-Value Stores
  • NoSQL
  • SQL (starring Postgres)

Step Five: Protect & Server

We'll split our application into front and back ends (even if that distinction gets lost along the way ... we'll talk about it). We'll take our existing application and move our data to the server where it belongs using NextJS, the meta-framework related to React.

After this step, we'll start alternating installments: One strand will continue with our current app in React, the other beginning a grander vision in another framework: Svelte and SvelteKit.

Step Six: Deploy, Ahoy!

Deciding where and how to deploy our application. More TBD

Step Seven: Stores & Mores

TBD