CSS and React

WordPress meets React.

Architectural Systems, Inc. (ASI) is a leading global resource for innovative, distinctive and sustainable interior finishes. They wanted a WordPress Ecommerce site using Gutenburg blocks.

React

This was my first large project using ReactJS. This site is a headless WordPress project, the backend was a GraphQL api that connected to the WordPress database and the front end was fully react. Throughout the course of this project I created React components that implemented GraphQL queries and mutations. I learned how to manage state and why sometimes React’s context feature is needed. Overall this site helped me understand the power of frontend libraries like React vs plain JavaScript.

CSS

My job was to style the site using Emotion. It made it easy to write reusable css with React. This was a very big step for me as I had to learn about GraphQL, styled components and React all at once.

Gutenberg Blocks

Throughout the course of the project we developed a way to use our existing React components inside WordPress’s new editor, Gutenberg. This made it so the client could add any functionality to any area of their site while maintaining full control over customizing in each block. This is yet another thing I had to learn on the project which was surprising considering Gutenberg wasn’t fully released at the time. It was a really cool experience learning so many different technologies.