Welcome to the Codebase!
Let’s try not to get lost…
So you joined a new project, congratulations! The idea is great, the team seems cool, and the stack is challenging but manageable. The downside? This project is at least partway built out and none of the code has been written by you (not yet at least). What’s a newbie to do?
The goal is to quickly familiarize ourselves with exactly what is happening in the code in as little time as possible so we can get to the fun part and start helping to build this thing!
Below is a walkthrough detailing my process for setting up, running, and interacting with a front-end web codebase for the first time.
Set It Up
1. Pull the code
First things first, no coding is getting done without us having our very own copy of the exiting code on our local machines. Head over to the Github (or whichever other version control system) repository and clone the code. After pulling it onto your local system, we are ready for the next step.
2. Install dependencies.
Ruby/Rails has gems, JavaScript frameworks have NPM packages, most code relies on lots of other code to run so let’s make sure we have all the required dependencies. Usually this is as simple as running a package manager install command yarn install, npm install, bundle install. If there are other packages not included in the package manager file you may need to run additional install commands in the terminal for those other packages (these are usually found in the documentation).
3. Run project
Time to see what this baby can do! First launch the backend so we have access to all the necessary data. Next, run the front-end start command (usually npm start or yarn start) from the terminal and head on over to the browser to check it out.
Take a Tour
Now that everything is up and running, we can take a look around. If this project has a front end interface that is built out enough to interact with, start playing around with it. Find the quirks, maybe some bugs, try to get a vision of what the final product could be.
This is actually a crucial and super valuable moment to the project lifecycle as a whole. A fresh set of eyes looking at the product for the first time can bring a new perspective and may be able to catch little details that the people who have been staring at it for hours and hours have maybe inadvertently overlooked. Enjoy the power! Take lots of notes and share them with the team.
Now for the code itself.
Let’s look at the file tree, open all the folders and see where everything lives, how the files are structured. We can think of the folders like markers on a map, they are guide points that indicate major areas of interest. The files are roads to somewhere or destinations in towns and cities.
Whomever set this up likely (hopefully) did so in a way that makes sense to them. It may or may not be the way you would ideally like to have it structured so get familiar with their method, it can only make your life easier.
It’s time to venture inside the files and examine the code. Where to start? From looking through the file structure, we should have something of an idea of how all the pieces of this puzzle fit together. Find what you believe to be a high level or parent file and then follow the maze of imports and require statements. For example: if this were a React project, I would recommend starting at the top level at index.jsx and moving down through the child components in that way.
As you’re reading through the code, try to visualize what each section of code is trying to accomplish. Once you have an idea, go back to the live app in browser and see if what you expected actually occurs. Maybe now we can see the exact spots in the code that are causing any bugs we noticed earlier!
This stage of the familiarization process will be the longest because we need to work with all of the code extensively to really understand the nuance and be able to be the best developers possible. However, hopefully we’ve drawn a pretty good mental map of the terrain and can navigate to places we want to go!
Good luck and have fun!
