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
- 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
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
Top comments (3)
Hey Jon,
I read your post and I have to say that you have such a great idea to improve your skills, well if you are planning to work on this project with someone else I'd love to give it a try and work with you.
Keep working, Improve yourself 👐🏻
Thank you Yasser! It's been really helpful to design and implement the process but also to document it using the blog posts. My natural instinct is to bounce from task to task but that is a recipe for a lot of bugs and lost productivity. This has helped me stay focused and organized. I'm glad you got something out of it.
Once I have the git repo initialized and the MVP completed I'll be making the repo public so follow me on GitHub and I'd be happy to have some help taking it from V1 to V2. My GitHub profile is: github.com/lucsedirae
Thank you for the kind words!
Okay man, I wish you good luck nd I already followed you.