Kumberi-kumagumo dojo: mapurojekiti ekudzidzisa hunyanzvi hwekuvandudza (5 nyowani + 43 yekare)

1. Notion clone

Iyo Notion application inodiwa nevakawanda; inokutendera iwe kukwidziridza mafambiro ako, kushanda nemagwaro, kuronga mabasa, uye kuwiriranisa data pakati pemidziyo.

www.notion.so

Zvauchadzidza nekugadzira Notion clone:

• HTML Drag and drop API. Mushandisi anogona "kubata negonzo" draggable element woiisa mukati droppable zone.
• Maitiro ekuwiriranisa data munguva chaiyo pakati pekombuta yako uye smartphone.
• Isu tinobvumira vashandisi kugadzira, kuverenga, kugadzirisa uye kudzima marekodhi, nekudaro kudzidzisa hunyanzvi hweCRUD.

Chinyorwa chakaturikirwa nerutsigiro rweEDISON Software, iyo inovandudza maapplication uye mawebhusaiti, pamwe chete inoisa mari mukutanga.

2. Repl.it clone

Repl.it chishandiso cheiyo chaiyo-nguva yekudyidzana kodhi kodhi. Unogona kusarudza mitauro yakati wandei: JavaScript, Python, Enda uye mhanyisa kodhi yacho zvakananga mubrowser. Inobatsira kwazvo kune anokurumidza demos uye kodhi kubvunzurudza.

repl.it

Zvauchadzidza nekugadzira Repl.it clone:

• Maitiro ekumhanya nekuita kodhi (server-side) mubrowser (mutengi-parutivi).
• Verenga data yekupinda (source kodhi) uye ratidza mhedzisiro.
• Maitiro ekugadzira mafaera nemaforodha pawebhu uye chengetedza zvawanikwa.
• Maitiro ekusimbisa kodhi syntax.

3. Google Photos Clone

Mapikicha eGoogle ibasa rekuchengeta nekugovana mafoto.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Zvauchadzidza nekugadzira Google Photos clone:

• Maitiro ekugadzira mifananidzo inoteerera pamafoni, mahwendefa, malaptop uye kunyange hofori yeTV skrini.
• Mabatiro emifananidzo yakakwidzwa, kunyanya mapikicha mahombe (> 1MB) uye kukwidzwa kwakawanda.
• Gadzirisa mafaera emifananidzo, rima uye saizi mafoto ezvigunwe kana paunovhura gallery.
• Bonus: machengetero emifananidzo mugore kana dhatabhesi renzvimbo.

4. Gifsky clone

gifski inoshandura vhidhiyo kuita GIF uchishandisa mabasapngquant kune anobudirira cross-frame palettes uye temporal anti-aliasing. Mhedzisiro ndeye GIF ine zviuru zvemaruva pafuremu.

gif.ski

Zvauchadzidza nekugadzira Gifski clone:

• Maitiro ekushandura vhidhiyo mafaera (.mp4 to .gif).
• Maitiro ekushandisa iyo Dhonza uye Drop HTML API.
• Maitiro ekugadzirisa mufananidzo uye kugadzirisa kushanda.

Cherechedza: Gifsky chirongwa chakavhurika sosi uye iri paGitHub!

5. Monitoring cryptocurrency mitengo

React Native cryptocurrency tracker

Zvauchadzidza nekugadzira chiyero chemari tracker:

• Maitiro ekushanda neAPI uye kugamuchira data kure kure kubva kuAPI.
• Maitiro ekuratidza data senge runyorwa.
• Bonus: Kana muchifarira, ini nguva pfupi yadarika ndakanyora chidzidzo chekugadzira mutengo tracker ye cryptocurrency neReact Native.

Cherechedza: pano GitHub muenzaniso repository.

Sarudzo yemapurojekiti kubva muzvinyorwa zvekare.

rukoko

www.reddit.com/r/layer

Layer inharaunda umo munhu wese anogona kudhirowa pixel pane yakagovaniswa "bhodhi". Pfungwa yekutanga yakazvarwa paReddit. Nharaunda ye r/Layer dimikira rekugadzira kwakagovaniswa, kuti munhu wese anogona kuve musiki uye agobatsira kune chimwe chikonzero.

Zvauchadzidza paunenge uchigadzira yako yega Layer purojekiti:

• Mashandiro anoita JavaScript canvas Kuziva mashandisirwo ecanvas hunyanzvi hwakakosha mumashandisirwo mazhinji.
• Maitiro ekubatanidza mvumo yevashandisi. Wese mushandisi anogona kudhirowa pixel imwe yega maminetsi gumi nemashanu pasina kupinda mukati.
• Gadzira masisitimu ekuki.

Squoosh

squoosh.app

Squoosh ndeyekumanikidza mufananidzo application ine akawanda epamberi sarudzo.

GIF 20 MB

Nekugadzira yako vhezheni yeSquoosh iwe uchadzidza:

• Maitiro ekushanda nemasaizi emifananidzo
• Dzidza izvo zvekutanga zveDrag'n'Drop API
• Nzwisisa kuti API nevateereri vechiitiko vanoshanda sei
• Maitiro ekurodha uye kutumira mafaera

Cherechedza: Iyo compressor yemufananidzo ndeyemunharaunda. Hazvina kudikanwa kutumira imwe data kune server. Iwe unogona kuva necompressor kumba, kana iwe unogona kuishandisa pane server, sarudzo yako.

Calculator

Handeyi nazvo? Zvakakomba? Calculator? Hongu, chaizvo, Calculator. Kunzwisisa izvo zvekutanga zvemasvomhu mashandiro uye mashandiro avanoita pamwechete hunyanzvi hwakakosha hwekurerutsa maapplication ako. Nenguva isipi iwe uchafanirwa kubata nenhamba uye nekukurumidza zviri nani.

jarodburchhill.github.io/CalculatorReactApp

Nekugadzira yako Calculator iwe uchadzidza:

• Shanda nenhamba uye masvomhu mabasa
• Dzidzira nevateereri chiitiko API
• Maitiro ekuronga zvinhu, kunzwisisa masitaera

Crawler (Injini yekutsvaga)

Wese munhu akashandisa injini yekutsvaga, saka wadii kugadzira yako? Vanokambaira vanodiwa kutsvaga ruzivo. Wese munhu anoashandisa mazuva ese uye kudiwa kweiyi tekinoroji uye nyanzvi kunongokura nekufamba kwenguva.

Injini yekutsvaga yeGoogle

Zvauchadzidza nekugadzira yako wega injini yekutsvaga:

• Mashandiro anoita vanokambaira
• Maitiro ekunongedza mawebhusaiti uye maitiro ekuaisa iwo nekuyera uye nemukurumbira
• Maitiro ekuchengeta masaiti akaiswa mudhatabhesi uye maitiro ekushanda nedatabase

Mumhanzi unoridza (Spotify, Apple Music)

Wese munhu anoteerera mimhanzi - ingori chikamu chakakosha chehupenyu hwedu. Ngatigadzire inoridza mimhanzi kuti tinzwisise zviri nani mashandiro ekutanga makanika echizvino-zvino mimhanzi yekutepfenyura chikuva anoshanda.

Spotify

Zvauchadzidza nekugadzira yako wega mimhanzi yekushambadzira chikuva:

• Maitiro ekushanda neiyo API. shandisa API kubva kuSpotify kana Apple Music
• Kutamba, kumbomira kana kudzosera kumashure kune inotevera/yapfuura
• Maitiro ekuchinja inzwi
• Maitiro ekugadzirisa mushandisi nzira uye nhoroondo yebrowser

Bhaisikopo yekutsvaga app uchishandisa React (ine zvikorekedzo)

Chinhu chekutanga chaungatanga nacho kugadzira bhaisikopo rekutsvaga app uchishandisa React. Pazasi pane mufananidzo wekuti iyo yekupedzisira application ichaita sei:

Chii chauchadzidza
Nekuvaka iyi app, iwe unovandudza hunyanzvi hwako hweReact nekushandisa iyo ichangoburwa Hooks API. Muenzaniso purojekiti inoshandisa React components, hoko dzakawanda, yekunze API, uyezve imwe CSS styling.

Tech stack uye maficha

• React nemachira
• gadzira-kuita-app
• JSX
• CSS

Pasina kushandisa chero makirasi, aya mapurojekiti anokupa iwe yakakwana yekupinda mukushanda React uye inonyatso kukubatsira muna 2020. unogona kuwana muenzaniso purojekiti pano. Tevera mirairo kana kuti uite yako.

Chat App neVue

Imwe purojekiti huru yekuti iwe uite kugadzira chat app uchishandisa yangu yandinoda JavaScript raibhurari: VueJS. Iyo application ichataridzika seizvi:

Chii chauchadzidza
Muchidzidzo ichi, iwe uchadzidza kugadzira Vue app kubva kutanga - kugadzira zvinhu, kubata nyika, kugadzira nzira, kubatanidza kune wechitatu-bato masevhisi, uye kunyange kubata huchokwadi.

Tech stack uye maficha

• Vue
• vuex
• Vue Router
• Ona CLI
• Pusher
• CSS

Iyi ipurojekiti yakanaka kwazvo yekutanga neVue kana kuvandudza hunyanzvi hwako huripo kuti upinde mubudiriro muna 2020. unogona kuwana Tutorial pano.

Yakanaka mamiriro ekunze app neAngular 8

Uyu muenzaniso uchakubatsira iwe kugadzira yakanaka mamiriro ekunze app uchishandisa Angular 8:

Chii chauchadzidza
Iyi purojekiti ichakudzidzisa hunyanzvi hwakakosha mukuvaka zvikumbiro kubva pakutanga - kubva pakugadzira kuburikidza nekusimudzira, nzira yese kusvika kune yakagadzirira-yakagadzirira application.

Tech stack uye maficha

• Angular 8
• Firebase
• Server side rendering
• CSS ine Grid uye Flexbox
• Mobile hushamwari uye kuchinjika
• Rima modhi
• Yakanaka interface

Chandinonyanya kuda nezve chirongwa ichi chinosanganisa zvese ndechekuti haudzidze zvinhu uri wega. Pane kudaro, iwe unodzidza maitiro ese ekusimudzira, kubva pakugadzira kusvika pakutumirwa kwekupedzisira.

Kuita-Kuita application uchishandisa Svelte

Svelte akafanana nemwana mutsva pane chikamu-chakavakirwa maitiro - zvakangofanana neReact, Vue uye Angular. Uye ichi ndicho chimwe chezvinopisa zvigadzirwa zvitsva zve2020.

To-Do maapplication hausiwo iwo musoro unopisa, asi zvinonyatso kukubatsira kukwenenzvera hunyanzvi hwako hweSvelte. Ichaita seizvi:

Chii chauchadzidza
Ichi chidzidzo chinokuratidza maitiro ekugadzira application uchishandisa Svelte 3, kubva pakutanga kusvika pakupedzisira. Iwe uchashandisa zvikamu, styling, uye zviitiko zvinobata

Tech stack uye maficha

• Svelte 3
• Components
• Kugadzira neCSS
• ES 6 syntax

Iko hakuna akawanda akanaka maSvelte ekutanga mapurojekiti, saka ndawana iyi isarudzo yakanaka yekutanga nayo.

E-commerce app uchishandisa Next.js

Next.js ndiyo inonyanya kufarirwa chimiro chekuvaka React application inotsigira server-side rendering kunze kwebhokisi.

Iyi purojekiti inokuratidza maitiro ekugadzira e-commerce application inoita seizvi:

Chii chauchadzidza
Muchirongwa ichi, unozodzidza kugadzira neNext.js-gadzira mapeji matsva nezvikamu, bvisa data, uye maitiro uye shandisa Inotevera application.

Tech stack uye maficha

• Inotevera.js
• Zvikamu uye Mapeji
• Data sampling
• Chimiro
• Project Deployment
• SSR uye SPA

Zvinogara zvakanaka kuve nemuenzaniso wepasirese senge e-commerce app kudzidza chimwe chinhu chitsva. Unogona tsvaga tutorial pano.

Blog rakazara mitauro yakawanda ine Nuxt.js

Nuxt.js ndeye Vue, chii Next.js ndeye React: chimiro chikuru chekubatanidza simba re server-side rendering uye single-peji application.
Iyo yekupedzisira application yaunogona kugadzira ichaita seizvi:

Chii chauchadzidza

Mumuenzaniso uyu wepurojekiti, iwe uchadzidza kugadzira webhusaiti yakazara uchishandisa Nuxt.js, kubva pakuseta kwekutanga kusvika pakutumirwa kwekupedzisira.

Zvinotora mukana weakawanda eanotonhorera maficha ayo Nuxt anofanira kupa, senge mapeji uye zvikamu, uye manyorerwo neSCSS.

Tech stack uye maficha

• Nuxt.js
• Zvikamu uye Mapeji
• Storyblock module
• Hagfish
• Vuex yehurumende manejimendi
• SCSS yekugadzira
• Nuxt middlewares

Iyi ipurojekiti yakanaka chaizvo, iyo inosanganisira akawanda makuru eNuxt.js maficha. Ini pachangu ndinoda kushanda neNuxt saka unofanirwa kuiedza sezvo zvichizokuita iwe mugadziri mukuru weVue.

Blog neGatsby

Gatsby yakanakisa static saiti jenareta uchishandisa React uye GraphQL. Izvi ndizvo mhedzisiro yeprojekiti:

Chii chauchadzidza

Muchidzidzo ichi, iwe uchadzidza kushandisa Gatsby kugadzira blog yauchazoshandisa kunyora zvinyorwa zvako uchishandisa React uye GraphQL.

Tech stack uye maficha

• Gatsby
• Taura
• GraphQL
• Plugins uye madingindira
• MDX/Markdown
• Bootstrap CSS
• Mapepa

Kana iwe wakamboda kutanga blog, uyu muenzaniso wakanaka pamusoro pekuita sei uchishandisa React uye GraphQL.

Handisi kuti WordPress isarudzo yakaipa, asi neGatsby unogona kuvaka mawebhusaiti epamusoro uchishandisa React - inova musanganiswa unoshamisa.

Blog neGridsome

Gridsome yeVue... Zvakanaka, isu taitova nazvo neNext/Nuxt.
Asi zvakafanana ndezvechokwadi kune Gridsome uye Gatsby. Vese vari vaviri vanoshandisa GraphQL seyavo data layer, asi Gridsome inoshandisa VueJS. Iyi zvakare inoshamisa static saiti jenareta iyo ichakubatsira iwe kugadzira makuru mablogiki:

Chii chauchadzidza

Iyi purojekiti ichakudzidzisa maitiro ekugadzira bhurogu iri nyore kuti utange neGridsome, GraphQL uye Markdown. Iyo zvakare inovhara maitiro ekuendesa application kuburikidza neNetlify.

Tech stack uye maficha

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Iyi zvirokwazvo haisiriyo yakazara dzidziso, asi inovhara iwo ekutanga pfungwa dzeGridsome uye Markdown inogona kunge iri nzvimbo yakanaka yekutanga.

SoundCloud-senge inoridza inoridza uchishandisa Quasar

Quasar ndeimwe Vue chimiro chinogona kushandiswa kugadzira nharembozha. Muchirongwa ichi iwe uchagadzira odhiyo inoridza application, semuenzaniso:

Chii chauchadzidza

Nepo mamwe mapurojekiti achinyanya kutarisisa pawebhu application, iyi inokuratidza maitiro ekugadzira nharembozha uchishandisa Vue uye Quasar chimiro.
Iwe unofanirwa kunge watove neCordova inomhanya ine Android Studio/Xcode yakagadziriswa. Kana zvisiri, iro bhuku rine chinongedzo kune iyo Quasar webhusaiti kwavanokuratidza maitiro ekuseta zvese kumusoro.

Tech stack uye maficha

• quasar
• Vue
• Cordova
• WaveSurfer
• UI Zvikamu

Small project, kuratidza kugona kweQuasar kugadzira nharembozha.

Fomu yekadhi rechikwereti

Iyo inotonhorera kadhi rechikwereti chimiro ine yakatsetseka uye inonakidza micro-kudyidzana. Inosanganisira mafomati enhamba, kuongorora uye otomatiki mhando yekadhi. Yakavakwa paVue.js uye zvakare inoteerera zvizere. (Unogona kuona pano.)

kiredhiti-kadhi-fomu

Zvauchadzidza:

• Gadzirisa uye simbisa mafomu
• Bata zviitiko (semuenzaniso, kana minda ichichinja)
• Nzwisisa maratidziro nekuisa zvinhu papeji, kunyanya ruzivo rwekadhi rechikwereti rinoonekwa pamusoro pefomu

bha graph

Histogram ichati kana girafu inomiririra dhata rechikamu rine rectangular mbariro dzine hurefu kana kureba zvinoenderana nehunhu hwavanomiririra.

Vanogona kuiswa vertically kana horizontally. Chati yebhawa yakatwasuka dzimwe nguva inonzi mutsara wechati.

Zvauchadzidza:

• Ratidza data nenzira yakarongeka uye inonzwisisika
• Uyezve: Dzidza mashandisiro echinhu canvas uye maitiro ekudhirowa zvinhu nazvo

zviri unogona kuwana data yehuwandu hwepasirese. Dzinorongwa negore.

Twitter Mwoyo Animation

Kudzoka muna 2016, Twitter yakaunza iyi inoshamisa animation yematweets ayo. Kubva muna 2019, ichiri kutaridzika chikamu, saka wadii kugadzira iwe pachako?

Zvauchadzidza:

• Shanda neCSS hunhu keyframes
• Gadzirisa uye shandura zvinhu zveHTML
• Sanganisa JavaScript, HTML uye CSS

Inotsvaga GitHub repositories

Hapana chinhu chinoshamisira pano-GitHub repositori ingori rondedzero inokudzwa.
Chinangwa ndechekuratidza marepositori uye kubvumira mushandisi kuasefa. Shandisa official GitHub API kuti uwane repositories ega ega mushandisi.

GitHub peji peji - github.com/indreklasn

Zvauchadzidza:

• Gamuchira data kubva kuAPI
• Ratidza data kubva kuAPI
• Sefa uye ratidza data rakakodzera patsvakiridzo yega yega
• Sarudzo: Kana iwe wagadzirira dambudziko, shandisa API v4, yakavakwa uchishandisa GraphQL. Kana iwe uchida kudzidza GraphQL, enda kune chimwe chezvinyorwa zvangu zvakapfuura.

Reddit style chats

Chats inzira yakakurumbira yekutaurirana nekuda kwekureruka kwavo uye nyore kushandisa. Asi chii chaizvo chinopisa machat rooms emazuva ano? WebSockets!

Zvauchadzidza:

• Shandisa WebSockets, chaiyo-nguva kutaurirana uye data updates
• Shanda nemazinga ekuwana mushandisi (semuenzaniso, muridzi wechat chiteshi ane basa admin, uye vamwe mumba - user)
• Gadzira uye simbisa mafomu - rangarira, iyo yekutaura hwindo rekutumira meseji iri input
• Gadzira uye ubatane chats dzakasiyana
• Shanda nemashoko ako pachako. Vashandisi vanogona kutaura nevamwe vashandisi muchivande. Chaizvoizvo, iwe unenge uchigadzira WebSocket yekubatanidza pakati pevashandisi vaviri.

Stripe style navigation

Chii chinoita kuti kufambisa uku kuve kwakasiyana ndechekuti popover mudziyo unoshandura kuti ukwane zviri mukati. Pane kunaka kune iyi shanduko kana ichienzaniswa nemaitiro echinyakare ekuvhura nekuvhara popover nyowani.

Zvauchadzidza:

• Sanganisa CSS animations neshanduko
• Dim zvemukati uye shandisa kirasi inoshanda kune yakayangarara chinhu

Pacman

Gadzira yako wega vhezheni yePacman. Iyi inzira yakanaka yekuwana pfungwa yekuti mitambo inogadzirwa sei uye kunzwisisa izvo zvakakosha. Shandisa JavaScript framework, React kana Vue.

Iwe uchadzidza:

• Mafambiro anoita zvinhu
• Nzira yekuziva sei makiyi ekudzvanya
• Nzira yekuziva nguva yekudhumhana
• Iwe unogona kuenda mberi uye kuwedzera ghost movement zvinodzora

Iwe uchawana muenzaniso wepurojekiti iyi mune repository GitHub

user management

Iyo purojekiti mune repository GitHub

Kugadzira CRUD yerudzi rwekushandisa kune mushandisi manejimendi inokudzidzisa iwe izvo zvekutanga zvebudiriro. Izvi zvinonyanya kubatsira kune vatsva vanogadzira.

Iwe uchadzidza:

• Chii chinonzi routing
• Maitiro ekubata mafomu ekupinda data uye tarisa izvo mushandisi apinda
• Maitiro ekushanda nedatabase - gadzira, verenga, gadziridza uye udzime zviito

Kutarisa mamiriro ekunze panzvimbo yako

Iyo purojekiti mune repository GitHub

Kana iwe uchida kugadzira mapurogiramu, tanga nemamiriro ekunze app. Ichi chirongwa chinogona kupedzwa uchishandisa Swift.

Pamusoro pekuwana ruzivo rwekuvaka application, iwe uchadzidza:

• Maitiro ekushanda neiyo API
• Maitiro ekushandisa geolocation
• Ita kuti application yako iwedzere kusimba nekuwedzera mavara ekuisa. Mariri, vashandisi vachakwanisa kupinda munzvimbo yavo kuti vatarise mamiriro ekunze mune imwe nzvimbo.

Iwe unozoda API. Kuti uwane data yemamiriro ekunze, shandisa OpenWeather API. Rumwe ruzivo nezve OpenWeather API pano.

Chat window

Hwindo rangu rekutaura riri kuita, vhura mumabhurawuza maviri ma tabo

Kugadzira hwindo rekutaura ndiyo nzira yakakwana yekutanga nemasoketi. Sarudzo ye tech stack yakakura. Node.js, semuenzaniso, yakakwana.

Iwe unozodzidza mashandiro anoita masokisi uye maitiro ekuita nawo. Ichi ndicho chinonyanya kukosha chepurojekiti iyi.

Kana iwe uri mugadziri weLaravel anoda kushanda nezvigadziko, verenga zvangu chinyorwa

GitLab CI

Chinhu

Kana iwe uri mutsva kune inoenderera mberi yekubatanidza (CI), tamba uchitenderedza neGitLab CI. Gadzirisa nharaunda shoma uye edza kumhanya akati wandei bvunzo. Haisi purojekiti yakaoma kwazvo, asi ndine chokwadi chekuti muchadzidza zvakawanda kubva mairi. Zvikwata zvakawanda zvebudiriro zvava kushandisa CI. Kuziva kuishandisa kunobatsira.

Iwe uchadzidza:

• Chii chinonzi GitLab CI
• Nzira yekugadzirisa .gitlab-ci.ymliyo inoudza mushandisi weGitLab zvekuita
• Maitiro ekuendesa kune dzimwe nharaunda

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

Ita scraper inoongorora semantics yemawebhusaiti uye inogadzira chiyero chavo. Semuenzaniso, unogona kutarisa kushayikwa ma tag mumifananidzo. Kana kuti tarisa kana peji ine SEO meta tags. A scraper inogona kugadzirwa pasina mushandisi interface.

Iwe uchadzidza:

• Ko scraper inoshanda sei?
• Maitiro ekugadzira maDOM anosarudza
• Maitiro ekunyora algorithm
• Kana iwe usingade kumira ipapo, gadzira mushandisi interface. Iwe unogona zvakare kugadzira rondedzero pane yega webhusaiti yaunotarisa.

Kuonekwa kwekunzwa pasocial network

Chinhu

Kuonekwa kwekunzwa pasocial media inzira huru yekuunzwa kumuchina kudzidza.

Unogona kutanga nekuongorora pasocial network imwe chete. Wese munhu anowanzo atanga ne Twitter.

Kana iwe uchitova neruzivo nezve muchina kudzidza, edza kuunganidza data kubva kwakasiyana masocial network uye kusanganisa iwo.

Iwe uchadzidza:

• Chii chinonzi kudzidza muchina

Trello clone

Trello clone kubva kuIndrek Lasn.

Zvauchadzidza:

• Sangano rekukumbira kugadzirisa nzira (Routing).
• Dhonza udonhedze.
• Nzira yekugadzira zvinhu zvitsva (mabhodhi, zvinyorwa, makadhi).
• Kugadzirisa uye kutarisa data yekupinda.
• Kubva kudivi remutengi: mashandisiro enzvimbo yekuchengetedza, maitiro ekuchengetedza data kunzvimbo yekuchengetedza yemuno, maverengero ekuverenga data kubva munzvimbo yekuchengetedza.
• Kubva kudivi reseva: maitiro ekushandisa dhatabhesi, maitiro ekuchengetedza data mudhatabhesi, maitiro ekuverenga data kubva kudhatabhesi.

Heino muenzaniso we repository, yakagadzirwa muReact+Redux.

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

Github Repository.

Iyo yakapusa CRUD application, yakanakira kudzidza izvo zvekutanga. Ngatidzidzei:

• Gadzira vashandisi, maneja vashandisi.
• Bata ne database - gadzira, verenga, gadzirisa, bvisa vashandisi.
• Kusimbisa kupinza uye kushanda nemafomu.

Cryptocurrency tracker (yekuzvarwa nharembozha)

Github repository.

Chero chinhu: Swift, Chinangwa-C, React Native, Java, Kotlin.

Ngatidzidzei:

• Mashandisiro anoita zvikumbiro zvemuno.
• Maitiro ekutora data kubva kuAPI.
• Magadzirirwo emapeji ekuzvarwa anoshanda.
• Maitiro ekushanda nefoni simulators.

Edza iyi API. Kana iwe ukawana chimwe chinhu chiri nani, nyora mumashoko.

Kana muchifarira, heinoi heino dzidziso.

Gadzira yako wega webpack config kubva kutanga

Nehunyanzvi, iyi haisi application, asi ibasa rinobatsira kwazvo kunzwisisa kuti webpack inoshanda sei kubva mukati. Iye zvino haizove "bhokisi dema", asi chishandiso chinonzwisisika.

Zvinotarisirwa:

• Gadzira es7 kusvika es5 (zvakakosha).
• Unganidza jsx kusvika js - kana - .vue ku.js (uchafanira kudzidza zvinotakura zvinhu)
• Gadzirisa webpack dev server uye inopisa module reloading. (vue-cli uye gadzira-react-app shandisa zvese)
• Shandisa Heroku, now.sh kana Github, dzidza kuendesa mapurojekiti ewebhu.
• Gadzira yako yaunofarira preprocessor kuunganidza css - scss, shoma, stylus.
• Dzidza mashandisiro emifananidzo nemasvgs ane webpack.

Ichi chinhu chinoshamisa sosi kune vakakwana vanotanga.

Hackernews clone

Yese Jedi inodikanwa kuti iite yake Hackernews.

Zvauchadzidza munzira:

• Maitiro ekudyidzana ne hackernews API.
• Maitiro ekugadzira peji rimwe chete application.
• Maitiro ekushandisa maficha akadai sekuona makomendi, makomendi ega, maprofile.
• Sangano rekukumbira kugadzirisa nzira (Routing).

Tudushechka

TodoMVC.

Zvakakomba? Tudushka? Kune zviuru zvavo. Asi nditende, pane chikonzero chekuzivikanwa uku.
Iyo Tudu app inzira huru yekuita shuwa kuti unonzwisisa izvo zvekutanga. Edza kunyora imwe application muvanilla Javascript uye imwe mune yako yaunofarira chimiro.

Dzidza:

• Gadzira mabasa matsva.
• Tarisa kuti minda yakazadzwa here.
• Sefa mabasa (akapedzwa, anoshanda, ese). Shandisa filter и reduce.
• Nzwisisa izvo zvekutanga zveJavascript.

Sortable kudhonza uye kudonhedza rondedzero

Github repository.

Inobatsira zvikuru kunzwisisa dhonza uye udonhedze api.

Ngatidzidzei:

• Drag and drop API
• Gadzira maUI akapfuma

Messenger clone (app yemuno)

Iwe unozonzwisisa kuti ese ari maviri ewebhu maapplication uye ekuzvarwa zvikumbiro zvinoshanda sei, izvo zvinokumisa iwe kubva kune grey mass.

Zvatichadzidza:

• Zvigadziko zvewebhu (meseji pakarepo)
• Mashandisiro anoita zvikumbiro zvemuno.
• Ma templates anoshanda sei mumashandisirwo echinyakare.
• Kuronga nzira dzekukumbira kugadzirisa mumashandisirwo ekuzvarwa.

Chinyorwa chinyorwa

Chinangwa chemupepeti wemavara ndechekudzikisa kuedza kwevashandisi kuyedza kushandura fomati yavo kuita HTML markup inoshanda. A good text editor inobvumira vashandisi kuti vagadzire zvinyorwa nenzira dzakasiyana.

Pane imwe nguva, munhu wese akashandisa text editor. Saka wadii zvigadzire iwe pachako?

Reddit clone

Reddit inzvimbo yekusangana kwenhau, chiyero chewebhu chemukati uye saiti yekukurukurirana.

Reddit inotora yakawanda yenguva yangu, asi ini ndinoramba ndiri pairi. Kugadzira Reddit clone inzira inoshanda yekudzidza hurongwa (uchiri kubhurawuza Reddit panguva imwe chete).

Reddit inokupa iwe yakapfuma kwazvo API. Usasiye chero maitiro kana kuita zvinhu nemazvo. Munyika chaiyo ine vatengi uye vatengi, haugone kushanda zvisina tsarukano, kana iwe uchakurumidza kurasikirwa nebasa rako.

Smart vatengi vachabva vaona kuti basa ririkuitwa zvisina kunaka uye vachawana mumwe munhu.

Purogiramu inonzi Reddit

Kuburitsa yakavhurika sosi NPM package

Kana iwe ukanyora Javascript kodhi, mukana wekuti iwe unoshandisa package maneja. Maneja wepasuru anotendera iwe kuti ushandise zvakare kodhi iripo iyo yakanyorwa nekutsikiswa nevamwe vanhu.

Kunzwisisa kutenderera kuzere kwepakeji kunopa chiitiko chakanaka kwazvo. Pane zvinhu zvakawanda zvaunoda kuziva paunenge uchidhinda kodhi. Iwe unofanirwa kufunga nezve chengetedzo, semantic vhezheni, scalability, kutumidza magungano uye kugadzirisa.

Iyo package inogona kuva chero chinhu. Kana iwe usina zano, gadzira yako Lodash woishambadza.

Lodash: lodash.com

Kuva nechimwe chinhu chawakaita online kunokuisa gumi muzana pamusoro pevamwe. Hezvino zvimwe zvinobatsira nezve yakavhurika masosi uye mapakeji.

freeCodeCamp Curriculum

Zvidzidzo zveFCC

freeCodecamp yakaunganidza zvakawanda comprehensive programming course.

freeCodeCamp isangano risingabatsiri. Iyo ine inodyidzana pawebhu-yakavakirwa papuratifomu yekudzidza, foramu yenharaunda yepamhepo, dzimba dzekutaura, zvinyorwa zvepakati, uye masangano emuno anotarisira kuita kuti budiriro yewebhu yekudzidza iwanikwe nemunhu wese.

Iwe uchave wakanyanya kukodzera pabasa rako rekutanga kana ukakwanisa kupedza kosi yese.

Gadzira sevha yeHTTP kubva pakutanga

Iyo HTTP protocol ndeimwe yemaprotocol makuru ayo izvo zvinofamba paInternet. HTTP maseva anoshandiswa kushandira static zvirimo seHTML, CSS, uye JS.

Kukwanisa kuita iyo HTTP protocol kubva kutanga kuchawedzera ruzivo rwako rwekuti zvinhu zvinopindirana sei.

Semuenzaniso, kana ukashandisa NodeJs, iwe unoziva kuti Express inopa HTTP sevha.

Kuti uwane referensi, ona kana uchikwanisa:

• Gadzirisa sevha pasina kushandisa chero raibhurari
• Sevha inofanirwa kushandira HTML, CSS uye JS zvemukati.
• Kushandisa router kubva pakutanga
• Tarisa shanduko uye gadziridza sevha

Kana iwe usingazivi chikonzero, shandisa Go lang uye edza kugadzira sevha yeHTTP Caddy kubva pakutanga.

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

Tese tinonyora manotsi, handiti?

Ngatigadzirei app yemanotsi. Chishandiso chinoda kuchengetedza manotsi uye kuwiriranisa iwo nedatabase. Vaka app yemuno uchishandisa Electron, Swift, kana chero chaunoda uye chinoshanda kune yako system.

Inzwa wakasununguka kusanganisa izvi nedambudziko rekutanga (text editor).

Sebhonasi, edza kuyananisa desktop yako vhezheni newebhu vhezheni.

Podcasts (Overcast clone)

Ndiani asingateereri podcasts?

Gadzira web application ine zvinotevera kushanda:

• Gadzira account
• Tsvaga maPodcast
• Ratidza uye unyore kune podcasts
• Mira uye tamba, shandura kumhanya, kumberi uye kumashure mabasa kwemasekonzi makumi matatu.

Edza kushandisa iTunes API senzvimbo yekutanga. Kana iwe uchiziva nezve chero zviwanikwa, ndapota tumira mumashoko.

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

Screen capture

Mhoro! Ndiri kutora skrini yangu izvozvi!

Gadzira desktop kana yewebhu app iyo inokutendera iwe kutora skrini yako uye chengetedza clip se .gif

pano mamwe matipikuita sei izvi.

Sources

• 5 mamwe mapurojekiti ekushinga ekudzidzisa emugadziri (Layer, Squoosh, Calculator, Webhusaiti Crawler, Mumhanzi Inoridza)
• 9 mapurojekiti ekukudza hunyanzvi hwako hweFront-End
• Mabasa matanhatu eFront-End developer
• Inonakidza tsika yemugadziri
• 8 mapurojekiti ekudzidzisa
• Imwe rondedzero yemapurojekiti ekudzidzira pairi

Source: www.habr.com