Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexxsub/fullstack-awesome

Список инструментов для fullstack разработки
https://github.com/alexxsub/fullstack-awesome

List: fullstack-awesome

Last synced: 16 days ago
JSON representation

Список инструментов для fullstack разработки

Awesome Lists containing this project

README 

        
# Fullstack awesome

Список инструментов для fullstack разработки для Developer,DevOps,SRE

```bash

SysAdmin->Programmer->Developer->DevOps->SRE

Coder->Programmer->Developer->DevOps->SRE

```

## Инструменты разработки



- [**Visual Studio Code**](https://code.visualstudio.com): Кроссплатформенная IDE для разработки приложений, написания и отладки кода

- [**Atom**](https://github.com/atom/atom): Кроссплдатформенный текстовый редактор для написания, отладки кода. Вырос ли он до IDE?

- [**Codepen**](https://codepen.io): Онлайн редактор кода

- [**Codesandbox**](https://codesandbox.io): онлайн IDE для разработки приложений

- [**Git**](https://git-scm.com/) Система контроля версий и распределенной разработки

- [**JetBarains**](https://www.jetbrains.com) Платные инструменты разработки



## Язык

- [**JavaScript**](https://developer.mozilla.org/ru/docs/Web/JavaScript): Универсальный язык JavaScript для выполнения в браузере(фронтенд) и на сервере(бэкенд)

- [**TypeScript**](https://www.typescriptlang.org): Язык разработки приложений. Типизироанный JavaScript

- [**Python**](https://www.python.org): Язык разработки приложений.Язык для бэкенда и разработки десктоп приложений



## Платформа

- [**NodeJS**](https://nodejs.org): Платформа для всего. Разработка, управление приложениями, [ещё](https://nodejs.dev)

- [**Nodemon**](https://nodemon.io): Автоматическое отслеживание изменений и релоад приложения

- [**PM2**](https://pm2.io): Процесс менеджер



## Дизайн

 - [**Material design**](https://material.io): Концепция дизайна риложений от Google

 - [**Material design иконки**](https://fonts.google.com/icons): Библиотека иконок от Google

 - [**Материал иконки**](https://pictogrammers.com/library/mdi): Библиотека иконок material design

 - [**Fontawesome иконки**](https://fontawesome.ru/all-icons): Библиотека иконок fontawesom

 - [**ionicons иконки**](https://ionic.io/ionicons): Библиотека иконок ionicons

 - [**Bootstrap**](https://getbootstrap.com): Библиотека bootstrap

 - [**Bootstrap иконки**](https://icons.bootstrap-5.ru): Библиотека иконок bootstrap

 - [Спецсимволы](https://htmlweb.ru/html/symbols.php)

 

  

## Фронтенд

- [**HTML**](https://developer.mozilla.org/ru/docs/Web/HTML): HTML для разметки WEB интерфейса

- [**CSS**](https://developer.mozilla.org/ru/docs/Web/CSS): CSS, стилизация

- [**Vue**](https://vuejs.org): Прогрессивный JavaScript фреймворк для создания динамических интерфейсов

- [**Quasar**](https://quasar.dev): Кросплатформенный фреймворк Vue для создания приложений в дизайне material-design 

- [**Vuetify**](https://vuetifyjs.com): Компонентный фреймворк Vue для создания WEB интерфейсов material-design



### Альтернативы

- [**ReactJS**](https://react.dev): Прогрессивный JS фреймворк от команды facebook

- [**Bootstrap**](https://getbootstrap.com): Компонентный фреймворк JS для создания WEB интерфейсов в стиле Twitter

- [**Angular**](https://angular.io): WEB фреймворк для SPA приложений от команды Google

- [**Material Angular**](https://material.angularjs.org): Material UI для Angular



Сравнение ReactJS vs Vue [**VueToDo**](https://github.com/sunil-sandhu/vue-todo)  [**ReactToDo**](https://github.com/sunil-sandhu/react-todo) 



## Бэкенд

- [**Express**](https://expressjs.com): Фреймворк на платформе NodeJS для реализации backend

- [**GraphQL**](https://graphql.org): Язык для реализации API

- [**Apollo**](https://www.apollographql.com): Сервер и клиент GraphQL

- [**Nexus**](https://nexusjs.org): Объектное описание GraphQL схем и методов

- [**TypeGraphQL**](https://typegraphql.com) Объектное описание GraphQL

- [**Prisma**](https://www.prisma.io): Программный доступ к базе данных любых (ORM)

- [**Mongoose**](https://mongoosejs.com/): Программный доступ к MongoDB (ODM)

- [**Nest**](https://nestjs.com/): TypeScript nodejs фреймворк для server-side масштабируемых приложений

- [**Django**](https://www.djangoproject.com/) фреймворк WEB приложений на Python, шаблонизация,ORM встроен



- [**REST**](https://ru.wikipedia.org/wiki/REST) что такое REST?

- [**RPC**](https://ru.wikipedia.org/wiki/Удалённый_вызов_процедур) что такое RPC?



## Полезные пакеты

- [***Cookie-parser***](https://www.npmjs.com/package/cookie-parser) сервис разбора куков в клиентских запросах для Express

- [***dotenv***](https://www.npmjs.com/package/dotenv) Загрузка переменных окружения из .env

- [***Jsonwebtoken***](https://www.npmjs.com/package/jsonwebtoken) Генераци JSON Webтокенов, например, для авторизации

- [***Cors***](https://www.npmjs.com/package/cors) Междоменное взаимодействие, мидл сервис для Express

- [***Validator***](https://www.npmjs.com/package/validator) Проверка данных ввода

- [***bcrypt***](https://www.npmjs.com/package/bcrypt) Шифрование паролей



## Сборщики

- [**WebPack**](https://webpack.js.org) Сборка модулей JS

- [**Vite**](https://vitejs.ru) Сборка и локальный сервер разработки приложений



## Базы данных

- [**SQLite**](https://www.sqlite.org): Локальная, файловая SQL база данных

- [**MongoDB**](https://www.mongodb.com): Документориентированная no-SQL база данных

- [**PostgreSQL**](https://www.postgresql.org): Самая мощная open source SQL СУБД

- [**MySQL**](https://www.mysql.com/): Самая распространенная SQL СУБД

- [**Redis**](https://redis.io) in-memory база данных



## Инструменты СУБД

- [**DBeaver**](https://dbeaver.io): Универсальный GUI для СУБД

- [**MongoDB Compass**](https://www.mongodb.com/products/compass): GUI MongoDB

- [**Prisma Studio**](https://www.prisma.io/studio): GUI клиент СУБД для ORM Prisma



## Мониторинг

- [**Grafana**](https://grafana.com) Система отображения метрик в виде графов и алертинг (лучшая система визуализации)

- [**Graphite**](https://graphiteapp.org) Система сбора, хранения и отображения метрик, хороший бэкенд

- [**ClickHouse**](https://clickhouse.com) База данных, хорошо подходит для хранения метрик

- [**Bosun**](https://bosun.org) Система алертинга

- [**Prometheus**](https://prometheus.io) Система мониторинга. Сбор, хранение, отображение метрик, алертинг

- [**InfluxDB**](https://www.influxdata.com) Система мониторинга. Сбор, хранение, отображение метрик, алертинг. Например, [telegraf](https://www.influxdata.com/time-series-platform/telegraf/) агент сбора метрик



## Универсальные инструменты

- [**Kafka**](https://kafka.apache.org) Платформа организации приема событий. Например, сбор метрик

- [**RabbitMQ**](https://www.rabbitmq.com) Брокер сообщений, организация очередей и подписок

- [**Nginx**](https://nginx.org) HTTP сервер, очень быстрый и легкий

- [**HAProxy**](https://www.haproxy.org) Программная балансировщика нагрузки TCP/HTTP. Организация высогонагруженных серверов



## Контейеризация и виртуализация на рабочем ПК

- [**Docker**](https://www.docker.com) Распределение ресурсов системы через контенеризацию. Создание контенеризированных приложений.

- [**WSL**](https://learn.microsoft.com/ru-ru/windows/wsl/install) Запуск Linux и приложений на Windows  10/11

- [**Все про WSL***](https://learn.microsoft.com/ru-ru/windows/wsl/)

- [***Основные команды WSL***] (https://learn.microsoft.com/ru-ru/windows/wsl/basic-commands)

- [**k8s**](https://kubernetes.io) Инфраструктура для масштабирования, публикаций, управления контейнеризированных приложений [minikube](https://kubernetes.io/ru/docs/setup/learning-environment/minikube)

- [**VirtualBox**](https://www.virtualbox.org) Организация виртуализации на платформе x86. Не рассматриваем профессионалиные ситемы Hyper-V,RHV,VMware и т.п.



## Ресурсы

- [**NPM**](https://www.npmjs.com) Реестр NPM пакетов для платформы nodejs

- [**Docker HUB**](https://hub.docker.com) Docker репозиторий images

- [**Git HUB**](https://github.com) Хаб с множеством репозиториев git

- [**stackoverflow**](https://stackoverflow.com) Ответы на все вопросы, если "стек переполнен"

- [**MDN**](https://developer.mozilla.org) Mozilla Developer Network

- [**Microsoft Lean**](https://learn.microsoft.com) Обучающий портал от Microsoft



## Расширения для браузера

### Chrome

- [Apollo client](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm)

- [GraphQL Network](https://chrome.google.com/webstore/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln)

- [Vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)



### Firefox

- [Apollo client](https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/)

- [GraphQL Network](https://addons.mozilla.org/ru/firefox/addon/graphql-network-inspector/)

- [Vue devtools](https://addons.mozilla.org/ru/firefox/addon/vue-js-devtools/)



## Полезные утилиты

- [VPN Hosts](https://github.com/x-falcon/Virtual-Hosts/) Изменение hosts на Android без root

- 

## Мой, рекомендуемый стек

- Visual Studio Code

- NodeJS/TypeScript

- Vue3/Quasar

- Apollo/GraphQL

- Nest

- Prisma

- MongoDB



## Минимальный набор, чтобы разрабатывать fullstack приложения

- Visual Studio Code

- HTML

- JavaScript

- NodeJS

- Vue 2 или 3

- Express

- WebPack или Vite

## Расширенный дополнительный набор, чтобы разрабатывать fullstack приложения

- Vue 3 (composable API)

- ORM (Prisma)

- GraphQL(Apollo)

- Quasar

- TypeScript (Nest)

- Docker

- vite

## Продвинутый набор, чтобы разрабатывать fullstack приложения

- subscription Apollo

- RabbitMQ

- Redis

- Nginx

- k8s

- HAProxy

## Видео по инструментам

- [Плейлист видео по инструментам](https://www.youtube.com/playlist?list=PLBA2E_jkENLMD8r-m0ISzuNRAyTA5cIEG)



## Видеоуроки по разработке fullstack

- [Плейлист видео по разработке](https://www.youtube.com/playlist?list=PLBA2E_jkENLN8rf6uBdtix8Fov1yqpYkA)

### Разработка CRUD fullstack приложения Телефонный справочник

- [#0 Анонс](https://youtu.be/o-X0en8cjx4)

- [#1 Обоснование инструментов](https://youtu.be/c7IZshESnjk)

- [#2 Разработка backend. Часть 1](https://youtu.be/33ssNWZIELI)[Часть 2](https://youtu.be/_lgDH0G-E_4)

- [#3 Разработка frontend](https://youtu.be/ccQhcsXpCtY)

- [#4 Связываем frontend и backend](https://youtu.be/RgSXM3uaO0M)

- [#5 Привязываем приложение к MongoDB](https://youtu.be/kHkc3aHLzDU)

- [#6 Пишем фронтенд в стиле material Часть 1](https://youtu.be/-01NZfje7uM) [Часть 2](https://youtu.be/AooBgus4a7Y)

- [#7 Настройка рабочего места за 20 минут](https://youtu.be/nlEmIwC7ZFI)

- [#8 Рефакторинг кода](https://youtu.be/a0UD90F_0ak)

- [#9 TypeScript,Prisma,Nexus](https://youtu.be/esOiHMz9cW0)

- [#10 Subscriptions.Анонс](https://youtu.be/dkI9WbYbAV8), [бэкенд](https://youtu.be/tYDgAPxM-tg), [фронтенд](https://youtu.be/5NuUpqqVWA8)

- [#11 Добавление нового поля](https://youtu.be/QT7Dg8DmjJE)

- [#12 Сборка frontend под Android](https://youtu.be/xEik_5wx4J4)

- [#13 Backend на TypeScript, NEST](https://youtu.be/8uRGpHYQ-DQ)

- [#14 Server side pagination](https://youtu.be/8cCeNdiCpNM)

## Полезное чтиво

- [Примеры оформления через CSS](https://csslayout.io/)

- [***Learn Fullstack Web Development with React and GraphQL***](https://dev.to/kingdavid/learn-fullstack-web-development-with-react-and-graphql-by-building-a-sticky-note-app-part-two-3j8o)

- [***Алгоритмы и структуры данных на JS***](https://my-js.org/docs/other/js-algorithms/)

- [***Алгоритмы с примерами JS***](https://kvando.tech/ru/algoritmy-na-javascript-s-naglyadnymi-primerami/)

- [***Параллельная модель и цикл событий***](https://developer.mozilla.org/ru/docs/Web/JavaScript/Event_loop)

- [***NestJS+Prisma***](https://dev.to/aryanjnyc/use-prisma-with-a-nestjs-graphql-server-4n8d)

- [***Capacitor android app***](https://ionic.io/blog/building-and-releasing-your-capacitor-android-app)

- [***Д. Флэнаган - JavaScript. Полное руководство. 7-е издание. (2021)***](https://studylib.net/doc/25688524/d.-fle-nagan---javascript.-polnoe-rukovodstvo.-7-e-izdanie...)

- [WSL2 и андроид](https://gist.github.com/jramiresbrito/846b9bebc560668eb2e7a97fb1cfc1ef)

- [WSL2 и андроид](https://stacktuts.com/how-to-connect-android-studio-running-inside-wsl2-with-connected-devices-or-android-emulator-running-on-host)

- [Доступ к сети WSL](https://stackoverflow.com/questions/65327238/cant-connect-to-wsl2-localhost-server-from-wsl2-docker-container)

- [adb комнады](https://adbshell.com/commands/adb-shell-ip)

- [react dev](https://reactdev.ru)