Front-end dojo: mapulojekiti ophunzitsa luso la otukula (5 atsopano + 43 akale)

1. Клон Notion

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

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Nkhaniyi idamasuliridwa mothandizidwa ndi EDISON Software, yomwe разрабатывает приложения и сайтыndipo amaika ndalama zoyambira.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonasi: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

Mphatso конвертирует видео в GIF используя функцииpompano для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

Taonani: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• Bonasi: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

Taonani: pano GitHub example repository.

Подборка проектов из предыдущих публикаций.

wosanjikiza

www.reddit.com/r/layer

Gulu ndi gulu lomwe aliyense amatha kujambula pixel pa "board" yogawana. Lingaliro loyambirira lidabadwa pa Reddit. Gulu la r/Layer ndi fanizo la kugawana nzeru, kuti aliyense atha kukhala wopanga ndikuthandizira pazifukwa zofanana.

Zomwe mungaphunzire popanga projekiti yanu ya Layer:

• Momwe JavaScript canvas imagwirira ntchito Kudziwa kugwiritsa ntchito chinsalu ndi luso lofunikira pamapulogalamu ambiri.
• Momwe mungagwirizanitse zilolezo za ogwiritsa ntchito. Wogwiritsa ntchito aliyense amatha kujambula pixel imodzi mphindi 15 zilizonse popanda kulowa.
• Pangani magawo a cookie.

Squoosh

squoosh.app

Squoosh ndi ntchito yophatikizira zithunzi yokhala ndi zosankha zambiri zapamwamba.

GIF 20 MB

Popanga mtundu wanu wa Squoosh muphunzira:

• Momwe mungagwiritsire ntchito ndi kukula kwazithunzi
• Phunzirani zoyambira za Drag'n'Drop API
• Kumvetsetsa momwe API ndi omvera zochitika amagwirira ntchito
• Momwe mungakwezere ndi kutumiza mafayilo

Taonani: Compressor yazithunzi ndi yapanyumba. Sikoyenera kutumiza deta yowonjezera ku seva. Mutha kukhala ndi kompresa kunyumba, kapena mutha kuyigwiritsa ntchito pa seva, kusankha kwanu.

Calculator

Inu? Mozama? Calculator? Inde, ndendende, chowerengera. Kumvetsetsa zoyambira masamu ndi momwe zimagwirira ntchito limodzi ndi luso lofunikira kuti muchepetse ntchito zanu. Posakhalitsa mudzayenera kuthana ndi manambala komanso posachedwa bwino.

jarodburchhill.github.io/CalculatorReactApp

Mukapanga chowerengera chanu muphunzira:

• Gwirani ntchito ndi manambala ndi masamu
• Phunzitsani ndi omvera zochitika API
• Momwe mungapangire zinthu, kumvetsetsa masitayelo

Crawler (Search engine)

Aliyense wagwiritsa ntchito makina osakira, bwanji osapanga yanu? Zokwawa ndizofunikira kuti mufufuze zambiri. Aliyense amawagwiritsa ntchito tsiku lililonse ndipo kufunikira kwaukadaulo ndi akatswiri kumangokulirakulira pakapita nthawi.

Makina osakira a Google

Zomwe mungaphunzire popanga makina osakira:

• Momwe zokwawa zimagwirira ntchito
• Momwe mungalondolere masamba ndi momwe mungawasanjire powavotera ndi mbiri yawo
• Momwe mungasungire masamba omwe ali ndi indexed mu database komanso momwe mungagwirire ntchito ndi database

Wosewera nyimbo (Spotify, Apple Music)

Aliyense amamvetsera nyimbo - ndi gawo chabe la moyo wathu. Tiyeni tipange chosewerera nyimbo kuti timvetsetse bwino momwe zimango zoyambira nyimbo zamakono zimagwirira ntchito.

Spotify

Zomwe mungaphunzire popanga nsanja yanu yotsatsira nyimbo:

• Momwe mungagwiritsire ntchito ndi API. gwiritsani ntchito API kuchokera ku Spotify kapena Apple Music
• Momwe mungasewere, kuyimitsa kaye kapena kubwereranso ku nsonga ina/yam'mbuyo
• Momwe mungasinthire voliyumu
• Momwe mungasamalire mayendedwe a ogwiritsa ntchito ndi mbiri ya msakatuli

Pulogalamu yosakira makanema pogwiritsa ntchito React (ndi mbedza)

Chinthu choyamba chomwe mungayambe nacho ndikupanga pulogalamu yosakira makanema pogwiritsa ntchito React. Pansipa pali chithunzi cha momwe pulogalamu yomaliza idzawonekere:

Kodi muphunzira chiyani
Mukapanga pulogalamuyi, mukulitsa luso lanu la React pogwiritsa ntchito Hooks API yatsopano. Pulojekiti yachitsanzo imagwiritsa ntchito zigawo za React, mbedza zambiri, API yakunja, komanso makongoletsedwe a CSS.

Tech stack ndi mawonekedwe

• Yankhani ndi mbedza
• pangani-react-app
• Zithunzi za JSX
• CSS

Popanda kugwiritsa ntchito makalasi aliwonse, mapulojekitiwa amakupatsirani malo abwino olowera mu magwiridwe antchito a React ndipo adzakuthandizani mu 2020. mukhoza kupeza chitsanzo polojekiti apa. Tsatirani malangizo kapena pangani zanu.

Chat App ndi Vue

Ntchito ina yabwino yomwe mungachite ndikupanga pulogalamu yochezera pogwiritsa ntchito laibulale yomwe ndimakonda ya JavaScript: VueJS. Pulogalamuyi idzawoneka motere:

Kodi muphunzira chiyani
Mu phunziro ili, muphunzira momwe mungapangire pulogalamu ya Vue kuyambira poyambira - kupanga zida, kasamalidwe ka boma, kupanga mayendedwe, kulumikizana ndi ntchito za anthu ena, komanso ngakhale kutsimikizira.

Tech stack ndi mawonekedwe

• Vue
• uwu
• Onani Router
• Chithunzi cha CLI
• okankha
• CSS

Iyi ndi pulojekiti yabwino kwambiri kuti muyambe ndi Vue kapena sinthani maluso anu omwe alipo kuti mupite patsogolo mu 2020. mukhoza kupeza phunziro apa.

Pulogalamu yokongola yanyengo yokhala ndi Angular 8

Chitsanzochi chidzakuthandizani kupanga pulogalamu yokongola ya nyengo pogwiritsa ntchito Angular 8:

Kodi muphunzira chiyani
Pulojekitiyi ikuphunzitsani maluso ofunikira pakumanga mapulogalamu kuyambira pachiyambi - kuchokera pakupanga mpaka pakukula, mpaka pakugwiritsa ntchito pokonzekera kutumiza.

Tech stack ndi mawonekedwe

• Kutsegula 8
• Kutentha
• Kupereka kwa seva
• CSS yokhala ndi Grid ndi Flexbox
• Mobile wochezeka ndi kusinthasintha
• Mdima wamdima
• Wokongola mawonekedwe

Chomwe ndimakonda kwambiri pantchito yophatikiza zonseyi ndikuti simuphunzira zinthu nokha. M'malo mwake, mumaphunzira njira yonse yachitukuko, kuchokera pakupanga mpaka kutumizidwa komaliza.

Zochita kugwiritsa ntchito Svelte

Svelte ali ngati mwana watsopano pamachitidwe otengera gawo - osachepera ofanana ndi React, Vue ndi Angular. Ndipo ichi ndi chimodzi mwazinthu zatsopano zotentha kwambiri za 2020.

Mapulogalamu a To-Do siwofunika kwambiri mutu, koma adzakuthandizani kukulitsa luso lanu la Svelte. Zidzawoneka motere:

Kodi muphunzira chiyani
Phunziroli likuwonetsani momwe mungapangire pulogalamu pogwiritsa ntchito Svelte 3, kuyambira koyambira mpaka kumapeto. Mudzagwiritsa ntchito zigawo, masitayelo, ndi oyang'anira zochitika

Tech stack ndi mawonekedwe

• Chigawo 3
• Zida
• Kujambula ndi CSS
• Chithunzi cha ES6

Palibe ntchito zabwino zoyambira za Svelte, kotero ndapeza iyi ndi njira yabwino yoyambira nayo.

Pulogalamu ya E-commerce pogwiritsa ntchito Next.js

Next.js ndiye chimango chodziwika bwino chomangira mapulogalamu a React omwe amathandizira kuperekedwa kwa seva kuchokera m'bokosi.

Pulojekitiyi ikuwonetsani momwe mungapangire pulogalamu ya e-commerce yomwe imawoneka motere:

Kodi muphunzira chiyani
Mu pulojekitiyi, muphunzira kupanga ndi Next.js—kupanga masamba atsopano ndi zigawo, kuchotsa deta, ndi kalembedwe ndi kutumiza Next application.

Tech stack ndi mawonekedwe

• Chotsatira.js
• Zida ndi Masamba
• Sampling ya data
• Kukongoletsa
• Kutumiza Ntchito
• SSR ndi SPA

Nthawi zonse zimakhala zabwino kukhala ndi chitsanzo chadziko lapansi ngati pulogalamu ya e-commerce kuti muphunzire zatsopano. Mutha pezani phunziroli apa.

Blog yodzaza ndi zinenero zambiri yokhala ndi Nuxt.js

Nuxt.js ndi ya Vue, Next.js ndi ya React: chimango chabwino kwambiri chophatikiza mphamvu zoperekera mbali ya seva ndi kugwiritsa ntchito tsamba limodzi.
Pulogalamu yomaliza yomwe mungapange idzawoneka motere:

Kodi muphunzira chiyani

Muchitsanzo cha polojekitiyi, muphunzira kupanga tsamba lathunthu pogwiritsa ntchito Nuxt.js, kuyambira pakukhazikitsa koyambirira mpaka kutumizidwa komaliza.

Zimatengera mwayi pazinthu zambiri zabwino zomwe Nuxt imapereka, monga masamba ndi zida, komanso masitayelo ndi SCSS.

Tech stack ndi mawonekedwe

• Nkhaniyi
• Zida ndi Masamba
• Storyblock module
• Nsomba
• Vuex kwa boma management
• SCSS kwa makongoletsedwe
• Nuxt middlewares

Iyi ndi ntchito yabwino kwambiri, yomwe ili ndi zambiri zabwino za Nuxt.js. Ineyo pandekha ndimakonda kugwira ntchito ndi Nuxt kotero muyenera kuyesa chifukwa zingakupangitseni kukhala wopanga Vue wamkulu.

Blog ndi Gatsby

Gatsby ndi jenereta yabwino kwambiri yamasamba ogwiritsa ntchito React ndi GraphQL. Izi ndi zotsatira za polojekitiyi:

Kodi muphunzira chiyani

Mu phunziro ili, muphunzira momwe mungagwiritsire ntchito Gatsby kupanga blog yomwe mungagwiritse ntchito polemba zolemba zanu pogwiritsa ntchito React ndi GraphQL.

Tech stack ndi mawonekedwe

• gatsby
• Chitani
• Chithunzi cha QL
• Mapulagini ndi mitu
• MDX/Markdown
• Bootstrap CSS
• Mapangidwe

Ngati mudafunapo kuyambitsa blog, ichi ndi chitsanzo chabwino momwe mungapangire kugwiritsa ntchito React ndi GraphQL.

Sindikunena kuti WordPress ndi chisankho cholakwika, koma ndi Gatsby mutha kupanga mawebusayiti ochita bwino kwambiri pogwiritsa ntchito React - komwe ndi kuphatikiza kodabwitsa.

Blog ndi Gridsome

Gridsome for Vue... Chabwino, tinali nazo kale ndi Next/Nuxt.
Koma momwemonso ndi Gridsome ndi Gatsby. Onse amagwiritsa ntchito GraphQL ngati gawo lawo la data, koma Gridsome amagwiritsa ntchito VueJS. Ilinso ndi jenereta yodabwitsa ya tsamba lomwe lingakuthandizeni kupanga mabulogu abwino:

Kodi muphunzira chiyani

Pulojekitiyi ikuphunzitsani momwe mungapangire blog yosavuta kuti muyambe ndi Gridsome, GraphQL ndi Markdown. Ikufotokozanso momwe mungagwiritsire ntchito pulogalamu kudzera pa Netlify.

Tech stack ndi mawonekedwe

• Gridsome
• Vue
• Chithunzi cha QL
• Markdown
• Sungani

Ili silophunziro lathunthu, koma limakhudza mfundo zoyambira za Gridsome ndi Markdown ikhoza kukhala poyambira bwino.

Wosewerera nyimbo wa SoundCloud pogwiritsa ntchito Quasar

Quasar ndi dongosolo lina la Vue lomwe lingagwiritsidwe ntchito kupanga mafoni. Ntchitoyi mupanga pulogalamu yamasewera, mwachitsanzo:

Kodi muphunzira chiyani

Ngakhale mapulojekiti ena amangoyang'ana kwambiri pa intaneti, iyi ikuwonetsani momwe mungapangire pulogalamu yam'manja pogwiritsa ntchito Vue ndi Quasar framework.
Muyenera kukhala ndi Cordova yomwe ikuyenda ndi Android Studio/Xcode yokonzedwa. Ngati sichoncho, bukuli lili ndi ulalo watsamba la Quasar komwe amakuwonetsani momwe mungakhazikitsire chilichonse.

Tech stack ndi mawonekedwe

• Quarar
• Vue
• Cordova
• WaveSurfer
• Zida za UI

Ntchito yaying'ono, kuwonetsa kuthekera kwa Quasar pakupanga mapulogalamu am'manja.

Форма кредитной карты

Mawonekedwe abwino a kirediti kadi okhala ndi ma micro-interaction osalala komanso osangalatsa. Zimaphatikizapo masanjidwe a manambala, kutsimikizira ndi kuzindikira mtundu wa makadi okha. Imamangidwa pa Vue.js ndipo imagwiranso ntchito mokwanira. (Mukuwona apa.)

kirediti kadi-fomu

Zomwe mungaphunzire:

• Pangani ndi kutsimikizira mafomu
• Kusamalira zochitika (mwachitsanzo, pamene minda ikusintha)
• Mvetserani momwe mungasonyezere ndikuyika zinthu patsamba, makamaka chidziwitso cha kirediti kadi chomwe chimapezeka pamwamba pa fomuyo

bar graph

Histogram ndi tchati kapena graph yomwe imayimira deta yamagulu okhala ndi timakona tating'onoting'ono tokhala ndi utali kapena utali wolingana ndi zomwe amayimira.

Angagwiritsidwe ntchito vertically kapena horizontally. Tchati choyimirira nthawi zina chimatchedwa tchati cha mzere.

Zomwe mungaphunzire:

• Onetsani deta m'njira yolongosoka komanso yomveka
• Kuonjezerapo: Phunzirani momwe mungagwiritsire ntchito element canvas ndi momwe mungajambule zinthu nazo

ndi mutha kupeza zidziwitso za kuchuluka kwa anthu padziko lonse lapansi. Amasanjidwa ndi chaka.

Анимация сердечка Twitter

Kubwerera ku 2016, Twitter idayambitsa makanema odabwitsa awa pama tweets ake. Pofika chaka cha 2019, chikuwonekabe ndi gawo, bwanji osapanga nokha?

Zomwe mungaphunzire:

• Gwirani ntchito ndi CSS keyframes
• Sinthani ndikusintha zinthu za HTML
• Phatikizani JavaScript, HTML ndi CSS

Репозитории GitHub с функцией поиска

Palibe chapamwamba apa-zosungira za GitHub ndi mndandanda waulemerero chabe.
Cholinga chake ndikuwonetsa nkhokwe ndikulola wogwiritsa ntchito kuti azisefa. Gwiritsani ntchito official GitHub API kupeza nkhokwe kwa aliyense wogwiritsa ntchito.

Tsamba la mbiri ya GitHub - github.com/indreklasn

Zomwe mungaphunzire:

• Landirani data kuchokera ku API
• Onetsani data kuchokera ku API
• Sefa ndikuwonetsa zofunikira pakusaka kulikonse
• Zosankha: Ngati muli ndi vuto, gwiritsani ntchito API v4, yomangidwa pogwiritsa ntchito GraphQL. Ngati mukufuna kuphunzira GraphQL, pitani ku imodzi mwazolemba zanga zam'mbuyomu.

Чаты в стиле Reddit

Macheza ndi njira yotchuka yolankhulirana chifukwa cha kuphweka kwawo komanso kugwiritsa ntchito mosavuta. Koma kodi nchiyani chimene chimasonkhezera malo ochezera amakono amakono? WebSockets!

Zomwe mungaphunzire:

• Gwiritsani ntchito ma WebSockets, kulumikizana nthawi yeniyeni ndi zosintha za data
• Gwirani ntchito ndi magawo ofikira ogwiritsa ntchito (mwachitsanzo, mwiniwake wa tchanelo chochezera ali ndi gawo admin, ndi ena m'chipindamo - user)
• Njira ndi kutsimikizira mafomu - kumbukirani, zenera lochezera potumiza uthenga ndilo input
• Pangani ndikujowina macheza osiyanasiyana
• Gwirani ntchito ndi mauthenga anu. Ogwiritsa ntchito amatha kucheza ndi ena mwachinsinsi. Kwenikweni, mukhala mukukhazikitsa kulumikizana kwa WebSocket pakati pa ogwiritsa ntchito awiri.

Навигация в стиле Stripe

Chomwe chimapangitsa kuyenda uku kukhala kwapadera ndikuti chotengera cha popover chimasinthidwa kuti chigwirizane ndi zomwe zili. Pali kukongola kwa kusinthaku poyerekeza ndi chikhalidwe chachikhalidwe chotsegula ndi kutseka popover yatsopano.

Zomwe mungaphunzire:

• Phatikizani makanema ojambula pa CSS ndi masinthidwe
• Dinitsani zomwe zili ndikugwiritsa ntchito kalasi yogwira ku chinthu choyandama

Pacman

Pangani mtundu wanu wa Pacman. Iyi ndi njira yabwino yodziwira momwe masewera amapangidwira ndikumvetsetsa zoyambira. Gwiritsani ntchito mawonekedwe a JavaScript, React kapena Vue.

Muphunzira:

• Momwe zinthu zimayendera
• Momwe mungadziwire makiyi oti musindikize
• Momwe mungadziwire nthawi yakugunda
• Mutha kupita patsogolo ndikuwonjezera zowongolera za ghost

Mudzapeza chitsanzo cha polojekitiyi m'nkhokwe GitHub

kasamalidwe ka ogwiritsa ntchito

Ntchitoyi m'nkhokwe GitHub

Kupanga pulogalamu yamtundu wa CRUD yowongolera ogwiritsa ntchito kukuphunzitsani zoyambira zachitukuko. Izi ndizothandiza makamaka kwa opanga atsopano.

Muphunzira:

• Kodi routing ndi chiyani
• Momwe mungagwirire mafomu olowera deta ndikuwona zomwe wogwiritsa ntchito walowa
• Momwe mungagwiritsire ntchito ndi nkhokwe - pangani, werengani, sinthani ndikuchotsa zochita

Проверка погоды в вашем местоположении

Ntchitoyi m'nkhokwe GitHub

Ngati mukufuna kupanga mapulogalamu, yambani ndi pulogalamu yanyengo. Ntchitoyi imatha kumalizidwa pogwiritsa ntchito Swift.

Kuphatikiza pakupeza luso lopanga pulogalamu, muphunzira:

• Momwe mungagwiritsire ntchito ndi API
• Momwe mungagwiritsire ntchito geolocation
• Pangani pulogalamu yanu kukhala yamphamvu powonjezera mawu. Mmenemo, ogwiritsa ntchito adzatha kulowa malo awo kuti ayang'ane nyengo pamalo enaake.

Mufunika API. Kuti mudziwe zanyengo, gwiritsani ntchito OpenWeather API. Zambiri za OpenWeather API apa.

Окно чата

Zenera langa lochezera likugwira ntchito, lotseguka m'masakatuli awiri

Kupanga zenera la macheza ndi njira yabwino yoyambira ndi sockets. Kusankhidwa kwa tech stack ndi kwakukulu. Node.js, mwachitsanzo, ndiyabwino.

Muphunzira momwe masiketi amagwirira ntchito komanso momwe mungawagwiritsire ntchito. Uwu ndiye mwayi waukulu wa polojekitiyi.

Ngati ndinu wopanga Laravel yemwe mukufuna kugwira ntchito ndi sockets, werengani zanga nkhani

GitLab CI

Kuchokera

Ngati ndinu watsopano ku continuous integration (CI), sewerani ndi GitLab CI. Konzani malo angapo ndikuyesera kuyesa angapo. Si ntchito yovuta kwambiri, koma ndikutsimikiza kuti muphunzira zambiri kuchokera pamenepo. Magulu ambiri achitukuko tsopano akugwiritsa ntchito CI. Kudziwa kugwiritsa ntchito ndikothandiza.

Muphunzira:

• Kodi GitLab CI ndi chiyani
• Momwe mungasinthire .gitlab-ci.ymlzomwe zimauza wogwiritsa ntchito GitLab choti achite
• Momwe mungatumizire kumalo ena

Анализатор сайтов

Pangani scraper yomwe imasanthula ma semantics a masamba ndikupanga malingaliro awo. Mwachitsanzo, mutha kuyang'ana ma tag omwe akusowa pazithunzi. Kapena onani ngati tsambalo lili ndi ma tag a SEO. Scraper ikhoza kupangidwa popanda mawonekedwe ogwiritsira ntchito.

Muphunzira:

• Kodi scraper imagwira ntchito bwanji?
• Momwe mungapangire osankhidwa a DOM
• Momwe mungalembe algorithm
• Ngati simukufuna kuima pamenepo, pangani mawonekedwe ogwiritsa ntchito. Mutha kupanganso lipoti patsamba lililonse lomwe mumayang'ana.

Определение настроений в социальных сетях

Kuchokera

Kuzindikira malingaliro pazama TV ndi njira yabwino yodziwira kuphunzira pamakina.

Mungayambe mwa kufufuza malo amodzi ochezera a pa Intaneti. Aliyense nthawi zambiri amayamba ndi Twitter.

Ngati mumadziwa kale kuphunzira pamakina, yesani kusonkhanitsa deta kuchokera pamasamba osiyanasiyana ochezera ndikuphatikiza.

Muphunzira:

• Kodi kuphunzira makina ndi chiyani

Клон Trello

Trello clone wochokera ku Indrek Lasn.

Zomwe mungaphunzire:

• Kukonzekera kwa njira zopangira zopempha (Mayendedwe).
• Kokani ndikugwetsa.
• Momwe mungapangire zinthu zatsopano (ma board, mindandanda, makadi).
• Kukonza ndi kuyang'ana zolowetsa.
• Kuchokera kumbali ya kasitomala: momwe mungagwiritsire ntchito kusungirako kwanuko, momwe mungasungire deta kumalo osungirako, momwe mungawerengere deta kuchokera kumalo osungirako.
• Kuchokera kumbali ya seva: momwe mungagwiritsire ntchito ma database, momwe mungasungire deta mu database, momwe mungawerengere deta kuchokera ku database.

Nachi chitsanzo cha nkhokwe, yopangidwa mu React+Redux.

Панель админа

Github Repository.

Ntchito yosavuta ya CRUD, yabwino pophunzira zoyambira. Tiyeni tiphunzire:

• Pangani ogwiritsa ntchito, wongolerani ogwiritsa ntchito.
• Gwirizanani ndi nkhokwe - pangani, werengani, sinthani, chotsani ogwiritsa ntchito.
• Kutsimikizira zolowa ndikugwira ntchito ndi mafomu.

Трекер криптовалют (нативное мобильное приложение)

Github chosungira.

Chilichonse: Swift, Objective-C, React Native, Java, Kotlin.

Tiyeni tiphunzire:

• Momwe mapulogalamu achilengedwe amagwirira ntchito.
• Momwe mungatengere deta kuchokera ku API.
• Momwe masanjidwe amasamba amagwirira ntchito.
• Momwe mungagwiritsire ntchito ndi simulators zam'manja.

Yesani API iyi. Ngati mutapeza zabwino, lembani mu ndemanga.

Ngati mukufuna, nazi apa pali phunziro.

Настроить собственный конфиг webpack с нуля

Mwaukadaulo, iyi si ntchito, koma ndi ntchito yothandiza kwambiri kumvetsetsa momwe webpack imagwirira ntchito mkati. Tsopano sichidzakhala "bokosi lakuda", koma chida chomveka.

Zofunikira:

• Phatikizani es7 mpaka es5 (zoyambira).
• Lembani jsx kupita ku js - kapena - .vue ku .js (muyenera kuphunzira zolowetsa)
• Khazikitsani seva ya webpack dev ndikutsegulanso gawo lotentha. (vue-cli ndi kupanga-react-app gwiritsani ntchito zonse ziwiri)
• Gwiritsani ntchito Heroku, now.sh kapena Github, phunzirani momwe mungagwiritsire ntchito mapulojekiti apawebpack.
• Khazikitsani preprocessor yanu yomwe mumakonda kuti mupange css - scss, zochepa, zolembera.
• Phunzirani momwe mungagwiritsire ntchito zithunzi ndi ma svgs ndi mapaketi awebusayiti.

Ichi ndi chida chodabwitsa kwa oyamba kumene.

Клон Hackernews

Jedi aliyense amafunikira kupanga Hackernews yake.

Zomwe mungaphunzire panjira:

• Momwe mungalumikizire ndi hackernews API.
• Momwe mungapangire pulogalamu yatsamba limodzi.
• Momwe mungagwiritsire ntchito zinthu monga kuwonera ndemanga, ndemanga zapayekha, mbiri.
• Kukonzekera kwa njira zopangira zopempha (Mayendedwe).

Тудушечка

Zithunzi za TodoMVC.

Mozama? Tudushka? Pali masauzande aiwo. Koma ndikhulupirireni, pali chifukwa cha kutchuka kumeneku.
Pulogalamu ya Tudu ndi njira yabwino yowonetsetsa kuti mukumvetsetsa zoyambira. Yesani kulemba pulogalamu imodzi mu vanila Javascript ndi imodzi mwamakonda omwe mumakonda.

Phunzirani:

• Pangani ntchito zatsopano.
• Onetsetsani kuti minda yadzazidwa.
• Zosefera (zomaliza, zogwira, zonse). Gwiritsani ntchito filter и reduce.
• Mvetserani zoyambira za Javascript.

Сортируемый drag and drop список

Github chosungira.

Zothandiza kwambiri kumvetsetsa koka ndikugwetsa api.

Tiyeni tiphunzire:

• Kokani ndikugwetsa API
• Pangani ma UI olemera

Клон мессенджера (нативное приложение)

Mudzamvetsetsa momwe mapulogalamu onse a pa intaneti ndi mapulogalamu ammudzi amagwirira ntchito, zomwe zingakusiyanitseni ndi imvi.

Zomwe tiphunzira:

• Zoyambira pa intaneti (mauthenga apompopompo)
• Momwe mapulogalamu achilengedwe amagwirira ntchito.
• Momwe ma templates amagwirira ntchito m'mapulogalamu achilengedwe.
• Kupanga njira zopangira zopempha muzofunsira kwawo.

Text Editor

Cholinga cha mkonzi wa zolemba ndikuchepetsa kuyesetsa kwa ogwiritsa ntchito kuyesa kusintha mawonekedwe awo kukhala ovomerezeka a HTML. Mkonzi wabwino amalola ogwiritsa ntchito kupanga zolemba m'njira zosiyanasiyana.

Nthawi zina, aliyense wagwiritsa ntchito mkonzi wa zolemba. Ndiye bwanji osatero pangani nokha?

Клон Reddit

Reddit ndi kuphatikizika kwa nkhani zapaintaneti, kutengera zomwe zili pa intaneti ndi tsamba lazokambirana.

Reddit imatenga nthawi yanga yambiri, koma ndikupitilizabe kucheza nayo. Kupanga chojambula cha Reddit ndi njira yabwino yophunzirira mapulogalamu (posakatula Reddit nthawi yomweyo).

Reddit imakupatsirani olemera kwambiri API. Osasiya mbali iliyonse kapena kuchita zinthu mwachisawawa. M'dziko lenileni ndi makasitomala ndi makasitomala, simungagwire ntchito mwachisawawa, kapena mutha kutaya ntchito mwachangu.

Makasitomala anzeru amazindikira nthawi yomweyo kuti ntchitoyi ikuchitika bwino ndipo apeza wina.

Reddit API

Публикация пакета NPM с открытым исходным кодом

Ngati mulemba Javascript code, mwayi umagwiritsa ntchito woyang'anira phukusi. Woyang'anira phukusi amakupatsani mwayi wogwiritsanso ntchito ma code omwe anthu ena adalemba ndikusindikiza.

Kumvetsetsa kuzungulira kwathunthu kwa phukusi kumapereka chidziwitso chabwino kwambiri. Pali zinthu zambiri zomwe muyenera kudziwa mukasindikiza ma code. Muyenera kuganizira za chitetezo, kumasulira kwa semantic, scalability, kutchula mayina ndi kukonza.

Phukusi likhoza kukhala chirichonse. Ngati mulibe lingaliro, pangani Lodash yanu ndikuyisindikiza.

Lodash: lodash.com

Kukhala ndi zomwe mwachita pa intaneti kumakupangitsani 10% kuposa ena. Nazi zina zothandiza za magwero otseguka ndi phukusi.

Учебный план freeCodeCamp

Maphunziro a FCC

freeCodecamp yasonkhanitsa zambiri comprehensive programming course.

freeCodeCamp ndi bungwe lopanda phindu. Zili ndi nsanja yophunzirira yophunzirira pa intaneti, bwalo la anthu pa intaneti, malo ochezera, zofalitsa zapakatikati, ndi mabungwe am'deralo omwe akufuna kupanga chitukuko chapaintaneti kuti chifikire aliyense.

Mudzakhala oyenerera ntchito yanu yoyamba ngati mutha kumaliza maphunziro onse.

Создайте HTTP-сервер с нуля

Protocol ya HTTP ndi imodzi mwazinthu zazikulu zomwe zimayenda pa intaneti. Ma seva a HTTP amagwiritsidwa ntchito popereka zomwe zili ngati HTML, CSS, ndi JS.

Kutha kugwiritsa ntchito protocol ya HTTP kuyambira pachiyambi kudzakulitsa chidziwitso chanu cha momwe zinthu zimayendera.

Mwachitsanzo, ngati mugwiritsa ntchito NodeJs, ndiye kuti mukudziwa kuti Express imapereka seva ya HTTP.

Kuti mumve zambiri, onani ngati mungathe:

• Konzani seva popanda kugwiritsa ntchito malaibulale aliwonse
• Seva iyenera kukhala ndi HTML, CSS ndi JS.
• Kukhazikitsa rauta kuyambira pachiyambi
• Yang'anirani zosintha ndikusintha seva

Ngati simukudziwa chifukwa chake, gwiritsani ntchito Chonde ndikuyesera kupanga seva ya HTTP Caddy kuyambira pachiyambi.

Десктопное приложение для заметок

Tonse timalemba zolemba, sichoncho?

Tiyeni tipange zolemba pulogalamu. Pulogalamuyi iyenera kusunga zolemba ndikuzigwirizanitsa ndi database. Pangani pulogalamu yachilengedwe pogwiritsa ntchito Electron, Swift, kapena chilichonse chomwe mungafune komanso chomwe chimagwira ntchito pakompyuta yanu.

Khalani omasuka kuphatikiza izi ndi zovuta zoyamba (zolemba zolemba).

Monga bonasi, yesani kulunzanitsa mtundu wa pakompyuta yanu ndi mtundu wa intaneti.

Подкасты (клон Overcast)

Ndani samamvera ma podikasiti?

Pangani pulogalamu yapaintaneti yokhala ndi izi:

• Pangani akaunti
• Sakani ma Podcasts
• Voterani ndikulembetsa ku ma podcasts
• Imani ndikusewera, sinthani liwiro, ntchito zakutsogolo ndi kumbuyo kwa masekondi 30.

Yesani kugwiritsa ntchito iTunes API ngati poyambira. Ngati mukudziwa zina zothandizira, chonde lembani mu ndemanga.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

Screen kujambula

Moni! Ndikujambula sikirini yanga pompano!

Pangani kompyuta kapena ukonde app kuti amalola analanda chophimba ndi kusunga kopanira monga .gif

pano malangizo enamomwe mungakwaniritsire izi.

Zotsatira

• Ma projekiti ena 5 olimba mtima a wopanga mapulogalamu (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• Ntchito 9 zokulitsa luso lanu la Front-End
• Ntchito zisanu ndi imodzi za wopanga Front-End
• Kuchita kosangalatsa kwa wopanga
• 8 ntchito zamaphunziro
• Mndandanda wina wamapulojekiti omwe mungayeserepo

Source: www.habr.com