Epicurious has had recipe box functionality on their site for a long time. This project was an ambitious one to migrate off a former 3rd party recipe box database and API to a new service built in-house by Conde's Co/Lab tech team. The old recipe box service was OK, but its former roots as a 3rd party tool caused maintenance issues because it was a bit over-engineered. Initially written to be a generic and universal (cross-site) service to store recipes, it had a complex table structure and used a micro-service approach to its API calls. You end up being afraid to touch the code because there's all of these intertwined dependencies and nooks/crannies that you don't understand - better to just leave the thing running and hope it doesn't break. That mindset makes the app stale as no new features are added.
So with a cleaner recipe box API available we then worked on rebuilding the web app to hit this new service. This project was my first experience using Redux with React. In the past we had used Fluxible, but soon soured on it due to the lack of documentation and lack of support in the community. We moved to Redux since it is now the de-facto standard for React app frameworks. There was a big learning curve, but it was easier to pick up compared to Fluxible due to the support available and the excellent documentation. Getting our heads around flattening data structures for use in reducers was probably the trickiest part and we haven't fully normalized the data so there's still some nested object properties we need to go back and flatten out.
Besides the flattening of data, the rest of the project came together pretty easily. It worked well to divide components up into presentational vs. container components. It became a bit tempting to connect everything to the Redux state to grab data rather than passing down specific props. Coming from a Fluxible world, you can access the stores via the context getStore, but the negative of that is that your child components are now tied to the Fluxible framework. Setting up more presentational components lets us hopefully re-use them if we decide to swap out Redux in the future.
Visit live site (requires free Epicurious account)
