How to Contribute on the First Day of a Frontend Project

Eric SK. Cheung

January 4, 2023

Build

Uh… it’s my first day

It’s a beautiful day, birds are singing, and as you’re walking through a park, someone runs up and says, “Hey, help out with this frontend project, will ya?” Such is the life of a software consultant (kinda).

As a consultant, projects may involve a tech stack you’ve never used before or a codebase you’ve never touched before. And although very few projects at Giant Machines are spontaneously introduced by a stranger at the park, any decent consultant, or developer for that matter, should know how to hit the ground running.

An unfamiliar codebase is a new land, an unexplored environment, and there are lots of things you won’t understand. But there are plenty of housekeeping tasks any developer can do to contribute on the first day.

Let’s go over these tasks, which will help you become familiar with the main business logic of the app while making the codebase more robust.

Codebase Conventions

Typography


A typography file is a huge step in standardizing a major styling aspect of a frontend app. Its purpose is to act as a sole export location for text styles, including their font families, sizes, and weights, allowing them to be imported wherever they’re needed.

The designer of the project should have a collection of styles specifically meant to be used throughout the application for every kind of text. As the developer, these text styles should be properly standardized into the application. This way, if designs or the overall app were to change, fonts and sizes can be easily changed in a single place rather than in numerous places throughout the codebase.

export const Text = {
HeadingOne: css`
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 37px;
`,
HeadingTwo: css`
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 29px;
`
}

Colors

Similar to the typography file, a colors file provides access to the entire color palette the application uses. Every gray, off-white, or specific hex code of the company’s brand colors should be standardized here so there are no mixups, enforcing uniformity. Ask the designer for the color palette they intend to use.

But, what if the designer doesn’t have typography or a color palette ready yet? What if there is no designer? No need to fret. Have a typography and color file set up and ready for exporting, and add the fonts and colors when they’re ready. Look through the codebase to see what colors or font style sets are currently being reused, and see what can be consolidated.

export const Colors = {
CoreBlue50: '#E6E8F4',
CoreBlue100: '#CCD0E8',
CoreBlue200: '#99A1D1',
}

If you need to set up initial colors to get things rolling, take a look at coolors.co to generate some possible color palettes!

SVGs

SVGs are incredible. They’re simple, fast, and can be implemented in a million ways, which is part of the problem. In any new or even old codebase, there might be several variations of SVG implementation throughout the project. It can be helpful in any codebase to standardize the method, especially since there are pros and cons to each one. Speak with the tech lead or open a conversation with the team as a whole, and determine which method works best for everyone.

Check out these articles for various SVG implementations!

The Best Way to Import SVGs in React

How to use SVGs in React

Testing

Jest, React Testing Library, Mock Service Worker (MSW)

Not only do tests ensure a robust codebase, but writing them allows the developer to get familiar with existing components and their business logic. Add some simple Jest and React Testing Library tests to check that UI components are rendering properly and user actions are firing correctly.

Adding Mock Service Worker can also be a great addition not only for current or future testing, but for a proof-of-concept or MVP with a backend that is not quite ready. MSW intercepts fetch requests and allows insertion of mock sample data, allowing a complete imitation of API capabilities. With this, all tests and even the prototype of your application can be presented with full functionality without needing to hit a backend API.

Testing is by far the most expedient way of understanding a component’s business logic, so if that’s the priority, make sure to start with testing!

Complete Guide to Unit Tests with React

A Comprehensive Guide to Mock Service Worker

Using Mock Service Worker to Improve Jest Unit Tests

Development Environment

ESLint & Prettier

If the project currently doesn’t have any linting rules or Prettier formatting, speak with the tech lead and offer to set it up! Add ESLint and Prettier config files, and decide what rules work for the team. Is everyone fine with Airbnb linting rules, or maybe just some proven favorites like no-unused-vars or exhaustive deps? Semicolons or none? Make sure the team comes to a consensus.

Something else to consider is applying linting and formatting before every git commit. A package like Lint-staged only lints and formats on staged items, ensuring all pushed code follows the standards in the repo. This allows developers to have their own formatting preferences when developing, while the code homogenizes on push. Linting pre-commit also avoids strict rules like no-console or no-unused-vars restricting a developer when writing code, when it should only apply in production. Imagine not being able to console log anything during development!

Config ESLint and Prettier in Visual Studio Code for React.js Development

Setup ESLint and Prettier in Your React Project

Husky

Husky. Literally.

I’m sure you know Husky; it’s on basically every project. Pre-commit hooks are important for the development process of any codebase and ensure code meets a standard before being pushed up. This is the perfect time to perform certain actions, like running unit and integration tests, to make sure your latest code changes don’t break anything. It’s also a good time for running linting and formatting to match the standards of the repo. If Husky isn’t there, add it!

Check out this blog, Releases the Easy Way, for other pre-commit methods to try!

Set up ESLint, Prettier and Husky in a React project | a step by step guide

PR Notifications

Your pull request is ready but you’re not sure if anyone has noticed. A very common practice is to have a channel on the team chat platform set up specifically for GitHub or Jira messages. If there isn’t one already, suggest it to the tech lead and start hooking it up with GitHub to drop a notification for new PRs or merges. Adding a Slack or Microsoft Teams GitHub integration is pretty straightforward, but often just overlooked when the team is on crunch time. Similar integrations exist for other version control providers like GitLab and Azure DevOps.

Github + Slack integration

Codebase Housekeeping

Frameworks & Libraries

A lot of proof-of-concept and MVP projects start out with a number of libraries meant to be temporary. Maybe the app was using Chakra UI for its modal and custom buttons, while the rest of the imported library is just dead weight. Perhaps developers have been spending more time adjusting Semantic UI’s styling to match the designs than it’s worth.

Before these libraries become too embedded in the app, speak with the tech lead and the team and hear everyone’s opinion on the app’s eventual goal. If some libraries can be dropped, you can be a great help in slowly refactoring these components. Start stripping out the library’s usage piece by piece to carefully avoiding any breaking changes, and you’ll also gain exposure and insight to vital components.

Reduce Clutter

You’re looking through the codebase to get acclimated, and you stumble upon a glorious 500+ line component. It has everything it needs to succeed, but it’s horrible to read and a bit convoluted for anyone’s taste. Examine all the functions, variables, types, and hooks, and see what you can pull out and relocate. If there’s one too many helpers, put them into a utils folder. Toss types and interfaces into a types folder, and put all hooks and states that work exclusively with one another into a custom hook.

Reusing Logic with Custom Hooks [React Docs]

Conclusion

It’s perfectly normal to feel overwhelmed by a new project, but part of being an experienced developer is knowing how to hit the ground running. Any of these tasks can be a great first step to learning the ins and outs of the codebase, while contributing to the team’s vision. So get out there and make some changes!


About the author

Eric SK. Cheung

Giant Machines Team

SHARE VIA

Stay in the loop

Keep up to date with our newest products and all the latest
in technology and design.
Keep up to date with our newest products
and all the latest
in technology and design.

Other blog posts

Helping to Change the Face of Fintech

Giant Machines leads FinTech Focus – a program designed for rising first year college students who have an interest in finance, computer science, and technology.

Enablement, Upskilling, and the Meaning of Learning

The foundation of Giant Machines is in learning, education, and growth, whether that's for software engineers or developing other helpful skills. Here's how it helps us—and our clients.

How We Celebrated Our Company Culture with Giant Machines Week

Giant Machines week celebrates our company's community and culture with presentations, workshops, and a yacht ride around the Hudson River.

Company

Learn more about us here at Giant Machines and how you can work with us.

What we do

We leverage best-in-class talent to create leading edge digital solutions.
services

Innovate

Know your next move

Build

Develop beautiful products

Learn

Enrich your tech knowledge

Our work

Learn more about our partnerships and collaborations.

Our perspective

Stay up to date with the latest in technology and design.

SUBSCRIBE