mashamoreva / shopping-list

🗒️ Проект: "Список покупок"

Список покупок

Простое приложение, позволяющее планировать поход в магазин и отслеживать прогресс.

Функционал:

• Каждый элемент списка содержит
  • Чекбокс, позволяющий отметить завершённость элемента
  • Поле для ввода, позволяющее изменить текст элемента
• Кнопка "Новый элемент" добавляет в список новый элемент
• Если поле внутри элемента пустое, то при снятии фокуса с поля элемент удаляется из списка
• При создании нового элемента в его поле автоматически ставится фокус, чтобы сразу можно было начать печатать
• Приложением можно пользоваться с клавиатуры:
  • Переключение между элементами происходит с помощью Tab (вперёд) и Shift + Tab (назад)
  • Переключение выполненности элемента происходит с помощью клавиши Enter, когда на элементе установлен фокус

Технические детали:

• Логика приложения для работы со списком вынесена в кастомный хук src/useList.js
• Компоненты содержат только JSX-разметку, обработчики событий и вызовы хуков

Стек:

• React - JavaScript-библиотека для создания пользовательских интерфейсов; основана на компонентах, что облегчает создание и поддержку интерактивных веб-приложений
• TypeScript - строго типизированный язык программирования, который расширяет возможности JavaScript, добавляя статическую типизацию и другие возможности
• Vite - быстрый инструмент сборки для разработки веб-приложений, обеспечивающий мгновенную загрузку и горячую перезагрузку

Запуск:

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

git clone https://github.com/MashaMoreva/shopping-list.git

• перейдите в папку проекта:

cd shopping-list

• установите зависимости:

npm install

• запустите приложение:

npm run dev

(приложение будет доступно по адресу http://localhost:5173/)