As a web developer, I am constantly looking to improve my skills. I’ve completed a full stack boot camp, followed dozens of tutorials, and built my own projects from scratch. As my skills have developed certain things have come into focus. Firstly, I know where my strengths lie; organizing code in a readable and maintainable codebase is a borderline obsession for me. I like small, modular components that keep individual files to a manageable size. React is a framework I have genuinely come to love. It has provided me with a much greater competency in “vanilla” JavaScript and a practical, consistent path to rendering my vision in the browser. Node.js was a struggle to get comfortable with at first, but building simple API’s has given me a much deeper understanding of how the web works as a synergistic system of front-end views and back-end models and controllers.

I am also more aware of my weaknesses. At the top of that list is as a designer. Like many developers, I like to explore new ideas and tools but sometimes that case of “shiny object syndrome” will keep me from completing or even making progress on a project. Often I will start a project in the code editor. This isn’t always a bad idea, but it does lead to more frustration than would be necessary had I started with a design and “roadmap” through the development process. My dev directory is full of abandoned, half-baked projects.

After taking some time to analyze these strengths and weaknesses, I decided to try and shore up the weaker parts of my skill set and start a new project where I follow a specific development process. I also wanted to document this process in hopes that it will keep me accountable to finishing the project and hopefully be of value to others.

Here’s my plan:

Project Name

Bioledger – A biometric tracking application

Tech Stack / Tools

• Figma – For designing the UI based on hand sketches
• Node JS – JavaScript runtime for web server
• Express – Node framework for building a web server
• MongoDB – Relational database for data storage
• Mongoose – MongoDB framework for building REST API
• React – UI framework for front-end client
• Next JS – React toolkit for handling routing, image optimization, and server-side rendering of static data

User Story

As a user working to become healthier, I want an application where I can log in daily and easily track my weight and blood pressure readings. I also want to see my progress displayed in easy-to-read charts.

Development Process

• Design product
  1. Sketch out the UI on paper including any necessary elements and a basic navigation flow
  2. Use the sketches as a basis for a more detailed design on a digital design tool (i.e. Figma)
• Develop back end
  1. Using the designs developed in step 1, map out the data structure for the necessary mongoose Schema(s)
  2. Build a node.js express server that handles an API for the MongoDB database using Schemas and controllers informed by the previous step
• Develop front-end client
  1. Utilizing Next JS, bootstrap a client and add necessary pages, fields and layout components
  2. Style front-end using CSS modules

Initial Sketches

There’s a reason I like to be creative using digital tools. I am certainly not a visual artist. However, I’ve been following a design course on Udemy that recommends beginning the design process with sketches and so I’m following their advice. Below are my (very) rough drafts of the UI for this project.

This process is subject to change. I’ll do my best to explain my thoughts as I work through the steps and if you have any suggestions, feedback, or questions please connect with me on Twitter and I’d be grateful for the advice and be happy to help.

Originally published on my blog at jondeavers.net