В прошлом месяце я создал простой проект, разошедшийся по различным техническим сообществам и социальным сетям. В 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 предложил идею для разработчиков, ищущих работу.
Рекрутёры устали от погодных приложений и калькуляторов расходов.
Вот более умная идея для разработки:
- Выберите один сайт из 70 с лишним open-source-клонов популярных сайтов типа Netflix, Instagram и прочих по ссылке ниже.
- Изучите кодовую базу.
- Создайте собственный клон.
gourav.io/clone-wars
После этого твита у меня появилось больше 150 новых подписчиков.
А ещё один человек задонатил мне 5 долларов по ссылке BuyMeACoffee, которую я добавил в своей проект. Спасибо тебе, незнакомец.
За 30 дней после запуска проекта мой личный сайт посетило более 40 тысяч человек, а проект получил более 80 тысяч просмотров.
Вот часть статистики по пользователям (первые 30 дней после запуска, т.е. после поста в Reddit):
Реферальные сайты
Пользователи по странам
Пользователи по ОС
Пользователи по браузерам
На данный момент проект имеет
и 
.На правах рекламы
VDS для проектов и задач любых масштабов — это про наши эпичные серверы! Новейшие технологии и оборудование, качественный сервис. Поспешите заказать!
