✅ Всеки път, когато създавате приложение за списък със задачи, кученце? умира?

Знаете ли, когато се опитвате да научите нещо ново, но да ви омръзне reeeeeeeall да изградите примерното приложение по подразбиране?

Това е мотивацията №1 KILLER.

Не искам учениците ми да се демотивират и да се откажат.

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

Този списък ще приеме, че вече се чувствате комфортно с Ruby on Rails (или друга рамка за уеб разработка). Така че бекенд битът може да е малко сложен за начинаещи, но битът React отпред трябва да е относително прост.

Проект №1: Приложение Календар за записване на срещи (като Google календар)

Това може да започне като просто приложение, което постепенно можете да подобрите, като добавите повече функции и подобрения на UX.

Това ще ви помогне да практикувате използването на вложени компоненти (като дневен компонент, вложен вътре в седмичен компонент или вложен вътре в месечен компонент).

Използвам това като примерно приложение в моя курс Безплатна пълна реакция на релси. Така че проверете дали искате да изпробвате това.

Можете да видите пълния код стъпка по стъпка тук:

Learnetto / Calreact

calreact - React и Rails 5 приложение за срещи в календара github.com

Проект №2: Приложение на Github Explorer за намиране на интересни хранилища на кодове

Можете да изградите частта за търсене чисто от страна на клиента, но можете да я направите по-забавна, като съхранявате търсенията в база данни с помощта на Rails и показвате най-популярните търсения.

Ще се упражнявате с използване на външен API и обработка на JSON отговора. Можете да експериментирате с предварително изобразяване на компонента на сървъра.

Вижте този плъгин за браузър от Algolia, за да накарате вашите идеи да изтичат сокове:

algolia / github-awesome-autocomplete

github-awesome-autocomplete -: octocat: Добавете възможности за незабавно търсене в лентата за търсене на GitHub github.com

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

Можете да видите силата на React, който се справя с много промени в състоянието, да речем, като активирате автоматичното запазване. Вижте Simplenote за добър пример за просто, но мощно приложение за бележки.

Ако това е твърде трудно като първо приложение, можете първо да изпробвате с помощта на компонент за външен текстов редактор, за да научите как работи, а след това да внедрите своя:

facebook / draft-js

draft-js - React рамка за изграждане на текстови редактори. github.com

Проект № 4: Добавете приспособление за чат Slack към вашия сайт

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

Кодът за компонента е на Github:

5 пънк / реагиране-небрежен чат

response-slack-chat - Красива Gooey / Material Design Slack Chat Web интегрираща джаджа. github.com

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

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

Можете да генерирате мема на сървъра с помощта на ImageMagick или в браузъра, използвайки платно. Вижте това репо от Hung Tran:

tranhungt / меммейкър

meme-maker - Направете любимите си мемове и ги изпратете на ваш приятел! github.com

Проект №6: Приложение за безплатно търсене на изображения в реално време

Използвайте API за отваряне за висококачествени безплатни снимки:

unsplash / unsplash_rb

unsplash_rb - обвивка Ruby за API на Unsplash. github.com

Добавете страхотни анимации, като използвате добавките React Animation.

Позволете на потребителите да маркират своите любими изображения. Можете дори да експериментирате с превръщането на бекенда само в приложение за Rails API и да направите отделно приложение React за предния край.

Проект № 7: Клуб на книгите

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

Проект № 8: Уеб клиент в Twitter за множество акаунти (като Tweetdeck)

Приложение за уеб клиент на Twitter, в което можете да свържете повече от един акаунт в Twitter (с помощта на OAuth) и след това да добавите няколко колони към потребителския интерфейс - за неща като емисия, известия, търсене, директни съобщения.

Използвайте скъпоценния камък в Twitter от Ерик Майкълс-Обер:

sferik / twitter

twitter - Руби интерфейс към Twitter API. github.com

Това ще ви достави несравнима радост от справянето с нелепите ограничения на скоростта на API от най-удобната за разработчици компания в света.

Можете да добавите автоматично извличане на нови туитове и известия в стил Tweetdeck с помощта на анкета или кабел за действие.

Много вложени компоненти и можете да изпробвате няколко прости анимации в React.

Може да е най-добре да започнете с изграждането на само четене. След като имате това, можете да добавите възможността за публикуване, харесване и ретуит.

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

Знаете ли, че уебсайтът на OpenStreetMap е приложение на Rails?

Можете да получите репото тук, да го настроите на собствената си машина и след това да се поправите с добавяне на React към предния край!

openstreetmap / openstreetmap-уебсайт

openstreetmap-website - Огледало на приложението Rails, захранващо //www.openstreetmap.org (хоствано на git: // git… github.com

Проект # 10: Екипна рулетка за обяд

Уебсайт, който ви помага да решите къде да отидете на обяд с вашия екип. Беккендът на Rails просто трябва да бъде просто CRUD приложение, което позволява на членовете на екипа да въвеждат предложения за места. Можете да използвате API на Foursquare за търсене и автоматично попълване.

И използвайте React за някои нелепи анимации!

Ако не сте на обяд, направете кафе или коктейли или нещо друго по-вълнуващо.

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

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

Използвайте вътрешната база на Rails за запазване на потребителски акаунти и предпочитания и разговори с различните API. Можете също така да извлечете данни от API-тата директно от страна на клиента.

Искате ли да създадете тези приложения с мен? Елате, вижте моя безплатен пълен курс React on Rails, където ще ви науча как да бъдете професионалист в използването на React with Rails, докато създавате забавни неща.

Проект # 12: Чат стая с кабел за действие

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

rails / actioncable-примери

actioncable-examples - Примери за кабели за действие github.com

Проект № 13: Изключително малък (среден клон)

Вижте тази поредица от публикации в блога на Андреа Мацини, в които той описва подробно как е създал среден клон с приложението Rails API, React и Flux.

FancyPixel / малки релси

малки релси - малки, малък клонинг на среден. Rails API github.com FancyPixel / small-frontend

small-frontend - Малък, мъничък клонинг на Medium. React + Flux интерфейс github.com

Можете да го изградите, без да използвате Flux, но може да си струва да опитате, ако сте готови за предизвикателството.

Проект # 14: Тагър за лице

Приложение, където можете да качвате снимки и да маркирате хора (като във Facebook). Използвайте скъпоценния камък OpenCV Ruby за автоматично разпознаване на лица:

ruby-opencv / ruby-opencv

ruby-opencv - Версия на вилицата на скъпоценния камък OpenCV за Ruby github.com

Проект # 15: ActiveAdmin за стероиди

Вероятно сте използвали ActiveAdmin за управление на записите на приложението си. Но потребителският интерфейс не е точно вдъхновяващ. Можете да промените това, като правите по един изглед и го превръщате в добре оформен React компонент.

Погледнете кода на ActiveAdmin тук:

активен администратор / активен администратор

activeadmin - Административната рамка за приложенията Ruby on Rails. github.com

Проект № 16: Магазин за електронна търговия

Сладко, бира, знамена на Англия, къри, всички сервирани от React on Rails. Ако не искате да изграждате функциите на магазина в Rails, просто използвайте Spree и се съсредоточете върху практикуването на React компоненти за предния край.

раздвижване / раздвижване

spree - Spree е цялостно решение за електронна търговия с отворен код за Ruby on Rails. github.com

Познай какво? Изграждам тази идея за онлайн магазин в поредица уроци. Първият ще бъде публикуван точно тук в блога на freeCodeCamp! Не забравяйте да ме следвате в Medium и да се регистрирате в Learnetto, за да го получите във входящата си поща.

Проект # 17: Just Mail No Chimp

Приложение за бюлетин по имейл с добър потребителски интерфейс, което не ви кара да искате да разкъсате косата си. И никакви сладки маймунски глупости?

Все още можете да използвате API на Mailchimp или да използвате Sendgrid. Ако сте използвали Mailchimp, знаете, че има много функции, които можете да опитате да изградите - преглед / филтриране / управление на абонати, проектиране на формуляри, създаване на кампании и др.

Просто изберете една функция и се опитайте да я изградите. Повечето функции ще включват някакъв вид форма, така че би трябвало да бъде добра практика за разделяне на вашия потребителски интерфейс на React компоненти, които ще обработват състоянието и някои функционални компоненти без състояние.

Проект # 18: Gmail on Rails

Gmail има доста сложен потребителски интерфейс, но можете да започнете, като просто изградите потребителския интерфейс за изброяване и четене на имейли. Или може би търсенето може да е по-забавно?

Използвайте скъпоценния камък на google-api-client и разгледайте този страхотен урок на React и репо кода от Марк Браун ☕, за да започнете:

markbrown4 / gmail-response

gmail-response - Урок за React.js - Gmail github.com

Проект # 19: DJ Spotify

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

Използвайте скъпоценен камък Ruby за Spotify API:

Gilhermesad / rspotify

rspotify - Рубинна обвивка за Spotify Web API github.com

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

Проект # 20: Табло за управление Heroku

Като разработчик на Rails, вероятно сте добре запознати с Heroku. Това е страхотна услуга за бързо разгръщане и хостинг на Rails приложения - идеална, когато правите много малки неща за учене

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

Използвайте този скъпоценен камък за достъп до API на Heroku:

heroku / платформа-api

platform-api - Ruby HTTP клиент за API Heroku github.com

Проект # 21: Клиент на AWS S3

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

aws / aws-sdk-ruby

aws-sdk-ruby - Официалният AWS SDK за Ruby. github.com

Проект # 22: Табло за анализ на ленти

Табло за показване на някои статистически данни и диаграми, базирани на данни от Stripe. API е много добре документиран и това е чудесен шанс да опитате да използвате D3 с React (вижте това и това).

Проект # 23: Табло за анализ на Google

Уеб таблото за управление по подразбиране на Google за анализ е претрупано и объркващо. Можете да създадете по-опростен, който просто показва най-важната информация.

Друг шанс да използвате D3 или можете да опитате друга библиотека.

Можете да получите достъп до API на GA с този скъпоценен камък.

Проект # 24: Проследяване на навици

Изградете приложение за проследяване на вашите ежедневни и седмични навици - сутрешни съчетания, фитнес сесии, бягане, готвене, медитация, китарни практики, чаени церемонии?

За вдъхновение вижте Loop Habit Tracker или Coach.

Направете го удобен за мобилни устройства, за да можете да го използвате в движение. След като се почувствате комфортно с React, можете дори да създадете мобилно приложение, използвайки React Native.

Проект # 25: Фитнес табло

Изградете табло за управление на всички ваши лични данни за фитнес, което включва данни от различни приложения и представя полезна статистика в приятен потребителски интерфейс.

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

Можете дори да позволите на потребителя да въвежда ръчно данни за прости неща като проследяване на теглото и упражнения.

Можете да започнете, като просто покажете отчети и след това да го подобрите с нови функции като добавяне на бележки и споделяне.

Изградих просто табло за данни за Fitbit. Вижте кода тук:

Learnetto / Reactfit

реагирайте - Приложение за фитнес табло, създадено с помощта на Rails 5.1 и React.js github.com

Проект # 26: Познай моята скица (игра)

Направете приложение за рисуване, в което можете да рисувате с мишка, а приятел трябва да познае какво сте нарисували. Можете да използвате платно за рисуване. Вижте блокчета за реакция на Michal Svrček за някои идеи как да започнете:

svrcekmichal / реагирай-скицпад

response-sketchpad - Подложка за скици, създадена с платно github.com

Използвайте Rails, за да качите и запазите чертежа и да го покажете на някой от друг компютър.

Като разширено упражнение в забавление, добавете машинно обучение и накарайте компютъра да познае?

Проект # 27: Пишете харесва

Направете приложение за класификация на текст, което съответства на стила ви на писане на известен автор - точно както аз пиша като (направено от Дмитрий Честных).

Използвайте класификатор-reborn за класифициране на текста и React за обработка на формуляра. Това приложение е предимно бекенд, така че експериментирайте с някои анимации на потребителския интерфейс. Вижте това репо за някои страхотни идеи:

FormidableLabs / реакция-анимации

response -animations - Колекция от анимации за вградени библиотеки със стилове github.com

Проект # 28: Съвет за идеи

Създайте приложение за дъска Idea, като използвате приложението Rails 5.1 API и отделно приложение React, създадено с помощта на Create React App Дъската Idea е проста дъска, която показва идеи под формата на квадратни плочки. Можете да добавяте идеи, да редактирате съществуващи идеи и да изтривате идеи.

Вече изградих този! Вижте тези два видео урока, които ще ви покажат как да изградите тази стъпка по стъпка:

Част 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 извиквания, помощник за неизменност и други.

Сега това са много интересни идеи, за да стартирате вашето пътуване React on Rails!

Искате ли да създадете тези приложения с мен? Заповядайте, разгледайте безплатни уроци за React, Rails и други на Learnetto.com.

Имате ли други идеи? Споделете ги в отговор по-долу.

Моля те ? R ecommend / пляскат? и споделете тази статия!