From a96be6d41c6b6786e9032a65ee3a7d25fab3c521 Mon Sep 17 00:00:00 2001 From: nekri Date: Fri, 24 Jul 2026 23:41:33 +0300 Subject: [PATCH] Add full-stack learning roadmap (ROADMAP.md + Ukrainian translation) Document what to learn after "TypeScript in a Month": a stage-by-stage path (Node, Express, SQL, auth, Redis, Docker, React, Next.js) with time estimates, recommended order, and per-stage projects. English + Ukrainian. Co-Authored-By: Claude Opus 4.8 --- ROADMAP.md | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++ ROADMAP.uk.md | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 206 insertions(+) create mode 100644 ROADMAP.md create mode 100644 ROADMAP.uk.md diff --git a/ROADMAP.md b/ROADMAP.md new file mode 100644 index 0000000..0a98b62 --- /dev/null +++ b/ROADMAP.md @@ -0,0 +1,103 @@ +# 🗺️ Full-Stack Learning Roadmap + +A practical path from "I know TypeScript basics" to "I can build and ship a typed +full-stack app." Pace assumes **3–4 hours/day, ~5 days/week (~15–20 h/week)**, building +on a JavaScript + TypeScript foundation. + +Estimates target **working, job-ready competence** (build real projects, handle junior +tasks) — not deep mastery. Mastery comes later, from shipping. + +> This repo (**TypeScript in a Month**) covers stage 1. The rest is what to learn next. + +## Timeline overview + +| # | Topic | Time | Depends on | +|---|-------|------|------------| +| 1 | **TypeScript** | 3–4 weeks | JS basics | +| 2 | **Node.js** | 2–3 weeks | TS | +| 3 | **Express** | 1.5–2 weeks | Node | +| 4 | **SQL / MSSQL** | 2.5–3 weeks | — (can run in parallel) | +| 5 | **Auth / security** | 2 weeks | Express, SQL | +| 6 | **Redis** | 1 week | Express | +| 7 | **Docker** | 1–1.5 weeks | a running app to containerize | +| 8 | **React** | 4–5 weeks | TS | +| 9 | **Next.js** | 3–4 weeks | React | + +**Total: ≈ 5–6 months** of focused study; **6–7 months** realistically, with rest and +review. The single biggest accelerator is building one end-to-end project mid-way, +rather than learning each tool in isolation. + +## Recommended order + +``` +TypeScript → Node.js → Express → SQL/MSSQL → Auth/security → Redis → Docker → React → Next.js +``` + +Backend chain first, then the big frontend block (React → Next). If frontend excites you +more, you can move React right after TypeScript and do the backend later — both orders work. + +--- + +## Stage-by-stage + +### 1. TypeScript — 3–4 weeks +You're here. Finish all 20 blocks of this repo. Goal: read/write strict, idiomatic TS +without fighting the compiler. +**Checkpoint:** complete the capstone (block 20) with zero type errors. + +### 2. Node.js — 2–3 weeks +Modules (ESM/CJS), the event loop, `fs`/`path`/`process`, streams (lightly), `npm`, +environment variables, building a small CLI or script tool. +**Project:** a typed CLI (e.g. a file organizer or a small JSON data tool). + +### 3. Express — 1.5–2 weeks +Routing, middleware, request/response lifecycle, REST design, error handling, validation +(e.g. `zod`). Type your handlers properly. +**Project:** a REST API for a simple domain (tasks, notes, bookmarks) — in-memory first. + +### 4. SQL / MSSQL — 2.5–3 weeks +Universal SQL first: `SELECT`/`JOIN`/`GROUP BY`, indexes, transactions, schema design, +normalization. Then MSSQL specifics: T-SQL, stored procedures, connecting from Node +(`mssql` package). +**Project:** move your Express API's data into a real database. + +### 5. Auth / security — 2 weeks +Password hashing (`bcrypt`/`argon2`), sessions vs JWT, refresh tokens, cookies, RBAC, +and the OWASP Top 10 basics (injection, XSS, CSRF, secrets handling). +**Project:** add register/login + protected routes to your API. + +### 6. Redis — 1 week +Key/value model, caching patterns, TTL, session storage, simple rate limiting and queues. +**Project:** cache expensive queries and store sessions in Redis. + +### 7. Docker — 1–1.5 weeks +Images vs containers, `Dockerfile`, layers, volumes, networking, and `docker-compose` to +run app + DB + Redis together. +**Project:** containerize your full backend with one `docker-compose up`. + +### 8. React — 4–5 weeks +Components, props, state, hooks (`useState`/`useEffect`/`useRef`/`useMemo`/custom hooks), +lists/forms, lifting state, context, data fetching, and TypeScript with React (typed props +and events). +**Project:** a frontend for your API (auth flow + CRUD UI). + +### 9. Next.js — 3–4 weeks +App Router, server vs client components, routing/layouts, data fetching, server actions, +SSR/SSG/ISR, API routes, and deployment. +**Project:** rebuild your frontend as a Next.js app and deploy it. + +--- + +## Capstone (the payoff) +After stages 2–7, you'll have most of a backend already. Tie it together: + +> **A typed full-stack app:** Next.js frontend → Express (or Next API) backend → MSSQL +> database → Redis cache/sessions → JWT auth → all running via Docker Compose. + +Build this once and you've practiced ~80% of the list in a realistic setting. + +## Tips +- Don't learn tools in isolation — assemble them into one growing project. +- Redis and Docker don't need standalone "courses"; they click once you have an app. +- Keep `strict` TypeScript on everywhere — it pays back across the whole stack. +- Commit often; ship something small at the end of every stage. diff --git a/ROADMAP.uk.md b/ROADMAP.uk.md new file mode 100644 index 0000000..c540475 --- /dev/null +++ b/ROADMAP.uk.md @@ -0,0 +1,103 @@ +# 🗺️ Дорожня карта Full-Stack навчання + +Практичний шлях від «знаю основи TypeScript» до «можу зібрати й задеплоїти типізований +full-stack застосунок». Темп: **3–4 год/день, ~5 днів/тиждень (~15–20 год/тиждень)**, +на базі JavaScript + TypeScript. + +Оцінки — для рівня **впевненого junior** (роблю реальні проєкти, виконую робочі задачі), +а не глибокого майстерства. Майстерність приходить пізніше, від практики. + +> Цей репозиторій (**TypeScript in a Month**) покриває етап 1. Решта — що вчити далі. + +## Огляд за часом + +| # | Тема | Час | Залежить від | +|---|------|-----|--------------| +| 1 | **TypeScript** | 3–4 тижні | основи JS | +| 2 | **Node.js** | 2–3 тижні | TS | +| 3 | **Express** | 1.5–2 тижні | Node | +| 4 | **SQL / MSSQL** | 2.5–3 тижні | — (можна паралельно) | +| 5 | **Auth / безпека** | 2 тижні | Express, SQL | +| 6 | **Redis** | 1 тиждень | Express | +| 7 | **Docker** | 1–1.5 тижні | готовий застосунок | +| 8 | **React** | 4–5 тижнів | TS | +| 9 | **Next.js** | 3–4 тижні | React | + +**Разом: ≈ 5–6 місяців** зосередженого навчання; **6–7 місяців** реалістично, з +відпочинком і закріпленням. Найбільше пришвидшує — зібрати один наскрізний проєкт +посередині шляху, а не вчити кожен інструмент окремо. + +## Рекомендований порядок + +``` +TypeScript → Node.js → Express → SQL/MSSQL → Auth/безпека → Redis → Docker → React → Next.js +``` + +Спочатку весь бекенд-ланцюжок, потім великий фронтенд-блок (React → Next). Якщо фронтенд +цікавіший — можна підняти React одразу після TypeScript, а бекенд зробити пізніше. + +--- + +## Поетапно + +### 1. TypeScript — 3–4 тижні +Ти тут. Пройди всі 20 блоків цього репо. Мета: читати/писати строгий, ідіоматичний TS, +не воюючи з компілятором. +**Контрольна точка:** капстоун (блок 20) без жодної помилки типів. + +### 2. Node.js — 2–3 тижні +Модулі (ESM/CJS), event loop, `fs`/`path`/`process`, стріми (поверхнево), `npm`, змінні +середовища, маленький CLI-інструмент. +**Проєкт:** типізований CLI (наприклад, органайзер файлів або обробник JSON). + +### 3. Express — 1.5–2 тижні +Роутинг, middleware, життєвий цикл запиту, REST-дизайн, обробка помилок, валідація +(наприклад `zod`). Типізуй обробники як слід. +**Проєкт:** REST API для простої предметної області (завдання, нотатки) — спершу в пам'яті. + +### 4. SQL / MSSQL — 2.5–3 тижні +Спершу універсальний SQL: `SELECT`/`JOIN`/`GROUP BY`, індекси, транзакції, дизайн схеми, +нормалізація. Потім специфіка MSSQL: T-SQL, збережені процедури, підключення з Node +(пакет `mssql`). +**Проєкт:** перенеси дані свого Express API в справжню БД. + +### 5. Auth / безпека — 2 тижні +Хешування паролів (`bcrypt`/`argon2`), сесії vs JWT, refresh-токени, кукі, RBAC і базис +OWASP Top 10 (ін'єкції, XSS, CSRF, робота з секретами). +**Проєкт:** додай реєстрацію/логін + захищені роути. + +### 6. Redis — 1 тиждень +Модель ключ/значення, патерни кешування, TTL, зберігання сесій, простий rate limiting і черги. +**Проєкт:** кешуй важкі запити і зберігай сесії в Redis. + +### 7. Docker — 1–1.5 тижні +Образи vs контейнери, `Dockerfile`, шари, томи, мережі та `docker-compose` для запуску +застосунку + БД + Redis разом. +**Проєкт:** запакуй весь бекенд в один `docker-compose up`. + +### 8. React — 4–5 тижнів +Компоненти, props, стан, хуки (`useState`/`useEffect`/`useRef`/`useMemo`/власні хуки), +списки/форми, підняття стану, context, отримання даних і TypeScript з React (типізовані +props та події). +**Проєкт:** фронтенд для твого API (авторизація + CRUD UI). + +### 9. Next.js — 3–4 тижні +App Router, серверні vs клієнтські компоненти, роутинг/лейаути, отримання даних, серверні +дії, SSR/SSG/ISR, API-роути та деплой. +**Проєкт:** перероби фронтенд на Next.js і задеплой. + +--- + +## Фінальний проєкт (нагорода) +Після етапів 2–7 більшість бекенду вже буде готова. Зведи все докупи: + +> **Типізований full-stack застосунок:** фронтенд Next.js → бекенд Express (або Next API) +> → база MSSQL → кеш/сесії Redis → JWT-авторизація → усе через Docker Compose. + +Збери це один раз — і ти відпрацював ~80% списку в реальних умовах. + +## Поради +- Не вчи інструменти ізольовано — збирай їх в один проєкт, що зростає. +- Redis і Docker не потребують окремих «курсів» — вони заходять, коли вже є застосунок. +- Тримай строгий TypeScript усюди — це окупається на всьому стеку. +- Коміть часто; в кінці кожного етапу випускай щось маленьке.