В прошлом месяце я создал простой проект, разошедшийся по различным техническим сообществам и социальным сетям. В Github он за 7 дней получил с 0 до 4 тысяч звёзд и более 200 форков. Github примерно в течение пяти дней рекламировал его в разделе Trending repositories of day.

Clone Wars

70 с лишним open-source-клонов или альтернатив популярных сайтов наподобие Airbnb, Amazon, Instagram, Netflix, Tiktok и т.д. В списке содержится исходный код, ссылки на демо, технологический стек и количество звёзд в GitHub.

Ссылка на проект

Ссылка на Github

Trending в Github — 13 марта 2021 года

Что меня мотивировало на создание этого проекта

Я технарь и часто сижу в популярных сообществах программистов на Reddit, таких как r/webdev, r/reactjs и т.п., следя за тем, что создают другие разработчики и узнавая о новых JS-фреймворках. Я заметил, что многие разработчики для изучения программирования создают клоны популярных сайтов наподобие Instagram, Trello, Spotify, и т.п., а потом делятся с другими, чтобы получить отзывы о качестве кода и рекомендации.


Разработчики делятся своими проектами в r/reactjs

Такие клоны разбросаны по множеству сообществ. Поэтому я подумал: почему бы не создать общий список всех этих клонов, который люди мы могли добавить в закладки и возвращаться к ним в будущем. Честно говоря, тогда я не был уверен, будет ли такой список полезен другим. Мне представилась возможность узнать это, создав его самостоятельно!

Как я составил список

1. Скрейпинг Reddit

Я хотел найти все посты, содержащие ключевое слово «clone». Сначала я пользовался стандартным поиском Reddit: reddit.com/r/reactjs/search/?q=clone&source=recent&restrict_sr=1&sort=new (это значит искать все посты в сабреддите reactjs с ключевым словом «clone» и отсортировать по новизне). Этот запрос возвращал все посты, в том числе и низкокачественные, с рейтингом 0, вопросами о том, как создать клон какого-то сервиса, и т.д. Из этого дампа сложно было бы найти хорошие проекты клонов. Поэтому я воспользовался сайтом redditsearch.io, предоставляющим расширенные возможности фильтрации Reddit, например, возврат постов, имеющих хотя бы 10 «лайков», опубликованных в определённый промежуток времени, и т.д.

Далее я создал список из всех этих клонов, их репозиториев на Github, ссылок на демо, технологического стека. Всё делалось вручную.

Также я загуглил запрос «open-source alternatives» и нашёл несколько полнофункциональных клонов Slack, Airtable, Bit.ly, Evernote, Google analytics, и т.п. Их я тоже добавил в список.

Итак, в списке есть два типа проектов. Первые выглядят очень похожими (с точки зрения UI), но не полнофункциональны, вторые полнофункциональны, но с другим UI (чтобы избежать проблем с авторскими правами и т.п.).

Придумываем название проекту

Я назвал свой проект в честь телевизионного мультсериала 2008 года Star Wars: The Clone Wars («Звёздные войны: Войны клонов») и сохранил похожую цветовую схему.


Мультсериал Star Wars: The Clone Wars


Github-проект Clone Wars

2. Красивое отображение таблицы

Я уже работал с markdown раньше, но мне впервые довелось создавать markdown-таблицы и оказалось, что таблица на странице проекта Github выглядит ужасно. Особенно если это длинная таблица с множеством столбцов. Я хотел сделать её красивее (с постоянно висящим сверху заголовком), то есть проект нужно было развернуть где-то ещё. Но он всё равно должен был находиться на Github, чтобы с ним могли удобно работать другие люди. Я решил хостить его на своём личном сайте https://gourav.io.

Мой сайт создан с помощью NextJS, и я уже использовал markdown (mdx) для написания постов, поэтому достаточно было просто скопипастить markdown-файл из моего Github-проекта на новую страницу https://gourav.io/clone-wars. Кроме того, я использовал Tailwind CSS с плагином «typography», повышающим удобство чтения таблиц и другого текста.

Я думал над повышением автоматизации до следующего уровня, например, при внесении изменения в Github-проект или слиянии пулл-реквестов (PR) можно было бы обновлять таблицу на моём сайте https://gourav.io/clone-wars. Но я решил не переусложнять систему, потому что изменения были не такими уж частыми.

Делаем проект виральным

Я опубликовал пост в 2-3 сабреддита, и он взлетел.


reddit.com/r/reactjs


reddit.com/r/webdev

Последствия

После того, как проект получил определённую популярность, многие разработчики начали использовать PR для добавления в список своих проектов-клонов. Когда я запустил проект, там было примерно 75 клонов, но теперь их больше 120, и я часто получаю новые PR.

От друга я узнал, что проект попал в рассылку React Newsletter. Очень неожиданный и приятный момент.

Люди начали писать твиты о Clone Wars. @nickbulljs предложил идею для разработчиков, ищущих работу.


Рекрутёры устали от погодных приложений и калькуляторов расходов.

Вот более умная идея для разработки:

1. Выберите один сайт из 70 с лишним open-source-клонов популярных сайтов типа Netflix, Instagram и прочих по ссылке ниже.
2. Изучите кодовую базу.
3. Создайте собственный клон.

gourav.io/clone-wars

После этого твита у меня появилось больше 150 новых подписчиков.

А ещё один человек задонатил мне 5 долларов по ссылке BuyMeACoffee, которую я добавил в своей проект. Спасибо тебе, незнакомец.


За 30 дней после запуска проекта мой личный сайт посетило более 40 тысяч человек, а проект получил более 80 тысяч просмотров.

Вот часть статистики по пользователям (первые 30 дней после запуска, т.е. после поста в Reddit):


Реферальные сайты


Пользователи по странам


Пользователи по ОС


Пользователи по браузерам

На данный момент проект имеет и .

---

На правах рекламы

VDS для проектов и задач любых масштабов — это про наши эпичные серверы! Новейшие технологии и оборудование, качественный сервис. Поспешите заказать!