Toucan Recipes

🧾 Recipe App | Voyage-20 | https://chingu.io/

A minimal recipe web app that helps you choose a meal from a gallery of recipes, built by a team of 🐦s using React & Gatsby!

Features

⚡ Styled w/ Chakra-UI & Emotion css

⚡ Fully responsive

⚡ Instantaneous recipe search w/ Lunr

⚡ Optimized SVG traced images w/sharp

⚡ Meal category, type, & difficulty choices

⚡ Easy content template format w/ MDX

See it live!

How to Deploy

Clone the repo and deploy with Netlify. It's as simple as that! See how to create deploys.

The 🐦 Team & Testimonials

Fang🦁 (armchair-traveller)

Chakra-UI was a real treat to work with! This was the first opportunity where I found a real need for React Context, as without it I would've had to update 58 MDX files passing the same prop... Pandemonium! I also learned a ton about the Gatsby workflow & GQL.

dmedford

This was my first experience working on a development team and it was a great one. Working together with other developers in an invaluable experience if you are looking to grow. I also learned a lot about working with the React framework and Gatsby.

shangshang (zhishang-ca)

At first I was suggesting use Bootstrap and Vanilla JavaScript. But I was wrong until I touch Chakra-UI and React, both of them can really simplify the process and save tons of time.

Technologies Used

Web Framework: React

• The continuously improving widely used & battle tested UI library

Framework: GatsbyJS

• Modern React SSG with huge plugin ecosystem, great community, and a GraphQL data layer. Many optimizations built-in and enabled by default.

CSS-in-JS: Emotion

• Basically styled components but smaller and more performant

UI Framework: Chakra-UI

• Simple component library that can be described as a mishmash of Emotion, Theme UI, and Tailwind. Has accessibility in mind. Highly customizable/composable, responsive, and quick to work with.

Deployment: Netlify

• Modern static site host, easiest deploys, spreading the JAMstack. CDN, plugins, built-in git CI/CD workflow, and much more features automagically included. Generous free tier.

Dev Dependencies & Tooling

Formatting and linting:

• Prettier, ESLint w/ minimal React ruleset

Package Manager: npm

Project Management

Notion

• Collaborative all-in-one workspace. Nested page structure based notes, wikis, docs, databases, calendar, and more. Uses markdown shortcuts and WYSIWYG.

Acknowledgements

Fang🦁

I'd like to give credit where it's due. Thank you dmedford for working on the brunt of the search implementation, it was a lot of work that wouldn't have made it in otherwise! Thank you shangshang for the designs, layout, and content sourcing. I only realized how time consuming it was to find all those recipes after I began importing them through our content mesh!

dmedford

Big credit to Fang for serving as a dual role developer and project manager. It was a lot to take on and without it, we would not have completed our project. Credit to shangshang for the design and layout work as well. The project looks great and he was a major part of that.

shangshang

Thank you Fang for setting up all the documentation and giving lots of suggestion for coding. The documentation is really spent effect in it and really can help to step through the whole project. And thank you dmedford to figure out the searching function which I think it was the most difficult part for the project.