તમારી ફ્રન્ટ-એન્ડ કૌશલ્યને વધુ શાર્પન કરવા માટે 9 વધુ પ્રોજેક્ટ્સ

પરિચય

પછી ભલે તમે પ્રોગ્રામિંગ માટે નવા છો અથવા પહેલેથી જ અનુભવી વિકાસકર્તા, આ ઉદ્યોગમાં, નવા ખ્યાલો અને ભાષાઓ/ફ્રેમવર્ક શીખવા માટે વલણો સાથે ચાલુ રાખવા આવશ્યક છે.

ઉદાહરણ તરીકે, રિએક્ટ લો, જે ચાર વર્ષ પહેલાં ફેસબુક દ્વારા માત્ર ઓપન સોર્સ કરવામાં આવ્યું હતું અને તે પહેલાથી જ વિશ્વભરના JavaScript વિકાસકર્તાઓ માટે નંબર વન પસંદગી બની ગયું છે.

Vue અને Angular, અલબત્ત, તેમનો કાયદેસર ચાહક આધાર પણ ધરાવે છે. અને પછી Svelte અને અન્ય સામાન્ય હેતુ ફ્રેમવર્ક છે જેમ કે Next.js અથવા Nuxt.js. અને ગેટ્સબી, અને ગ્રિડસમ, અને ક્વાસર ... અને ઘણું બધું.

જો તમે તમારી જાતને અનુભવી JavaScript ડેવલપર તરીકે સાબિત કરવા માંગતા હો, તો તમારી પાસે વિવિધ ફ્રેમવર્ક અને લાઇબ્રેરીઓ સાથેનો ઓછામાં ઓછો થોડો અનુભવ હોવો જોઈએ - આ ઉપરાંત સારું જૂનું JS કામ કરવું.

તમને 2020માં ફ્રન્ટ-એન્ડ માસ્ટર બનવામાં મદદ કરવા માટે, મેં નવ અલગ-અલગ પ્રોજેક્ટ્સ એકસાથે મૂક્યા છે, જેમાંથી પ્રત્યેક વિવિધ JavaScript ફ્રેમવર્ક અને લાઇબ્રેરીઓ પર એક ટેક સ્ટેક તરીકે ધ્યાન કેન્દ્રિત કરે છે જે તમે બનાવી શકો છો અને તમારા પોર્ટફોલિયોમાં ઉમેરી શકો છો. યાદ રાખો કે વસ્તુઓને વ્યવહારમાં મૂકવા સિવાય બીજું કંઈ તમને મદદ કરતું નથી, તેથી આગળ વધો, તમારા મનને ચાલુ કરો અને તેને શક્ય બનાવો.

લેખનો અનુવાદ EDISON સૉફ્ટવેરના સમર્થન સાથે કરવામાં આવ્યો હતો, જે મલ્ટિ-બ્રાન્ડ સ્ટોર્સ માટે વર્ચ્યુઅલ ફિટિંગ રૂમ બનાવે છે, અને પરીક્ષણ સોફ્ટવેર.

પ્રતિક્રિયા સાથે મૂવી શોધ એપ્લિકેશન (હુક્સ સાથે)

તમે જે પ્રથમ વસ્તુ સાથે પ્રારંભ કરી શકો છો તે છે પ્રતિક્રિયા સાથે મૂવી શોધ એપ્લિકેશન બનાવવી. અંતિમ એપ્લિકેશન કેવી દેખાશે તેની નીચે એક છબી છે:

તમે શું શીખીશું
આ એપ્લિકેશન બનાવીને, તમે પ્રમાણમાં નવા Hooks API નો ઉપયોગ કરીને તમારી પ્રતિક્રિયા કૌશલ્યમાં સુધારો કરશો. નમૂના પ્રોજેક્ટ પ્રતિક્રિયા ઘટકો, ઘણાં બધાં હૂક, એક બાહ્ય API અને અલબત્ત કેટલીક CSS સ્ટાઇલનો ઉપયોગ કરે છે.

ટેક સ્ટેક અને લક્ષણો

• હુક્સ સાથે પ્રતિક્રિયા આપો
• બનાવો-પ્રતિક્રિયા-એપ્લિકેશન
• જેએસએક્સ
• સીએસએસ

કોઈપણ વર્ગોનો ઉપયોગ કર્યા વિના, આ પ્રોજેક્ટ્સ તમને કાર્યાત્મક પ્રતિક્રિયામાં સંપૂર્ણ પ્રવેશ બિંદુ આપે છે અને 2020 માં ચોક્કસપણે તમને મદદ કરશે. તમે શોધી શકો છો નમૂના પ્રોજેક્ટ અહીં. સૂચનાઓને અનુસરો અથવા તેને તમારી પોતાની બનાવો.

Vue સાથે ચેટ એપ્લિકેશન

તમારા માટે અન્ય એક મહાન પ્રોજેક્ટ મારી મનપસંદ JavaScript લાઇબ્રેરીનો ઉપયોગ કરીને ચેટ એપ્લિકેશન બનાવવાનો છે: VueJS. એપ્લિકેશન આના જેવી દેખાશે:

તમે શું શીખીશું
આ ટ્યુટોરીયલમાં, તમે શરૂઆતથી Vue એપ્લિકેશન કેવી રીતે બનાવવી તે શીખી શકશો - ઘટકો બનાવો, સ્ટેટ્સ હેન્ડલ કરો, રૂટ્સ બનાવો, તૃતીય-પક્ષ સેવાઓ સાથે કનેક્ટ કરો અને પ્રમાણીકરણને પણ હેન્ડલ કરો.

ટેક સ્ટેક અને લક્ષણો

• વ્યુ
• vuex
• Vue રાઉટર
• Vue CLI
• પુશેર
• સીએસએસ

Vue સાથે પ્રારંભ કરવા અથવા 2020 માં વિકાસમાં જવા માટે તમારી હાલની કુશળતા સુધારવા માટે આ ખરેખર એક મહાન પ્રોજેક્ટ છે. તમે શોધી શકો છો ટ્યુટોરીયલ અહીં.

કોણીય 8 સાથે સુંદર હવામાન એપ્લિકેશન

આ ઉદાહરણ તમને કોણીય 8 નો ઉપયોગ કરીને સુંદર હવામાન એપ્લિકેશન બનાવવામાં મદદ કરશે:

તમે શું શીખીશું
આ પ્રોજેક્ટ તમને શરૂઆતથી એપ્લીકેશન બનાવવા માટે મૂલ્યવાન કૌશલ્યો શીખવશે - ડિઝાઇનથી ડેવલપમેન્ટ સુધી, દરેક રીતે તૈયાર-થી-જમાવટ એપ્લિકેશન સુધી.

ટેક સ્ટેક અને લક્ષણો

• કોણીય 8
• ફાયરબેઝ
• સર્વર સાઇડ રેન્ડરીંગ
• ગ્રીડ અને ફ્લેક્સબોક્સ સાથે CSS
• મોબાઇલ મૈત્રીપૂર્ણ અને અનુકૂલનક્ષમતા
• ડાર્ક મોડ
• સુંદર ઈન્ટરફેસ

આ વ્યાપક પ્રોજેક્ટ વિશે મને ખરેખર જે ગમે છે તે એ છે કે તમે એકલતામાં વસ્તુઓનો અભ્યાસ કરતા નથી. તેના બદલે, તમે ડિઝાઇનથી અંતિમ જમાવટ સુધીની સમગ્ર વિકાસ પ્રક્રિયા શીખો.

Svelte સાથે ટુ-ડૂ એપ્લિકેશન

સ્વેલ્ટ એ ઘટક અભિગમમાં નવા બાળક જેવું છે - ઓછામાં ઓછું પ્રતિક્રિયા, Vue અને કોણીય જેવું જ છે. અને આ 2020 માટે સૌથી ગરમ નવા ઉત્પાદનોમાંનું એક છે.

ટૂ-ડૂ એપ્લિકેશન્સ એ સૌથી ગરમ વિષય હોય તે જરૂરી નથી, પરંતુ તે ખરેખર તમારી સ્વેલ્ટ કુશળતાને સુધારવામાં મદદ કરશે. તે આના જેવો દેખાશે:

તમે શું શીખીશું
આ ટ્યુટોરીયલ તમને બતાવશે કે Svelte 3 સાથે એપ્લિકેશન કેવી રીતે બનાવવી, શરૂઆતથી અંત સુધી. તમે ઘટકો, સ્ટાઇલ અને ઇવેન્ટ હેન્ડલર્સનો ઉપયોગ કરશો

ટેક સ્ટેક અને લક્ષણો

• સ્વેલ્ટ 3
• ઘટકો
• CSS સાથે સ્ટાઇલ
• સિન્ટેક્સ ES6

ત્યાં ઘણા સારા Svelte સ્ટાર્ટર પ્રોજેક્ટ નથી, તેથી મને મળી શરૂ કરવા માટે આ એક સારી જગ્યા છે.

Next.js સાથે ઈકોમર્સ એપ્લિકેશન

Next.js એ રિએક્ટ એપ્સ બનાવવા માટેનું સૌથી લોકપ્રિય માળખું છે જે સર્વર-સાઇડ રેન્ડરિંગને બૉક્સની બહાર સપોર્ટ કરે છે.

આ પ્રોજેક્ટ તમને બતાવશે કે ઈ-કોમર્સ એપ્લિકેશન કેવી રીતે બનાવવી જે આના જેવી લાગે છે:

તમે શું શીખીશું
આ પ્રોજેક્ટમાં, તમે Next.js સાથે કેવી રીતે વિકાસ કરવો તે શીખી શકશો—નવા પૃષ્ઠો અને ઘટકો બનાવો, ડેટા પુનઃપ્રાપ્ત કરો અને શૈલી અને નેક્સ્ટ એપ્લિકેશનનો ઉપયોગ કરો.

ટેક સ્ટેક અને લક્ષણો

• Next.js
• ઘટકો અને પૃષ્ઠો
• ડેટા સેમ્પલિંગ
• શૈલીકરણ
• પ્રોજેક્ટ જમાવટ
• SSR અને SPA

કંઈક નવું શીખવા માટે ઈ-કૉમર્સ ઍપ જેવું વાસ્તવિક જીવનનું ઉદાહરણ હોવું હંમેશા ઉત્તમ છે. તમે કરી શકો છો અહીં ટ્યુટોરીયલ શોધો.

Nuxt.js સાથે સંપૂર્ણ બહુભાષી બ્લોગ

Nuxt.js Vue માટે છે, જેમ કે Next.js રિએક્ટ માટે છે: સર્વર-સાઇડ રેન્ડરિંગ અને સિંગલ-પેજ એપ્લીકેશનને સંયોજિત કરવા માટે એક સરસ માળખું
તમે જે છેલ્લી એપ્લિકેશન બનાવી શકો છો તે આના જેવી દેખાશે:

તમે શું શીખીશું

આ નમૂના પ્રોજેક્ટમાં, તમે પ્રારંભિક સેટઅપથી અંતિમ જમાવટ સુધી, Nuxt.js નો ઉપયોગ કરીને સંપૂર્ણ વેબસાઇટ કેવી રીતે બનાવવી તે શીખી શકશો.

તે ઘણી બધી શાનદાર સુવિધાઓનો લાભ લે છે જે Nuxt ઓફર કરે છે, જેમ કે પૃષ્ઠો અને ઘટકો અને SCSS સાથે સ્ટાઇલ.

ટેક સ્ટેક અને લક્ષણો

• ન્યુક્સ્ટ.જેએસ
• ઘટકો અને પૃષ્ઠો
• સ્ટોરીબ્લોક મોડ્યુલ
• મિક્સિન્સ
• રાજ્ય વ્યવસ્થાપન માટે Vuex
• સ્ટાઇલ માટે SCSS
• Nuxt મિડલવેર

આ ખરેખર સરસ પ્રોજેક્ટ છે., જેમાં Nuxt.js ની ઘણી મહાન સુવિધાઓનો સમાવેશ થાય છે. મને અંગત રીતે Nuxt સાથે કામ કરવાનું પસંદ છે તેથી તમારે તેને અજમાવી જુઓ કારણ કે તે તમને એક મહાન Vue ડેવલપર પણ બનાવશે.

ગેટ્સબી સાથે બ્લોગ

ગેટ્સબી એ રીએક્ટ અને ગ્રાફક્યુએલનો ઉપયોગ કરીને એક ઉત્તમ સ્ટેટિક સાઇટ જનરેટર છે. આ પ્રોજેક્ટનું પરિણામ છે:

તમે શું શીખીશું

આ ટ્યુટોરીયલમાં, તમે ગેટ્સબીનો ઉપયોગ બ્લોગ બનાવવા માટે કેવી રીતે કરવો તે શીખીશું જેનો ઉપયોગ તમે React અને GraphQL નો ઉપયોગ કરીને તમારા પોતાના લેખો લખવા માટે કરશો.

ટેક સ્ટેક અને લક્ષણો

• ગેટ્સબી
• પ્રતિક્રિયા
• ગ્રાફક્યુએલ
• પ્લગઇન્સ અને થીમ્સ
• MDX/માર્કડાઉન
• બુટસ્ટ્રેપ CSS
• દાખલાઓ

જો તમે ક્યારેય બ્લોગ શરૂ કરવા માંગતા હો, આ એક મહાન ઉદાહરણ છે React અને GraphQL નો ઉપયોગ કરીને તેને કેવી રીતે બનાવવું.

હું એમ નથી કહેતો કે વર્ડપ્રેસ એ ખરાબ પસંદગી છે, પરંતુ ગેટ્સબી સાથે તમે રિએક્ટનો ઉપયોગ કરીને ઉચ્ચ પ્રદર્શન વેબસાઇટ્સ બનાવી શકો છો - જે એક અદ્ભુત સંયોજન છે.

Gridsome સાથે બ્લોગ

Vue માટે ગ્રિડસમ... ઠીક છે, અમારી પાસે તે પહેલાથી જ નેક્સ્ટ/નક્સ્ટ સાથે હતું.
પરંતુ તે જ ગ્રિડસમ અને ગેટ્સબી માટે સાચું છે. બંને તેમના ડેટા સ્તર તરીકે GraphQL નો ઉપયોગ કરે છે, પરંતુ Gridsome VueJS નો ઉપયોગ કરે છે. તે એક અદ્ભુત સ્થિર સાઇટ જનરેટર પણ છે જે તમને ઉત્તમ બ્લોગ્સ બનાવવામાં મદદ કરે છે:

તમે શું શીખીશું

આ પ્રોજેક્ટ તમને શીખવશે કે Gridsome, GraphQL અને Markdown સાથે પ્રારંભ કરવા માટે એક સરળ બ્લોગ કેવી રીતે બનાવવો. તે Netlify દ્વારા એપ્લિકેશન કેવી રીતે જમાવવી તે પણ સમજાવે છે.

ટેક સ્ટેક અને લક્ષણો

• ગ્રિડસમ
• વ્યુ
• ગ્રાફક્યુએલ
• માર્કડાઉન
• નેટલાઈફ કરો

આ ચોક્કસપણે સૌથી સંપૂર્ણ ટ્યુટોરીયલ નથી, પરંતુ તે ગ્રિડસમ અને ની મૂળભૂત વિભાવનાઓને આવરી લે છે માર્કડાઉન અને એક સારો પ્રારંભિક બિંદુ બની શકે છે.

Quasar નો ઉપયોગ કરીને SoundCloud જેવું જ ઓડિયો પ્લેયર

ક્વાસર એ અન્ય Vue ફ્રેમવર્ક છે જેનો ઉપયોગ મોબાઇલ એપ્સ બનાવવા માટે થઈ શકે છે. આ પ્રોજેક્ટમાં, તમે ઑડિઓ પ્લેયર એપ્લિકેશન બનાવશો, ઉદાહરણ તરીકે:

તમે શું શીખીશું

જ્યારે અન્ય પ્રોજેક્ટ્સ મોટાભાગે વેબ એપ્સ પર ધ્યાન કેન્દ્રિત કરે છે, ત્યારે આ તમને બતાવશે કે Vue અને Quasar ફ્રેમવર્કનો ઉપયોગ કરીને મોબાઇલ એપ્લિકેશન કેવી રીતે બનાવવી.
તમારી પાસે એન્ડ્રોઇડ સ્ટુડિયો/એક્સકોડ સેટઅપ સાથે વર્કિંગ કોર્ડોવા પહેલેથી જ હોવું જોઈએ. જો નહિં, તો મેન્યુઅલમાં Quasar વેબસાઇટની લિંક છે જ્યાં તેઓ તમને બધું કેવી રીતે સેટ કરવું તે બતાવે છે.

ટેક સ્ટેક અને લક્ષણો

• ક્વાસર
• વ્યુ
• કોર્ડોવા
• વેવસર્ફર
• UI ઘટકો

નાનો પ્રોજેક્ટ, મોબાઇલ એપ્લીકેશન બનાવવા માટે ક્વાસારની ક્ષમતાઓનું નિદર્શન.

સોર્સ: www.habr.com