Demo : https://foodwithhappiness.netlify.com/
Displaying a list of restaurants with a sort functionality
- Display all fifty restaurants with at least three fields in a Wolt restaurants json file.
- Make a web page responsive to different screen
- Sort restaurants alphabetically in ascending and descending order
- [Bonus] Render the blurhash data
- Displayed fifty restaurants information(name, description, image, delivery price and tags)
- Made a responsive web page
- Made an alphabetical sort functionality for sorting restaurants
- Displayed a skeleton screen with a contents loader when all the data is loading
- Displayed the blurhash as a placeholder when images are loading
- Tested types with Typescript and test sortArray & formatCurrency with Jest
- Clone the repository git clone https://github.com/flyjwayur/foodWithHappiness.git
- Navigate into the directory cd foodWithHappiness
- Install dependencies
yarn - Start the project with
yarn run start
- Format with prettier :
yarn run format - Lint with ts-lint :
yarn run lintoryarn run lint:ts - Type check with tslint-config-prettier-check :
yarn run tslint-check
- Default test with jest :
yarn run test - Test with jest watch more :
yarn run test:watch - Update a snapshot test:
yarn run test:watch+ukey
"react", "typescript", "jest", "styled-components", "blurhash", "storybook", "ts-lint", "prettier"
- Displaying/Sorting data clear
- Coherent design token(color, layout, space and typography) with the Wolt design
- Responsiveness to different screens
- Static type checker and functionality test
- Organized file structures
- Comments about implementation reasons
- Search restaurants
- Filter restaurants with online possibility
- React Component test with Jest (Some components has component tests + snapshot tests)
- Component driven development with Storybook (Storybook needs to be configured more with TS)