How to start working on large codebase
General advice​
First, recognize that you CANNOT understand everything in the codebase unless you have LOTS of time to waste.
Set a specific goal: “I want to understand how a specific feature works!”
- Some front end user interactions:
- I want to understand how we show courses as people type course names/numbers
- I want to understand how we add course to a specific plan (how do we associate a specific course to a specific year)
- I want to understand how we track degree progress and display it
- I want to understand how we check for pre reqs and display warning popups
Second, make a diagram of the user’s journey: What steps does the user take to make a 4-year plan on uCredit?
Example diagram of uCredit user's journey
Third, read existing code with a specific goal from the first step in mind. Or, you could try to find code that generates certain steps in user’s journey from the second step.
More Tips!​
- Ctrl-click on an element in VSCode to find its definition
- Practice top to bottom approach (be able to look at high level feature on website and identify its source code in the codebase)
Top to bottom example
- Practice bottom to top approach (be able to look at any code snippet in the codebase and identify which high level feature or user interaction it generates on the website)
{" "}
Bottom to top example
- Use React Developer Tools
React Developer Tools​
React Developer Tools is a Chrome DevTools extension that allows you to inspect the React component hierarchies. It is very helpful in understanding the React code behind ucredit.me and debugging.
- Install React Developer Tools from Chrome Store.
- Pin it on the Chrome extensions bar.
- Right click on local uCredit website > Inspect > Find Components.
- Click on Components. Now, you will be able to see names of root React components and their subcomponents.
- React Developer Tools is useful when practicing bottom to top approach because you can click on any component in the tree and the high level feature it renders will be highlighted on the website. For example, when you click on YearDraggable, the corresponding year on the plan gets highlighted.
- React Developer Tools also shows props, hooks, relations, and even source file for each highlighted component. For example, when you click on the Semester, you can see its props.
Tips from uCredit senior members​
Matt's Overview of frontend codebase​
(coming soon)
Make your own structure director of uCredit codebase (from Andy)​
- Start with a high level feature/functionality breakdown of the uCredit page. What user interactions occur and where and when do they happen? (For example, a user can add courses (user interaction) on the plan dashboard (where) when they click on the plus sign next to the semester, search for the course, and click add course.
- Open up the codebase and search where the code is located for each feature/functionality. (For example, the files for creating the plan dashboard with years and semesters are located in this directory…)
Example of old structure directory of uCredit (needs to be updated):
Try making your own first and compare it with the solution.
Solution
Andy's Codebase Questions​
How are the Course/Semester/Year components composed in the Dashboard?
Answer
How are components composed in the CourseSearch popup?
Answer
Where is the search logic located? Can you generally tell how the search algorithm works? (challenging)
Answer