Giter Club home page Giter Club logo

gazievri / food-shop Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 322 KB

🍕 Энциклопедия рецептов на React с использованием функциональных компонентов и react-router. Проект выполнен в рамках образовательного курса Михаила Непомнящего.

HTML 6.83% JavaScript 86.67% CSS 6.50%
react react-hooks react-router reactfunctional reactjs rest-api

food-shop's Introduction

🍕 Your Recipes

Проект Your Recipes представляет SPA, которое содержит в себе базу данных с рецептами. Проект выполнен с помощью функциональных элементов React и React Routes. Проект выполнен в рамках прохождения авторского образовательного курса Михаила Непомнящего React для начинающих с нуля.

Описание проекта

Проект обладает следующим функционалом:

  • отображает список категорий блюд на главной странице с использованием The Meal DB API;
  • позволяет осуществлять поиск по категориям блюд с сохраненеим route;
  • позволяет просматривать категории блюд;
  • позволяет просматривать рецепт выбранного блюда;
  • есть возможность возврата назад.

С функционалом проекта можно ознакомиться в видео ниже:

Recipes.mov

Технологический стек и ресурсы

При работе над проектом использовались следующие технологии и ресурсы:

  • React.js;
  • REST API;
  • хуки (useState, useEffect, useLocation, useNavigation, useParams);
  • библиотека css-компонентов Materialize;
  • открытая The Meal DB API.

Работа с проектом

Для запуска проекта, пожалуйста, выполните следующие действия:

  1. Склонировать проект на ваш компьютер с Github с помощью команды:
git clone https://github.com/gazievri/food-shop.git
  1. Установить зависимости:
npm install
  1. Запустить проект:
npm start

Ссылки на проект

Проект доступен по ссылке.

Исходный код проекта доступен по ссылке.

Благодарность

Спасибо большое Михаилу Непомнящему за его образовательный курс по React.

food-shop's People

Contributors

gazievri avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.