5 слайд :

Усі ці тенденції розвитку веб-застосунків мають значний вплив на компанії та їхній

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

NextJS (React)
Фреймворк для розробки серверних React-додатків
з високою продуктивністю та швидким часом відгуку.

MongoDB + Prisma
Документ-орієнтована база даних, яка забезпечує
зберігання та організацію даних у вигляді документів.

NextAuth.js
Бібліотека для аутентифікації користувачів в додатках на основі Next.js та Node.js

TypeScript
Мова програмування, яка є розширенням мови JavaScript,
що дозволяє додавати до неї типи даних та інші нові функції.

Apollo (Client/ Server)

Дві потужні бібліотеки для розробки веб-застосунків,
які забезпечують ефективну взаємодію клієнта та сервера

GraphQL
Мова запитів для API, дозволяє розробникам запитувати дані,
які їм потрібні, та отримувати їх у вигляді одного об'єкту

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

SPA/SSR
Сайт був створений за технологію SPA та SSR що дозволяє нам не використовувати
сторінки а рендерити (відбудовувати сторінку за віртуальним DOM без перезагрузки
сторінки)
одну й таку саму сторінку на весь час користування застосунку.
Це дозволяє економити трафік та зменшити завантаження на наш сервер.

SPA (Single Page Application) - це тип веб-додатків, які не оновлюють

сторінку при взаємодії з користувачем, а замість цього динамічно змінюють контент
відповідно до дій користувача на сторінці.

SSR (Server-Side Rendering) - це процес генерації HTML на сервері та повернення

його
клієнту як відповідь на запит.

Далі буде надано перелік можливих дій на сайті з коротким описом.

1 Слайд з кодом.

Даний код використовує Apollo Server для створення GraphQL сервера.

Основні кроки, які відбуваються в коді:

Імпортується необхідні модулі та залежності, такі як makeExecutableSchema,

PrismaClient, ApolloServer, express тощо.

Створюється схема GraphQL за допомогою makeExecutableSchema,

яка використовує типи (typeDefs) та резолвери (resolvers).

Ініціалізується Express додаток та HTTP сервер.

Створюється WebSocket сервер, який приймає HTTP сервер в якості параметру.

Ініціалізуються контекстні параметри, такі як prisma (об'єкт PrismaClient) і pubsub

(об'єкт PubSub).

Визначається функція getSubscriptionContext,

яка повертає контекст GraphQL залежно від параметрів підключення.

Використовується useServer для підключення WebSocket сервера до Apollo Server

з використанням заданої схеми та контексту.

Створюється Apollo Server з використанням заданої схеми та плагінів

для належного закриття HTTP і WebSocket серверів.

Налаштовується Express додаток для обробки GraphQL запитів,

використовуючи expressMiddleware з Apollo Server.

HTTP сервер починає слухати на певному порту, щоб обробляти запити до GraphQL
сервера.

Це загальний опис функціональності, яку виконує цей код.

Він створює сервер з підтримкою GraphQL, WebSocket і забезпечує належну обробку
запитів до
сервера за допомогою Apollo Server.

2. Слайд 1 картинка

Даний код є описом моделей даних, які використовуються у системі з базою даних
MongoDB через Prisma.
Він використовує Prisma для генерації клієнта, який надає доступ до бази даних.

Основні елементи коду:

1. `generator`: Вказує на тип генерації, в даному випадку "prisma-client-js".

Це означає, що буде згенерований JavaScript клієнт для взаємодії з базою даних.

2. `datasource`: Визначає джерело даних, яке використовується для підключення до

бази даних MongoDB.
Вказується назва провайдера ("mongodb") та URL для підключення, який береться з
оточувальних змінних (`env("MONGODB_URI")`).

3. `model`: Описує сутності (таблиці) в базі даних. Кожна модель представляє окрему
таблицю.
Наприклад, модель `Account` містить поля, такі як `id`, `userId`, `type`,
`provider`,
тощо. Кожне поле має свої атрибути, такі як `@id` для позначення як первинний ключ,
`@default(auto())` для автоматичної генерації значення, `@map("_id")` для
зазначення
імені стовпця в базі даних, `@db.ObjectId` для використання типу ObjectId в
MongoDB.
Також в моделі можуть бути відношення між таблицями, вказані за допомогою
`@relation`.

4. `@@unique`: Визначає унікальність комбінації полів у моделі.

Наприклад, `[provider, providerAccountId]` означає, що комбінація значень полів
`provider`
і `providerAccountId` повинна бути унікальною.

Цей код допомагає визначити структуру даних в системі і використовує

Prisma для генерації клієнта, який надає простий спосіб взаємодії з базою даних
MongoDB у додатку.

2. Слайд 2 картинка

Даний код використовує бібліотеку NextAuth для налаштування аутентифікації в

додатку з використанням Google-акаунта як провайдера.

Основні елементи коду:

import: Імпорт необхідних модулів для NextAuth, провайдера Google, адаптера Prisma
та клієнта Prisma.

Створення екземпляра PrismaClient: Виконується створення екземпляра PrismaClient,

який буде використовуватися для взаємодії з базою даних через Prisma.

Експорт конфігурації NextAuth: Використовується export default для експорту

функції,
яка налаштовує аутентифікацію з використанням NextAuth.

adapter: Вказується адаптер PrismaAdapter, який дозволяє використовувати базу даних

через Prisma як сховище для сесій та користувачів, збережених в NextAuth.

providers: Вказується провайдер, який використовується для аутентифікації.

У даному випадку використовується провайдер Google, для чого передаються clientId
та clientSecret,
які беруться з оточувальних змінних.

secret: Вказується секретний ключ, який використовується для підпису токенів

аутентифікації.

callbacks: Вказується об'єкт з функціями зворотнього виклику для обробки певних

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

Цей код налаштовує аутентифікацію в додатку з використанням провайдера