9 proyek liyane kanggo ngasah katrampilan Front-End

9 proyek liyane kanggo ngasah katrampilan Front-End

Pambuka

Apa sampeyan anyar ing pemrograman utawa pangembang sing wis berpengalaman, sinau konsep lan basa/kerangka anyar kudu ana ing industri iki supaya bisa ngetutake tren.

Njupuk React, contone, sing mbukak sumber Facebook mung patang taun kepungkur lan wis dadi pilihan nomer siji kanggo pangembang JavaScript ing saindenging jagad.

Vue lan Angular, mesthi, uga duwe basis penggemar sing sah. Banjur ana Svelte lan kerangka universal liyane kayata Next.js utawa Nuxt.js. Lan Gatsby, lan Gridsome, lan Quasar ... lan akeh liyane.

Yen sampeyan pengin mbuktekake dhewe minangka pangembang JavaScript sing berpengalaman, sampeyan kudu paling ora duwe pengalaman karo macem-macem kerangka lan perpustakaan - saliyane nindakake karya karo JS lawas sing apik.

Kanggo mbantu sampeyan dadi master ngarep ing taun 2020, aku wis nggabungake sangang proyek sing beda-beda, saben fokus ing kerangka kerja lan perpustakaan JavaScript sing beda-beda minangka tumpukan teknologi sing bisa digawe lan ditambahake menyang portofolio sampeyan. Elinga yen ora ana sing mbantu sampeyan luwih saka nggawe barang, mula maju, gunakake pikiran lan kelakon

9 proyek liyane kanggo ngasah katrampilan Front-End

Artikel kasebut diterjemahake kanthi dhukungan saka EDISON Software, sing ndadekake kamar pas virtual kanggo toko multi-merekLan piranti lunak tes.

Aplikasi telusuran film nggunakake React (kanthi pancing)

Babagan pisanan sing bisa diwiwiti yaiku nggawe aplikasi telusuran film nggunakake React. Ing ngisor iki minangka gambar apa aplikasi pungkasan bakal katon kaya:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau
Kanthi mbangun app iki, sampeyan bakal nambah katrampilan React kanthi nggunakake API Hooks sing relatif anyar. Proyek conto nggunakake komponen React, akeh pancingan, API eksternal, lan mesthi sawetara gaya CSS.

tumpukan Tech lan fitur

  • Reaksi karo pancingan
  • Nggawe-reaksi-app
  • JSX
  • CSS

Tanpa nggunakake kelas apa wae, proyek kasebut menehi titik mlebu sing sampurna menyang React fungsional lan mesthi bakal mbantu sampeyan ing 2020. sampeyan bisa nemokake conto proyek kene. Tindakake pandhuan utawa gawe dhewe.

Ngobrol App karo Vue

Proyek liyane sing apik kanggo sampeyan yaiku nggawe aplikasi chatting nggunakake perpustakaan JavaScript favoritku: VueJS. Aplikasi bakal katon kaya iki:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau
Ing tutorial iki, sampeyan bakal sinau carane nggawe aplikasi Vue saka ngeruk - nggawe komponen, nangani negara, nggawe rute, nyambung menyang layanan pihak katelu, lan malah nangani otentikasi.

tumpukan Tech lan fitur

  • Vue
  • vuex
  • Vue Router
  • Tampilan CLI
  • Pusher
  • CSS

Iki minangka proyek sing apik banget kanggo miwiti Vue utawa nambah katrampilan sing wis ana supaya bisa berkembang ing taun 2020. sampeyan bisa nemokake tutorial kene.

Aplikasi cuaca sing apik karo Angular 8

Conto iki bakal mbantu nggawe aplikasi cuaca sing apik nggunakake Angular 8:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau
Proyèk iki bakal mulang sampeyan katrampilan sing migunani kanggo mbangun aplikasi wiwit wiwitan - saka desain nganti pangembangan, nganti aplikasi sing siap-deployment.

tumpukan Tech lan fitur

  • Sudut 8
  • Firebase
  • Rendering sisih server
  • CSS karo Grid lan Flexbox
  • Mobile loropaken lan adaptasi
  • Mode peteng
  • Antarmuka sing apik

Sing daktresnani babagan proyek sing nyakup kabeh iki yaiku sampeyan ora nyinaoni prekara-prekara kasebut. Nanging, sampeyan sinau kabeh proses pangembangan, saka desain nganti panyebaran pungkasan.

Aplikasi To-Do nggunakake Svelte

Svelte kaya bocah anyar babagan pendekatan berbasis komponen - paling ora padha karo React, Vue lan Angular. Lan iki minangka salah sawijining produk anyar sing paling panas kanggo 2020.

Aplikasi To-Do ora kudu dadi topik sing paling panas, nanging bakal mbantu sampeyan ngasah katrampilan Svelte. Bakal katon kaya iki:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau
Tutorial iki bakal nuduhake sampeyan carane nggawe aplikasi nggunakake Svelte 3, saka wiwitan nganti rampung. Sampeyan bakal nggunakake komponen, gaya, lan panangan acara

tumpukan Tech lan fitur

  • Slamet 3
  • Komponen
  • Styling nganggo CSS
  • ES 6 sintaks

Ora akeh proyek wiwitan Svelte sing apik, mula aku nemokake iki pilihan apik kanggo miwiti karo.

Aplikasi E-commerce nggunakake Next.js

Next.js minangka kerangka paling populer kanggo mbangun aplikasi React sing ndhukung rendering sisih server metu saka kothak.

Proyek iki bakal nuduhake sampeyan carane nggawe aplikasi e-commerce sing katon kaya iki:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau
Ing proyek iki, sampeyan bakal sinau babagan carane ngembangake Next.js-gawe kaca lan komponen anyar, ekstrak data, lan gaya lan masang aplikasi Sabanjure.

tumpukan Tech lan fitur

  • Sabanjure.js
  • Komponen lan Kaca
  • Sampling data
  • Stilisasi
  • Penyebaran Proyek
  • SSR lan SPA

Iku tansah apik kanggo duwe conto donya nyata kaya app e-commerce kanggo sinau bab anyar. Sampeyan bisa golek tutorial kene.

Blog multibasa lengkap karo Nuxt.js

Nuxt.js kanggo Vue, apa Next.js kanggo React: kerangka kerja sing apik kanggo nggabungake kekuwatan rendering sisih server lan aplikasi siji kaca.
Aplikasi pungkasan sing bisa digawe bakal katon kaya iki:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau

Ing conto proyek iki, sampeyan bakal sinau carane nggawe situs web lengkap nggunakake Nuxt.js, saka persiyapan awal nganti panyebaran pungkasan.

Iku njupuk kauntungan saka akeh fitur kelangan sing Nuxt wis kurban, kayata kaca lan komponen, lan noto karo SCSS.

tumpukan Tech lan fitur

  • Nuxt.js
  • Komponen lan Kaca
  • Modul storyblock
  • Hagfish
  • Vuex kanggo manajemen negara
  • SCSS kanggo noto
  • Nuxt middlewares

Iki proyek apik tenan, kang kalebu akeh fitur Nuxt.js gedhe. Aku pribadi seneng nggarap Nuxt dadi sampeyan kudu nyoba amarga uga bakal nggawe sampeyan pangembang Vue sing apik.

Blog karo Gatsby

Gatsby minangka generator situs statis banget nggunakake React lan GraphQL. Iki minangka asil saka proyek kasebut:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau

Ing tutorial iki, sampeyan bakal sinau carane nggunakake Gatsby kanggo nggawe blog sing bakal digunakake kanggo nulis artikel dhewe nggunakake React lan GraphQL.

tumpukan Tech lan fitur

  • gatsby
  • nanggepi
  • GraphQL
  • Plugins lan tema
  • MDX / Markdown
  • CSS Bootstrap
  • Cithakan

Yen sampeyan wis tau pengin miwiti blog, iki minangka conto sing apik carane nggawe nggunakake React lan GraphQL.

Aku ora ujar manawa WordPress minangka pilihan sing ala, nanging kanthi Gatsby sampeyan bisa mbangun situs web kanthi kinerja dhuwur nggunakake React - sing kombinasi apik tenan.

Blog karo Gridsome

Gridsome kanggo Vue ... Oke, kita wis duwe iki karo Sabanjure / Nuxt.
Nanging padha bener kanggo Gridsome lan Gatsby. Loro-lorone nggunakake GraphQL minangka lapisan data, nanging Gridsome nggunakake VueJS. Iki uga minangka generator situs statis sing bakal mbantu nggawe blog sing apik:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau

Proyek iki bakal mulang sampeyan carane nggawe blog prasaja kanggo miwiti karo Gridsome, GraphQL lan Markdown. Iki uga kalebu cara masang aplikasi liwat Netlify.

tumpukan Tech lan fitur

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • netlify

Iki mesthi ora tutorial paling lengkap, nanging isine konsep dhasar saka Gridsome lan Markdown bisa dadi titik wiwitan sing apik.

Pamuter audio kaya SoundCloud nggunakake Quasar

Quasar minangka kerangka Vue liyane sing bisa digunakake kanggo nggawe aplikasi seluler. Ing proyek iki sampeyan bakal nggawe aplikasi pamuter audio, contone:

9 proyek liyane kanggo ngasah katrampilan Front-End

Apa sing bakal sampeyan sinau

Nalika proyek liyane fokus utamane ing aplikasi web, iki bakal nuduhake sampeyan carane nggawe aplikasi seluler nggunakake kerangka Vue lan Quasar.
Sampeyan kudu duwe Cordova mlaku karo Android Studio / Xcode dikonfigurasi. Yen ora, manual duwe link menyang situs web Quasar sing nuduhake sampeyan carane nyetel kabeh.

tumpukan Tech lan fitur

  • quasar
  • Vue
  • Cordova
  • WaveSurfer
  • Komponen UI

Proyek cilik, nuduhake kemampuan Quasar kanggo nggawe aplikasi seluler.

Source: www.habr.com

Add a comment