The Problem

I am currently starting my first management role as an Engineering Manager at Columbia Spectator, a student newspaper that houses a product engineering division to create useful products for the greater Columbia community. This semester, we are creating a Clubs at Columbia web application and using our typical stack of React, Express, Node, and MySQL. I am in charge of leading the React team-- our aim is to create reusable, clean components to build out the frontend of our application. We have beautiful Figma mockups from our design team and are starting to build the application!

However, I am coordinating a team across various timezones, skill levels, and interests, and so I knew that I had to create a project management system that allowed each engineer to work individually, while still ensuring that our product came together in the end. With this as my goal, I thought about how to leverage Github's incredible project management features in order to ensure that my team could run smoothly.

The Solution

I decided to use Github issues along with their project boards to track my team's progress! I created a Github issue template that contained all of the important information about each component so that our team could break up the project into bite-sized pieces while still ensuring that it came together perfectly!

Here is my template:

Component Description and Screenshot

Include a brief description of the component here, including what page(s) it will be on, along with a screenshot of the component from Figma.
Description:

Screenshot:

Props and State

Note what props will be coming into the component, and what state it will have. Remember to reference React's instructions on how to figure out what state/props should be. Aim to make the component as flexible as possible-- we probably should not be hardcoding in content and instead pass it in as props.

Props:
State:

Parents and Children

You do not need to list parents and children all the way through the component tree, but it is helpful to know what the direct parent(s) of each component is so that we can get a big-picture understanding of how the data-flow will work in our application. Feel free to link the issues that contain the info about each referenced component as well!

Parents:
Children:

Styling Notes

While looking at the component in Figma, note any pieces of styling that you might need here by checking out the CSS preview:

/* fonts */
font-family: Roboto;
font-style: normal;
font-weight: 500;

/* colors */
color: #9A9A9A;
background: #FFFFFF;

/* borders and shadows */
border: 2px solid #EC6C52;
border-radius: 5px;
box-shadow: 2px 10px 30px rgba(0, 0, 0, 0.05);

Remember not to copy any hardcoded positioning and size values.

Additional Notes

Are there any icons you will need? Images? Written content? Note that here so that we can get it from Product Design before we start!

Feedback?

I would love feedback on my React component template! How have other managers of React projects organized their team, especially remotely?