/cheesy-peasy

Pet-project: Web Pizza Delivery

Primary LanguageTypeScript

🍕 Cheesy - Peasy 🍕

🔥 Функционал проекта:

  • Полноценное фронтенд-приложение на ReactJS.
  • Сортировка, поиск, пагинация, фильтрация, popup-окна и т.д.
  • Взаимодействие со сторонним API.
  • Single-Page-Application.
  • Глобальное хранилище данных для всего приложения.
  • Типизированный код на TypeScript.
  • LocalStorage для хранения настроек сайта.
  • Lazy Loading (ленивуя подгрузка) + debounce (оптимизация для поиска пицц).
  • Оптимизированные перерисовки/ререндеры компонентов, code splitting (разделение кода на отдельные JS-файлы).
  • Адаптивная вёрстка.

🛠 Технологии:

  • ReactJS 18
  • TypeScript
  • Redux Toolkit (хранение данных / пицц)
  • React Router v6 (навигация)
  • Axios + Fetch (отправка запроса на бэкенд)
  • React Hooks (хуки)
  • Prettier (форматирование кода)
  • CSS-Modules / SCSS (стилизация)
  • React Content Loader (скелетон)
  • React Pagination (пагинация)
  • Lodash.Debounce
  • Code Splitting, React Loadable, useWhyDidYouUpdate

Подробнее о технологиях

  • TypeScript — необходим для написания более грамотного JavaScript-кода. Благодаря правильному написанию TS-кода, мы автоматически документируем наш код + наше приложение будет содержать меньше багов из-за строгой типизации.
  • Redux Toolkit — с помощью данной библиотеки, мы сможем создать глобальное хранилище данных для нашего приложения, тем самым, более удобным способом обмениваться информацией между разными компонентами нашего приложения. Данная библиотека активно внедряется во все крупные и малые react-проекты на 2021-2024 г.
  • React Router v6 — позволит нам создать навигацию по нашему сайту без перезагрузок страницы.
  • Axios — нам поможет взаимодействовать с серверной частью. Отправлять данные на сервер или получать их при необходимости из сервера уже в наше фронтенд-приложение.
  • React Hooks — это набор готовых функций внутри библиотеки React для решения разнообразных задач, например, хранение данных, определение первого отображения приложения, оптимизаций функций и т.п.
  • Prettier — наш код должен быть не только хорошо написано, но и красиво. С помощью Prettier наш код будет автоматически выровняться внутри нашего редактора кода, тем самым, становиться более читабельным.
  • SCSS — это тот же CSS, но с более мощными возможностями, функциями, переменными, циклами и кучей других крутых решений.
  • Lodash — набор готовых JS-функций для огромного количества разнообразных задач.

Скрипты для запуска проекта

Для запуска проекта пропишите эти команды:

npm install

npm start