An open API service indexing awesome lists of open source software.

https://github.com/notacat1/react-stellar-burger

Stellar Burger is a project created to develop a web application that allows users to build their own cosmic burgers by dragging various ingredients. It provides users with the ability to register, create profiles, view order history, and edit personal information.
https://github.com/notacat1/react-stellar-burger

eslint react redux typescript yandex-praktikum

Last synced: about 2 months ago
JSON representation

Stellar Burger is a project created to develop a web application that allows users to build their own cosmic burgers by dragging various ingredients. It provides users with the ability to register, create profiles, view order history, and edit personal information.

Awesome Lists containing this project

README

          

![image](https://github.com/NotACat1/react-stellar-burger/assets/113008873/6c0f114f-600e-452f-a59a-468445cddaca)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)
![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

# Stellar Burger: Космическая бургерная

Добро пожаловать в проект "Stellar Burger"! Этот проект создан для разработки веб-приложения, которое позволяет пользователям собирать свои собственные космические бургеры, перетаскивая различные ингредиенты. Он предоставляет возможность пользователям регистрироваться, создавать свои профили, просматривать историю заказов, а также редактировать свои личные данные.

## Реализованный функционал

1. **Перетаскивание ингредиентов (DnD)**:
- Пользователи могут взаимодействовать с интерфейсом сайта, перетаскивая различные ингредиенты на булочку.
- Каждый ингредиент представлен в виде отдельного компонента, который может быть перетащен на основную область, представляющую собой булочку бургера.
- Пользователи могут переставлять ингредиенты на булочке в любом порядке, а также удалять их, если они передумали.

![image](https://github.com/NotACat1/react-stellar-burger/assets/113008873/a9c34c6c-2638-4b64-bdbd-76c6840226b9)
_Главная страница_

2. **Отображение статусов заказов**:
- После создания заказа пользователи могут отслеживать его статус на странице профиля или на отдельной странице, предоставляющей информацию о заказе.

![Страница с лентой заказов](https://github.com/NotACat1/react-stellar-burger/assets/113008873/feef12a6-e940-4c68-84bc-b1a8b03fdea4)
_Страница с лентой заказов_

3. **Регистрация и аутентификация**:
- Новые пользователи могут зарегистрироваться на сайте, предоставив свои данные, такие как электронная почта и пароль.
- Зарегистрированные пользователи могут войти на сайт, используя свои учетные данные.

![Страница регистрации](https://github.com/NotACat1/react-stellar-burger/assets/113008873/3dee1265-552f-471f-b88c-3eed774975f6)
_Страница регистрации_

![Страница авторизации](https://github.com/NotACat1/react-stellar-burger/assets/113008873/b4df368b-b133-4db8-bac6-58ab2c7568f0)
_Страница авторизации_

4. **Страница профиля**:
- Каждый пользователь имеет свою собственную страницу профиля, где отображается информация о нем, включая имя, адрес электронной почты и личные данные.
- На странице профиля также отображается история заказов пользователя, где он может просмотреть все свои предыдущие заказы.

![Страница профиля](https://github.com/NotACat1/react-stellar-burger/assets/113008873/ad52a187-2ed8-46c9-8c51-973bfac3a01a)
_Страница профиля_

5. **Восстановление пароля**:
- В случае забытого пароля пользователи могут воспользоваться функцией восстановления пароля, введя свой адрес электронной почты и получив ссылку для сброса пароля.

![Страница восстановления пароля](https://github.com/NotACat1/react-stellar-burger/assets/113008873/bf693b8f-e69e-4855-b03f-f683d6850ef2)
_Страница восстановления пароля_

![Страница сброса пароля](https://github.com/NotACat1/react-stellar-burger/assets/113008873/03ba4a19-18c4-4486-b93f-a9ed7e0647d6)
_Страница сброса пароля_

6. **Меню ингредиентов и заказов**:
- Пользователи могут просматривать меню ингредиентов, где представлены все доступные компоненты для создания бургера.
- Меню заказов позволяет пользователям просматривать историю своих заказов, включая детали заказа, стоимость и текущий статус.

![Страница с лентой заказов](https://github.com/NotACat1/react-stellar-burger/assets/113008873/feef12a6-e940-4c68-84bc-b1a8b03fdea4)
_Страница с лентой заказов_

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

## Инструкция по установке и сборке

Эта инструкция предназначена для разработчиков и технических специалистов, которые хотят установить и собрать проект "Stellar Burger: Космическая бургерная" на своем локальном устройстве.

### Предварительные требования

1. **Node.js и npm:** убедитесь, что на вашем компьютере установлены `Node.js` и `npm`. Вы можете скачать их с [официального сайта Node.js](https://nodejs.org/).
2. **Git:** установите `Git` для клонирования репозитория и управления версиями. Вы можете загрузить его с [официального сайта Git](https://git-scm.com/).

### Установка

1. **Клонирование репозитория:** в терминале выполните команду для клонирования репозитория на вашу локальную машину:

```bash
git clone https://github.com/your-username/stellar-burger.git
```

2. **Переход в директорию проекта:** перейдите в директорию проекта:

```bash
cd ваш-путь-к-репозиторию/stellar-burger
```

3. **Установка зависимостей:** выполните команду для установки зависимостей проекта:

```bash
npm install
```

### Сборка и запуск

1. **Запуск локального сервера:** для запуска локального сервера разработки выполните:

```bash
npm run start
```

Это запустит приложение и откроет его в вашем браузере по адресу [http://localhost:3000](http://localhost:3000).

2. **Сборка проекта:** Если вы готовы развернуть проект на сервере, выполните команду для создания оптимизированной для продакшена сборки:

```bash
npm run build
```

Сборка будет размещена в папке `build`.

### Дополнительные команды

1. **Развертывание на GitHub Pages:** Если вам нужно развернуть проект на `GitHub Pages`, используйте команду:

```bash
npm run deploy
```

Это предполагает, что у вас есть репозиторий на `GitHub` и вы настроили его для использования `GitHub Pages`.

2. **Установка Git Hooks:** Для установки `git hooks` (`Husky`) и необходимых прав выполните:

```bash
npm run husky-inst
```

Эта команда устанавливает и настраивает `Husky` для автоматизации проверок при коммите.

Теперь у вас должны быть удовлетворены все предварительные требования, и вы готовы устанавливать, разрабатывать и разворачивать проект "Сайт космической бургерной Stellar Burger".

## Технологии

### Основные библиотеки и фреймворки

1. **React**: JavaScript библиотека для разработки пользовательских интерфейсов.
2. **Redux**: JavaScript библиотека для управления состоянием приложения.
3. **TypeScript**: Язык программирования, расширяющий возможности JavaScript путем добавления статической типизации.

### Инструменты для контроля качества кода

1. **ESLint**: Инструмент для статического анализа кода JavaScript с целью выявления и исправления паттернов программирования.
2. **Prettier**: Инструмент форматирования кода, который автоматически приводит код к установленным стандартам.
3. **Stylelint**: Линтер для стилей, который проверяет CSS/SCSS на соответствие правилам написания кода.
4. **HTMLHint**: Инструмент для статического анализа HTML-кода, написанного на JavaScript.

### Инструменты для управления коммитами

1. **Husky**: Инструмент для предотвращения плохих коммитов и предварительного выполнения скриптов перед коммитом.
2. **Commitlint**: Инструмент для проверки соответствия сообщений коммитов заданным конвенциям.

## Заключение

Если у вас есть какие-либо вопросы или предложения, не стесняйтесь создавать `issues` и `pull requests` в репозитории.

Благодарим за ваш интерес к нашему проекту! 🚀🍔