Side Project Journey Part 3 - Back End Planning

The first two parts of this series were focused on desiging the user interface of my new side project called Bioledger. The first step was hand-sketching the UI elements on a sketchpad. The sketches don’t look great but they did give me a clear plan for what I needed to create on the screen. The second step was to translate those hand sketches into a digital version that gave me a representation of what the final project would look like on a mobile device. Figma and its community-built tools made that process relatively easy. Now I have some solid reference points for beginning the actual development process. I feel good about where I am in the process so far but a couple of things have changed from my original plan. Let’s take a look at the original outline from part 1:

• Design product
  1. (complete) Sketch out the UI on paper including any necessary elements and a basic navigation flow
  2. (complete) 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

Process Modifications

This was a great outline to get the ball rolling, but as I’ve spent more time thinking about the code I’ll need to write I’ve decided there’s a couple changes I’d like to make. Firstly, step 1 should be more accurately labeled “Design User Interface” since that step was focused just on UI and not on the architecture of the codebase. That’s an easy change.

Next up is in step 2 where I’m missing a couple key steps that I think will be helpful in the development process. The second sub-step in my outline is a little too broad. I’d like to get a little more granular with the back end design process. Also, I’d like to pseudo-code each of those sub-steps in the code editor so that I’m being more deliberate with my planning both inside and outside the editor.

Lastly, in the third step, I’ve decided to not use Next JS as a React framework. Next is a powerful tool and comes with a large amount of powerful features but its primary use is to build and serve statically rendered content from the server. This project will not be hosting any static content and so it will be unnecessary to utilize its most important feature. Also, Next makes handling navigation really easy but I want to really code my routing in a more visible way that gives me easier access to the handling of public and private routes. In order to achieve this I’m replacing the Next bootstrapping with create-react-app and will handle routing with the NPM package react-router-dom instead.

Here’s an updated version of my design/development outline:

• Design User Interface
  1. (complete) Sketch out the UI on paper including any necessary elements and a basic navigation flow
  2. (complete) 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. Code config files
     1. db.js – export method for connecting to database
     2. production.json – json file holding config keys for deployment
  3. Pseudo code the server entry point file (server.js)
     1. Dependencies
     2. Database connection
     3. Middleware initializations
     4. Define routes
     5. Port & server initialization
  4. Pseudo code the routes files
     1. Dependencies
     2. Init router
     3. Define each CRUD route in comments
     4. Write comments as placeholder for the logic each CRUD operation will handle inside the route
     5. Repeat this process for each route file
        • auth
        • metrics
        • users
  5. Code schemas using data map written in step 1
     1. User schema
     2. Metrics schema
  6. Code server & routes according to pseudo comments
• Develop front end client
  1. Utilizing create-react-app, bootstrap a client and add necessary pages, fields and layout components
  2. Style front-end using CSS modules

This is looking a lot more detailed now. The outline will eventually serve as a template for designing future projects once I’ve completed the development process.

Initializing Project Directory

It’s finally time to start working with some files and the code editor! I created a directory for my project and initialized the project with npm init to create a package.json file. From there I installed my list of dependencies (for the back end) in the command line.

My preferred text editor is VSCode so I opened up the project directory and created the files I would need for my server. Here’s a look at my file structure:

According to my development outline, some of my files would be redundant to pseudo-code so I went ahead and coded out the config files (sorry, won’t be sharing those) and my models files.

One of the best features of VSCode is its absolutely massive collection of community-created extensions. These extensions help streamline the development process and add functionality to the core of VSCode’s functionality. I utilize and extension called “Better Comments” to color code comments in my code which is helpful when organizing your codeblocks. You can find it on the VSCode marketplace in the app or on their website.

I pseudo-coded the server.js and routes files using this extension.

Summary

At this point I am ready to code out my routes and server.js file. From there we’ll be able to test the routes in a development environment using the Postman tool. As a side-note, I’d like to say that I had all of this necessary functionality in my head, ready to be committed to comments but that wouldn’t be truthful. I referred back to a project I developed with my team in boot camp that had a lot of this functionality already coded up. Some of it mirrors that project exactly but some I had to modify as I thought about the differences in how this project will handle data. Special thanks to Brad Traversy of Traversy Media for his React Front to Back course available on Udemy. That course provided a blue-print for both of these projects. If you are learning React and need a tutorial, I encourage you to visit his website and check out his offerings.

Next up we’ll be reviewing our development outline again, taking a look at the back end code itself, and testing our routes using Postman.

Comments

[SlothPete7773]

Great series!
As a beginner programmer, I’m having such problem as well, in my case is having no clue at all what to do though I have idea of the project.
Not having a solid plan is really a pain.