✒️ Санина писанина

Тихое цифровое пространство для моих стихов, слов и всего того, что хочется читать с чувствами.

Санина писанина — маленький веб-сайт для публикации и чтения стихотворений, созданный на React. Проект сочетает минималистичный редакционный стиль, типографику и полноценную систему управления контентом с авторизацией в Firebase.

Главная идея проекта проста:

интерфейс должен исчезать, чтобы текст оставался главным.

✨ О проекте

Санина писанина — это небольшой литературный веб-проект, предназначенный для публикации моих стихотворений и их комфортного чтения.

Читатель может открыть главную страницу, просматривать коллекцию произведений и переходить к отдельным стихотворениям.

Для автора предусмотрена отдельная административная часть, позволяющая управлять публикациями без необходимости вручную изменять исходный код.

Возможности

📖 удобный интерфейс для чтения стихотворений
🔐 авторизация администратора
➕ добавление новых стихотворений
✏️ редактирование существующих
🗑️ удаление публикаций
🛡️ защищённые административные маршруты
🚫 страница 404
📱 адаптивный интерфейс
🔥 интеграция с Firebase
⚡ быстрая разработка и сборка через Vite
🧭 маршрутизация через React Router

🌐 Демо

Рабочая версия

https://pisanina.vercel.app/

Проект развёрнут на Vercel.

Репозиторий

https://github.com/sunmeat/poetry-blog

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

Технология	Назначение
⚛️ React	Создание пользовательского интерфейса
🧭 React Router	Клиентская маршрутизация
🔥 Firebase	Авторизация и хранение данных
⚡ Vite	Разработка и production-сборка
🟨 JavaScript / JSX	Основная логика приложения
🎨 CSS	Стилизация и адаптивность
☁️ Vercel	Развёртывание приложения

🧩 Архитектура приложения

Проект организован вокруг страниц и переиспользуемых компонентов.

Упрощённая структура:

src/
├── components/
│   ├── Header/
│   ├── Footer/
│   └── ProtectedRoute/
│
├── pages/
│   ├── Home/
│   ├── PoemPage/
│   ├── Admin/
│   │   ├── AdminLogin
│   │   ├── AdminDashboard
│   │   └── PoemForm
│   └── NotFound/
│
├── App.jsx
└── ...

Общие элементы интерфейса — например, шапка, подвал и защита административных маршрутов — вынесены в отдельные компоненты.

🧭 Маршруты

Маршрут	Назначение	Доступ
`/`	Главная страница и коллекция стихотворений	🌍 Все
`/poem/:id`	Страница отдельного стихотворения	🌍 Все
`/admin`	Вход администратора	🌍 Все
`/admin/dashboard`	Панель управления	🔐 Администратор
`/admin/new`	Создание стихотворения	🔐 Администратор
`/admin/edit/:id`	Редактирование стихотворения	🔐 Администратор
`*`	Страница 404	🌍 Все

Административные страницы защищены специальным компонентом ProtectedRoute.

🔐 Панель администратора

В проекте реализована небольшая CMS для управления стихотворениями.

После авторизации администратор получает возможность управлять коллекцией:

Создать
   ↓
Опубликовать
   ↓
Просмотреть
   ↓
Изменить
   ↓
Обновить
   ↓
Удалить

Это позволяет полностью отделить управление содержимым от публичной части сайта.

Административная часть включает

страницу авторизации
панель управления
создание стихотворения
редактирование стихотворения
удаление публикаций
защищённые маршруты
переходы между административными страницами

🔥 Firebase

Firebase используется в качестве backend-сервиса приложения.

В репозитории предусмотрены:

.env.example
firestore.rules

Конфигурация Firebase должна передаваться через переменные окружения.

Настройка

Создайте локальный файл .env на основе примера:

cp .env.example .env

После этого заполните необходимые параметры Firebase.

⚠️ Никогда не добавляйте настоящий .env с секретами в Git-репозиторий.

🚀 Запуск проекта

Требования

Перед началом убедитесь, что у вас установлены:

Node.js
npm
проект Firebase, если требуется полноценная работа с базой данных и авторизацией

1. Клонирование

git clone https://github.com/sunmeat/poetry-blog.git
cd poetry-blog

2. Установка зависимостей

npm install

3. Настройка переменных окружения

cp .env.example .env

Заполните .env своими параметрами Firebase.

4. Запуск режима разработки

npm run dev

После запуска Vite предоставит локальный адрес приложения.

5. Production-сборка

npm run build

6. Предпросмотр production-сборки

npm run preview

7. Проверка кода

npm run lint

📜 Доступные команды

`npm run dev`

Запускает локальный сервер разработки Vite.

`npm run build`

Создаёт оптимизированную production-версию приложения.

`npm run preview`

Запускает локальный сервер для просмотра production-сборки.

`npm run lint`

Проверяет исходный код с помощью ESLint.

🎨 Дизайн

Проект специально не выглядит как обычная CRUD-система.

Здесь нет ощущения:

«Перед вами очередная админка с карточками, кнопками и таблицами».

Вместо этого дизайн строится вокруг литературного восприятия:

пространство · типографика · ритм · тишина

Главная цель — создать ощущение цифрового литературного журнала, а не стандартного веб-приложения.

Основные принципы

Текст — главный элемент
Типографика создаёт настроение
Навигация остаётся незаметной
Интерфейс не конкурирует с содержанием
Административная часть находится за кулисами
Адаптивность является частью дизайна, а не дополнительной функцией

🧠 Почему React?

React позволяет разделить приложение на независимые и переиспользуемые компоненты.

Например:

Header
Footer
ProtectedRoute
       │
       ├── Главная
       ├── Стихотворение
       └── Административная часть

Такой подход упрощает дальнейшее развитие проекта и позволяет добавлять новые возможности без превращения приложения в монолитный компонент.

📁 Структура проекта

Упрощённая структура репозитория:

poetry-blog/
│
├── public/
│
├── src/
│   ├── components/
│   │   ├── Footer/
│   │   ├── Header/
│   │   └── ProtectedRoute/
│   │
│   ├── pages/
│   │   ├── Admin/
│   │   ├── Home/
│   │   ├── NotFound/
│   │   └── PoemPage/
│   │
│   └── App.jsx
│
├── .env.example
├── .gitignore
├── firestore.rules
├── index.html
├── package.json
├── package-lock.json
├── vercel.json
└── vite.config.js

☁️ Развёртывание

Проект подготовлен для развёртывания на Vercel.

При развёртывании собственной копии необходимо добавить необходимые переменные окружения в настройках проекта Vercel.

🔒 Безопасность

Проект использует клиентское React-приложение и Firebase.

Рекомендуется соблюдать следующие правила:

не коммитить .env
не публиковать приватные ключи и секреты
хранить правила Firestore в репозитории
защищать административные маршруты
не считать клиентскую защиту маршрутов единственным механизмом безопасности
реальные права доступа обязательно контролировать через правила Firebase

🗺️ Планы развития

Идеи для дальнейшего развития проекта:

🖼️ Скриншоты

Для визуальной презентации проекта можно добавить скриншоты в отдельную директорию:

docs/
└── screenshots/
    ├── home.png
    ├── poem.png
    ├── admin-login.png
    └── dashboard.png

После этого изображения можно разместить прямо в README:

![Главная страница](docs/screenshots/home.png)

🤝 Разработка

Если вы хотите внести изменения в проект:

git checkout -b feature/my-improvement

После внесения изменений рекомендуется проверить проект:

npm run lint
npm run build

Затем:

git add .
git commit -m "feat: улучшение интерфейса"
git push origin feature/my-improvement

После этого можно создать Pull Request.

📄 Лицензия

Исходный код в этом репозитории распространяется под лицензией MIT.

Стихи, тексты и другой авторский контент, опубликованный на сайте (включая данные, хранящиеся в Firestore), являются © автора и не подпадают под действие лицензии MIT — все права на контент защищены, если не указано иное.

👤 Автор

Oleksandr Zahoruiko

@sunmeat

Разработчик программного обеспечения и преподаватель.

GitHub: https://github.com/sunmeat
Репозиторий: https://github.com/sunmeat/poetry-blog
Сайт: https://pisanina.vercel.app/

React · Firebase · Vite · Vercel

Сделано с любовью к коду и ещё большей любовью к рифме и ритму.

Некоторые вещи созданы для того, чтобы их читали медленно.

Name		Name	Last commit message	Last commit date
.github		.github
.idea		.idea
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
firestore.rules		firestore.rules
index.html		index.html
middleware.js		middleware.js
package-lock.json		package-lock.json
package.json		package.json
vercel.json		vercel.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation