Stink Studios and Chobani launched the new to coincide with the yogurt's rebrand at the beginning of 2018. Because the project was so large in scope, the front end dev team's first priority was to work closely with designers to define a style guide with a grid system, type sizes and components across 5 breakpoints.

Part of the client's requirement was to have flexibility with page layouts and to be able to easily make periodic updates to the site's content. The Stink team development a system of page templates and customizable modules that uses data pulled from a Contentful CMS. The developers worked closely with the UX and design teams to define more than 10 customizable modules that the client could add, delete, reorder and swap within each page's template constraints. Each module was built as its own React component, and each had its own customizations, like optional SVG frames or images, or positioning the text on the right or left.

On the backend, Stink's internal tool pulled data from the Contentful API into static JSON files and uploaded them to an S3 bucket. The front end could then consume this static data instead of requesting data directly from the API. The site also used a number of external APIs like JobVite, MailChimp and Destini.

Front end stack: React, Redux + Reselect, Immutable.js, Post CSS + CSS modules, compiled with Webpack and Babel.

More information and an in-depth technical overview can be found here.

The new site includes a section for recipes that users can filter by tag.

Careers page with data pulled in from the JobVite API.

Carousel component with optional SVG frame.

Header component with optional SVG frame.

An article component with text placement and frame options.

Hello! I'm a front end developer with over 10 years of experience.

I live in New York City where I freelance, draw, make animations, play guitar and fiddle with the knobs on my synths. I also teach interaction design and coding to second year BFA students at Parsons School of Design. Please email me if you'd like to work on something together :)