1.Фронтенд и бэкенд
С этого начинается понимание любого веб-приложения. Прежде чем писать код, нужно увидеть, из каких двух больших частей состоит любой сайт или сервис.
- Фронтенд. Всё, что видит и с чем взаимодействует пользователь: страницы, кнопки, формы. Работает в браузере.
- Бэкенд. Скрытая серверная часть: логика, база данных, обработка запросов. Пользователь её не видит.
- Как они общаются. Фронтенд отправляет запрос на бэкенд по сети, получает данные и показывает их пользователю.
2.React
Фронтенд нашей платформы (SabakHub) написан на React — самой популярной библиотеке для построения пользовательских интерфейсов. Понимая React, ты понимаешь, как устроена видимая часть проекта.
- Компоненты. Интерфейс собирается из небольших переиспользуемых блоков — как из деталей конструктора.
- Состояние (state). Данные, при изменении которых интерфейс автоматически перерисовывается.
- Почему именно React. Огромная экосистема, поддержка сообщества и именно на нём построена эта платформа.
3.Git и GitHub
Git — система контроля версий: она хранит историю всех изменений кода. GitHub — облачный сервис, где репозитории живут и где над ними работает команда. Для вайбкодера это страховка: любое рабочее состояние можно сохранить и вернуть.
- Git (локально). commit — сохранить состояние, ветки — параллельная работа, откат — вернуться назад.
- GitHub (облако). Хранение репозитория, совместная работа, pull request — обсуждение изменений.
- Главное правило. Рабочая версия — в коммит. Сломал — откатился. Без Git вайбкодинг превращается в рулетку.
4.Бэкенд: serverless-функции на Node.js
У нашего проекта тоже есть бэкенд — но устроен он современно. Это не один большой постоянно работающий сервер, а отдельные функции, которые запускаются «по требованию».
Вся платформа построена на Node.js — это среда, которая позволяет запускать JavaScript не в браузере, а на сервере. То есть один и тот же язык и на фронтенде, и на бэкенде.
Фронтенд (React) — это то, что видит пользователь. А наш бэкенд — это набор функций, которые выполняются на Netlify (их называют Netlify Functions).
Такие функции называют serverless («бессерверными»): тебе не нужно поднимать и обслуживать сервер. Функция «просыпается», когда приходит запрос, выполняет задачу — например, обрабатывает платёж или отправляет уведомление — и снова «засыпает».
- Node.js. JavaScript на сервере — на нём работает вся серверная логика проекта.
- Netlify Functions. Наши бэкенд-функции, которые запускаются по запросу с фронтенда.
- Serverless. Не нужно держать сервер постоянно — функция вызывается только когда нужна.
5.Облачные сервисы: Netlify и Firebase
Современные приложения почти не держат «своих» серверов — они используют облачные сервисы. Облако — это чужие серверы (дата-центры), которые ты используешь через интернет, не заботясь о железе, его обслуживании и обновлениях.
Netlify
Сюда деплоится наш фронтенд и отсюда запускаются serverless-функции (бэкенд). По сути, это «дом» для всего нашего приложения в интернете.
Google Firebase
Backend-as-a-service от Google. В нашем проекте отвечает сразу за несколько вещей — база данных, вход пользователей и хранение файлов.
- Firestore. Облачная база данных Firebase, где хранятся все данные платформы.
- Authentication. Вход и регистрация пользователей — Firebase берёт это на себя.
- Storage. Хранилище файлов: аватарки, документы, изображения.
Продолжение следует
Это живой учебный материал — мы будем добавлять новые этапы и видео по ходу дела: базы данных, аутентификацию, безопасность и работу с ИИ.