Skip to content

Кузнецов Данило, Журавель Аліна, Чорний Іван - Група KI23

Notifications You must be signed in to change notification settings

projectv1255/paletteplus

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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 – запустити додаток у продакшн-режимі.

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

About

Кузнецов Данило, Журавель Аліна, Чорний Іван - Група KI23

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published