Автор оригинала: FreeCodeCamp Community Member.
Hrishi Mittal
Вы знаете, когда вы пытаетесь узнать что-то новое, но получите reeeeeeallly скучно построить приложение пример по умолчанию?
Это убийца мотивации №1.
Я не хочу, чтобы мои студенты были демотивированы и сдаваться.
Поэтому я сделал этот гигантский список из 28 идей забавных приложений, которые вы можете построить, пока Учиться использовать реагирование с рубином на рельсах .
Этот список предположиет, что вам уже комфортно с Ruby на рельсах (или в некоторых других рамках веб-разработки). Таким образом, бэк-бит может быть немного сложным для начинающих, но предельный эффектный бит должен быть относительно простым.
Проект № 1: приложение календаря для назначения (например, Google Calendar)
Это может начать как простое приложение, которое вы можете постепенно улучшить, добавив больше функций и улучшений UX.
Это поможет вам практиковать использование вложенных компонентов (например, однодневного компонента, вложенного внутри недели компонента или вложенного внутри компонента месяца).
Я использую это как пример приложения в моем Бесплатная полная реакция на рельсы курс Отказ Так что проверьте это, если вы хотите попробовать это.
Вы можете увидеть полный пошаговый код здесь:
DUSTETTO/CALREACT CalreaCt – React and Rails 5 календарь приложение для назначения github.com.
Проект № 2: приложение GitHub Explorer для поиска интересных репозиториев кода
Вы можете построить поисковую часть чисто на стороне клиента, но вы можете сделать его веселее, сохраняя поиск в базе данных, используя Rails и показать самые популярные поиски.
Вы будете практиковать использование внешнего API и обрабатывая ответ JSON. Вы можете поэкспериментировать с предварительным рендом компонента на сервере.
Смотрите этот плагин браузера по Альголия Чтобы получить ваши идеи соки течет:
Algolia/GitHub-Awesome-AutoComplete Github-awesome-AutoComplete -: восьмикат: добавьте мгновенные поисковые возможности на панель поиска GitHub github.com.
Проект № 3: приложение для записи
Вы можете увидеть силу обрабатывать реагирование много изменений состояния, скажем, включив автоматическое сохранение. Проверить Симпленота Для хорошего примера простого, но мощных приложений Notes.
Если это слишком сложно, как первое приложение, вы можете сначала попробовать использовать Компонент внешнего текстового редактора Чтобы узнать, как это работает, а затем реализовать свои собственные:
Facebook/Draft-JS Проект-JS – React Pramework для построения текстовых редакторов. github.com.
Проект № 4: Добавить виджет Slack Chat на свой сайт
Использовать отдохнуть Компонент, чтобы добавить виджет чата на ваши существующие рейсы. Компонент делает большую часть тяжелого подъема, но вы можете повеселиться, сделав свой бот в рельсах и настраивая виджет в реакцию.
Код для компонента находится на GitHub:
5Punk/React-Slack-Chat React – Slack-Chat – красивый виджет Slack Chat Chat Chape Beei/Material Project. github.com.
Проект № 5: Генератор Meme
Рельсы могут обрабатывать хранение и обслуживание библиотеки изображений и существующих мем. Используйте React для рендеринга и обращения с формой для изготовления мема.
Вы можете генерировать мем на сервере, используя ImageMagick или в браузере с помощью Canvas. Видеть Это репо от Повесил :
Tranhungt/Meme-Maker Meme-Maker – сделайте свои любимые мемы и отправьте их своему другу! github.com.
ПРОЕКТ № 6: Бесплатный бесплатный поиск изображений
Использовать Несомненно API. Для высококачественных бесплатных фотографий:
Unsplash/unsplash_rb unsplash_rb – рубиновая обертка для Unsplash API. github.com.
Добавьте прохладные анимации, используя Animation Adimation Add-ons .
Разрешить пользователям добавить их любимые изображения. Вы могли бы даже поэксперировать с созданием Backend просто приложение Rails API и сделайте отдельное приложение RACT для переднего конца.
Проект № 7: Книжный клуб
Простое приложение, в котором вы и ваши друзья могут поделиться своими любимыми книгами и обсудить их (например, Goodreads. ). Бэкэнда может быть простой приложением Rails Crud, но вы можете сделать передний конец одной страницей React App и играть с React Router и Redux.
Проект № 8: Twitter Web Client для нескольких учетных записей (например, TweetDeck)
Приложение Twitter Web Client, в котором вы можете подключить более одного аккаунта Twitter (используя OAuth), а затем добавить несколько столбцов на пользовательский интерфейс – для вещей, таких как корм, уведомления, поиск, прямые сообщения.
Используйте GEM Twitter Эрик Майклс-Обер :
Серферик/Твиттер Twitter – интерфейс Ruby к API Twitter. github.com.
Это даст вам беспрецедентную радость для решения смешных лимитов ставки API от самой любительской компании в мире.
Вы можете добавить автоматическую выборку в TweetDeck в стиле новых твитов и уведомлений с использованием кабеля опроса или действия.
Много вложенных компонентов, и вы можете попробовать несколько простых анимаций в реакции.
Возможно, лучше начать с строительства только для чтения. Как только у вас есть, вы можете добавить возможность опубликовать, как и ретвит.
Проект № 9: OpenStreetMap Custom Ui
Вы знали Сайт OpenStreetMap приложение рельсов?
Ты можешь Получить репо здесь , Установите это На собственной машине, а затем Tinker с добавлением реагировать на передний конец!
OpenStreetMap/OpenStreetMap-сайт OpenStreetMap-веб-сайт – зеркало рельсов Применение питания http://www.openstreetmap.org (размещено в Git://git … github.com
Проект № 10: команда обеда рулетку
Сайт для того, чтобы помочь вам решить, куда пойти на обед с вашей командой. Рельсы Backenc просто должны быть простым приложением Crud, которое позволяет членам команды вступить в предложение. Вы могли бы использовать Foursquare API Для поиска и авто завершены.
И использовать реагировать на некоторые нелепые анимации!
Если вы не на обед, делайте кофе или коктейли или что-то еще более захватывающие.
Проект № 11: Супер прокрастинатор
Один веб-сайт, который вы можете пойти, чтобы избежать работы – читать Reddit, Hacker News, Продукт охоты , Средний, слашдот и многое другое в одном месте.
Используйте рельсы Backend для сохранения учетных записей и предпочтений пользователей и разговаривать с различными API. Вы также можете получить данные от API непосредственно с стороны клиента.
Проект № 12: чат с кабелем действий
В дополнение к изучению реагирования, это сделало бы большой маленький проект, чтобы попробовать Кабель действий , классная новая функция Rails 5, которая добавляет поддержку WebSocket для Rails. Видеть Эти примеры для начала:
Rails/DiageCable-Примеры ActionCable-Примеры – Примеры действия кабеля github.com.
Проект № 13: Дополнительный маленький (средний клон)
Проверить Эта серия постов в блоге от Andrea Mazzini , в котором он подробно описывает, как он построил средний клон с приложением API Rails, Reaction и Flux.
FancyPixel/Mall-Rails Маленькие рельсы – маленький, крошечный клон среднего. Rails API github.com FancyPixel/Small-Frestend Небольшой – маленький, крошечный клон среды. Rect + Flux Frestend github.com.
Вы можете построить его без использования Flux, но возможно, стоит попробовать, если вы за выступление.
Проект № 14: Tagger Face
Приложение, где вы можете загружать фотографии и течь людей (например, на Facebook). Использовать Opencv Ruby Gem. Для автоматического обнаружения лица:
Ruby-Opencv/Ruby-Opencv Ruby-Opencv – версивенная вилка opencv Gem для Ruby github.com.
Проект № 15: AucteAdmin на стероидах
Вы, вероятно, использовали Activeadmin. Для управления вашими записями приложения. Но UI не совсем вдохновляет. Вы можете изменить это, взяв один вид одновременно и превращая его в красиво стиль реактивный компонент.
Посмотрите в код ActiveAdmin здесь:
ActiveAdmin/ActiveAdmin ActiveAdmin – Рамки администрации для Ruby on Rails Applications. github.com.
Проект № 16: магазин электронной коммерции
Варенье, пиво, флаги Англии, карри, которые обслуживаются реагирующими на рельсы. Если вы не хотите создавать функции магазина в Rails, просто используйте Веселье и сосредоточиться на практике реагировать компоненты для переднего конца.
SPREE/SPREE SPREE – SPREE – это полный раствор электронной коммерции с открытым исходным кодом для Ruby на рельсах. github.com.
Угадай, что? Я создаю этот интернет-магазин идеи в серии учебников. Первый будет опубликован здесь на блог FreeCodeCamp! Убедитесь, что вы следуете за мной на Medium и зарегистрируйтесь на Teanetto, чтобы получить его в почтовом ящике.
ПРОЕКТ № 17: Просто посылайте нет шимпанзе
Приложение Newsletter по электронной почте с хорошим интерфейсом, который не заставляет вас вырвать волосы. И нет милой ерунды обезьяны?
Вы все еще можете использовать MailChimp API или использовать Sendgrid Отказ Если вы использовали MailChimp, вы знаете, что есть тонна функций, которые вы можете попробовать создание – просмотр/фильтрация/управление абонентами, проектированием форм, создание кампаний и многое другое.
Просто выберите одну функцию и попробуйте построить ее. Большинство функций будут включать в себя какую-то форму, поэтому должна быть хорошая практика для разделения вашего интерфейса на компоненты реагирования, которые будут обрабатывать состояние и некоторые функциональные компоненты без гражданства.
Проект № 18: Gmail на рельсах
Gmail имеет довольно сложный пользовательский интерфейс, но вы можете начать, просто создавая UI для листинга и чтения электронных писем. Или, может быть, поиск может быть веселее?
Использовать Google-API-клиент GEM и проверить это удивительное руководство по вопросам React Reaction и Repo Code Марк Браун ☕. для начала:
MarkBrown4/Gmail-React Gmail-React – React.js Учебник – Gmail github.com.
Проект № 19: DJ Spotify
Приложение DJ’ing, построенное на вершине Осторожность Отказ Получите рекомендации, создавать и смешивать плейлисты и даже позволяют другим добавлять песни в свои плейлисты.
Использовать Рубиновая обертка GEM для API Spotify:
Guilhermesad/rspotify Rspotify – рубиновая обертка для Spotify Web API github.com.
Я построил А. крошечное маленькое приложение С ним раньше, и это довольно легко использовать. Spotify позволяет только сама музыку играть со своими собственными приложениями, поэтому вы должны держать приложение, идущее рядом.
Проект № 20: панель инструментов Heroku
Как разработчик рельсов, вы, вероятно, очень знакомы с Heroku Отказ Это потрясающий сервис для быстрого развертывания и размещения приложений Rails – идеально подходит, когда вы делаете много мелочей для обучения
Создайте простую приборную панель, которая перечисляет ваши приложения и позволяет быстро просматривать ключевую информацию о каждом из них. Вы можете добавить возможности редактирования в качестве второго шага.
Используйте этот драгоценный камень для доступа к API Heroku:
Heroku/Platform-API Платформа-API – Ruby Http Client для API Heroku github.com.
Проект № 21: клиент AWS S3
Постройте красивый современный интерфейс для управления учетной записью AWS S3. Использовать Рубиновая драгоценность И начните, создавая простой компонент браузера файлов. Затем добавьте компонент формы для загрузки файлов.
AWS/AWS-SDK-RUBY AWS-SDK-RUBY – официальный AWS SDK для Ruby. github.com.
ПРОЕКТ № 22: Приборная панель для аналитики полосы
Приборная панель для отображения некоторых статистических данных и диаграмм на основе Полоса данные. API есть Очень хорошо документировано И это отличный шанс попробовать использовать D3 с реагированием (посмотрите на это а также это ).
Проект № 23: панель инструментов Google Analytics
По умолчанию Google Analytics Web Dashboard зарезает и запутается. Вы можете построить более простой, который только что показывает самую важную информацию.
Другой шанс использовать D3 или вы можете попробовать другая библиотека .
Вы можете получить доступ к API GA этот драгоценный камень .
Проект № 24: привычка трекер
Постройте приложение для отслеживания ваших ежедневных и еженедельных привычек – утренние рутины, сеансы тренажерных залов, бега, приготовление пищи, медитации, гитарную практику, чайные церемонии?
Для вдохновения, проверьте Петля привычка трекер или же Тренер .
Сделайте его мобильным, чтобы вы могли использовать его на ходу. Как только вам комфортно с реакцией, вы можете даже построить мобильное приложение, используя React Native.
Проект № 25: Фитнес приборной панели
Создайте приборную панель для всех ваших личных данных фитнеса, которые тянутся в данные из разных приложений и представляют собой полезную статистику в хорошем интерфейсе.
В зависимости от того, что вы используете вашу семью и друзей, вы можете легко тянуть данные из ряда API – Fitbit. , Google Fit. , Движется , Бухгалтер , СТРАВА , Уклон И много больше!
Вы можете даже позволить пользователю вручную ввести данные для простых вещей, таких как слежение за весом и тренировки.
Вы можете начать, просто показывая отчеты, а затем улучшить его новыми функциями, такими как добавление заметки и совместного использования.
Я построил простую панель инструментов для данных Fitbit. Смотрите код здесь:
Neadetto/Reactfit REVIETFIT – приложение для приборной панели фитнес, построенное с помощью рельсов 5.1 и React.js github.com.
Проект № 26: Угадай мой эскиз (игра)
Сделайте приложение для рисования, в котором вы можете нарисовать мышью, и друг должен угадать, что вы нарисовали. Вы можете использовать холст для рисования. Видеть реагировать от Михал Сврчек Для некоторых идей о том, как начать:
Svrcekmichal/React-SketchPad React-SketchPad – эскизная подушка, созданная с холстом github.com.
Используйте рельсы для загрузки и сохранения чертежа и показать его кому-то на другом компьютере.
Как продвинутое упражнение в веселье, добавить машинное обучение И сделать компьютер догадываться?
Проект № 27: Вы пишете как
Сделайте приложение Text Classifier, которое соответствует вашему стилю письма знаменитым автором – просто как Я пишу как (сделано в Дмитрий Судьбых ).
Использовать классификатор-возрождение Для классификации текста и реагировать на обработку формы. Это приложение в основном является тяжелым, поэтому эксперимент с некоторыми Анимация UI Отказ Видеть Это репо Для некоторых прохладных идей:
FormiDableLabs/React-Animations Реактивные анимации – коллекция анимации для библиотек встроенных стилей github.com.
Проект № 28: Доска идеи
Построить приложение для доски IDEA используя Rails 5.1 API приложение API и отдельное приложение React Построен с использованием приложения Create React. Доска IDEA представляет собой простую доску, которая демонстрирует идеи в виде квадратных плиток. Вы можете добавить идеи, редактировать существующие идеи и удалять идеи.
Я уже построил этот! Проверьте эти два видеоуронения, которые покажут вам, как создать этот поэтапный шаг:
Часть 1:
Rails 5 API и React.js Учебник – Как сделать IDEA Board App | Neadetto Rails 5 API и React.js Учебник – Как сделать IDEA Board App | Sulexettolearnetto.com.
Часть 2:
Как анимировать компонент с использованием группы RACT RESSIVE | Neadetto Как анимировать компонент с использованием группы RACT RESSIVE | Sulexettolearnetto.com.
Эти учебники охватывают множество практических концепций, в том числе функциональные компоненты без гражданства, компоненты на основе классовых классовых компонентов, использование Axios для создания вызовов API, Imprutability и многое другое.
Теперь это целое много интересных идей для вас, чтобы KickStart ваш реагировать на рейс путешествие!
Хотите создать эти приложения со мной? Прийти, проверить бесплатные учебные пособия на реагирование, рельсы и многое другое на Teantetto.com .
Есть какие-либо другие идеи? Поделитесь ими в ответ ниже.
Пожалуйста ? р Рекомендовать/хлопать? И поделитесь этой статьей!