🎒 KARPATKA: Ваш Магазин Стильних Сумок
KARPATKA — це сучасний онлайн-магазин, створений для любителів якісних та стильних сумок. Проєкт дозволяє легко переглядати асортимент, додавати товари до кошика та швидко оформлювати замовлення, забезпечуючи зручний та приємний шопінг. ✨ Основні Технології
Цей проєкт розроблений з використанням сучасного стеку технологій, що забезпечує швидкість, гнучкість та масштабованість:
Nuxt 3: Прогресивний фреймворк для розробки Vue.js додатків, що дозволяє створювати потужні та оптимізовані веб-застосунки.
Tailwind CSS: Утилітарний CSS-фреймворк для швидкого та ефективного створення кастомних дизайнів.
Shopify Storefront API: Використовується для взаємодії з продуктами та кошиком магазину Shopify, надаючи гнучкий доступ до даних.
Firebase: Надійна платформа для бекенду, яка забезпечує хостинг, автентифікацію та інші сервіси (для чого саме Firebase використовується у вашому проєкті, можна додати тут, якщо відомо, наприклад: для автентифікації користувачів, зберігання даних кошика тощо).
Pinia: Легковагове та інтуїтивно зрозуміле сховище стану для Vue.js додатків.
Nuxt Icon: Зручний модуль для використання іконок.
Swiper: Сучасний бібліотека для створення слайдерів та каруселей.
🚀 Функціонал Проєкту
KARPATKA пропонує наступні ключові можливості:
Каталог Товарів: Широкий вибір сумок, доступний для перегляду з детальним описом та зображеннями.
Перегляд Деталей Продукту: Інформація про кожну сумку, включаючи її характеристики, ціну та доступність.
Додавання в Кошик: Зручна система для додавання вибраних товарів до кошика.
Оформлення Замовлення: Простий та інтуїтивно зрозумілий процес оформлення покупки через Shopify.
Адаптивний Дизайн: Повністю адаптований інтерфейс для комфортного використання на будь-яких пристроях (десктоп, планшет, мобільний).
🛠️ Встановлення та Запуск
Щоб запустити проєкт локально, виконайте наступні кроки:
- Клонування Репозиторію
git clone https://github.com/mudmykola/karpatka.git cd karpatka
- Встановлення Залежностей
Встановіть усі необхідні залежності за допомогою pnpm, npm або yarn: pnpm install
npm install
yarn install
- Налаштування Змінних Оточення
Створіть файл .env у корені проєкту та додайте наступні змінні: SHOPIFYDOMAIN=ваший_shopifyдомен.myshopify.com SHOPIFY_STOREFRONT_TOKEN=ваш_shopify_storefront_access_token
Ви можете отримати ці дані з адмін-панелі вашого магазину Shopify: Settings -> Apps and sales channels -> Develop apps -> (Ваша приватна програма або нова) -> Storefront API access token.
- Запуск Проєкту
Запустіть проєкт у режимі розробки: pnpm dev
npm run dev
yarn dev
Проєкт буде доступний за адресою http://localhost:3000. 5. Збірка для Продакшену
Для створення оптимізованої збірки для продакшену:
pnpm build
npm run build
yarn build
Після цього ви можете запустити згенеровану збірку: pnpm preview
npm run preview
yarn preview
💡 Використання Проєкту
Після запуску проєкту ви можете:
Переглядати товари: Досліджуйте різні категорії та моделі сумок.
Додавати до кошика: Натисніть кнопку "Додати в кошик" на сторінці продукту.
Перейти до кошика: Ознайомтеся з вмістом вашого кошика та відредагуйте кількість товарів.
Оформити замовлення: Завершіть покупку, перейшовши до процесу оформлення замовлення.
🤝 Внесок у Проєкт
Ми раді будь-якому внеску у розвиток KARPATKA! Якщо у вас є ідеї, пропозиції або ви знайшли помилку, будь ласка, створіть issue або pull request. 📄 Ліцензія
Цей проєкт поширюється за ліцензією вкажіть ліцензію, наприклад MIT License. ✉️ Контакти
Якщо у вас виникли питання або пропозиції, зв'яжіться зі мною:
Ім'я: Mykola Mud'
Email: mykola.mud@gmail.com
GitHub: https://github.com/mudmykola