https://github.com/thefoxkd/url-shorter
Full-stack URL shortener with React frontend, NestJS backend, and PostgreSQL database
https://github.com/thefoxkd/url-shorter
Last synced: 3 months ago
JSON representation
Full-stack URL shortener with React frontend, NestJS backend, and PostgreSQL database
- Host: GitHub
- URL: https://github.com/thefoxkd/url-shorter
- Owner: TheFoxKD
- Created: 2025-06-05T20:30:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-05T21:27:39.000Z (4 months ago)
- Last Synced: 2025-06-05T21:29:20.559Z (4 months ago)
- Language: TypeScript
- Size: 0 Bytes
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# URL Shortener Service
Сервис для сокращения URL-адресов с REST API и веб-интерфейсом.
# Demo
https://github.com/user-attachments/assets/3e2bd6bf-144a-4753-b16d-4feb57b55c84
## Технологии
- **Backend**: NestJS + TypeScript
- **Frontend**: React + TypeScript + Tailwind CSS
- **База данных**: PostgreSQL 17
- **ORM**: TypeORM
- **Контейнеризация**: Docker + Docker Compose
## Функциональность
### Backend API
- `POST /shorten` - создание короткой ссылки
- `GET /{shortUrl}` - переадресация на оригинальный URL
- `GET /info/{shortUrl}` - получение информации о ссылке
- `DELETE /delete/{shortUrl}` - удаление короткой ссылки
- `GET /analytics/{shortUrl}` - детальная статистика переходов
- `GET /analytics/admin/global-stats` - общая статистика
- `GET /analytics/admin/recent-activity` - недавняя активность
### Frontend
- Создание коротких ссылок с кастомными алиасами
- Управление ссылками (просмотр, удаление, поиск, фильтрация)
- Детальная аналитика по каждой ссылке
- Общая аналитика всех ссылок
- Современный и отзывчивый интерфейс с Tailwind CSS
- Экспорт данных аналитики
## Быстрый старт
1. Клонируйте репозиторий:
```bash
git clone git@github.com:TheFoxKD/url-shorter.git
cd url-shorter
```
2. Запустите проект одной командой:
```bash
docker-compose up --build
```
3. Откройте в браузере:
- **Frontend**:
- **Backend API**:
- **Swagger документация**:
## Демо
### Главная страница
- Создание коротких ссылок
- Список всех созданных ссылок
- Поиск и фильтрация
### Аналитика
- Общая статистика:
- Детальная аналитика ссылки:
## Разработка
### Требования
- Docker и Docker Compose
- Node.js 24+ (для локальной разработки)
- PostgreSQL 17 (при локальной разработке)
### Структура проекта
```
url-shortener/
├── backend/ # NestJS API сервер
│ ├── src/
│ │ ├── controllers/ # REST контроллеры
│ │ ├── services/ # Бизнес-логика
│ │ ├── entities/ # TypeORM сущности
│ │ ├── dto/ # Data Transfer Objects
│ │ └── modules/ # NestJS модули
│ └── Dockerfile
├── frontend/ # React приложение
│ ├── src/
│ │ ├── components/ # React компоненты
│ │ ├── pages/ # Страницы приложения
│ │ ├── services/ # API клиенты
│ │ ├── types/ # TypeScript типы
│ │ └── utils/ # Утилиты
│ ├── nginx.conf # Nginx конфигурация
│ └── Dockerfile
├── docker-compose.yml # Конфигурация сервисов
└── README.md
```
### Переменные окружения
Backend:
- `DATABASE_HOST` - хост базы данных (по умолчанию: postgres)
- `DATABASE_PORT` - порт базы данных (по умолчанию: 5432)
- `DATABASE_NAME` - имя базы данных (по умолчанию: url_shortener)
- `DATABASE_USER` - пользователь БД (по умолчанию: postgres)
- `DATABASE_PASSWORD` - пароль БД (по умолчанию: postgres)
- `PORT` - порт сервера (по умолчанию: 3000)
Frontend:
- `REACT_APP_API_URL` - URL backend API (по умолчанию: )
## API Документация
После запуска проекта Swagger документация будет доступна по адресу:
### Основные эндпоинты
- **POST /shorten** - Создание короткой ссылки
- **GET /{identifier}** - Переадресация по короткой ссылке
- **GET /info/{identifier}** - Информация о ссылке
- **DELETE /delete/{identifier}** - Удаление ссылки
- **GET /analytics/{identifier}** - Аналитика ссылки
- **GET /analytics/admin/global-stats** - Общая статистика
- **GET /urls** - Список всех ссылок
## Тестирование
```bash
# Backend тесты
cd backend
npm test
# Frontend тесты
cd frontend
npm test
```
## Особенности реализации
### Backend
- Автоматическая генерация коротких кодов (6 символов)
- Поддержка пользовательских алиасов
- Система аналитики с отслеживанием IP, referrer, user-agent
- Маскировка IP-адресов для приватности
- Валидация входных данных с помощью class-validator
- Swagger документация
- Health checks для мониторинга
- Обработка reserved paths (защита от конфликтов маршрутов)
### Frontend
- Современный дизайн с Tailwind CSS v3
- Полная типизация с TypeScript
- Компонентная архитектура React
- Состояния загрузки и обработка ошибок
- Адаптивный дизайн для мобильных устройств
- Интерактивные графики аналитики
- Копирование ссылок в буфер обмена
- Поиск и фильтрация ссылок
### DevOps
- Multi-stage Docker builds для оптимизации размера
- Docker Compose для оркестрации сервисов
- Nginx для обслуживания статических файлов
- Health checks для всех сервисов
- Персистентные данные PostgreSQL
## Архитектура
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Database │
│ (React) │◄──►│ (NestJS) │◄──►│ (PostgreSQL) │
│ Port: 3001 │ │ Port: 3000 │ │ Port: 5432 │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
## Автор
**Denis Krishtopa** - [TheFoxKD](https://github.com/TheFoxKD)
Выполнено как тестовое задание для демонстрации навыков full-stack разработки.