Skills & Tools
- Front End Development
Client
- CNN
Overview
CNN has a vast repository of knowledge on the electoral history of the United States that shows the players, the polls, and other critical information known as the Data Cloud.
Tech Overview
On this project, we created a user facing application that represented information accessible within the Data Cloud API. Using GraphQL queries, CNN could query data or build custom internal applications like the Magic Wall that appears during every major election cycle. This data and it’s relationships are represented through a GraphQL database. Developed using React, the front end application queried the Data Cloud API using GraphQL queries, and formatted the data on the front end.
Product and Design
The project was built with a hierarchical navigation that allowed a user to drill down on various topics to explore: Elections, People, Polls, Organizations, Places, and Demographics. Each of these pages was built with various React components, including map displays, tables, and graphs that showed information like polling and election results. We also included a component that allowed users to use GraphQL queries to explore the data more or use it within their own initiatives. All of these components were designed and styled based on CNN’s branding guidelines.
My Role
My responsibilities on this project could be categorized into two general groups of tasks. The first was building components within a component library implemented in Storybook, which involved creating components using Typescript, CSS modules, properties, and state to manage the lifecycle of the component. Then, these components would be integrated into page templates. These page templates query the Data Cloud API, and display the formatted data. While building out these pages or parts of pages, I worked with back end developers to ensure that the correct data was being passed to the front end.
Additionally, I worked on various tasks involving our authentication solution, Amazon Cognito. I was also responsible for reviewing various pull requests to ensure that the code was clear and understandable.
Takeaways
What was most interesting about this project to me is that it represented a powerful foundation for new initiatives within CNN. Internal apps, experiential data-driven sites, and heavily researched journalism now had a useful reference tool for accessing data quickly and easily.