Когда ко мне приходят знакомые с фразой «хочу научиться кодить, но не знаю с чего начать» — я даю им этот гайд. За последние годы я поставил этот стек десяткам людей. Ниже — именно то, что я диктую им по телефону за 30–60 минут.
Прочитайте один раз целиком, потом идите по шагам. По итогу у вас будет то же самое, что у меня — у инженера в большой международной компании.
Зачем всё это?
Современная разработка — это не «скачал программу и пишешь код». Это связка инструментов. Вот как я объясняю это друзьям:
- 📝VS Code — как Microsoft Word, но для кода. Здесь пишем.
- ☁️GitHub — как Google Drive, но с историей всех изменений. Здесь храним.
- 🚀Vercel — залил код → через 30 секунд сайт живёт в интернете по реальной ссылке. Здесь деплоим.
- 🥪Supabase — бэкенд из коробки. База данных, авторизация, файлы — без настройки серверов.
- 🤖Claude — джуниор-разработчик за $20 в месяц, который работает 24/7 и пишет код быстрее любого новичка.
Этот стек используют Notion, Adobe, Sonos и тысячи стартапов. Никакого компромисса — ставим то же самое, что у больших.
Шаг 1. VS Code — редактор кода
Берём VS Code — бесплатный редактор от Microsoft. По Stack Overflow Developer Survey 2024, его используют 73.6% разработчиков — абсолютный лидер индустрии.
Популярность редакторов кода
% разработчиков использующих ежедневно (Stack Overflow 2024, N=65,000)
Установка
Расширения — ставим только одно
Я ставлю только одно расширение — Claude Code. Всё остальное — лишнее. Открываем боковую панель Extensions (квадратики слева или Ctrl+Shift+X), ищем Claude Code, жмём Install.
Claude Code — самое популярное расширение для VS Code, ставим его
Claude Code встраивает AI прямо в редактор. Не нужны Prettier, ESLint, GitLens и прочее — Claude сам форматирует, указывает на ошибки и делает коммиты. Ставим одно расширение и работаем.
Шаг 2. GitHub — облако для кода
GitHub — облако для кода с историей всех изменений. Можно откатиться к любой точке во времени. По GitHub Octoverse 2024, на платформе более 100 миллионов разработчиков и 420+ миллионов репозиториев.
Регистрация
Прямая ссылка: github.com/signup. Free тариф — бесплатно навсегда.
Связываем VS Code с GitHub через SSH
После регистрации нужно связать ваш компьютер с GitHub — иначе не сможете пушить код. Делаем через SSH. Терминал в VS Code уже встроен — Ctrl+` открывает его.
Всегда берём SSH-ссылку, а не HTTPS
HTTPS заставляет вводить логин и пароль при каждом push. SSH делает это автоматически. Один раз настроил — больше не думаем.
Шаг 1. Создаём SSH-ключ
Открываем VS Code, открываем терминал (Ctrl+`), убеждаемся что выбран Bash, вставляем команду (заменяем почту на свою от GitHub):
ssh-keygen -t ed25519 -C "your_email@example.com"
Спросит "Enter file in which to save the key" — жмём Enter. Спросит "Enter passphrase" — жмём Enter дважды (оставляем пустым).
Шаг 2. Копируем ключ
В терминале:
cat ~/.ssh/id_ed25519.pub
Появится длинная строка начинающаяся с ssh-ed25519. Выделяем всю и копируем.
Шаг 3. Добавляем ключ в GitHub
- 1.На GitHub нажимаем на аватарку справа вверху
- 2.Settings
- 3.В левом меню: Access → SSH and GPG keys
- 4.Зелёная кнопка New SSH key
- 5.Title: например
My PC - 6.Key: вставляем скопированное → Add SSH key
Шаг 4. Проверка
В терминале VS Code:
ssh -T git@github.com
Если спросит Are you sure... — пишем yes. Должно появиться: "Hi [ник]! You've successfully authenticated..."
Базовые понятия — на пальцах
Создание первого репозитория
После регистрации жмём зелёную кнопку «New» или заходим на github.com/new. Заполняем форму:
- →Repository name: без пробелов, например
my-first-project - →Public / Private: берём Private пока учимся
- →Initialize with README: ставим галочку
- →.gitignore: выбираем Node для веб-разработки
Всегда Private!
Публичный репо видит весь мир, включая случайно закоммиченные пароли. Бот-сканеры находят их за минуты. GitHub рекомендует начинать с Private.
Когда я только начинал, я ненавидел консоль. Через полгода пересел на CLI сам — стало понятно зачем. Но SSH настроить нужно сразу — без этого боль при каждом push.
Шаг 3. Vercel — деплой в один клик
Vercel — хостинг для веб-приложений. Запушили код в GitHub — через 30 секунд он доступен по реальному URL в интернете. Созданы теми же людьми, что сделали Next.js. В 2024 подняли $250M на оценке $3.25B.
Регистрация — через GitHub
Почему через GitHub?
Когда Vercel связан с GitHub напрямую — любой push в main автоматически деплоит сайт. Это называется Git-based deployment — современный стандарт. Не надо ничего делать вручную.
Шаг 4. Claude Pro — платить придётся
Это инвестиция в себя. Бесплатный тариф для серьёзной работы не подходит — лимиты по сообщениям, нет Claude Code, нет проектов. Берём Pro минимум — все так делают, я тоже.
Подписываемся на claude.ai/upgrade. Тарифы: anthropic.com/pricing.
Как оплатить из Казахстана
Карты Kaspi и Halyk напрямую не работают. Три способа:
Подробнее: открытие Wise и Binance Card.
Шаг 5. Запускаем первый проект локально
Всё настроили — теперь запускаем что-то реальное. Открываем Claude Code в VS Code (иконка слева или Ctrl+Esc) и пишем прямо в чате:
Установи зависимости и запусти dev-сервер. Чтобы я мог открыть npm run dev и увидеть проект на localhost:3000.
Claude сам выполнит:
- →
npm install— скачает все зависимости (это какpip installесли знаком с Python) - →
npm run dev— запустит локальный сервер
Что такое localhost:3000?
localhost = «этот компьютер», 3000 = порт (как номер квартиры в доме). Открываем в браузере http://localhost:3000 — видим свой сайт. Никто кроме нас его пока не видит.
Когда видим работающий сайт — говорим Claude:
Закоммить и запушь в main с понятным сообщением
Всё. Через 30 секунд код на GitHub. Vercel автоматически задеплоит на публичный URL — сайт живёт в интернете.
Шаг 6. Supabase — бэкенд из коробки
Это опциональный шаг
Если просто учишься — можно пропустить. Supabase нужен когда уже строишь что-то с базой данных, авторизацией, файлами.
Supabase — готовый бэкенд с базой данных, авторизацией пользователей, файловым хранилищем и реалтаймом. Раньше для этого нужно было поднимать PostgreSQL, настраивать Auth0, настраивать S3. Сейчас — один клик. Open-source альтернатива Firebase. 70K+ звёзд на GitHub. В 2024 подняли $80M Series C.
Регистрация и создание проекта
Прямая ссылка: supabase.com. Создание проекта — 2–3 минуты.
Сохраняем ключи
Никогда не коммитьте service_role key в Git!
Бот-сканеры GitHub находят такие ключи за минуты. Кладём в .env.local и добавляем его в .gitignore.
Связываем Vercel и Supabase
Vercel и Supabase сделали официальную интеграцию. Заходим на vercel.com/integrations/supabase, жмём Add Integration — переменные окружения проставятся автоматически. Или добавляем вручную в Settings → Environment Variables:
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIs...
Сколько это стоит
Месячная стоимость стека ($)
Зелёное — бесплатно. Платное только Claude.
Средняя зарплата джуниор-разработчика в Алматы по данным hh.kz — 350–500K тенге ($700–1000). Платить $20–100 в месяц за инструменты, которые ускоряют работу в разы — это инвестиция, а не расход.
Что дальше?
Рабочее место настроено. Вот что делаем дальше — в порядке приоритета:
Если что-то непонятно — пишите в Claude Code Discussions, читайте Next.js Learn — бесплатный официальный курс.
The best way to learn is to build something. Не читайте 10 книг по программированию — сделайте один настоящий проект. За месяц практики научитесь больше, чем за год теории.
В 2026 году барьер входа в разработку ниже чем когда-либо. Бесплатные инструменты, AI-помощник за $20. Единственное что нужно — начать. Открываем VS Code и создаём первый файл.
Минимальный стартер-пак
Прошёл статью? Вот финальный чеклист — 5 действий, которые нужно сделать прямо сейчас. Каждое занимает 5–10 минут.
Установить VS Code
code.visualstudio.com/download
Создать аккаунт GitHub
github.com/signup — бесплатно навсегда
Создать аккаунт Vercel
vercel.com/signup — через GitHub, Hobby план бесплатный
Создать аккаунт Supabase
supabase.com — нужен когда строите что-то с базой данных
Создать аккаунт Claude + оплатить Pro
claude.ai/upgrade — $20/мес, нужен для серьёзной работы
Прошёл все 5 шагов — пиши Claude первую задачу. Всё.
