Manoo

Когда я захожу на определенный сайт, провайдер видит URL?

Да.

А если я захожу на https?

Известен IP сервера и имя домена. Больше ничего.

Откуда провайдер узнает, что я скачиваю определенный фильм/программу через torrent?

Торрент-клиент общается с трекером по HTTP. Все видно насквозь: конкретные торренты + вся статистика (когда начато скачивание, когда закончено, когда пошла раздача, сколько роздано). Возможно подключение к трекеру и по HTTPS, но rutracker.org такой возможности не дает (мне тоже интересно почему).

Все пакеты которые я получаю и раздаю значит провайдер скачивает себе, чтобы узнать что это за фильм/программа?

Провайдер не хранит у себя весь трафик. Это технически невозможно. Но трафик обрабатывается, классифицируется и ведутся логи о том какой тип трафика когда входил/уходил от абонента.

Или он отслеживает факт скачивания .torrent файла, а затем делает вывод по идущим пакетам, что это скачивается?

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

Когда я пользуюсь VPN, что видит провайдер?

Видит шифрованный траффик на конкретный IP. По IP можно узнать, что этот диапазон продается под VPSы. Сам факт шифрованного трафика вешает абонента в списки тех, "кому есть что скрывать", а значит подозреваемых при любом розыске.

Что я зашел на определенный IP и с него идут зашифрованные потоки?

Дальнейшее направление трафика от VPN-сервера отследить невозможно (по крайней мере, на оборудовании провайдера в автоматическом режиме). Но при целенаправленной слежке за абонентом в принципе возможно по временным меткам сопоставить трафик абонента с трафиком любого сервера.

OpenVPN будет работать через VPN IP и в браузере и при обновлении Windows, драйверов, ...?

В зависимости от настройки. Но в общем случае, да, так.

Читал, что в Windows есть такая особенность, что если провайдер как-то урезает пакет, то VPN отключается и сайту показывается мой реальный IP?

Это не связанно с провайдером. Это особенность Windows. Когда VPN отваливается, весь трафик вылетает наружу в открытом виде. Опять же зависит от настроек. Но это еще одна цена "удобства" при использовании Windows.

При этом провайдер видит на каком я сайте, что скачиваю?

VPN отвалился - хацкер спалился.

Таких фишек много?

Смотря о чем речь. В сфере сетевой безопасности и анонимности различных нюансов вообще много.

Как от них защитится?

Учить мат.часть. Разбираться в сетевых протоколах и в устройстве ОС.

Если пользуюсь каким-то расширением типа ZenMate, dotvpn, провайдер аналогично как и с VPN видит что что-то отправляется и приходит на определенный VPN IP?

Расширения очень разные. Они могут базироваться на совершенно разных технологиях. Ни один специалист вам не скажет за все расширения. Не исключено, что многие из них, по сути - honeypot, то есть созданы с целью слежения за любителями анонимности, привлекают своим удобством и дают ложное чувство безопасности.

При использовании Tor, кто-то пользуется моим IP, пока я пользуюсь чужим?

Нет. Если у вас не сконфигурирован Exit Node.

Что при этом видит провайдер, что я получаю потоки данных с определенных IP и каждый раз разный IP?

У них есть система точного обнаружения использования Tor. Это факт остается в логах с теми же последствиями, что и для VPN.

Провайдер видит URL?

Через Tor и VPN - нет.

Каким образом можно полностью управлять сетью на ПК, видеть что, куда и когда отправляется или приходит на ПК (Windows, Linux)?

Видеть все: https://www.google.com/search?q=Wireshark
Блокировать все лишнее: https://www.google.com/search?q=Comodo+Firewall

<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

  function drawVisualization() { ... }
</script>

Этот кусок кода вообще особняком стоит. Нужно же его интегрировать ... Начнем!

Первым делом поместим функцию drawVisualization в наш js файл:

function drawVisualization(element, commonData, regionData) {
  console.log('elemet', element);
  var data = google.visualization.arrayToDataTable(commonData);
  var mapVisualization = new google.visualization.GeoChart(element);
  mapVisualization.draw(data, regionData);
}

И немного модифицируем главный файл:

<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['geochart']});
</script>

Затем определим компонент, который будет рисовать карту:

class MapVisualization {

  componentDidMount() {
    this.drawMap();
  }
  
  componentDidUpdate() {
    this.drawMap();
  }
  
  drawMap() {
    drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
  }

  render() { 
    return (
      <div ref="mapDiv" />
    );
  }
};

Готово. Все данные поместим в props компонента Tabs и затем изменим его render:

render() {
      var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
      }.bind(this));

      const { commonData, data } = this.props;
      const { current } = this.state;
      return (         
        < div className = 'container' >
          <div className='col-12'>
              {list}
              <div className = 'map'>
                <MapVisualization data={data[current].content} commonData={commonData} />
              </div>
          </div>
        </div>
      );
    }

Вместо ссылки я использую конечно-же кнопку.
Конечный результат

Это конечно далеко от идеала, но я так понимаю Вы не давно начали реакт - поэтому пойдет

1. Каталог .idea должен быть проигнорирован
2. MVC - читаем и используем.
3. PSR-1, PSR-2, PSR-4 - читаем и используем.
4. По хорошему, require в вашем коде должен быть 1 раз при подключении автолодера.
5. Вперемешку html+css+js - это гуано))
6. В вашем коде, увы нечего спасать.

по функционалу и внешнему виду сопоставимый с 888sport.com, в ближайшее время будем заниматься поиском опытного фуллстак веб-разработчика.

Плохая идея искать fullstack. Сайт такого уровня потребует команду инженеров. Есть такая штука bus-factor, почитайте на досуге.

В данный момент я склоняюсь к MARS (MySQL, Apache, Ruby, Solaris), HTML5, CSS, JavaScript, Git, Agile.

Технологии выбираются на основании ТЗ + обязательный этап начального проектирования. Их должен выбирать инженер. При этом далеко не факт, что модные технологии будут лучшим решением. Тот же agile далеко не всюду можно насадить. Solaris - неясно зачем? Ruby - вот тут без ТЗ не разобраться.

Разработка будет проходить на Mac Os

Вот это не вам решать))

дизайн интерфейса разрабатывается в Sketch.

Вам шашечки, или ехать? Sketch - это инструмент, дизайн - это результат. Не стоит ограничивать дизайнера в инструментах.

ммм.... зависит от задачи. Из вашего описания вам нужен один бэкэнд разработчик (ruby) и один фронтэнд разработчик. Либо фулстэк, коих мало нормальных в такой комбинации (да и в любой другой).

Что должен уметь бэкэндер - настроить окружение, возможно штуки для автоматизации (ansible/puppet), должен знать что такое и зачем нужен vagrant (то что разработка на mac os ничего не значит, деплоиться вы будете на линукс, и выкиньте дурные мысли о использовании соляриса). Может быть docker... но это уже пусть девелопер решает.

Вместо apache по умолчанию берем nginx, вместо mysql может быть postgresql, может вам еще elasticsearch придется вкатить... в зависимости от задачи выбираются базы данных и прочий мусор. Это все всего-лишь инструменты.

Отдельно хочу заметить что помимо того что девелопер должен знать что такое "Agile Software Development", это так же должны знать вы. И это не скрамы/канбаны, хотя это тоже полезно. Лучше пусть у человека здравый смысл будет.

Под мобильные устройства тестирую с помощью стандартных функций браузера (Firefox & Chrome это умеет в devtools)
Так же есть такая штука - ami.responsivedesign.is
Доступные размеры:
настольный монитор — 1600 x 992px;
ноутбук — 1280 x 802px;
планшет — 768 x 1024px;
мобильный телефон — 320 x 480px.

Так же есть это - deviceponsive.com
Устройства и доступные разрешения экранов.
Macbook — 1280 x 800
iPad портрет — 768 x 1024
iPad портрет — 1024 x 768
Kindle портрет — 600 x 1024
Kindle альбомная ориентация — 1024 x 600
iPhone портрет — 320 x 480
iPhone альбомная ориентация — 480 x 320
Galaxy портрет — 240 x 320
Galaxy альбомная ориентация — 320 x 240

Ну и мой любимый - quirktools.com/screenfly
Доступно 9 больше чем планшет устройств — от 10" ноутбуков, до 24" мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Есть отдельный переключатель в портретный и альбомный режим, а также опция показа прокрутки.

Ключевые люди:
1) Product owner - тот у кого есть видение всего
2) условный CTO - тот кто отвечает за техническую реализацию.
И того и другого нужно иметь фуллтайм.

По остальным участникам на усмотрение CTO - как правило это дизайнер, верстальщик и backend программист.
Если сроки не горят - последние 2 могут быть одним человеком, но я бы не советовал.
Кто точно нафиг не нужен на старте, - это Database Developer.
Ваша первая задача - сделать быстрый MVP - если будет трафик, вы успеете 10 раз изменить архитектуру и переписать все заново.

Нужен ли мобайл - вопрос открытый. Мне кажется да, возможно больше чем веб.
Надо понимать что у Apple очень специфическая политика по аппруву этого дела - один мой хороший знакомый ухитрился продавить приложение крупного букмекерского сайта в стор - но ему это стоило полгода живых встреч.

Просто показать на примере одной простой формы как Вы хотите, чтобы было.
Если он будет делать по-аналогии и поймёт - продолжить с ним работу.
Нет - придётся сменить исполнителя.

Указать ему на конкретные ошибки, основные вы уже перечислили.

Сам периодически оказываюсь в подобной ситуации, то есть когда "специалист", которому я собираюсь оплатить его работу (или уже оплатил часть), пытается продать мне какое-то д***мо. Разбирательства стараюсь начинать с больных вопросов. В вашем случае это могли бы быть вопросы: "Почему вы не использовали тег form?", "Вы считаете данную вёрстку семантической?", "Почему в названиях классов используете смесь транслита с английским языком?". Как правило, в итоге всегда удавалось показать исполнителю его некомпетентность и мирно прекратить сотрудничество.

Ваш список адекватен, мы вдвоём 2 года назад сделали сайт букмекерской конторы за месяц. Из функционала - статьи, новости, личный кабинет, карточка событий, ставки, вероятности.
Нафиг мобильные приложения никакие не нужны, мобильную версию сайта делаете и всё в поряде, люди будут сидеть на ней сутками.

Список как раз для того, чтобы за год просадить несколько миллионов с сомнительным результатом.

По факту, вам нужен либо Full-Stack разработчик, либо бэкэнд и мобайл-дев. И обязательно дизайнер, так как тут важна красота и свистелки-перделки в интерфейсе.

Начните с простого mobile-first прототипа, с него сейчас проще начать, чем сайта. Главное определить, где для вашего случая платящей аудитории больше: на iOS или на Android.

Если аудиторию зацепит ваш продукт и его будут покупать - развивать другие направления (сайт, другие мобильные платформы) и думать о масштабировании.

Не стоит сразу городить мегамощный комбайн за n-миллионов рублей, когда можно проверить свои гипотезы за несколько сотен тысяч.

Из разработчиков этого вполне достаточно.
Список вполне адекватный.

Сроки могут быть разные и не один не будет верным.
Я бы поставил команде 8 месяцев, но вы ведь должны понимать, что это только на бумаге.