✅ Каждый раз, когда вы создаете приложение для списка дел, щенок ? умирает?

1656628476 kazhdyj raz kogda vy sozdaete prilozhenie dlya spiska del shhenok

Содержание статьи

автор Христи Миттал

Oo4GsboJlSKVMvQDiSbM7MXLLCqUrNI8n7K7
фото кредит

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

Это убийца мотивации №1.

Я не хочу, чтобы мои студенты демотивировались и сдавались.

Поэтому я составил этот гигантский список из 28 интересных идей приложений, которые вы можете создать, обучаясь использовать React из Ruby on Rails.

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

evm9lRfYLSCjsGi7YyV950a8eO9LRiKvUG5M

Проект №1: приложение Календарь для назначения встреч (например, календарь Google)

IWZRzhKDlxFeYHIqutwyoP8rS60VLb6RjXWl
Простое приложение для назначения встреч в календаре

Это может начаться как простое приложение, которое вы можете постепенно улучшать, добавляя больше функций и улучшения UX.

Это поможет вам потренироваться в использовании вложенных компонентов (например компонент дня, компонент недели или компонент месяца).

Я использую это в качестве примера программы в своем бесплатном курсе React on Rails. Итак, проверьте это, если хотите попробовать это.

Вы можете просмотреть полный пошаговый код здесь:

научиться/реагировать
calreact – программа для календарных встреч React и Rails 5github.com

Проект №2: Приложение Github Explorer для поиска интересных хранилищ кода

Xt5zXCZwQnQV2dy9yiCIeSqyCgL4-YbLQV25
https://github.algolia.com

Вы можете создать часть поиска исключительно на стороне клиента, но вы можете сделать ее более веселой, сохраняя поиски в базе данных с помощью Rails и показывая самые популярные поиски.

Вы должны использовать внешний API и обрабатывать ответ JSON. Вы можете поэкспериментировать с предварительным рендерингом компонента на сервере.

Просмотрите этот плагин для браузера от Algolia, чтобы реализовать свои идеи:

algolia/github-awesome-autocomplete
github-awesome-autocomplete — :octocat: Добавьте возможности мгновенного поиска в панель поиска GitHubgithub.com

Проект №3: Приложение для заметок

2HsQXdpMsK0DdUvV7u3K6e1pKncTMrYHkxPq
Simplenote

Вы можете увидеть, как React обрабатывает много изменений состояния, например, включив автосохранение. Ознакомьтесь с Simplenote, чтобы получить хороший пример простой, но мощной программы для заметок.

Если это слишком сложно как первое приложение, вы можете сначала попробовать использовать внешний компонент текстового редактора, чтобы узнать, как он работает, а затем реализовать собственный:

facebook/draft-js
draft-js – фреймворк React для создания текстовых редакторов.github.com

Проект №4: Добавьте виджет чата Slack на свой сайт

XDxAVff76ErKvdEkJfYdQI7ztJ84sXHyiPd8

Используйте компонент react-slack-chat, чтобы добавить виджет чата к существующему сайту Rails. Компонент выполняет большую часть тяжелой работы, но вы можете поразвлечься, создав собственного бота в Rails и настроив виджет в React.

Код компонента находится на Github:

5punk/react-slack-chat
react-slack-chat – хороший интегрирующий веб-виджет для липкого/материального дизайна Slack Chat.github.com

Проект №5: Генератор мемов

6ZBtQjOclCw0WcpTjW48ZA2uVNZIsUWnGJ6T

Rails может обрабатывать хранение и обслуживание библиотеки изображений и существующих мемей. Используйте React для рендеринга и обработки формы для создания мема.

Вы можете создать мем на сервере с помощью ImageMagick или в браузере с помощью canvas. Смотрите это репо Хунга Трана:

tranhungt/мем-мейкер
meme-maker – создавайте свои любимые мемы и присылайте их своему другу!github.com

Проект №6: Бесплатный поиск изображений в реальном времени

CVdLOvWnZmefgdTbgRbbdEkPsI5otkto-3-B
Помогите блоггерам Medium найти свой внутренний вывод

Используйте Unsplash API для высококачественных бесплатных фотографий:

unsplash/unsplash_rb
unsplash_rb — Обертка Ruby для Unsplash API.github.com

Добавьте крутые анимации с помощью React Animation.

Разрешить пользователям добавлять в закладки свои любимые изображения. Вы даже можете поэкспериментировать с тем, чтобы сделать бэкенд просто приложением Rails API и создать отдельную программу React для интерфейса.

Проект №7: Книжный клуб

y4TOG12nCUnXwDCkv6kdgMmjPjJeSZcqw3P6
Goodreads — отличный сайт для копирования этого проекта

Простая программа, где вы и ваши друзья можете делиться своими любимыми книгами и обсуждать их (например, Goodreads). Бекенд может быть простым приложением Rails CRUD, но вы можете сделать интерфейс одностраничным приложением React и играть с маршрутизатором React и Redux.

Проект №8: веб-клиент Twitter для нескольких аккаунтов (например, Tweetdeck)

IldLnEczNbTFIT-tqmYCYN-RzyK9IybgUml3
Я использую Tweetdeck для управления своими личными и деловыми учетными записями Twitter с одного места

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

Используйте жемчужину Twitter Эрика Майклса-Обера:

sferik/twitter
twitter – интерфейс Ruby к API Twitter.github.com

Это даст вам непревзойденную радость от работы со смешными ограничениями скорости API от самой дружественной компании в мире.

Вы можете добавить автоматическое получение новых твитов и уведомлений в стиле Tweetdeck с помощью опроса или Action Cable.

Многие вложенные компоненты, и вы можете попробовать некоторые простые анимации в React.

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

Проект №9: Пользовательский интерфейс OpenStreetMap

eZiSwhi22WKGfgovWcGZBjfsZnagMO2Rmj8y
Мой родной город Пуна (Индия) на OpenStreetMap 🙂

Знаете ли вы, что веб-сайт OpenStreetMap является программой Rails?

Вы можете получить репо здесь, настроить его на собственной машине, а затем повозиться с добавлением React в интерфейс!

openstreetmap/openstreetmap-website
openstreetmap-website — Запуск программы Mirror of the Rails (размещен на git://git…github.com

Проект №10: Командная рулетка на обед

ZH8L223oEDfd2tGyluOF1A8RjDvXcYjJhbuv
Посмотрите, создан NEVERBLAND

Сайт, который поможет вам решить, куда пойти на обед со своей командой. Бекенд Rails должен быть простой программой CRUD, позволяющей членам команды вводить предложения мест. Вы можете использовать Foursquare API для поиска и автоматического заполнения.

И используйте React для смешных анимаций!

Если вам не нравится обед, выпейте кофе, коктейли или что-нибудь другое, более увлекательное.

Проект №11: Супер Прокрастинатор

DOBu6dKiZmwzQ3Y1fl9GiNd2rm6IAbsn8QBf
http://reader.one/

Единственный веб-сайт, на который можно зайти, чтобы избежать работы – читайте Reddit, Hacker News, Product Hunt, Medium, Slashdot и многое другое в одном месте.

Используйте сервер Rails для сохранения учетных записей и настроек пользователей, а также общения с разными API. Вы также можете получить данные API непосредственно со стороны клиента.

Хотите создать эти приложения вместе со мной? Приходите, посмотрите мой бесплатный полный курс React on Rails, где я научу вас, как быть профессионалом в использовании React из Rails, создавая при этом некоторые интересные вещи.

Проект №12: Чат с кабелем Action

brVbyPrTUWgWjLMmbB9LoAaHISYXYfdjtFIw
Помните AIM?

В дополнение к изучению React, это станет отличным небольшим проектом, чтобы испытать Action Cable, новую классную функцию Rails 5, которая добавляет поддержку WebSocket в Rails. Чтобы начать, просмотрите эти примеры:

рельсы/примеры действия кабеля
actioncable-examples — Примеры Action Cablegithub.com

GH-0Xqfn1aPLyBqQTkJIXo0TWf4qNDkUqi7P
Потому что очень маленькое – это очень красиво!

Просмотрите эту серию сообщений в блоге Андреа Маццини, в которых он подробно описывает, как он создал клон Medium с помощью программы Rails API, React и Flux.

FancyPixel/малые рельсы
small-rails – маленький, крошечный клон Medium. Rails APIgithub.comFancyPixel/маленький интерфейс
small-frontend – маленький, крошечный клон Medium. Интерфейс React+Fluxgithub.com

Вы можете создать его без использования Flux, но, возможно, следует попробовать, если вы готовы на это.

Проект №14: Теггер для лица

4X1yBGHo3IdvEg6GwMSye3CbHQsqJWWnT0qS
D до da A до da V до da I до da D до da C

Приложение, где вы можете загружать фотографии и помечать людей (например, в Facebook). Используйте камень OpenCV Ruby для автоматического определения лица:

ruby-opencv/ruby-opencv
ruby-opencv — Версионный форк гема OpenCV для Rubygithub.com

Проект №15: ActiveAdmin на стероидах

lbitvQ4emipgw3lZ6OctW1-bXfGU-kpCm0Cv
Пользовательский интерфейс по умолчанию ActiveAdmin

Вероятно, вы использовали ActiveAdmin для управления записями программы. Но пользовательский интерфейс не вдохновляет. Вы можете изменить это, принимая одно представление за раз и превращая его в хорошо оформленный компонент React.

Посмотрите на код ActiveAdmin здесь:

activeadmin/activeadmin
activeadmin – Административная платформа для приложений Ruby on Rails.github.com

Проект №16: Магазин электронной коммерции

2OcJhfGdoOSwYnBqTRRC9Cva-iidVZ6N4Rwj
Освещенные солнцем возвышенности как услуга

Джем, пиво, флаги Англии, карри – все это подается React on Rails. Если вы не хотите создавать функции магазина в Rails, просто используйте Spree и сосредоточьтесь на упражнении компонентов React для интерфейса.

веселье/гулянка
Spree – это полное решение для электронной коммерции с открытым кодом Ruby on Rails.github.com

Угадай, что? Я строю эту идею интернет-магазина в серии учебных пособий. Первый будет опубликован прямо здесь, в блоге freeCodeCamp! Убедитесь, что вы подписались на меня на Medium и зарегистрируйтесь на Learnetto, чтобы получить его в своем почтовом ящике.

Проект №17: Просто по почте без шимпанзе

Z26r8KFExCLrXmJEKPjVYhhNknihh0RIME4f
У меня с Mailchimp отношения любви-ненависти

Программа рассылки электронной почты с хорошим пользовательским интерфейсом, которая не заставляет вас рвать волосы. И без ерунды с милой обезьяной?

Вы все еще можете использовать API Mailchimp или Sendgrid. Если вы пользовались Mailchimp, вы знаете, что существует масса функций, которые вы можете попытаться создать — просмотр/фильтрация/управление подписчиками, разработка форм, создание кампаний и т.д.

Просто выберите одну функцию и попробуйте создать ее. Большинство функций будет включать определенную форму, поэтому должно быть хорошей практикой разделить ваш пользовательский интерфейс на компоненты React, которые будут обрабатывать состояние и некоторые функциональные компоненты без состояния.

Проект №18: Gmail на Rails

IOkVzM0TYHyhUrYvrMSNDdCmfuKIu6S5cMGG
Входящие сообщения Леброна Джеймса (2012)

Gmail имеет довольно сложный пользовательский интерфейс, но вы можете начать с простого создания интерфейса для размещения и чтения электронных писем. А может, поиск может быть веселее?

Используйте драгоценный камень google-api-client и ознакомьтесь с этим замечательным учебником React и репозиторией кода от Марка Брауна ☕ для начала:

markbrown4/gmail-react
gmail-react — Учебник по React.js — Gmailgithub.com

Проект №19: DJ Spotify

c7mlZrq3YjmyIWGyApDBsS9Mw7itG5wgH3xa

Программа для диджеев создана на основе Spotify. Получайте рекомендации, создавайте и смешивайте списки воспроизведения и даже позвольте другим добавлять песни в списки воспроизведения.

Используйте драгоценный камень Ruby для API Spotify:

guilhermesad/rspotify
rspotify — Обертка ruby ​​для веб-API Spotifygithub.com

Раньше я создавал с ней небольшое приложение, и оно довольно простое в использовании. Spotify позволяет воспроизводить саму музыку только с помощью собственных приложений, поэтому вам нужно поддерживать приложение вместе.

Проект №20: приборная панель Heroku

zqRDjulyUaQ-EszbWouRoHjMwPU84UoGnDoc

Как разработчик Rails, вы наверняка хорошо знакомы с Heroku. Это отличный сервис для быстрого развертывания и размещения приложений Rails – идеально подходит, когда вы делаете много мелочей для обучения

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

Используйте этот драгоценный камень для доступа к Heroku API:

heroku/platform-api
platform-api — Ruby HTTP-клиент для Heroku APIgithub.com

Проект №21: клиент AWS S3

BWzidSv2aWTkTYblW37NnkeWN1fe3nz3Wts1
Дизайн пользовательского интерфейса ’95

Создайте хороший современный пользовательский интерфейс для управления аккаунтом AWS S3. Используйте драгоценный камень Ruby и начните с создания простого компонента обозревателя файлов. Затем добавьте компонент формы для загрузки файлов.

aws/aws-sdk-ruby
aws-sdk-ruby – официальный пакет SDK AWS для Ruby.github.com

Проект №22: Панель инструментов Stripe Analytics

4zrzHJ5GXMagFrtl7ZI8eSB6O84kFFHrz11Z
Просмотрите Baremetrics, чтобы получить вдохновение — https://demo.baremetrics.com/

Панель инструментов показывает некоторые статистические данные и диаграммы на основе данных Stripe. API очень хорошо задокументирован, и это отличный шанс попробовать использовать D3 из React (посмотрите на это и это).

Проект №23: информационная панель Google Analytics

wkGB2Fq0PFO-j3hNjrwIwAnXcYrE3fhPuoIa
Посмотрите на приложение GA для iPad, чтобы получить вдохновение (это гораздо приятнее, чем веб-сайт)

Веб-панель аналитики Google по умолчанию захламлена и запутана. Вы можете создать более простой, который показывает только важнейшую информацию.

Еще один шанс использовать D3 или вы можете попробовать другую библиотеку.

Вы можете получить доступ к API GA с помощью этого драгоценного камня.

Проект №24: Трекер привычек

KcvzBu8Wdc1pDC6h0YZ85XoILjlIMumvrgZH
Loop Habit Tracker имеет хороший простой пользовательский интерфейс

Создайте приложение для отслеживания ваших ежедневных и еженедельных привычек – утренние процедуры, занятия в спортзале, бег, приготовление пищи, медитация, гитарная практика, чайные церемонии?

Чтобы получить вдохновение, см. Loop Habit Tracker или Coach.

Сделайте его удобным для мобильных устройств, чтобы вы могли использовать его в пути. Когда вы поймете React, вы можете даже создать мобильное приложение с помощью React Native.

Проект №25: Фитнес-панель

HhGkoMRIhgjU-6UQ0bcmHhH7BAA9XxtjW8la
Ознакомьтесь с Exist для вдохновения (сделано Джошем Шарпом и Белль Бет Купер)

Создайте информационную панель для всех ваших личных данных о фитнесе, которая собирает данные из разных приложений и представляет полезную статистику в хорошем пользовательском интерфейсе.

В зависимости от того, что вы используете, ваша семья и друзья, вы можете легко получать данные из ряда API — Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings и многое другое!

Вы даже можете разрешить пользователю вручную вводить данные для простых вещей, таких как отслеживание веса и выполнение упражнений.

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

Я создал простую информационную панель для Fitbit данных. Смотрите код здесь:

научиться/реагировать
reactfit – приложение для фитнес-панели, созданное с помощью Rails 5.1 и React.jsgithub.com

Проект №26: Угадай мой эскиз (игра)

D4ovprX3Z23dqZN50zpcVSWdDqhpexNOUbS5
Google Quick Draw

Сделайте приложение для рисования, в котором вы сможете рисовать с помощью мыши, а друг должен угадать, что вы нарисовали. Для рисования можно использовать канву. Просмотрите react-sketchpad Михала Сврчека, чтобы получить некоторые идеи относительно того, как начать:

svrcekmichal/react-sketchpad
react-sketchpad – блокнот для эскизов, созданный с помощью полотнаgithub.com

Используйте Rails, чтобы загрузить и сохранить рисунок и показать его на другом компьютере.

Добавьте машинное обучение, чтобы компьютер догадался как продвинутое упражнение.

Проект №27: Вы пишете как

x9knrRpK9Dx-sOMJq3MGGZvMQLHw14DgkUr9
Всегда приятно знать, кто вдохновляет известных интернет-людей

Сделайте приложение-классификатор текста, который соответствует вашему стилю письма известному автору – так же, как «Я пишу как нравится» (сделано Дмитрий Честных).

Используйте classifier-reborn для классификации текста и React для обработки формы. Эта программа в большинстве случаев трудна для серверной части, поэтому экспериментируйте с некоторыми анимациями интерфейса. Просмотрите это репо, чтобы получить несколько крутых идей:

FormidableLabs/react-анимации
react-animations — Коллекция анимаций для встроенных библиотек стилейgithub.com

Проект №28: Доска идей

OAvdftJCUurJ013rRAqxfYhoXq1-f4cEa0IV
Программа Idea Board с плитками идей

Создайте программу Idea board с помощью программы Rails 5.1 API и отдельной программы React, созданной с помощью Create React App. Доска идей – это простая доска, на которой идеи отображаются в виде квадратных плиток. Можно добавлять идеи, редактировать существующие и удалять идеи.

Я уже построил этот! Просмотрите эти два видеоурока, которые пошагово покажут вам, как создать это:

Часть 1:

Учебник по Rails 5 API и React.js — Как создать приложение для доски Idea | Learnetto
Учебник по Rails 5 API и React.js — Как создать приложение для доски Idea | Learnettolearnetto.com

Часть 2:

Как анимировать компонент с помощью React Transition Group Learnetto
Как анимировать компонент с помощью React Transition Group Learnettolearnetto.com

Эти учебники охватывают многие практические концепции, включая функциональные компоненты без состояния, компоненты на основе классов, использование axios для осуществления вызовов API, помощник неизменности и т.д.

i5pudw4UHa0jHPrj0zqW2OE-RzVr8W9D0vrw
Так много идей!

Теперь у вас есть много интересных идей, чтобы начать ваше путешествие React on Rails!

Хотите создать эти приложения вместе со мной? Пожалуйста, просмотрите бесплатные учебные пособия из React, Rails и прочего на Learnetto.com.

Есть другие идеи? Поделитесь ими в ответе ниже.

пожалуста ? ррекомендовать/хлопать? и поделитесь этой статьей!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *