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:
Bioledger – A biometric tracking application
Tech Stack / Tools
- Figma – For designing the UI based on hand sketches
- 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
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.
- Design product
- Sketch out the UI on paper including any necessary elements and a basic navigation flow
- Use the sketches as a basis for a more detailed design on a digital design tool (i.e. Figma)
- Develop back end
- Using the designs developed in step 1, map out the data structure for the necessary mongoose Schema(s)
- 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
- Utilizing Next JS, bootstrap a client and add necessary pages, fields and layout components
- Style front-end using CSS modules
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.