Hi *waves* , this is my solution to the Marley Spoon Frontend Engineering Challenge.
In terminal run the following command:
docker-compose up --buildThis will run a production build of the app on http://localhost:3000
In terminal run the following commands:
yarn
yarn startThis will run the app in development mode on http://localhost:3000
Cookbook is a two page app.
The first page is a list view of all the recipes. When you click on a recipe you're navigated to the second page which is a details view of a recipe.
The recipe pages have the recipe id in the url to support easy sharing of the recipes with other people.
- Display a preview of all recipes, including:
- Title
- Image
-
Display all the data for a recipe:
- Title
- Image
- List of Tags
- Description (with Markdown rendered)
- Chef Name
This is a React with TypeScript project that was set up using Create React App
Api.ts is home to all the API calls made to the Content Delivery API
Cookbook.tsx and Recipe.tsx are the two main components
App.tsx is the core component which handles routing between the two main components
App.css holds all the styling for the app
Run the following command to run the unit tests:
yarn test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
I used Storybook to showcase the components in different states such as when an API call fails.
To launch Storybook run this command:
yarn storybook
- More unit tests!! - I have only written a few tests for the main app. Ideally I would add tests for every component.
- Find a better home for the Contentful API keys to avoid committing them to the repo and passing them to the client.
- Responsive design for different devices, screen sizes and browsers. I primarily built the app on my laptop, testing in Chrome and Firefox.
- Error reporting to monitor client side errors
- Split the css out into individual files for each component