{"id":29130515,"url":"https://github.com/kudzeri/next-x-course","last_synced_at":"2026-05-02T20:39:44.776Z","repository":{"id":301578199,"uuid":"1009699319","full_name":"Kudzeri/next-x-course","owner":"Kudzeri","description":"Современная имплементация социальной сети в стиле X (Twitter), созданная с использованием Next.js 15, TypeScript и Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-06-27T16:02:57.000Z","size":95,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-27T16:24:30.083Z","etag":null,"topics":["next15","nextjs","tailwindcss","typescript","x-clone"],"latest_commit_sha":null,"homepage":"https://next-x-course.onrender.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kudzeri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-27T15:02:44.000Z","updated_at":"2025-06-27T16:03:01.000Z","dependencies_parsed_at":"2025-06-27T16:34:47.781Z","dependency_job_id":null,"html_url":"https://github.com/Kudzeri/next-x-course","commit_stats":null,"previous_names":["kudzeri/next-x-course"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kudzeri/next-x-course","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kudzeri%2Fnext-x-course","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kudzeri%2Fnext-x-course/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kudzeri%2Fnext-x-course/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kudzeri%2Fnext-x-course/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kudzeri","download_url":"https://codeload.github.com/Kudzeri/next-x-course/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kudzeri%2Fnext-x-course/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262708005,"owners_count":23351532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["next15","nextjs","tailwindcss","typescript","x-clone"],"created_at":"2025-06-30T04:05:59.067Z","updated_at":"2025-10-25T03:34:11.724Z","avatar_url":"https://github.com/Kudzeri.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# X/Twitter Clone\n\nПолнофункциональная современная социальная сеть в стиле X (Twitter) с интегрированным интернет-магазином, демонстрирующая различные методы рендеринга Next.js.\n\n## 🚀 Особенности\n\n- ✨ **Современный стек**: Next.js 15, React 19, TypeScript 5\n- 🎨 **Стилизация**: Tailwind CSS 4 для современного дизайна\n- 📱 **Отзывчивый дизайн**: Адаптивная верстка для всех устройств\n- 🔗 **Маршрутизация**: App Router с группированными маршрутами\n- 🖼️ **Оптимизация изображений**: Next.js Image component\n- 🌙 **Темная тема**: Элегантная темная тема по умолчанию\n- 🛒 **Интернет-магазин**: Демонстрация SSR, SSG и ISR\n- 🔐 **Middleware**: Система аутентификации и защиты маршрутов\n- 🎯 **Server Actions**: Серверные действия для отправки твитов\n- 🧩 **Компонентная архитектура**: Переиспользуемые UI компоненты\n\n## 📁 Структура проекта\n\n```\nsrc/\n├── app/                        # App Router (Next.js 13+)\n│   ├── (public)/              # Публичные страницы\n│   │   ├── (home)/           # Главная страница с лентой твитов\n│   │   ├── explore/          # Страница исследования\n│   │   ├── profile-fake/     # Защищенная страница профиля\n│   │   ├── shop/             # Интернет-магазин\n│   │   │   ├── ssg/         # Static Site Generation\n│   │   │   └── isr/         # Incremental Static Regeneration\n│   │   └── u/[username]/     # Динамические профили пользователей\n│   ├── lib/                   # API функции\n│   ├── layout.tsx            # Корневой layout\n│   └── globals.css           # Глобальные стили\n├── components/               # Переиспользуемые компоненты\n│   ├── Header.tsx           # Навигационный header\n│   ├── Menu.tsx             # Динамическое меню навигации\n│   └── MenuItem.tsx         # Элемент меню\n├── config/                  # Конфигурация\n│   ├── pages.config.ts      # Конфигурация страниц\n│   └── pages.class.ts       # Классы страниц\n├── data/                    # Данные приложения\n│   ├── tweets.data.ts       # Моковые данные твитов\n│   └── menu.data.ts         # Конфигурация меню\n├── server-actions/          # Server Actions\n│   └── post-tweet.ts        # Действие отправки твитов\n├── shared/\n│   └── types/              # TypeScript типы\n│       ├── tweet.interface.ts\n│       ├── product.type.ts\n│       ├── menu-item.interface.ts\n│       ├── review.type.ts\n│       ├── meta.type.ts\n│       └── dimension.type.ts\n├── middleware.ts           # Next.js middleware\n└── constants.ts           # Глобальные константы\n```\n\n## 🛠️ Технологии\n\n- **Framework**: Next.js 15.3.4\n- **Language**: TypeScript 5\n- **Styling**: Tailwind CSS 4\n- **React**: React 19\n- **Navigation**: path-to-regexp для роутинга\n- **API**: DummyJSON для демо-данных\n- **Linting**: ESLint 9 с Next.js конфигурацией\n\n## 🚀 Начало работы\n\n1. **Установка зависимостей**:\n```bash\nnpm install\n```\n\n2. **Запуск сервера разработки**:\n```bash\nnpm run dev\n```\n\n3. **Откройте в браузере**: [http://localhost:3000](http://localhost:3000)\n\n## 📜 Доступные скрипты\n\n- `npm run dev` - Запуск в режиме разработки\n- `npm run build` - Сборка для production\n- `npm run start` - Запуск production сервера\n- `npm run lint` - Проверка кода ESLint\n\n## 🏗️ Функциональность\n\n### 🏠 Главная страница (`/`)\n- Лента твитов с данными из моков\n- Форма для создания новых твитов (Server Actions)\n- Отображение авторов и текста твитов\n- Ссылки на профили пользователей\n\n### 🔍 Страница исследования (`/explore`)\n- Исследование контента и пользователей\n- Компоненты с Suspense для оптимизации загрузки\n\n### 👤 Профили пользователей\n- Динамические маршруты `/u/[username]`\n- Защищенная страница профиля `/profile-fake` с middleware\n\n### 🛒 Интернет-магазин\nДемонстрация различных методов рендеринга Next.js:\n\n#### **SSR (Server-Side Rendering)** `/shop`\n- Рендеринг на сервере при каждом запросе\n- `cache: \"no-store\"` для свежих данных\n- Карточки товаров с изображениями и ценами\n\n#### **SSG (Static Site Generation)** `/shop/ssg`\n- Статическая генерация на этапе сборки\n- Максимальная производительность\n- Предварительно сгенерированные страницы\n\n#### **ISR (Incremental Static Regeneration)** `/shop/isr`\n- Переодическое обновление статических страниц\n- `revalidate: 300` (5 минут)\n- Баланс между производительностью и свежестью данных\n\n### 🔐 Middleware и аутентификация\n- Защита маршрутов `/profile-fake/*`\n- Проверка токенов в cookies\n- Автоматическое перенаправление на главную\n\n### 📝 Server Actions\n- Обработка форм на сервере\n- Отправка твитов без JavaScript на клиенте\n- Современный подход к серверной логике\n\n## 🧩 Компоненты\n\n### Основные компоненты\n- `Tweet` - Отображение отдельного твита\n- `TweetForm` - Форма создания твитов с Server Actions\n- `Header` - Навигационная панель с логотипом X\n- `Menu` - Динамическое меню с активными состояниями\n- `MenuItem` - Элемент меню с подсветкой активной страницы\n- `ProductCard` - Карточка товара в магазине\n\n### Типизация\nПолная типизация с TypeScript:\n- `ITweet` - Интерфейс твитов\n- `Product` - Сложный тип товаров с вложенными объектами\n- `IMenuItem` - Интерфейс элементов меню\n- `Review`, `Meta`, `Dimensions` - Вспомогательные типы\n\n## 🎨 Дизайн\n\nПриложение использует современную темную тему с:\n- Черный фон (`bg-black`)\n- Белый текст с прозрачностью\n- Границы с низкой прозрачностью (`border-white/10`)\n- Логотип X в качестве брендинга\n- Адаптивная сетка для товаров\n- Hover-эффекты для интерактивности\n\n## 🔧 Архитектурные решения\n\n### Группированные маршруты\n- `(public)` - группа публичных страниц\n- `(home)` - группировка главной страницы\n- Чистая структура URL без влияния на роутинг\n\n### Конфигурационный подход\n- Централизованная конфигурация страниц\n- Типизированные константы\n- Легкая масштабируемость\n\n### API Integration\n- Интеграция с DummyJSON API\n- Различные стратегии кеширования\n- Типизированные API ответы\n\n## 📈 Производительность\n\n- **SSG**: Максимальная скорость для статического контента\n- **ISR**: Баланс между скоростью и свежестью данных\n- **SSR**: Свежие данные при каждом запросе\n- **Image Optimization**: Автоматическая оптимизация изображений\n- **Code Splitting**: Автоматическое разделение кода Next.js\n\n## 🔒 Безопасность\n\n- Middleware для защиты приватных маршрутов\n- Валидация на сервере через Server Actions\n- Типизированные параметры форм\n- Безопасное хранение токенов в cookies\n\n## 📝 Следующие шаги\n\n- [ ] Полная система аутентификации с JWT\n- [ ] База данных для хранения твитов и пользователей\n- [ ] Система лайков и ретвитов\n- [ ] Загрузка изображений в твиты\n- [ ] Real-time обновления с WebSocket\n- [ ] Корзина покупок в интернет-магазине\n- [ ] Система оплаты\n- [ ] Уведомления и подписки\n- [ ] Поиск по твитам и пользователям\n- [ ] Темная/светлая тема переключатель\n\n## 🚀 Развертывание\n\nРекомендуется развертывать на [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) для оптимальной производительности Next.js приложений.\n\n### Переменные окружения\n```env\n# API URL для внешних данных\nAPI_URL=https://dummyjson.com/\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkudzeri%2Fnext-x-course","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkudzeri%2Fnext-x-course","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkudzeri%2Fnext-x-course/lists"}