5 Реагирайте проекти, от които се нуждаете в портфолиото си

Вложихте се в работата и сега добре разбирате библиотеката на React.

На всичкото отгоре имате добра представа за JavaScript и поставяте най-полезните му функции за използване във вашия React код.

Постигнахте голям напредък ... но сега какво правите?

Как преодолявате разликата между познаването на основите на React и ставането на професионален разработчик?

Много разработчици се сблъскват с този проблем, когато достигнат този междинен етап на обучение на React или друга библиотека на JavaScript. Те познават по-голямата част от самата библиотека, както и JavaScript, за да я използват ефективно, но не знаят следващата стъпка, която трябва да предприемат.

Защо трябва да изграждате приложения

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

Но какви приложения трябва да изграждате с React, за да изравните способността си като разработчик?

В тази статия ще разгледаме 5 различни типа приложения, които трябва да помислите за изграждане след основното приложение todo. Голямата полза от изграждането на приложения е, че след като бъдат внедрени, те могат да бъдат свързани с вашето портфолио като мощен, незабавен начин да покажете на работодателите своя опит.

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

Как да започнем да изграждаме приложения с React

За разлика от самото учене на React, където можете да намерите десетки статии, за да се потопите по-дълбоко в която и да е свързана концепция, процесът на изграждане на приложение е до голяма степен самостоятелно насочена дейност без много насоки.

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

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

Забележка: Едно погрешно схващане, което имах, когато започнах да изграждам реални приложения като тези, беше, че трябваше да изградя цял бекенд / API с Node или Python, за да получа необходимата функционалност. Не е нужно да го правите. Разгледайте мощни безсървърни технологии като Firebase, AWS Amplify или Hasura, които ви осигуряват пълен бекенд, без да е необходимо да създавате и внедрявате такъв сами. Инвестирайте в инструменти, които ви правят по-продуктивни и спестяват време.

Изградете приложение за социални медии

Ако трябва да препоръчам само едно приложение, което да добавите към портфолиото си, това би било приложение за социални медии. Twitter, Facebook и Instagram са доста сложни и включват непрекъснато нарастващ брой функции, за да ангажират потребителите. На всичкото отгоре това е приложението, което най-вероятно познавате по отношение на това как трябва да функционира.

Има редица функции, общи сред почти всички приложения за социални медии:

  • способността на потребителите да правят публикации с текстови и / или медийни файлове,
  • емисия на живо от тези публикации,
  • позволяване на други потребители да харесват и коментират публикации,
  • както и удостоверяване на потребителя.

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

Примери за приложения: Instagram, Twitter, Snapchat, Reddit

Технологии за използване:

  • Създайте React App или Next.js, за да направите динамичен потребителски интерфейс от публикации, харесвания и съобщения
  • Firebase, AWS Amplify или Hasura (с помощта на GraphQL с абонаменти) за данни в реално време
  • Безсървърни функции като AWS Lambda или Firebase Functions за известия
  • Облачно или Firebase съхранение за качване на снимки или видео

Създайте приложение за електронна търговия

Изберете няколко от любимите си сайтове и гарантирам, че поне един от тях има вградено приложение за електронна търговия, дори ако това е само малка витрина. Приложенията за електронна търговия са повсеместни и се обзалагам, че ще бъдете приканени да изградите такова в даден момент от кариерата си като разработчик.

Изкушаващо е да се изгради впечатляваща, мащабна платформа за електронна търговия като Amazon, но бих препоръчал да се работи върху нещо по-малко и по-фокусирано.

Вместо пазар, който предоставя всичко на всички хора, отидете с индустрия, която ви интересува. Например, ако харесвате стоки за дома, може да разгледате какво са създали Crate & Barrel или Williams-Sonoma за своите сайтове.

Освен продукти, приложенията за електронна търговия могат да предоставят услуга на потребителите. Ако това е услуга, която се предоставя локално, към приложението може да се добави интерактивна карта, която да предостави на доставчика на услуги и клиента да знаят местонахождението си. Идват ми на ум приложенията за доставка на храна като UberEats и Doordash, които изискват местоположението на лицето, поръчващо храната.

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

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

Популярни примери: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Технологии за използване:

  • Създайте React App или Gatsby за витрината и за показване на продукти
  • Ивица с пакета response-stripe-elements за обработка на обработката на плащанията
  • Безсървърна функция като Netlify / AWS Lambda за обработка на процеса на плащане
  • Алголия за мълниеносно търсене на продукти
  • Snipcart за лесно създаване на количка и управление на продукти за колички

Създайте приложение за забавление

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

Някои чудесни примери за това, съответно, ще бъдат Netflix, Audible и Soundcloud или Spotify. Ако включите изкуство или дизайн в тази категория, бихме могли да добавим сайтове като Behance или Dribbble в списъка.

Интересното при тази категория е, че много развлекателни приложения граничат със социални медийни приложения. Например приложение като Tiktok, което предлага кратки, въображаеми видеоклипове, се движи от високо ангажиране на потребителите. Друго приложение като YouTube е съсредоточено върху взаимодействието на потребителите чрез харесвания, коментари и абонаменти.

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

Популярни примери: YouTube, Netflix, Audible, Spotify, Tiktok

Технологии за използване:

  • Създайте React App, Next.js или Gatsby, за да създадете потребителски интерфейс на приложението
  • npm пакет реагиращ плейър за възпроизвеждане на медия
  • Облачно или Firebase съхранение за качване на медии
  • Алголия за търсене на медии по име (т.е. аудио запис, видео, филм и др.)

Създайте приложение за съобщения

Приложенията за съобщения са огромни. Вероятно имате безплатна услуга за съобщения като WhatsApp или Viber на телефона си или такава, вградена във вашата платформа за социални медии като Facebook Messenger. Услуги като Интерком с незабавни съобщения също се предлагат като уеб приложения, така че компаниите могат да предоставят незабавна поддръжка на клиентите на своите потребители.

Всяко приложение за съобщения ще се състои от разговор с двама или повече души, където съобщенията се изпращат в реално време. Подобно на приложението за социални медии, бих препоръчал услуга като Firebase или Hasura, която транспортира данни чрез WebSockets, за да се показват съобщенията веднага в разговора.

По-голямата част от приложенията за съобщения са на мобилни устройства или таблети. Ако това не е първият ви клон на приложение, това е чудесен шанс да преминете отвъд мрежата и да създадете мобилно приложение с React Native. Още по-добре е, че можете да създадете уеб и мобилно приложение за съобщения едновременно с пакет като React Native Web.

Популярни примери: WhatsApp, Viber, Discord, Messenger, Slack

Технологии за използване:

  • React Native или React Native Web за изграждане като мобилно приложение или хибридно приложение (web + mobile)
  • Firebase, AWS Amplify или Hasura (с помощта на абонаменти за GraphQL) за изпращане на съобщения в реално време
  • Облачно или Firebase съхранение за изпращане на съобщения с изображение или видео съдържание
  • npm пакет emoji-mart за хлъзгав инструмент за избор на емотикони, подобен на Slack, който потребителите да включват в своите съобщения

Изградете приложение за производителност

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

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

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

За да започнете да създавате приложение за производителност, попитайте какви функции може да има дадено приложение, за да улесните ежедневния си график и преминете оттам.

Популярни примери: Todoist, Notion, Things и др.

Технологии за използване:

  • Създайте React App за мрежата или React Native за мобилни устройства
  • npm package response-markdown за показване на маркиране в потребителския интерфейс на приложението
  • npm пакет response-codemirror2 за писане на код във вашите бележки
  • npm пакет реагира-плъзгане за пренареждане на списъчно съдържание чрез щракване и плъзгане

Успех в пътуването ви за изграждане на приложения и ще се видим в следващата статия.

Искате ли да станете JS Master? Присъединете се към 2020 JS Bootcamp

Присъединете се към 2020 JS Bootcamp

Следвайте + Кажете Здравейте! ? Twitter • codeartistry.io