A website where people can find recipes, and also search them based on different criterias. 🥰
My primary goal with this project was to work with React and apply various things I've learned from the course Epic React.
I also worked with TypeScript and wrote tests, E2E with Cypress and Integration with RTL, I also used MSW to mock the requests in my integration tests.
After finishing this project, I consistently came back and made it more inclusive, considering I had a 3-month deep dive into Accessibility after the first finished version of this project. That is why the hook useHeadingFocus exists and other solutions that have made this web app more inclusive.
After cloning the project, you need to run npm install.
This project uses three environment variables, one for URL, one for the API id and key 💖.
Create a .env.development.local and a .env.test.local file in the root folder.
It should have two environment variables:
REACT_APP_API_URL=https://api.edamam.com/search
REACT_APP_API_KEY=YourApiKeyFromEdamam
REACT_APP_API_ID=YourApiIdFromEdamam
The key and id come from https://developer.edamam.com/edamam-docs-recipe-api, there you need to create an account in order to get your API key and id 😝.
- Building: React, TypeScript & Styled-Components 😎
- Integration Tests: Jest and React Testing Library 💙
- E2E Tests: Cypress 🤘
- Developing components in isolation: StoryBook 🔥
- Mocking Requests in Tests: Mock Service worker (MSW) 😄
Built by Tiger Abrodi under MIT license 💕.