Skip to content

Latest commit

 

History

History
80 lines (62 loc) · 3.87 KB

README.md

File metadata and controls

80 lines (62 loc) · 3.87 KB

Palette+

Сучасний генератор кольорових палітр, створений на основі Next.js 14 і shadcn/ui.

✨ Особливості

  • 🎨 Генерація випадкових кольорових палітр
  • 💾 Збереження улюблених кольорів та палітр
  • 🖼️ Витяг кольорів з зображень
  • 📂 Експорт палітр у різних форматах (HEX, RGB, HSL)
  • 🧩 Симуляція дальтонізму для перевірки доступності кольорів
  • 🔄 Функціонал скасування/повтору дій
  • 📦 Перетягування для зміни порядку кольорів
  • 🖌️ Генерація колажів із кольорів

🛠️ Використані технології

  • Next.js 14 – сучасний фреймворк для побудови веб-додатків.
  • shadcn/ui – бібліотека UI-компонентів для швидкої розробки інтерфейсу.
  • Tailwind CSS – для кастомізації стилів.
  • colord – потужний інструмент для роботи з кольорами (конвертація, аналіз, модифікація).
  • zustand – легкий і гнучкий менеджер станів.
  • Framer Motion – бібліотека для створення анімацій.
  • Vercel – хостинг для швидкого деплою.

🚀 Як запустити

1️⃣ Клонувати репозиторій

git clone https://github.com/projectv1255/paletteplus.git
cd palette-plus

2️⃣ Встановити залежності

Переконайтесь, що на вашому пристрої встановлено Node.js (версія 18 або вище) та npm/yarn.

npm install
# або
yarn install

3️⃣ Налаштувати середовище

Створіть файл .env.local у кореневій директорії і додайте потрібні змінні оточення. Наприклад:

NEXTAUTH_URL=http://localhost:3000
DATABASE_URL=ваш_URL_до_бази_даних
NEXT_PUBLIC_API_KEY=ваш_публічний_ключ

4️⃣ Запустити локальний сервер

npm run dev
# або
yarn dev

Відкрийте http://localhost:3000 у вашому браузері, щоб переглянути додаток.

5️⃣ Деплой на Vercel

  1. Зареєструйтесь або увійдіть до Vercel.
  2. Створіть новий проект, підключивши наш репозиторій.
  3. Vercel автоматично визначить використання Next.js та налаштує збірку.
  4. Укажіть ваші змінні оточення у розділі Settings > Environment Variables.
  5. Деплой виконається автоматично після збереження.

📜 Скрипти

  • npm run dev – запустити додаток у режимі розробки.
  • npm run build – створити оптимізовану збірку для продакшну.
  • npm run start – запустити додаток у продакшн-режимі.

🎉 Готово! Тепер ви можете створювати гармонійні кольорові палітри та ділитися ними з іншими! ✨