Managing React Projects with Github Issues

Erin McNulty — Sun, 04 Oct 2020 18:08:21 +0000

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?

Contributing to n8n through the MLH Fellowship

Erin McNulty — Thu, 20 Aug 2020 20:34:42 +0000

This summer, I was lucky enough to be connected to the Major League Hacking fellowship and contribute to open-source software for 12 weeks this summer. I wanted to share a bit about what I have learned this summer, and I hope that sharing my experience will encourage you to apply for upcoming sessions!

This is the first part of a series about what I have learned this summer, and here I am focusing on my contributions to my open-source project, n8n.

My Project

I was paired with n8n, a fair-code licensed startup providing an easily extendable workflow automation tool.

Initially, my team and I set out to create new integrations (nodes) for n8n in response to requests on their community forums. I created Spotify, Gmail, and ConvertKit integrations for n8n in Typescript, and gained valuable experience working with new API and webhooks services. In addition to creating Regular Nodes (simple API integrations) for all three projects, I also created Trigger Nodes (with webhooks or pooling scripts) for Spotify and ConvertKit.

I also dove into the n8n frontend and laid the groundwork for a feature to prompt users to save their changes before navigating away from their workflow.

Capstone Project

After creating new nodes for the first 8 weeks, my teammates and I realized n8n's standardized method of programming new nodes could be automated. We spent the last 4 weeks of our fellowship creating the Nodemaker, a tool for n8n developers to quickly create new nodes without worrying about the details of node creation and focus on the tricky final steps for each integration.

By automating this process, the Nodemaker frees developers from the work of writing structural code for nodes—especially for various endpoints and request methods—, writing docs for the nodes and generating images for the docs, updating the package.json listing, fixing node formatting issues and enforcing code style guidelines, finding a relevant and properly sized node icon, placing all output files in the official repos, and uploading a sample workflow to the n8n collection. In turn, Nodemaker also frees maintainers from the work of reviewing to ensure that pull requests made by the community conform to the official n8n standards.

I led the user research and frontend development for this project, learning Vue and refining my design skills in the process.

We have launched the Nodemaker and are looking forward to community use and feedback!

Summary

In addition to learning about Typescript through creating nodes, I learned about design, UI/UX, and Vue through ideating, prototyping, coding, and launching the Nodemaker.

I am extremely grateful to MLH for the opportunity to work with n8n, and to the n8n maintainers for their code reviews and feedback on the Nodemaker.

I will be focusing on the incredible mentorship I received through MLH in my next post!

DEV Community: Erin McNulty