Функционал интернет-магазина позволяет пользователям выбирать рестораны поблизости, искать любимые блюда и добавлять их в корзину.

• Авторизация/регистрация пользователей осуществляется с помощью электронной почты и пароля.
• На главной странице представлены функции фильтрации и сортировки еды и ресторанов.

Корзина :

• В корзине блюда разделены по заведениям и есть возможность вводить количество с клавиатуры.
• Данные о заказе сохраняются в хранилище (store) и в базе данных Firebase.

Адрес пользователя :

• Сайт предоставляет функционал для ввода адреса пользователя, что вызывает отображение карты с отметкой указанного адреса.
• Доступна возможность перемещения карты для уточнения адреса и область доставки.
• Реализована возможность использования клавиатуры для удаления введенных данных и перемещения по списку адресов во всплывающем окне.

Реализованные задачи:

• Разработала полноценное фронтенд-приложение на ReactJS
• Создала компоненты, страницы, сортировку, поиск, пагинацию, фильтрацию, popup-окна и т.д.
• Реализовала логику сохранения информации о заказах в базе данных Firebase
• Разработала функционал авторизации/регистрации (Firebase)
• Реализовала строго типизированный код на TypeScript
• Работала с API Яндекс.Карт v2.1, интегрировала карты для реализации основных функций приложения
• Использовала React.lazy и lodash.debounce
• Взаимодействовала с серверной частью, отправляла запросы
• Разработала навигацию по страницам без перезагрузки
• Создала глобальное хранилище данных для всего приложения
• Использовала localStorage для хранения настроек сайта
• Сделала адаптивную вёрстку

Сервис для создания тестового RESTful API — mockapi.io Макет и ТЗ

Технологии:

• React 18
• TypeScript
• Redux Toolkit (хранение данных)
• React Router v6 (навигация)
• Axios + Fetch (отправка запроса на backend)
• React Hook Form (управление формами)
• React Hooks (хуки)
• Prettier (форматирование кода)
• ESLint (выявление, исправление ошибок в коде)
• SCSS-Modules / CSS (стилизация)
• React Content Loader (скелетон)
• React Pagination (пагинация)
• Lodash.Debounce (отсрочка запросов)
• Firebase (Authentication, Realtime Database)
• Code Splitting: React.lazy (ленивая загрузка компонентов)
• useWhyDidYouUpdate (оптимизация производительности)

Подготовка

Перед началом работы убедитесь, что на вашем компьютере установлены Node.js и npm.

Клонирование репозитория

1. Склонируйте репозиторий проекта на свой компьютер с помощью следующей команды:

git clone https://github.com/julia-popova-s/foodwagon_project.git

Для более подробной информации по работе с Git через консоль, обратитесь к статье Работа с git через консоль.

2. Перейдите в папку проекта

cd foodwagon_project

Установка зависимостей

3.Установите необходимые зависимости проекта с помощью следующей команды:

npm install

Запуск проект

4. Запустите проект в режиме разработки

npm run dev

Доступные скрипты

• dev: Запускает проект в режиме разработки с помощью Webpack.

• predeploy: Собирает проект для production-режима.

• lint:fix: Выполняет проверку и исправление ошибок кода проекта с помощью ESLint.

Настройка ESLint и Prettier

Для автоматической проверки и форматирования кода проекта используются конфигурации ESLint и Prettier. Для настройки автоматического применения исправлений при сохранении файлов в вашей среде разработки (IDE), следуйте указаниям ниже.

Visual Studio Code (VSCode):

ESLint:

1. В файле настроек VSCode (File > Preferences > Settings) добавьте следующую строку:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

Теперь при сохранении файлов в VSCode, ESLint будет автоматически применять исправления.

Prettier:

1. В файле настроек VSCode (File > Preferences > Settings) добавьте следующие строки:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
}

Теперь при сохранении файлов в VSCode, Prettier будет автоматически форматировать их в соответствии с настройками.

WebStorm:

ESLint:

В настройках WebStorm перейдите в раздел Languages & Frameworks > JavaScript > Code Quality Tools > ESLint и отметьте опцию "Auto-fix on Save". Это позволит ESLint автоматически применять исправления при сохранении файлов в WebStorm.

Prettier:

В настройках WebStorm перейдите в раздел Languages & Frameworks > JavaScript > Prettier и отметьте опцию "Run on save for files". Это настроит Prettier на автоматическое форматирование файлов в соответствии с настройками при сохранении в WebStorm.

Использование других пакетных менеджеров

Если вы предпочитаете использовать другие менеджеры пакетов, такие как Yarn или PNPM, следуйте указанным ниже шагам:

Yarn

1. Установите Yarn на свой компьютер, используя инструкции из официальной документации.
2. Склонируйте репозиторий проекта на свой компьютер.
3. Перейдите в папку проекта.
4. Установите зависимости проекта с помощью команды yarn install.
5. Запустите проект с помощью команды yarn dev.

Все скрипты остаются такими же, как и в случае использования npm.

PNPM

1. Установите PNPM на свой компьютер, используя инструкции из официальной документации.
2. Склонируйте репозиторий проекта на свой компьютер.
3. Перейдите в папку проекта.
4. Установите зависимости проекта с помощью команды pnpm install.
5. Запустите проект с помощью команды pnpm run dev.

Все скрипты остаются такими же, как и в случае использования npm.

Независимо от выбранного менеджера пакетов, вы можете использовать все предоставленные скрипты без изменений.

Перейдите по ссылке!