The "Recipes' World" website gathers recipes using a free The Meal Database. The recipes are divided based on their name, category, ingredients and area. Every recipe on the website consists of the ingredients, instructions (thanks to the marking function it's possible to save the progress of the recipe), recipe's tags and video how to prepare the dish. The blog section consists of example posts with photos, dates, post's tag, the options to like or share the blog post and the comments section with example comments.
The website is supported on every screen thanks to the RDW (responsive web design). The features changes based on the screen resolution (from mobile through tablets to computers).
| Tool | Description |
|---|---|
| React | A JavaScript library for creating user interfaces. |
| Typescript | An open-source language which builds on JavaScript, |
| SASS | A preprocessor scripting language that is interpreted or compiled into CSS. |
| Node Sass | A library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. |
| React Router Dom | DOM bindings for React Router. |
| Axios | Promise based HTTP client for the browser and node.js |
| CSS reset and normalize | A combination of css reset and normalize (available in CSS, SCSS, Stylus and LESS). |
| React Scroll | Component for animating vertical scrolling. |
| Slick Carousel | A fully responsive carousel. |
| React Slick | Carousel component built with React. It is a react port of slick carousel |
| React Player | A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. |
node.js is required to use npm.
git clone https://github.com/Cenora6/Recipes-World.gitto clone the repositorynpm installto install all dependenciesnpm startandhttp://localhost:3000/in the browser to preview the website
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent