Skip to content

README.ukr.md

Latest commit

 

History

History
106 lines (76 loc) · 10.6 KB

README.ukr.md

File metadata and controls

106 lines (76 loc) · 10.6 KB
Raw

Читати іншою мовою: Українська, English.

NextLevel Food App

NextLevel Food

Next JS React TypeScript JavaScript Prisma Postgres AWS TailwindCSS

Це додаток NextLevel Food, створений на Next.js, TypeScript та React

Цей базовий додаток демонструє платформу для гурманів, де вони можуть ділитися своїми улюбленими рецептами з усім світом. Це місце для відкриття нових страв і спілкування з іншими поціновувачами їжі.

Додаток у цьому репозиторії розгорнуто на сайтi Vercel, за цією URL-адресою: https://nextlevel-food-amber.vercel.app/

Але ви можете використовувати цей додаток вручну на своєму локальному комп’ютері

Залежностi, якi використовуються:

  • Next.js - Фреймворк на базі React для створення швидких, повнофункціональних вебзастосунків із серверним рендерингом і генерацією статичних сторінок
  • React - Бібліотека, що використовується для створення користувацьких інтерфейсів, особливо для односторінкових застосунків, де потрібен швидкий та інтерактивний досвід
  • Prisma – Сучасний ORM, який спрощує доступ до бази даних, надаючи типобезпечний, автоматично згенерований конструктор запитів та інтуїтивно зрозумілий API для ефективної та надійної роботи з реляційними базами даних
  • TypeScript – статична типізація для безпечнішого та зручнішого в підтримці коду
  • AWS S3 - Масштабоване сховище об'єктного зберігання, яке використовується для зберігання та доставки зображень у застосунку
  • slugify – Утиліта для перетворення рядків у URL-дружні «слаги»
  • xss – Бібліотека для очищення користувацького вводу з метою запобігання атакам типу XSS (міжсайтове скриптування)
  • Tailwind CSS – CSS-фреймворк з підходом utility-first для швидкої та адаптивної стилізації інтерфейсу

Повний список залежностей можна знайти у файлі package.json.

Можливостi Next.js, якi були використані:

  • Server Components – Дозволяє відтворювати частини інтерфейсу на сервері з повним доступом до бекенд-ресурсів, покращуючи продуктивність і безпеку
  • App Router – Файлова маршрутизація з підтримкою лейаутів, вкладених маршрутів, станів завантаження/помилок та метаданих, специфічних для кожного маршруту
  • Server-Side Rendering (SSR) – Рендеринг сторінок при кожному запиті, ідеально підходить для динамічного контенту та SEO
  • Static Site Generation (SSG) – Попередній рендеринг сторінок під час збірки для швидкої роботи та зручного кешування через CDN
  • Client Components – Стандартні React-компоненти, які рендеряться у браузері; корисні для інтерактивного інтерфейсу
  • Image Optimization – Вбудована підтримка автоматичної зміни розміру зображень, відкладеного завантаження та оптимізації через CDN за допомогою компонента next/image
  • Dynamic Routing – Створення динамічних сторінок з параметрами URL за допомогою конвенцій іменування файлів та папок
  • Metadata and SEO – Додавання метаданих на рівні сторінки (статичних або динамічних) для SEO та прев’ю в соціальних мережах
  • Streaming and Suspense – Вбудована підтримка React Suspense, що дозволяє потокову передачу сегментів інтерфейсу
  • Built-in CSS and Sass Support – Стилізування компонентiв за допомогою модульних або глобальних стилів з автоматичним обмеженням області дії
  • revalidatePath – Дозволяє скасовувати кеш за вимогою для конкретних маршрутів або шляхів, забезпечуючи користувачам оновлений контент без необхідності повного перебудовування застосунку
  • Server Actions – Дозволяє виконувати серверну логіку (наприклад, обробку форм, оновлення бази даних або виклики API) безпосередньо з клієнтських компонентів без необхідності окремого API-роуту
  • useFormState – Керує та оновлює стан форми під час використання серверних дій, забезпечуючи більш чисту та реактивну обробку інтерфейсу
  • useFormStatus – Надає поточний статус відправлення форми (наприклад, у процесі), корисний для відключення кнопок або відображення індикаторів завантаження
  • Link – Компонент для навігації на стороні клієнта, який забезпечує плавні та швидкі переходи між маршрутами без повного перезавантаження сторінки
  • Image – Оптимізований компонент для зображень, який автоматично керує зміною розміру, відкладеним завантаженням та вибором формату для покращення продуктивності
  • redirect – Утиліта для програмної переадресації користувачів на різні маршрути, часто використовується після відправки форм або для контролю доступу
  • usePathname – React-хук, який повертає поточний шлях URL, корисний для умовного відображення інтерфейсу на основі активного маршруту

Можливостi React, якi були використані:

  • Components - Основні компоненти React-застосунків, повторно використовувані та інкапсульовані елементи інтерфейсу
  • useState, useEffect - Основні хуки для керування станом і життєвим циклом компонентів
  • Props - Механізм передачі даних та обробників подій від батьківських до дочірніх компонентів
  • Rendering Lists - Динамічне відображення списку елементів шляхом ітерації по масивах
  • Conditional Rendering - Відображення різних елементів інтерфейсу залежно від стану застосунку, пропсів або умов
  • useRef - Зберігає посилання на DOM-елемент або значення без виклику повторних рендерів
  • Suspense - Відображає запасний інтерфейс (наприклад, індикатор завантаження), поки завантажуються компоненти, підвантажені за допомогою lazy

Вміст

Встановлення

  1. Склонуйте репозиторій:
git clone https://github.com/labattaria/nextlevel-food.git
  1. Встановіть залежності проекту:
cd nextlevel-food
npm install

Використання

Запустіть дев-сервер за допомогою наступної команди:

npm run dev

Сервер буде доступний за адресою http://localhost:3000/