NFL Flag is one of the largest youth flag football organizations in the country with over 1,000 individual leagues. They sought to replace their existing web application with a new React frontend that would interface with several of their existing tools and backend services. The application needed to serve as a tool to meet the needs of league organizers, coaches and parents with role specific interfaces. I served as the frontend lead on a distributed team to build out the project. I was responsible for all the frontend components involving user account authentication, account creation, and account migration from the legacy system.
The React frontend was built mostly with functional components using observer patterns for component communication. Being a mid-sized distributed team, we needed to keep data structures consistent so we utilized Typescript on both the frontend and backends. The frontend consumed over 20 APIs, so one of my earliest tasks was reviewing the system’s Swagger docs and using Axios to write promise-based API abstractions for the rest of the frontend team to use. I also worked with the project’s architect to define implementations of business requirements.
While applying the design system to the app, I built out a boilerplate leaning heavily on Bootstrap to give the frontend team a readable and predictable style system of grids, form elements, and larger UI components. I led a large refactor midway through the build that cleaned up large portions of the codebase while updating the app to React Router 4 using dynamic routing. During this time, I also helped the backend team define changes to data structures and write API tests using Mocha and Chai.Back