Skip to content

Commit 50d6136

Browse files
khoshovkhoshov
authored
Merge pull request #57 from khoshov/feature/fix-images-size
add ui
2 parents 02946c7 + baead0a commit 50d6136

49 files changed

Lines changed: 8307 additions & 8 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 83 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,41 @@ cp .env.example .env
1919
make dev
2020
```
2121

22-
### Вариант 2: Локальная установка
22+
### Вариант 2: Локальная установка с React UI
2323
```bash
2424
git clone https://github.com/khoshov/pythonbooks.git
2525
cd pythonbooks
26+
27+
# Настройка backend (Django API)
2628
uv sync
2729
cp .env.example .env
30+
# Отредактируйте .env файл, установите DATABASE_URL=sqlite:///db.sqlite3 для простого запуска
2831
uv run manage.py migrate
29-
uv run manage.py runserver
32+
uv run manage.py createsuperuser # Опционально
33+
uv run python create_sample_data.py # Создать тестовые данные
34+
35+
# Запуск Django API сервера
36+
uv run manage.py runserver 127.0.0.1:8001
37+
38+
# В новом терминале - настройка frontend (React)
39+
cd frontend
40+
npm install
41+
npm run dev
3042
```
3143

44+
### Доступ к приложению
45+
- **React UI**: http://localhost:5173/ (современный интерфейс)
46+
- **Django API**: http://localhost:8001/api/v1/ (REST API)
47+
- **Django Admin**: http://localhost:8001/admin/ (панель администратора)
48+
3249
## 📋 Требования
3350

3451
- **Python 3.13+**
52+
- **Node.js 18+** (для React frontend)
53+
- **npm/yarn** (менеджер пакетов для frontend)
3554
- **Docker & Docker Compose** (для контейнеризации)
36-
- **UV** (менеджер пакетов)
37-
- **PostgreSQL** (база данных)
55+
- **UV** (менеджер пакетов Python)
56+
- **PostgreSQL** (база данных) или **SQLite** (для быстрого старта)
3857

3958
## 🏗️ Структура проекта
4059

@@ -51,6 +70,7 @@ pythonbooks/
5170
│
5271
├── apps/
5372
│ └── books/ # Django приложение для книг
73+
│ ├── api/v1/ # REST API endpoints
5474
│ ├── scrapers/ # Скрейперы для сбора данных
5575
│ ├── models.py # Модели данных
5676
│ ├── views.py # Представления
@@ -61,13 +81,22 @@ pythonbooks/
6181
│ ├── urls.py # URL конфигурация
6282
│ └── wsgi.py # WSGI приложение
6383
│
84+
├── frontend/ # React приложение
85+
│ ├── src/
86+
│ │ ├── components/ # React компоненты
87+
│ │ ├── lib/ # Утилиты и API клиент
88+
│ │ ├── types/ # TypeScript типы
89+
│ │ └── App.tsx # Главный компонент
90+
│ ├── package.json # Зависимости Node.js
91+
│ └── vite.config.ts # Конфигурация Vite
92+
│
6493
└── .github/workflows/ # CI/CD пайплайны
6594
└── ruff.yml # Проверка кода с Ruff
6695
```
6796

6897
## 🛠️ Команды разработки
6998

70-
### Основные команды
99+
### Docker команды
71100
```bash
72101
make help # Показать все доступные команды
73102
make dev # Запустить среду разработки
@@ -78,6 +107,16 @@ make logs # Показать логи
78107
make clean # Очистить Docker ресурсы
79108
```
80109

110+
### Frontend команды (React)
111+
```bash
112+
cd frontend
113+
npm install # Установить зависимости
114+
npm run dev # Запустить dev сервер (http://localhost:5173)
115+
npm run build # Собрать для продакшена
116+
npm run preview # Предпросмотр билда
117+
npm run lint # Проверка ESLint
118+
```
119+
81120
### Django команды
82121
```bash
83122
make migrate # Применить миграции
@@ -213,9 +252,16 @@ curl http://localhost:8000/health/ # Проверка состояния
213252
- Управление книгами и авторами
214253
- Массовые операции
215254

255+
### Modern React UI
256+
- Современный интерфейс на React + TypeScript
257+
- shadcn/ui компоненты с Tailwind CSS
258+
- Адаптивный дизайн и тёмная тема
259+
- Поиск, фильтрация и пагинация
260+
216261
### API
217262
- RESTful API для работы с данными
218-
- Аутентификация и авторизация
263+
- Аутентификация и авторизация
264+
- CORS поддержка для frontend
219265
- Документация API
220266

221267
## 🤝 Участие в разработке
@@ -245,9 +291,40 @@ docker-compose logs django # Только Django
245291
- Мониторинг состояния БД
246292
- Отслеживание производительности
247293

294+
## 🔧 Решение проблем
295+
296+
### Проблемы с npm кэшем
297+
Если возникают ошибки при установке зависимостей:
298+
```bash
299+
# Используйте временный кэш
300+
NPM_CONFIG_CACHE=/tmp/.npm npm install
301+
302+
# Или очистите кэш
303+
npm cache clean --force
304+
```
305+
306+
### Проблемы с портами
307+
Если порт 8000 занят, используйте другой:
308+
```bash
309+
# Django на другом порту
310+
python manage.py runserver 127.0.0.1:8001
311+
312+
# Обновите API_BASE_URL в frontend/src/lib/api.ts
313+
```
314+
315+
### База данных
316+
Для быстрого тестирования используйте SQLite:
317+
```bash
318+
# В .env файле
319+
DATABASE_URL=sqlite:///db.sqlite3
320+
```
321+
248322
## 🔗 Полезные ссылки
249323

250324
- [Django Documentation](https://docs.djangoproject.com/)
325+
- [React Documentation](https://react.dev/)
326+
- [shadcn/ui Components](https://ui.shadcn.com/)
327+
- [Tailwind CSS](https://tailwindcss.com/)
251328
- [UV Documentation](https://docs.astral.sh/uv/)
252329
- [Ruff Documentation](https://docs.astral.sh/ruff/)
253330
- [Docker Documentation](https://docs.docker.com/)

‎apps/books/api/v1/serializers.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ class Meta:
3939
"author",
4040
"publisher",
4141
"published_at",
42+
"cover_image",
4243
]
4344

4445

‎config/settings.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"django.contrib.messages",
3838
"django.contrib.staticfiles",
3939
# Third party apps
40+
"corsheaders",
4041
"django_celery_beat",
4142
"django_extensions",
4243
"django_filters",
@@ -47,6 +48,7 @@
4748

4849
MIDDLEWARE = [
4950
"django.middleware.security.SecurityMiddleware",
51+
"corsheaders.middleware.CorsMiddleware",
5052
"django.contrib.sessions.middleware.SessionMiddleware",
5153
"django.middleware.common.CommonMiddleware",
5254
"django.middleware.csrf.CsrfViewMiddleware",
@@ -154,3 +156,17 @@
154156
"schedule": crontab(hour=1, minute=11),
155157
}
156158
}
159+
160+
# ====================
161+
# CORS SETTINGS
162+
# ====================
163+
CORS_ALLOWED_ORIGINS = [
164+
"http://localhost:5173", # Vite dev server
165+
"http://127.0.0.1:5173",
166+
"http://localhost:3000", # Alternative frontend port
167+
"http://127.0.0.1:3000",
168+
]
169+
170+
CORS_ALLOW_CREDENTIALS = True
171+
172+
CORS_ALLOW_ALL_ORIGINS = DEBUG # Only allow all origins in development

‎config/urls.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,4 @@
44
urlpatterns = [
55
path("admin/", admin.site.urls),
66
path("api/v1/", include("apps.books.api.v1.urls")),
7-
path("", include("apps.books.urls")),
87
]

‎docker-compose.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ services:
33
build: .
44
container_name: pythonbooks-django
55
ports:
6-
- "8000:8000"
6+
- "8001:8000"
77
env_file:
88
- .env
99
command: >

‎frontend/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎frontend/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config([
16+
globalIgnores(['dist']),
17+
{
18+
files: ['**/*.{ts,tsx}'],
19+
extends: [
20+
// Other configs...
21+
22+
// Remove tseslint.configs.recommended and replace with this
23+
...tseslint.configs.recommendedTypeChecked,
24+
// Alternatively, use this for stricter rules
25+
...tseslint.configs.strictTypeChecked,
26+
// Optionally, add this for stylistic rules
27+
...tseslint.configs.stylisticTypeChecked,
28+
29+
// Other configs...
30+
],
31+
languageOptions: {
32+
parserOptions: {
33+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34+
tsconfigRootDir: import.meta.dirname,
35+
},
36+
// other options...
37+
},
38+
},
39+
])
40+
```
41+
42+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43+
44+
```js
45+
// eslint.config.js
46+
import reactX from 'eslint-plugin-react-x'
47+
import reactDom from 'eslint-plugin-react-dom'
48+
49+
export default tseslint.config([
50+
globalIgnores(['dist']),
51+
{
52+
files: ['**/*.{ts,tsx}'],
53+
extends: [
54+
// Other configs...
55+
// Enable lint rules for React
56+
reactX.configs['recommended-typescript'],
57+
// Enable lint rules for React DOM
58+
reactDom.configs.recommended,
59+
],
60+
languageOptions: {
61+
parserOptions: {
62+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+
tsconfigRootDir: import.meta.dirname,
64+
},
65+
// other options...
66+
},
67+
},
68+
])
69+
```

‎frontend/components.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/index.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎frontend/eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { globalIgnores } from 'eslint/config'
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎frontend/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)