🌐 Live Demo: https://tech-stack-green.vercel.app/
A modern, responsive mini-blog application built with Next.js 15 and Express.js, featuring user authentication, post management, and a beautiful Ukrainian interface.
- User Registration & Login - Secure authentication with JWT tokens
- Protected Routes - Access control for authenticated users only
- Auto-logout - Automatic session management on token expiration
- Create Posts - Rich text posts with title, description, and content
- View Posts - Beautiful, responsive post listing with pagination
- Edit Posts - Full post editing for post authors
- Query-based Routing - SEO-friendly URLs with query parameters
- Profile Management - Update user information and password
- Account Settings - Secure password changes with validation
- Account Deletion - Complete account removal with confirmation
- Responsive Design - Mobile-first approach with TailwindCSS 4
- ShadcnUI Components - Beautiful, accessible UI components
- Loading States - Skeleton loaders and smooth transitions
- Toast Notifications - User-friendly feedback system
- Ukrainian Localization - Full Ukrainian language support
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe JavaScript
- TailwindCSS 4 - Utility-first CSS framework
- ShadcnUI - Beautiful UI component library
- TanStack React Query - Powerful data fetching
- Axios - HTTP client with interceptors
- React Hook Form - Performant form handling
- Zod - Schema validation
- Sonner - Toast notifications
- date-fns - Date formatting with Ukrainian locale
- Express.js - Fast, minimalist web framework
- TypeScript - Type-safe server development
- Prisma - Next-generation ORM
- PostgreSQL - Reliable relational database
- JWT - Secure authentication tokens
- bcryptjs - Password hashing
- CORS - Cross-origin resource sharing
- Biome - Fast linter and formatter
- pnpm - Efficient package manager
- Turbopack - Fast development builds
🚀 Experience the app: https://tech-stack-green.vercel.app/
- ✅ User registration and login
- ✅ Create, view, and edit posts
- ✅ Responsive design on all devices
- ✅ Ukrainian interface
- ✅ Real-time notifications
- Node.js 18+ and npm/pnpm
- PostgreSQL database
- Git for version control
- Clone the repository
git clone <repository-url>
cd tech-test- Install dependencies
# Backend dependencies
cd backend
pnpm install
# Frontend dependencies
cd ../frontend
pnpm install- Environment Setup
Backend (backend/.env):
DATABASE_URL="postgresql://username:password@localhost:5432/miniblog"
JWT_SECRET="your-super-secret-jwt-key"
PORT=3001
NODE_ENV=development
CORS_ORIGINS="http://localhost:3000"Frontend (frontend/.env):
NEXT_PUBLIC_API_URL=http://localhost:3001/api- Database Setup
cd backend
npx prisma generate
npx prisma db push- Start Development Servers
# Terminal 1 - Backend
cd backend
pnpm dev
# Terminal 2 - Frontend
cd frontend
pnpm dev- Open your browser 🌐
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001/api
- Frontend: Deployed on Vercel
- Backend: Deployed with database hosting
- Database: PostgreSQL with connection pooling
- Connect your repository to Vercel
- Set environment variables:
NEXT_PUBLIC_API_URL=https://your-backend-url/api
- Deploy! 🚀
- Connect your repository to Railway or Render
- Set environment variables (DATABASE_URL, JWT_SECRET, etc.)
- Deploy the backend service
- Update frontend
NEXT_PUBLIC_API_URLto point to your backend
tech-test/
├── backend/ # Express.js API Server
│ ├── src/
│ │ ├── controllers/ # Route handlers
│ │ ├── middleware/ # Custom middleware
│ │ ├── routes/ # API routes
│ │ ├── config/ # Configuration files
│ │ └── index.ts # Server entry point
│ ├── prisma/ # Database schema & migrations
│ └── package.json
├── frontend/ # Next.js Application
│ ├── src/
│ │ ├── app/ # App Router pages
│ │ ├── components/ # Reusable UI components
│ │ ├── contexts/ # React contexts
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utility functions
│ └── package.json
└── README.md
POST /api/auth/register- User registrationPOST /api/auth/login- User login
GET /api/posts- Get all postsGET /api/posts/:id- Get post by IDPOST /api/posts- Create new post (auth required)PUT /api/posts/:id- Update post (owner only)
GET /api/users/me- Get current user (auth required)PUT /api/users/me- Update user profile (auth required)DELETE /api/users/me- Delete user account (auth required)
The project uses Git Flow with automated releases:
main/master ←── Production releases (stable)
↑
develop ←── Integration branch (beta releases)
↑
feature/* ←── Feature development
hotfix/* ←── Urgent production fixes
Automated versioning with conventional commits:
feat: add new feature # minor version bump
fix: bug fix # patch version bump
docs: update documentation # patch version bump
refactor: code refactoring # patch version bump- CI Pipeline: Build, lint, type-check on PRs
- Release Pipeline: Automated releases to production
- PR Validation: Full validation before merge
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help with setup, please open an issue or contact the development team.
Happy coding! 🎉
🌐 Демо-версія: https://tech-stack-green.vercel.app/
Сучасний, адаптивний додаток міні-блогу, створений з Next.js 15 та Express.js, з автентифікацією користувачів, управлінням постами та красивим українським інтерфейсом.
- Реєстрація та Вхід - Безпечна автентифікація з JWT токенами
- Захищені Маршрути - Контроль доступу тільки для авторизованих користувачів
- Авто-вихід - Автоматичне управління сесіями при закінченні токена
- Створення Постів - Багатий текстовий контент з заголовком, описом і змістом
- Перегляд Постів - Красивий, адаптивний список постів з пагінацією
- Редагування Постів - Повне редагування для авторів постів
- Query-based Маршрутизація - SEO-дружні URL з query параметрами
- Управління Профілем - Оновлення інформації користувача та пароля
- Налаштування Акаунта - Безпечна зміна пароля з валідацією
- Видалення Акаунта - Повне видалення акаунта з підтвердженням
- Адаптивний Дизайн - Mobile-first підхід з TailwindCSS 4
- ShadcnUI Компоненти - Красиві, доступні UI компоненти
- Стани Завантаження - Скелетони завантаження та плавні переходи
- Toast Сповіщення - Зручна система зворотного зв'язку
- Українська Локалізація - Повна підтримка української мови
- Next.js 15 - React фреймворк з App Router
- TypeScript - Типобезпечний JavaScript
- TailwindCSS 4 - Utility-first CSS фреймворк
- ShadcnUI - Красива бібліотека UI компонентів
- TanStack React Query - Потужне отримання даних
- Axios - HTTP клієнт з інтерцепторами
- React Hook Form - Продуктивна обробка форм
- Zod - Валідація схем
- Sonner - Toast сповіщення
- date-fns - Форматування дат з українською локаллю
- Express.js - Швидкий, мінімалістичний веб-фреймворк
- TypeScript - Типобезпечна розробка сервера
- Prisma - ORM нового покоління
- PostgreSQL - Надійна реляційна база даних
- JWT - Безпечні токени автентифікації
- bcryptjs - Хешування паролів
- CORS - Спільний доступ до ресурсів різних доменів
- Biome - Швидкий лінтер та форматер
- pnpm - Ефективний менеджер пакетів
- Turbopack - Швидка збірка для розробки
🚀 Спробуйте додаток: https://tech-stack-green.vercel.app/
- ✅ Реєстрація та авторизація користувачів
- ✅ Створення, перегляд та редагування постів
- ✅ Адаптивний дизайн на всіх пристроях
- ✅ Український інтерфейс
- ✅ Сповіщення в реальному часі
- Node.js 18+ та npm/pnpm
- PostgreSQL база даних
- Git для контролю версій
- Клонувати репозиторій
git clone <repository-url>
cd tech-test- Встановити залежності
# Залежності бекенду
cd backend
pnpm install
# Залежності фронтенду
cd ../frontend
pnpm install- Налаштування Середовища
Бекенд (backend/.env):
DATABASE_URL="postgresql://username:password@localhost:5432/miniblog"
JWT_SECRET="your-super-secret-jwt-key"
PORT=3001
NODE_ENV=development
CORS_ORIGINS="http://localhost:3000"Фронтенд (frontend/.env):
NEXT_PUBLIC_API_URL=http://localhost:3001/api- Налаштування Бази Даних
cd backend
npx prisma generate
npx prisma db push- Запуск Серверів Розробки
# Термінал 1 - Бекенд
cd backend
pnpm dev
# Термінал 2 - Фронтенд
cd frontend
pnpm dev- Відкрити у браузері 🌐
- Фронтенд: http://localhost:3000
- Бекенд API: http://localhost:3001/api
- Фронтенд: Деплоїто на Vercel
- Бекенд: Деплоїто з хостингом бази даних
- База Даних: PostgreSQL з пулом з'єднань
- Підключити репозиторій до Vercel
- Встановити змінні середовища:
NEXT_PUBLIC_API_URL=https://your-backend-url/api
- Деплоїти! 🚀
- Підключити репозиторій до Railway або Render
- Встановити змінні середовища (DATABASE_URL, JWT_SECRET, тощо)
- Деплоїти бекенд сервіс
- Оновити
NEXT_PUBLIC_API_URLфронтенду, щоб вказувати на ваш бекенд
tech-test/
├── backend/ # Express.js API Сервер
│ ├── src/
│ │ ├── controllers/ # Обробники маршрутів
│ │ ├── middleware/ # Користувацький middleware
│ │ ├── routes/ # API маршрути
│ │ ├── config/ # Файли конфігурації
│ │ └── index.ts # Точка входу сервера
│ ├── prisma/ # Схема бази даних та міграції
│ └── package.json
├── frontend/ # Next.js Додаток
│ ├── src/
│ │ ├── app/ # Сторінки App Router
│ │ ├── components/ # UI компоненти для повторного використання
│ │ ├── contexts/ # React контексти
│ │ ├── hooks/ # Користувацькі React хуки
│ │ └── lib/ # Допоміжні функції
│ └── package.json
└── README.md
POST /api/auth/register- Реєстрація користувачаPOST /api/auth/login- Вхід користувача
GET /api/posts- Отримати всі постиGET /api/posts/:id- Отримати пост за IDPOST /api/posts- Створити новий пост (потрібна авторизація)PUT /api/posts/:id- Оновити пост (тільки власник)
GET /api/users/me- Отримати поточного користувача (потрібна авторизація)PUT /api/users/me- Оновити профіль користувача (потрібна авторизація)DELETE /api/users/me- Видалити акаунт користувача (потрібна авторизація)
Проект використовує Git Flow з автоматизованими релізами:
main/master ←── Продакшн релізи (стабільні)
↑
develop ←── Інтеграційна гілка (бета релізи)
↑
feature/* ←── Розробка функцій
hotfix/* ←── Термінові виправлення
Автоматична версійність з конвенційними комітами:
feat: add new feature # minor version bump
fix: bug fix # patch version bump
docs: update documentation # patch version bump
refactor: code refactoring # patch version bump- CI Pipeline: Збірка, лінтинг, перевірка типів на PR
- Release Pipeline: Автоматичні релізи в продакшн
- PR Validation: Повна валідація перед злиттям
- Форкнути репозиторій
- Створити гілку з функцією (
git checkout -b feature/amazing-feature) - Закомітити зміни (
git commit -m 'feat: add amazing feature') - Пушнути до гілки (
git push origin feature/amazing-feature) - Відкрити Pull Request
Цей проект ліцензовано під MIT License - дивіться файл LICENSE для деталей.
Якщо у вас є питання або потрібна допомога з налаштуванням, будь ласка, відкрийте issue або зв'яжіться з командою розробки.
Щасливого кодування! 🎉