Skip to content

JaredNil/spoti_web

Repository files navigation

Spoti Web - Музыкальное веб-приложение

Описание

Spoti Web - это современное музыкальное веб-приложение, построенное на базе Next.js 15, которое предоставляет пользователям возможность прослушивания музыки, управления плейлистами и поиска треков. Приложение имеет интуитивно понятный интерфейс в стиле Spotify с темной темой и адаптивным дизайном.

Доступ

Основные возможности

  • 🎵 Музыкальный плеер с полным набором функций управления
  • 📱 Адаптивный дизайн для всех устройств
  • 🔍 Поиск треков и альбомов
  • 📂 Управление плейлистами
  • 👤 Система аккаунтов с настройками профиля
  • 🎨 Современный UI с использованием Tailwind CSS и shadcn/ui
  • Высокая производительность благодаря Next.js и Turbopack

Технологический стек

Основные библиотеки

  • Next.js 15.4.4 - React фреймворк с поддержкой SSR/SSG
  • React 19.1.0 - библиотека для создания пользовательских интерфейсов
  • TypeScript 5 - типизированный JavaScript
  • Redux Toolkit 2.8.2 - управление состоянием приложения
  • React Redux 9.2.0 - интеграция Redux с React

UI и стилизация

  • Tailwind CSS 4 - utility-first CSS фреймворк
  • shadcn/ui - компоненты UI на базе Radix UI
  • Radix UI - примитивы для создания доступных компонентов
  • React Icons 5.5.0 - библиотека иконок
  • Lucide React - современные SVG иконки
  • Class Variance Authority - управление вариантами CSS классов
  • Tailwind Merge - объединение Tailwind классов

Формы и валидация

  • React Hook Form 7.62.0 - библиотека для работы с формами
  • Hookform Resolvers - резолверы для валидации форм
  • zod - для хранения состояний и валидации формы

HTTP клиент и уведомления

  • Axios 1.11.0 - HTTP клиент для API запросов
  • Sonner - библиотека для toast уведомлений

Инструменты разработки

  • ESLint - линтер для JavaScript/TypeScript
  • Prettier - форматтер кода
  • Turbopack - быстрый бандлер от Vercel

Server-Side Rendering (SSR)

Приложение использует возможности Next.js 15 для оптимизации производительности:

  • App Router - новая система маршрутизации Next.js
  • Server Components - компоненты, рендерящиеся на сервере
  • Static Site Generation (SSG) - предварительная генерация статических страниц
  • Incremental Static Regeneration (ISR) - обновление статического контента
  • API Routes - серверные эндпоинты для обработки данных

Архитектурные преимущества

🚀 Производительность

  • Turbopack обеспечивает мгновенную горячую перезагрузку
  • Server Components снижают размер JavaScript бандла
  • Автоматическая оптимизация изображений и шрифтов
  • Code Splitting для загрузки только необходимого кода

🏗️ Масштабируемость

  • Feature Sliced Design архитектура для организации кода
  • Redux Toolkit с динамической загрузкой редьюсеров
  • TypeScript для типобезопасности
  • Модульная структура компонентов

🎨 Пользовательский опыт

  • Темная тема по умолчанию
  • Адаптивный дизайн для всех устройств
  • Доступность благодаря Radix UI
  • Плавные анимации и переходы

🛠️ Разработка

  • Hot Module Replacement для быстрой разработки
  • ESLint с настроенными правилами для архитектуры
  • Prettier для единообразного форматирования
  • TypeScript для предотвращения ошибок

Структура проекта

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors