Этот репозиторий служит платформой, где я могу продемонстрировать свои навыки фронтенд-разработки и экспертизу с использованием передовых технологий в области веб-разработки.
Основные цели этой витрины включают в себя:
-
Демонстрация навыков: представление широкого спектра навыков фронтенд-разработки, включая React, TypeScript, Webpack и многое другое.
-
Обучение и развитие: постоянное обучение и адаптация к постоянно меняющейся области фронтенд-разработки.
- Клонируйте репозиторий на свой компьютер:
git clone https://github.com/alik0000/showcase
- Установите зависимости с помощью менеджера пакетов npm:
npm install
- Запустите проект без сервера:
npm run start
- Запустите проект с фальшивым(json-server) сервером:
npm run start:dev:app:server
- Откройте в браузере страницу http://localhost:3000 для просмотра.
- В режиме разработки:
npm run build:dev
- В режиме продакшн:
npm run build:prod
- Для запуска Storybook выполните следующую команду:
npm run storybook
- Для создания сборки Storybook выполните следующую команду:
npm run build-storybook
- Для запуска тестов выполните следующую команду:
npm run unit
В этом проекте использованы следующие технологии:
- Webpack - сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл
- React - библиотека для создания пользовательских интерфейсов
- Typescript - язык программирования, расширяющий возможности JavaScript
- React Router - для управления маршрутизацией приложения
- Jest/React - для тестирования React компонентов
- Storybook - для создания и демонстрации изолированных компонентов
- scss-modules/sass - для стилизации компонентов
- .....
Проекта по структурной методологии Feature-Sliced-Design(https://feature-sliced.design/) выглядит следующим образом:
└── src/
├── app/ # Инициализирующая логика приложения #
| ├── providers/ # Слайс: Провайдеры и HOCs с инициализирующей логикой
| ├── styles/ # Слайс: С глоабльными стилями, миксинами и переменными
| ├── types/ # Слайс: Для установки связи с внешними файлами скриптов
| #
├── pages/ # Слой: Страницы приложения
| ├── {some-page}/ # Слайс: (пример: Main страница)
| | ├── lib/ # Сегмент: Инфраструктурная-логика (helpers/utils)
| | ├── model/ # Сегмент: Бизнес-логика
| | └── ui/ # Сегмент: Логика UI
| ... #
| #
├── widgets/ # Слой: Самостоятельные и полноценные блоки для страниц
| ├── {some-widget}/ # Слайс: (пример: Header widget)
| | ├── lib/ # Сегмент: Инфраструктурная-логика (helpers/utils)
| | ├── model/ # Сегмент: Бизнес-логика
| | └── ui/ # Сегмент: Логика UI
├── features/ # Слой: Обрабатываемые пользовательские сценарии
| ├── {some-feature}/ # Слайс: (пример: Filter feature)
| | ├── lib/ # Сегмент: Инфраструктурная-логика (helpers/utils)
| | ├── model/ # Сегмент: Бизнес-логика
| | └── ui/ # Сегмент: Логика UI
| ... #
| #
├── entities/ # Слой: Бизнес-сущности, которыми оперирует предметная область
| ├── {some-entity}/ # Слайс: (например: сущность Product)
| | ├── lib/ # Сегмент: Инфраструктурная-логика (helpers/utils)
| | ├── model/ # Сегмент: Бизнес-логика
| | └── ui/ # Сегмент: Логика UI
| ... #
| #
├── shared/ # Слой: Переиспользуемые модули, без привязки к бизнес-логике
| ├── api/ # Сегмент: Логика запросов к API (api instances, requests, ...)
| ├── assets/ # Сегмент: Иконки и изображения приложений
| ├── config/ # Сегмент: Конфигурация приложения (env-vars, ...)
| ├── lib/ # Сегмент: Инфраструктурная логика приложения (utils/helpers)
| └── ui/ # Сегмент: UIKit приложения
| ... #
| #
└── index.tsx/ #