spectrum store

Спектр Магазин

Спектр Магазин | Надежная платформа электронной коммерции на базе Next.js, TypeScript и Shadcn.

Он использует API Fake Store, имеет панель администратора и аутентификацию JWT.

Разработанный с упором на безопасность, он реализует лучшие практики маршрутизации и действий сервера.

Посмотреть демо. Сообщить об ошибке. Запросить функцию

---

Функции

Техника

• Далее js 14 Последние возможности

• Следующие действия сервера js + Axios + Zod

• Форма перехвата React + проверка с помощью zod для клиента и сервера

• Аутентификация JWT + файлы cookie + уровень данных авторизации + промежуточное программное обеспечение

Основной

• Страница входа с аутентификацией JWT + выход из системы

• Домашняя страница с сеткой

• Страница продукта, показывающая все продукты с фильтром категории

• Страница сведений о продукте с рейтингом , ценами и кнопкой добавления в корзину.

• Корзина (добавить в корзину, удалить из корзины)

• Функциональность глобального поиска

• Переключатель тем (светлый/темный режим)

• Загрузка анимации и скелета

• Панель администратора с операциями CRUD для продуктов, нумерации страниц и диаграмм поиска.

• Безопасность : аутентификация (JWT + файлы cookie) и уровень данных авторизации + промежуточное программное обеспечение и действия сервера с проверкой.

• Оптимизация для SEO и производительности . Проект оптимизирован для SEO и производительности с использованием новейших функций Next.js и лучших практик для метатегов и карт сайта Next/Image &&.

• Адаптивный дизайн

Примечание

• вы можете использовать любого пользователя fakestoreapi для входа в систему

• для роли администратора используйте только значения по умолчанию

• Имя пользователя : mor_2314

• пароль : 83r5^_

• Вы можете открыть панель администратора и выполнить CRUD на продуктах, выполнив следующие действия:

• убедитесь, что вы входите в систему под учетной записью администратора ( mor_2314 )

• нажмите на значок пользователя

• нажмите на панель управления

Начиная

Сначала запустите сервер разработки:

1. Клонировать или форкнуть репозиторий

    git clone https://github.com/issam-seghir/spectrum-store.gitcd ./your_project

2. Установить зависимости

    установка npm

3. переименуйте файл .env.example в .env

4. Запустить сервер

    npm run dev

Откройте http://localhost:3000 в браузере, чтобы увидеть результат.

Вы можете начать редактирование страницы, изменив app/page.tsx . Страница автоматически обновляется по мере редактирования файла.

Развертывание на Верселе

Самый простой способ развернуть приложение Next.js — использовать платформу Vercel от создателей Next.js.

Дополнительные сведения см. в документации по развертыванию Next.js.

Содействие

Вклады — это то, что делает сообщество открытого исходного кода таким замечательным местом для обучения, вдохновения и творчества. Мы очень ценим любой ваш вклад.

Если у вас есть предложение, которое могло бы улучшить ситуацию, создайте форк репозитория и создайте запрос на включение. Также можно просто открыть задачу с тегом «улучшение». Не забудьте поставить проекту звезду! Еще раз спасибо!

1. Форкнуть проект

2. Создайте свою ветку функций ( git checkout -b feature/AmazingFeature )

3. Зафиксируйте свои изменения ( git commit -m 'Add some AmazingFeature' )

4. Нажмите на ветку ( git push origin feature/AmazingFeature )

5. Открыть запрос на включение

Лицензия

Распространяется по лицензии MIT. Дополнительную информацию см. в LICENSE.txt .