ProHoster > Блог > balita sa internet > Front-end dojo: mga proyekto sa pagbansay sa mga kahanas sa developer (5 bag-o + 43 ka tigulang)
Front-end dojo: mga proyekto sa pagbansay sa mga kahanas sa developer (5 bag-o + 43 ka tigulang)
1. Clone sa ideya
Ang aplikasyon sa Notion gihigugma sa kadaghanan; gitugotan ka niini nga ma-optimize ang imong daloy sa trabaho, pagtrabaho kauban ang mga dokumento, pag-iskedyul sa mga buluhaton, ug pag-synchronize sa datos tali sa mga aparato.
Repl.it kay usa ka himan para sa real-time nga collaborative code editing. Makapili ka ug daghang mga pinulongan: JavaScript, Python, Go ug ipadagan ang code direkta sa browser. Mapuslanon kaayo alang sa dali nga mga demo ug mga interbyu sa code.
Unsa ang imong makat-unan pinaagi sa paghimo og Repl.it clone:
Giunsa pagpadagan ug pag-execute ang code (server-side) sa browser (client-side).
Basaha ang input data (source code) ug ipakita ang resulta sa pagpatuman.
Giunsa paghimo ang mga file ug folder sa web ug i-save ang mga resulta.
Giunsa ang pag-highlight sa code syntax.
3. Google Photos Clone
Ang Google Photos usa ka serbisyo alang sa pagtipig ug pagpaambit sa mga litrato.
Ang bisan unsang modernong aplikasyon sa litrato makahimo sa mga batakang gimbuhaton: pag-upload, pag-crop, ug uban pa. Gusto sa mga tawo nga maghimo sa ilang kaugalingon nga mga avatar ug magpaambit sa mga litrato sa mga iring, mao nga kinahanglan nimo nga magtrabaho sa mga imahe.
Unsa ang imong makat-unan pinaagi sa paghimo og Google Photos clone:
Giunsa paghimo ang mga responsive nga mga imahe sa mga telepono, tablet, laptop ug bisan sa higanteng mga screen sa TV.
Giunsa pagdumala ang mga pag-upload sa imahe, labi na ang dagkong mga imahe (>1MB) ug daghang pag-upload.
Pagproseso sa mga file sa imahe, pag-crop ug pagbag-o sa mga litrato alang sa mga thumbnail o kung nagbukas sa usa ka gallery.
bonus: unsaon pagtipig sa mga hulagway sa panganod o lokal nga database.
4. Gifsky clone
gifski nag-convert sa video ngadto sa GIF gamit ang mga functionpngquant alang sa episyente nga cross-frame palette ug temporal nga anti-aliasing. Ang resulta usa ka GIF nga adunay liboan ka mga bulak matag frame.
Ang Layer usa ka komunidad diin ang tanan makadrowing og pixel sa gipaambit nga "board". Ang orihinal nga ideya natawo sa Reddit. Ang r/Layer nga komunidad usa ka metapora alang sa gipaambit nga pagkamamugnaon, nga ang tanan mahimong usa ka tiglalang ug makatampo sa usa ka komon nga kawsa.
Unsa ang imong makat-unan sa paghimo sa imong kaugalingon nga Layer nga proyekto:
Giunsa paglihok sa JavaScript nga canvas Ang pagkahibalo kung unsaon pag-operate ang usa ka canvas usa ka kritikal nga kahanas sa daghang mga aplikasyon.
Giunsa ang pag-coordinate sa mga pagtugot sa tiggamit. Ang matag user mahimong magdrowing og usa ka pixel matag 15 minutos nga dili na kinahanglang mag log in.
Ang Squoosh usa ka aplikasyon sa pag-compress sa imahe nga adunay daghang mga advanced nga kapilian.
GIF 20 MB
Pinaagi sa paghimo sa imong kaugalingon nga bersyon sa Squoosh makakat-on ka:
Giunsa pagtrabaho ang mga gidak-on sa imahe
Pagkat-on sa mga sukaranan sa Drag'n'Drop API
Sabta kung giunsa ang API ug mga tigpaminaw sa panghitabo nagtrabaho
Giunsa ang pag-upload ug pag-export sa mga file
Mubo nga sulat: Ang image compressor kay lokal. Dili kinahanglan nga magpadala dugang nga datos sa server. Mahimo nimo ang compressor sa balay, o mahimo nimo kini gamiton sa usa ka server, nga imong gipili.
Kalkulator
Dali na? Seryoso? Calculator? Oo, eksakto, usa ka calculator. Ang pagsabut sa mga sukaranan sa mga operasyon sa matematika ug kung giunsa sila nagtinabangay usa ka kritikal nga kahanas alang sa pagpayano sa imong mga aplikasyon. Sa madugay o sa madali kinahanglan nimong atubangon ang mga numero ug mas dali nga mas maayo.
Pinaagi sa paghimo sa imong kaugalingon nga calculator makakat-on ka:
Pagtrabaho sa mga numero ug mga operasyon sa matematika
Pagpraktis sa mga tigpaminaw sa panghitabo API
Giunsa ang paghan-ay sa mga elemento, pagsabut sa mga istilo
Crawler (Search engine)
Ang tanan migamit sa usa ka search engine, busa nganong dili paghimo sa imong kaugalingon? Ang mga crawler gikinahanglan sa pagpangita sa impormasyon. Ang tanan naggamit niini kada adlaw ug ang panginahanglan alang niini nga teknolohiya ug mga espesyalista motubo lamang sa paglabay sa panahon.
Google search engine
Unsa ang imong makat-unan pinaagi sa paghimo sa imong kaugalingon nga search engine:
Giunsa pagtrabaho ang mga crawler
Giunsa ang pag-index sa mga site ug kung giunsa kini pagranggo pinaagi sa rating ug reputasyon
Giunsa pagtipig ang mga na-index nga site sa usa ka database ug kung giunsa ang pagtrabaho kauban ang database
Music player (Spotify, Apple Music)
Ang tanan naminaw sa musika - kini usa lamang ka bahin sa atong kinabuhi. Maghimo kita og music player aron mas masabtan kung giunsa ang mga batakang mekaniko sa usa ka modernong music streaming platform nga nagtrabaho.
Spotify
Unsa ang imong makat-unan pinaagi sa paghimo sa imong kaugalingon nga platform sa streaming sa musika:
Giunsa pagtrabaho ang API. gamita ang API gikan sa Spotify o Apple Music
Giunsa ang pagdula, paghunong o pag-rewind sa sunod/kaniadto nga track
Giunsa pagbag-o ang volume
Giunsa pagdumala ang pag-ruta sa gumagamit ug kasaysayan sa browser
Aplikasyon sa pagpangita sa sine gamit ang React (nga adunay mga kaw-it)
Ang unang butang nga mahimo nimong sugdan mao ang paghimo og movie search app gamit ang React. Sa ubos usa ka imahe kung unsa ang hitsura sa katapusan nga aplikasyon:
Unsa ang imong mahibal-an
Pinaagi sa paghimo niini nga app, mapauswag nimo ang imong kahanas sa React pinaagi sa paggamit sa medyo bag-o nga Hooks API. Ang pananglitan nga proyekto naggamit sa mga sangkap sa React, daghang mga kaw-it, usa ka eksternal nga API, ug siyempre pipila ka estilo sa CSS.
Tech stack ug mga feature
Pag-react gamit ang mga kaw-it
paghimo-reaksyon-app
JSX
CSS
Kung wala’y paggamit sa bisan unsang klase, kini nga mga proyekto naghatag kanimo ang hingpit nga punto sa pagsulod sa functional React ug siguradong makatabang kanimo sa 2020. makit-an nimo pananglitan nga proyekto dinhi. Sunda ang mga instruksyon o himoa kini nga imong kaugalingon.
Chat App gamit ang Vue
Laing nindot nga proyekto nga imong buhaton mao ang paghimo og chat app gamit ang akong paborito nga JavaScript library: VueJS. Ang aplikasyon tan-awon sama niini:
Unsa ang imong mahibal-an
Sa kini nga panudlo, mahibal-an nimo kung giunsa paghimo ang usa ka Vue app gikan sa wala - paghimo sa mga sangkap, pagdumala sa estado, paghimo og mga ruta, pagkonekta sa mga serbisyo sa ikatulo nga partido, ug bisan ang pagdumala sa pag-authenticate.
Tech stack ug mga feature
Vue
vuex
Vue nga Router
Vue CLI
Pusher
CSS
Kini usa ka maayo kaayo nga proyekto aron makasugod sa Vue o mapaayo ang imong naa na mga kahanas aron mapauswag sa 2020. makit-an nimo tutorial dinhi.
Nindot nga weather app nga adunay Angular 8
Kini nga pananglitan makatabang kanimo sa paghimo og usa ka matahum nga app sa panahon gamit ang Angular 8:
Unsa ang imong mahibal-an
Kini nga proyekto magtudlo kanimo og bililhon nga mga kahanas sa pagtukod og mga aplikasyon gikan sa wala - gikan sa disenyo hangtod sa pag-uswag, hangtod sa usa ka aplikasyon nga andam na sa pag-deploy.
Tech stack ug mga feature
Anggulo 8
Firebase
Pag-render sa kilid sa server
CSS uban sa Grid ug Flexbox
Mobile mahigalaon ug adaptability
Ngitngit nga mode
Nindot nga interface
Ang ganahan kaayo nako niining tanan nga proyekto mao nga dili ka magtuon sa mga butang nga nag-inusara. Hinuon, nahibal-an nimo ang tibuuk nga proseso sa pag-uswag, gikan sa disenyo hangtod sa katapusan nga pag-deploy.
Ang aplikasyon nga buhaton gamit ang Svelte
Ang Svelte sama sa bag-ong bata sa component-based approach - labing menos susama sa React, Vue ug Angular. Ug kini usa sa labing kainit nga bag-ong mga produkto alang sa 2020.
Ang mga To-Do nga mga app dili kinahanglan ang labing mainit nga hilisgutan, apan makatabang gyud kini kanimo nga mapauswag ang imong kahanas sa Svelte. Kini tan-awon sama niini:
Unsa ang imong mahibal-an
Kini nga panudlo magpakita kanimo kung giunsa paghimo ang usa ka aplikasyon gamit ang Svelte 3, gikan sa pagsugod hangtod sa katapusan. Magamit nimo ang mga sangkap, estilo, ug tigdumala sa panghitabo
Ang Next.js mao ang pinakasikat nga balangkas alang sa paghimo og mga aplikasyon sa React nga nagsuporta sa pag-render sa kilid sa server sa gawas sa kahon.
Kini nga proyekto magpakita kanimo kung giunsa paghimo ang usa ka aplikasyon sa e-commerce nga ingon niini:
Unsa ang imong mahibal-an
Niini nga proyekto, makakat-on ka unsaon pag-develop gamit ang Next.js—paghimo ug bag-ong mga panid ug mga component, pagkuha sa datos, ug estilo ug pag-deploy ug Next nga aplikasyon.
Tech stack ug mga feature
Sunod.js
Mga sangkap ug mga panid
Pag-sampol sa datos
Pag-istilo
Pag-deploy sa Proyekto
SSR ug SPA
Kanunay nga maayo nga adunay usa ka tinuod nga kalibutan nga pananglitan sama sa usa ka e-commerce app aron makakat-on og bag-o. Mahimo nimo pangitaa ang tutorial dinhi.
Bug-os nga multilinggwal nga blog uban sa Nuxt.js
Ang Nuxt.js para sa Vue, kung unsa ang Next.js para sa React: usa ka maayo nga balangkas alang sa paghiusa sa gahum sa pag-render sa kilid sa server ug mga aplikasyon sa usa ka panid
Ang katapusan nga aplikasyon nga imong mahimo mahimo tan-awon sama niini:
Unsa ang imong mahibal-an
Niini nga sampol nga proyekto, makakat-on ka unsaon paghimo og kompleto nga website gamit ang Nuxt.js, gikan sa inisyal nga pag-setup hangtod sa kataposang pag-deploy.
Gipahimuslan niini ang daghang mga cool nga bahin nga gitanyag sa Nuxt, sama sa mga panid ug sangkap, ug pag-istilo gamit ang SCSS.
Tech stack ug mga feature
Nuxt.js
Mga sangkap ug mga panid
Module sa block sa istorya
Hagfish
Vuex alang sa pagdumala sa estado
SCSS para sa pag-istilo
Nuxt middlewares
Nindot kaayo ni nga proyekto, nga naglakip sa daghang nindot nga mga feature sa Nuxt.js. Ako personal nga ganahan nga magtrabaho uban sa Nuxt mao nga kinahanglan nimo nga sulayan kini tungod kay kini makahimo usab kanimo nga usa ka maayo nga developer sa Vue.
Blog uban ni Gatsby
Ang Gatsby usa ka maayo kaayo nga static site generator gamit ang React ug GraphQL. Mao kini ang resulta sa proyekto:
Unsa ang imong mahibal-an
Sa kini nga panudlo, mahibal-an nimo kung giunsa ang paggamit sa Gatsby aron makahimo usa ka blog nga imong gamiton sa pagsulat sa imong kaugalingon nga mga artikulo gamit ang React ug GraphQL.
Wala ko nag-ingon nga ang WordPress usa ka dili maayo nga pagpili, apan sa Gatsby mahimo ka nga magtukod og mga website nga adunay taas nga performance gamit ang React - nga usa ka talagsaon nga kombinasyon.
Blog uban sa Gridsome
Gridsome para sa Vue... Okay, naa na namo kini sa Next/Nuxt.
Apan tinuod usab kini alang sa Gridsome ug Gatsby. Ang duha naggamit sa GraphQL isip ilang data layer, apan ang Gridsome naggamit sa VueJS. Kini usa usab ka talagsaon nga static nga site generator nga makatabang kanimo sa paghimo og maayo nga mga blog:
Unsa ang imong mahibal-an
Kini nga proyekto magtudlo kanimo kung giunsa paghimo ang usa ka yano nga blog aron makasugod sa Gridsome, GraphQL ug Markdown. Gisakup usab niini kung giunsa ang pag-deploy sa usa ka aplikasyon pinaagi sa Netlify.
Sama sa SoundCloud nga audio player gamit ang Quasar
Ang Quasar maoy laing Vue framework nga magamit sa paghimo og mga mobile application. Niini nga proyekto maghimo ka usa ka aplikasyon sa audio player, pananglitan:
Unsa ang imong mahibal-an
Samtang ang ubang mga proyekto nagpunting sa panguna sa mga aplikasyon sa web, kini magpakita kanimo kung giunsa paghimo ang usa ka mobile application gamit ang Vue ug ang Quasar framework.
Kinahanglan nga naa na nimo ang Cordova nga nagdagan sa Android Studio/Xcode nga gi-configure. Kung dili, ang manwal adunay link sa website sa Quasar diin gipakita nila kanimo kung giunsa ang pag-set up sa tanan.
Tech stack ug mga feature
quasar
Vue
Cordova
wavesurfer
Mga sangkap sa UI
Gamay nga proyekto, nga nagpakita sa mga kapabilidad ni Quasar sa paghimo og mga mobile application.
porma sa credit card
Usa ka cool nga porma sa credit card nga adunay hapsay ug makalingaw nga micro-interaksyon. Naglakip sa pag-format sa numero, pag-verify ug awtomatikong pag-ila sa tipo sa kard. Gitukod kini sa Vue.js ug hingpit usab nga mosanong. (Makita nimo dinhi.)
Pagdumala sa mga panghitabo (pananglitan, kung magbag-o ang mga field)
Sabta kung giunsa pagpakita ug pagbutang ang mga elemento sa panid, labi na ang impormasyon sa credit card nga makita sa ibabaw sa porma
tsart sa bar
Ang histogram kay usa ka tsart o graph nga nagrepresentar sa categorical data nga adunay rectangular bars nga adunay gitas-on o gitas-on nga proporsyonal sa mga value nga ilang girepresentahan.
Mahimo silang i-apply sa vertically o horizontally. Ang bertikal nga bar chart usahay gitawag nga line chart.
Unsa ang imong makat-unan:
Ipakita ang datos sa usa ka structured ug masabtan nga paagi
Dugang pa: Pagkat-on unsaon paggamit ang elemento canvas ug unsaon pagdrowing og mga elemento niini
kini mao ang makit-an nimo ang datos sa populasyon sa kalibutan. Gihan-ay sila sa tuig.
Twitter Heart Animation
Balik sa 2016, gipaila sa Twitter kining talagsaon nga animation alang sa mga tweet niini. Hangtud sa 2019, kini tan-awon gihapon ang bahin, busa ngano nga dili maghimo usa sa imong kaugalingon?
Unsa ang imong makat-unan:
Pagtrabaho uban ang CSS attribute keyframes
Pagmaniobra ug pag-animate sa mga elemento sa HTML
Paghiusa sa JavaScript, HTML ug CSS
Mapangita nga mga repositoryo sa GitHub
Wala’y bisan unsa nga nindot dinhi — ang mga repositoryo sa GitHub usa ra ka gihimaya nga lista.
Ang tumong mao ang pagpakita sa mga repositoryo ug tugotan ang tiggamit sa pagsala niini. Paggamit opisyal nga GitHub API aron makakuha mga repository alang sa matag tiggamit.
Ang mga chat usa ka popular nga paagi sa komunikasyon tungod sa ilang kayano ug kadali sa paggamit. Apan unsa ba gayod ang nakapadasig sa modernong mga chat room? Mga WebSocket!
Unsa ang imong makat-unan:
Gamita ang WebSockets, real-time nga komunikasyon ug mga update sa datos
Pagtrabaho uban ang lebel sa pag-access sa user (pananglitan, ang tag-iya sa usa ka channel sa chat adunay papel admin, ug uban pa sa kwarto - user)
Pagproseso ug pag-validate sa mga porma - hinumdomi, ang chat window alang sa pagpadala usa ka mensahe input
Paghimo ug pag-apil sa lainlaing mga chat
Pagtrabaho uban ang personal nga mga mensahe. Ang mga tiggamit mahimong makig-chat sa ubang mga tiggamit sa pribado. Sa tinuud, magtukod ka usa ka koneksyon sa WebSocket tali sa duha nga tiggamit.
Pag-navigate sa estilo sa stripe
Ang nakapahimo sa kini nga nabigasyon nga talagsaon mao nga ang sulud sa popover nagbag-o aron mohaum sa sulud. Adunay usa ka elegante sa kini nga transisyon kung itandi sa tradisyonal nga pamatasan sa pag-abli ug pagsira sa usa ka bag-ong popover.
Unsa ang imong makat-unan:
Paghiusa sa mga animation sa CSS sa mga transisyon
Ipadpad ang sulod ug ipadapat ang aktibong klase sa naglutaw nga elemento
Pacman
Paghimo sa imong kaugalingon nga bersyon sa Pacman. Kini usa ka maayo nga paagi aron makakuha usa ka ideya kung giunsa ang mga dula naugmad ug masabtan ang mga sukaranan. Gamit ug JavaScript framework, React o Vue.
Mahibal-an nimo:
Giunsa paglihok ang mga elemento
Giunsa pagtino kung unsang mga yawe ang ipadayon
Giunsa pagtino ang higayon sa pagbangga
Makapadayon ka ug makadugang mga kontrol sa paglihok sa multo
Makita nimo ang usa ka pananglitan niini nga proyekto sa repositoryo GitHub
Ang paghimo og CRUD type nga aplikasyon para sa user administration magtudlo kanimo sa mga sukaranan sa kalamboan. Kini labi ka mapuslanon alang sa mga bag-ong developer.
Mahibal-an nimo:
Unsa ang routing
Giunsa pagdumala ang mga porma sa pagsulod sa datos ug susihon kung unsa ang gisulod sa tiggamit
Giunsa pagtrabaho ang database - paghimo, pagbasa, pag-update ug pagtangtang sa mga aksyon
Kung gusto nimo maghimo og mga app, magsugod sa usa ka weather app. Kini nga proyekto mahimong makompleto gamit ang Swift.
Dugang sa pag-angkon og kasinatian sa paghimo og aplikasyon, makakat-on ka:
Giunsa pagtrabaho ang API
Giunsa paggamit ang geolocation
Himua nga mas dinamiko ang imong aplikasyon pinaagi sa pagdugang sa input sa teksto. Niini, ang mga tiggamit makasulod sa ilang lokasyon aron masusi ang panahon sa usa ka piho nga lokasyon.
Kinahanglan nimo ang usa ka API. Aron makakuha og datos sa panahon, gamita ang OpenWeather API. Dugang nga impormasyon bahin sa OpenWeather API dinhi.
Chat window
Ang akong chat window sa aksyon, abli sa duha ka tab sa browser
Ang paghimo og chat window mao ang hingpit nga paagi sa pagsugod sa mga socket. Ang pagpili sa tech stack dako kaayo. Ang Node.js, pananglitan, perpekto.
Mahibal-an nimo kung giunsa ang mga socket ug kung giunsa kini ipatuman. Kini ang panguna nga bentaha sa kini nga proyekto.
Kung ikaw usa ka developer sa Laravel nga gusto nga magtrabaho sa mga socket, basaha ang akong usa ka artikulo
Kung bag-o ka sa padayon nga panagsama (CI), pagdula sa GitLab CI. Pag-set up og pipila ka palibot ug sulayi pagdagan ang pipila ka mga pagsulay. Dili kini usa ka lisud nga proyekto, apan sigurado ako nga daghan ka nga makat-unan gikan niini. Daghang mga development team ang naggamit na karon sa CI. Ang pagkahibalo kon unsaon paggamit kini mapuslanon.
Mahibal-an nimo:
Unsa ang GitLab CI
Unsaon pag-configure .gitlab-ci.ymlnga nagsulti sa GitLab user kung unsa ang buhaton
Giunsa ang pag-deploy sa ubang mga palibot
Analista sa website
Paghimo usa ka scraper nga nag-analisar sa mga semantiko sa mga website ug nagmugna sa ilang rating. Pananglitan, mahimo nimong susihon ang nawala nga mga tag sa alt sa mga imahe. O susiha kung ang panid adunay mga meta tag sa SEO. Ang usa ka scraper mahimo nga walay user interface.
Mahibal-an nimo:
Giunsa pagtrabaho ang scraper?
Giunsa paghimo ang mga tigpili sa DOM
Giunsa pagsulat ang usa ka algorithm
Kung dili nimo gusto nga mohunong didto, paghimo usa ka user interface. Mahimo ka usab nga maghimo usa ka taho sa matag website nga imong susihon.
Organisasyon sa mga ruta sa pagproseso sa hangyo (Routing).
I-drag ug ihulog.
Giunsa paghimo ang bag-ong mga butang (mga tabla, mga lista, mga kard).
Pagproseso ug pagsusi sa input data.
Gikan sa bahin sa kliyente: kung giunsa paggamit ang lokal nga pagtipig, kung giunsa ang pagtipig sa datos sa lokal nga pagtipig, kung giunsa pagbasa ang datos gikan sa lokal nga pagtipig.
Gikan sa kilid sa server: kung giunsa paggamit ang mga database, kung giunsa ang pagtipig sa datos sa database, kung giunsa pagbasa ang datos gikan sa database.
I-set up ang imong kaugalingon nga webpack config gikan sa wala
Sa teknikal, kini dili usa ka aplikasyon, apan kini usa ka mapuslanon kaayo nga buluhaton aron masabtan kung giunsa ang webpack molihok gikan sa sulod. Karon kini dili usa ka "itom nga kahon", apan usa ka masabtan nga himan.
Mga kinahanglanon:
Compile es7 ngadto sa es5 (basic).
I-compile ang jsx ngadto sa js - o - .vue ngadto sa .js (kinahanglan nimong tun-an ang mga loader)
I-set up ang webpack dev server ug init nga module reloading. (vue-cli ug create-react-app gamiton ang duha)
Gamita ang Heroku, now.sh o Github, pagkat-on unsaon pag-deploy sa mga proyekto sa webpack.
I-set up ang imong paborito nga preprocessor aron ma-compile ang css - scss, less, stylus.
Pagkat-on unsaon paggamit ang mga imahe ug svg gamit ang webpack.
Seryoso? Tudushka? Adunay liboan niini. Apan pagtuo kanako, adunay usa ka rason alang niini nga pagkapopular.
Ang Tudu app usa ka maayong paagi aron masiguro nga nasabtan nimo ang mga sukaranan. Sulayi pagsulat ang usa ka aplikasyon sa vanilla Javascript ug usa sa imong paborito nga balangkas.
Pagkat-on:
Paghimo og bag-ong mga buluhaton.
Susiha nga ang mga field napuno.
Pagsala sa mga buluhaton (nakompleto, aktibo, tanan). Paggamit filter и reduce.
Makasabot ka kung giunsa ang mga aplikasyon sa web ug mga lumad nga aplikasyon nagtrabaho, nga makapalain kanimo gikan sa gray nga masa.
Unsa ang atong tun-an:
Mga socket sa web (mga instant nga mensahe)
Giunsa pagtrabaho ang lumad nga mga aplikasyon.
Giunsa pagtrabaho ang mga template sa lumad nga aplikasyon.
Pag-organisar sa mga ruta sa pagproseso sa hangyo sa lumad nga mga aplikasyon.
Text editor
Ang katuyoan sa usa ka text editor mao ang pagpakunhod sa paningkamot sa mga tiggamit nga naningkamot sa pag-convert sa ilang pag-format ngadto sa balido nga HTML markup. Ang usa ka maayo nga editor sa teksto nagtugot sa mga tiggamit sa pag-format sa teksto sa lainlaing mga paagi.
Reddit kay usa ka social news aggregation, web content rating ug discussion site.
Gikuha sa Reddit ang kadaghanan sa akong oras, apan nagpadayon ako sa pagbitay niini. Ang paghimo og Reddit clone usa ka epektibo nga paagi sa pagkat-on sa programming (samtang nag-browse sa Reddit sa samang higayon).
Ang Reddit naghatag kanimo usa ka adunahan kaayo API. Ayaw biyai ang bisan unsang mga bahin o buhata ang mga butang nga wala’y hinungdan. Sa tinuud nga kalibutan nga adunay mga kliyente ug kustomer, dili ka makatrabaho nga wala’y trabaho, o dali ka nga mawad-an sa imong trabaho.
Ang mga kliyente nga maalamon makaamgo dayon nga ang trabaho dili maayo nga nahimo ug mangita og lain.
Kung nagsulat ka sa Javascript code, lagmit nga mogamit ka usa ka manager sa package. Gitugotan ka sa tagdumala sa pakete nga magamit pag-usab ang kasamtangan nga code nga gisulat ug gipatik sa ubang mga tawo.
Ang pagsabut sa tibuuk nga siklo sa pag-uswag sa usa ka pakete maghatag usa ka maayo kaayo nga kasinatian. Adunay daghang mga butang nga kinahanglan nimong mahibal-an kung mag-publish sa code. Kinahanglan nimong hunahunaon ang bahin sa seguridad, semantic versioning, scalability, name conventions ug maintenance.
Ang pakete mahimong bisan unsa. Kung wala kay ideya, paghimo og imong kaugalingon nga Lodash ug i-publish kini.
Ang freeCodeCamp usa ka non-profit nga organisasyon. Naglangkob kini sa usa ka interactive nga web-based nga plataporma sa pagkat-on, usa ka online nga forum sa komunidad, mga chat room, Medium nga mga publikasyon, ug mga lokal nga organisasyon nga nagtinguha sa paghimo sa pagkat-on sa web development nga ma-access sa tanan.
Mahimong labaw ka kuwalipikado alang sa imong una nga trabaho kung mahuman nimo ang tibuuk nga kurso.
Paghimo og HTTP server gikan sa scratch
Ang HTTP protocol mao ang usa sa mga nag-unang protocol diin ang sulod mobiyahe sa Internet. Ang mga HTTP server gigamit sa pag-alagad sa static nga sulod sama sa HTML, CSS, ug JS.
Ang makahimo sa pag-implementar sa HTTP nga protocol gikan sa sinugdan makapalapad sa imong kahibalo kon sa unsang paagi ang mga butang makig-uban.
Pananglitan, kung mogamit ka sa NodeJs, nahibal-an nimo nga ang Express naghatag usa ka HTTP server.
Alang sa pakisayran, tan-awa kung mahimo nimo:
Pag-set up sa usa ka server nga wala mogamit bisan unsang mga librarya
Ang server kinahanglang mag-alagad sa HTML, CSS ug JS nga sulod.
Pagpatuman sa usa ka router gikan sa wala
Pag-monitor sa mga pagbag-o ug pag-update sa server
Kung wala ka kahibalo kung ngano, gamita Go lang ug sulayi paghimo og HTTP server Caddy gikan sa nagaras.
Desktop app para sa mga nota
Tanan kita nagkuha og mga nota, dili ba?
Magbuhat ta ug notes app. Kinahanglan nga i-save sa aplikasyon ang mga nota ug i-synchronize kini sa database. Paghimo usa ka lumad nga app gamit ang Electron, Swift, o bisan unsa nga gusto nimo ug kung unsa ang magamit sa imong sistema.
Mobati nga gawasnon nga ikombinar kini sa unang hagit (text editor).
Isip usa ka bonus, sulayi ang pag-sync sa imong desktop nga bersyon sa web nga bersyon.
Mga Podcast (Overcast clone)
Kinsa ang dili maminaw sa mga podcast?
Paghimo og web application nga adunay mosunod nga gamit:
Paghimo og account
Pangitaa ang mga Podcast
Pag-rate ug pag-subscribe sa mga podcast
Hunong ug dula, usba ang katulin, unahan ug paatras nga mga gimbuhaton sa 30 segundos.
Sulayi ang paggamit sa iTunes API isip usa ka punto sa pagsugod. Kung nahibal-an nimo ang bisan unsang ubang mga kapanguhaan, palihug i-post sa mga komento.