https://github.com/notacat1/algososh
Welcome to the MBOU ALGOSOSH Fibonacci project! Join us in creating a visualizer that animates algorithm steps, enhancing your understanding and skills in programming and animation.
https://github.com/notacat1/algososh
algorithms react ts
Last synced: 16 days ago
JSON representation
Welcome to the MBOU ALGOSOSH Fibonacci project! Join us in creating a visualizer that animates algorithm steps, enhancing your understanding and skills in programming and animation.
- Host: GitHub
- URL: https://github.com/notacat1/algososh
- Owner: NotACat1
- Created: 2024-04-14T10:58:14.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T13:00:56.000Z (almost 2 years ago)
- Last Synced: 2025-09-01T03:15:56.022Z (9 months ago)
- Topics: algorithms, react, ts
- Language: TypeScript
- Homepage:
- Size: 4.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Проектная работа. МБОУ АЛГОСОШ им. Фибоначчи
Добро пожаловать в проектный репозиторий МБОУ АЛГОСОШ им. Фибоначчи! Здесь мы рады представить вам уникальную возможность: создание визуализатора алгоритмов, которые вы изучаете в течение месяца. Наш проект направлен на разработку инструмента, способного демонстрировать работу алгоритмов через анимацию и последовательное отображение шагов, что позволит вам более глубоко понять каждый этап их функционирования. Благодаря этому подходу вы сможете не только улучшить свои знания в области алгоритмов, но и развить навыки программирования и анимации. Давайте вместе создадим инструмент, который сделает изучение алгоритмов увлекательным и наглядным!
## Реализованный функционал
### Строка
Модуль для визуализации операций над строками. Включает в себя отзеркаливание строки относительно ее среднего символа. Пользователь может наблюдать, как каждый символ перемещается относительно среднего символа строки, создавая эффект отражения.
### Последовательность Фибоначчи
Визуализатор для генерации и отображения последовательности чисел Фибоначчи. Позволяет пошагово продемонстрировать процесс формирования последовательности, начиная с первых двух чисел и последующего добавления следующего числа путем сложения двух предыдущих.
### Сортировка массива
Модуль, позволяющий визуализировать различные алгоритмы сортировки массива, такие как сортировка пузырьком и сортировка выборкой. Пользователь может наблюдать пошаговое изменение порядка элементов массива на каждом этапе сортировки, отслеживая перемещение и сравнение элементов.
### Стек
Инструмент для визуализации структуры данных "стек". Пользователь может добавлять и удалять элементы из стека, а также наблюдать изменение его состояния на каждом шаге операции. Стек работает по принципу Last-In-First-Out (LIFO), где последний добавленный элемент будет первым, который будет удален.
### Очередь
Модуль, который позволяет визуализировать работу структуры данных "очередь". Пользователь может добавлять элементы в очередь, извлекать их и наблюдать, как очередь изменяется с каждой операцией. Очередь работает по принципу First-In-First-Out (FIFO), где первый добавленный элемент будет первым, который будет извлечен.
### Связный список
Инструмент для визуализации работы связного списка. Пользователь может добавлять, удалять и изменять элементы списка, а также наблюдать, как связи между элементами обновляются после каждой операции. Связный список состоит из узлов, каждый из которых содержит элемент данных и ссылку на следующий узел в списке.
## Инструкция по установке и сборке
Эта инструкция предназначена для разработчиков и технических специалистов, которые хотят установить и собрать проект "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/NotACat1/algososh.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 библиотека для разработки пользовательских интерфейсов. React позволяет создавать масштабируемые веб-приложения с использованием компонентного подхода, что делает код более модульным, понятным и легким для поддержки.
2. **Sass**: Sass (Syntactically Awesome Stylesheets) - препроцессор CSS, расширяющий возможности обычного CSS с помощью переменных, вложенности, миксинов и много других функций. Sass облегчает процесс написания и поддержки стилей, делая их более читаемыми и управляемыми.
3. **TypeScript**: Язык программирования, расширяющий возможности JavaScript путем добавления статической типизации. TypeScript помогает выявлять ошибки на этапе разработки, повышает читаемость кода и облегчает его поддержку. Благодаря статической типизации TypeScript улучшает процесс разработки, делая его более надежным и эффективным.
### Инструменты для контроля качества кода
1. **ESLint**: Инструмент для статического анализа кода JavaScript с целью выявления и исправления паттернов программирования.
2. **Prettier**: Инструмент форматирования кода, который автоматически приводит код к установленным стандартам.
3. **Stylelint**: Линтер для стилей, который проверяет CSS/SCSS на соответствие правилам написания кода.
4. **HTMLHint**: Инструмент для статического анализа HTML-кода, написанного на JavaScript.
### Инструменты для управления коммитами
1. **Husky**: Инструмент для предотвращения плохих коммитов и предварительного выполнения скриптов перед коммитом.
2. **Commitlint**: Инструмент для проверки соответствия сообщений коммитов заданным конвенциям.
## Заключение
Завершая наш проект по созданию визуализатора алгоритмов, мы убеждаемся в важности наглядного и интерактивного обучения в области информатики и программирования. Разработка этого инструмента позволяет студентам более глубоко погрузиться в мир алгоритмов и структур данных, делая процесс изучения более увлекательным и понятным.
Использование современных технологий, таких как React, Sass и TypeScript, обеспечивает высокую производительность и удобство в использовании. Мы стремились создать интуитивно понятный и эффективный инструмент, который поможет учащимся в освоении сложных концепций программирования.
Вместе мы создали не просто программу, а инструмент, способствующий развитию умений и знаний в области информатики. Надеемся, что этот проект станет полезным ресурсом для всех, кто стремится глубже понять мир программирования и алгоритмов.