https://github.com/mariyazakharova73/advanced-front
Приложение для просмотра статей. Для имитации бэкенда используется JSON Server
https://github.com/mariyazakharova73/advanced-front
fsd i18n react redux-toolkit storybook typescript
Last synced: 2 months ago
JSON representation
Приложение для просмотра статей. Для имитации бэкенда используется JSON Server
- Host: GitHub
- URL: https://github.com/mariyazakharova73/advanced-front
- Owner: Mariyazakharova73
- Created: 2024-01-10T06:39:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T05:31:37.000Z (about 2 years ago)
- Last Synced: 2025-04-08T15:18:29.757Z (about 1 year ago)
- Topics: fsd, i18n, react, redux-toolkit, storybook, typescript
- Language: TypeScript
- Homepage:
- Size: 646 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### advanced-front
#### Технологии
#### О проекте
Приложение для просмотра статей. Для имитации бэкенда используется JSON Server
Данные для входа - username: admin, password 123;
- Верстка только на гридах (без flex)
- Созданы некоторые UI компоненты. (Button, Input, Card, Modal, Avatar, Loader, Tabs, Text, Stack и т.д)
- Бандл разделен на чанки (React.lazy)
- Смена темы (React Context, css-variables, custom hook useTheme), Смена языка (i18next)
- Настроен EsLint, Stylelint, husky, Storybook
- Настроена обработка ошибок (React ErrorBoundary)
- React Portal (lazy loading modal)
- loginReducer, profileReducer, articleDetailsReducer и др. добавляются асинхронно через reducerManager (форма авторизации подгружается только для неавторизованного пользователя)
- Страницы профиля и cтатей защищены от неавторизованного пользователя
- Изменение данных профиля в режиме редактирования
- Подгрузка новых статей при скролле (observer API)
- Добавление комментариев к статье
- Сохранение позиции скролла при возвращении на страницу статей
- Сортировка статей по дате создания, количеству просмотров, темам
- Параметры сортировки сохраняются в url
- Поиск статьи (debounce)
- Админ-панель
#### Установка и запуск приложения
Развернуть
Клонировать репозиторий:
git clone https://github.com/Mariyazakharova73/advanced-front.git
Установить зависимости:
npm install
Запустить проект:
npm run start:dev
Запустить Storybook:
npm run storybook