บทความ IT เจ๋งๆ

9 Projects ที่คุณสามารถใช้ฝึกฝนให้เก่ง Front-End ยิ่งขึ้น

21-ธ.ค.-22

คัมภีร์เทพ IT

ไม่ว่าคุณจะเพิ่งเริ่มเขียน Program หรือเป็น Developer ที่มีประสบการณ์อยู่แล้ว การเรียนรู้ Concept รวมทั้งภาษา/Frameworks ใหม่ ๆ ก็ถือว่าจำเป็นเพื่อให้ทันกับการเปลี่ยนแปลงอย่างรวดเร็ว ดังนั้นการลองทำ Projects ต่าง ๆ จะช่วยให้คุณได้เรียนรู้บางอย่างได้ และนี่ก็เป็น 9 Projects ที่คุณสามารถใช้ฝึกฝนให้เก่ง Front-End ยิ่งขึ้น

1. สร้าง Movie-Search App โดยใช้ React (พร้อมทั้ง Hooks)

คุณสามารถเริ่มต้นด้วยการสร้าง App สำหรับค้นหาภาพยนตร์โดยใช้ React โดยด้านล่างนี้เป็นหน้าตาของ App เมื่อเสร็จแล้ว:

สิ่งที่คุณจะได้เรียนรู้:

ในการสร้าง Application นี้ คุณจะได้พัฒนาทักษะ React ของคุณโดยใช้ Hooks API ที่ค่อนข้างใหม่ ใน Project ตัวอย่างนี้ ใช้ React Components, Hooks, External API และแน่นอนว่า Styling บางอย่างผ่าน CSS

Tech Stack และ Features:

  • React with Hooks
  • Create-React-App
  • JSX
  • CSS

คุณไม่ต้องใช้ Classes ใด ๆ เลย Project นี้จะช่วยให้คุณมีจุดเริ่มต้นที่ดีในการใช้ Functional React และมันจะช่วยคุณได้อย่างแน่นอนในปี 2023 นี้

คุณสามารถค้นหา Projects ตัวอย่างได้ที่นี่ และทำตาม Tutorial ได้เลย

2. สร้าง Chat App ด้วย Vue

อีกหนึ่ง Project ที่ยอดเยี่ยมสำหรับคุณ ก็คือการสร้าง Chat App โดยใช้ VueJS

หน้าตาของ App จะมีลักษณะดังนี้:

สิ่งที่คุณจะได้เรียนรู้:

เมื่อทำตาม Tutorial นี้ คุณจะได้เรียนรู้วิธี Set up Vue App ตั้งแต่เริ่มต้น การสร้าง Components, การจัดการ States, การสร้าง Routes, การ Connect กับ 3rd Party Service และแม้กระทั่งการจัดการกับ Authentication

Tech Stack และ Features:

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

นี่เป็น Project ที่ยอดเยี่ยมในการเริ่มต้นใช้งาน Vue หรือเพื่อพัฒนาทักษะที่มีอยู่ของคุณ เพื่อรับมือกับการ Develop ในปี 2023

คุณสามารถหา Tutorial ได้จากที่นี่

3. สร้าง Weather App ที่สวยงามด้วย Angular 8

ตัวอย่างนี้ จะช่วยคุณสร้าง App เกี่ยวกับสภาพอากาศที่สวยงามโดยใช้ Angular 8

สิ่งที่คุณจะได้เรียนรู้:

Project นี้ จะช่วยสอนทักษะที่มีประโยชน์ให้กับคุณในขณะที่สร้าง Application ตั้งแต่เริ่มต้น โดยเริ่มตั้งแต่การ Design ผ่านการ Develop ไปจนถึงการ Deploy ที่พร้อมสำหรับ Production

Tech Stack และ Features:

  • Angular 8
  • Firebase
  • Server-side Rendering
  • CSS พร้อมกับ Grid Layout และ Flexbox
  • Mobile Friendly และ Responsive
  • Dark Mode
  • UI ที่สวยงาม

สิ่งที่ดีสำหรับ Project ที่ครอบคลุมนี้ก็คือ คุณไม่ได้เรียนรู้สิ่งต่าง ๆ อย่างใดอย่างหนึ่ง แต่คุณจะได้เรียนรู้ Development Process ทั้งหมด ตั้งแต่การ Design ไปจนถึงการ Deploy ขั้นสุดท้าย

คุณสามารถเรียนรู้ได้จากที่นี่

4. สร้าง To-Do App ด้วย Svelte

Svelte ถือเป็น Framework น้องใหม่ (อย่างน้อยก็เมื่อเทียบกับ React, Vue และ Angular) อย่างไรก็ตาม มันเป็นหนึ่งในเครื่องมือที่น่าจับตามองในปี 2023 นี้

แม้ To-Do App อาจจะไม่ใช่สิ่งใหม่หรือเรื่องที่ร้อนแรงในช่วงนี้ แต่อย่างน้อย สิ่งนี้จะช่วยให้คุณได้ฝึกฝนทักษะเกี่ยวกับ Svelte ได้อย่างแท้จริง โดยมันจะมีลักษณะดังนี้:

สิ่งที่คุณจะได้เรียนรู้:

Tutorial นี้ จะแสดงวิธีสร้าง App โดยใช้ Svelte 3 ตั้งแต่ต้นจนจบ โดยมันจะใช้ทั้ง Components, Styling และ Event Handlers

Tech Stack และ Features:

  • Svelte 3
  • Components
  • Styling ผ่าน CSS
  • ES 6 Syntax

มี Project ดี ๆ ที่ใช้ Svelte ไม่มากนัก ดังนั้น นี่น่าจะเป็น Projects ที่ดีที่คุณจะเริ่มต้นทำ คุณสามารถเรียนรู้ได้จากที่นี่ 

และใครจะรู้ บางทีวันหนึ่งคุณอาจจะเป็นคนสร้าง Svelte Tutorial ที่ครอบคลุมมากขึ้นก็ได้

5. สร้าง E-Commerce Shopping Cart ด้วย Next.js

Next.js เป็น Framework ยอดนิยมสำหรับการสร้าง React Applications ที่รองรับ Server-Side Rendering

ใน Project นี้ จะแสดงให้เห็นถึงวิธีสร้าง E-Commerce Shopping Cart ที่มีลักษณะดังนี้:

สิ่งที่คุณจะได้เรียนรู้:

ใน Project นี้ คุณจะได้เรียนรู้วิธีการ Set up Environment สำหรับ Next.js Development ไม่ว่าจะเป็นการสร้าง Pages และ Components ใหม่, การ Fetch Data และ Styling รวมทั้งการ Deploy Next Application 

Tech Stack และ Features:

  • Next.js
  • Components และ Pages
  • Data Fetching
  • Styling
  • Deployment
  • SSR และ SPA

การมีตัวอย่างที่มีการใช้งานกันจริง ๆ อย่างเช่น E-Commerce Website จะช่วยให้คุณได้เรียนรู้สิ่งใหม่ ๆ โดยคุณสามารถดู Tutorial ได้ที่นี่

6. สร้าง Multilanguage Blog Website ด้วย Nuxt.js

Nuxt.js เป็น Framework ที่เขียนด้วย Vue ซึ่งเป็น Framework ที่ยอดเยี่ยมในการรวมพลังกันของ Server-Side Rendering และ Single-Page Applications

App ที่คุณสามารถสร้างได้ จะมีลักษณะดังนี้:

สิ่งที่คุณจะได้เรียนรู้:

ใน Project ตัวอย่างนี้ จะสอนวิธีสร้าง Website เต็มรูปแบบโดยใช้ Nuxt.js ตั้งแต่การ Set up ตั้งแต่ต้นไปจนถึงการ Deploy ขั้นสุดท้าย

มันใช้ Features เจ๋ง ๆ มากมายที่ Nuxt มีให้อยู่แล้ว เช่น Pages และ Components รวมถึงการใส่ Style ด้วย SCSS

Tech Stack และ Features:

  • Nuxt.js
  • Components และ Pages
  • Storyblok Module
  • Mixins
  • Vuex สำหรับ State Management
  • SCSS สำหรับ Styling
  • Nuxt Middlewares

นี่เป็น Project ที่ยอดเยี่ยมสำหรับคุณ และครอบคลุม Features ที่ยอดเยี่ยมมากมายของ Nuxt.js ดังนั้น คุณควรลองทำสิ่งนี้ เพราะมันจะช่วยให้คุณเป็น Vue Developer ที่เก่งขึ้นด้วย

7. สร้าง Blog ด้วย Gatsby

Gatsby เป็น Static-Site Generator ที่ยอดเยี่ยมซึ่งใช้ React และ GraphQL ที่ทำงานร่วมกัน และนี่ก็คือผลลัพธ์ของ Project นี้:

สิ่งที่คุณจะได้เรียนรู้:

ใน Tutorial นี้ คุณจะได้เรียนรู้วิธีใช้ประโยชน์จาก Gatsby เพื่อสร้าง Blog ที่โดดเด่นและน่าสนใจ ซึ่งคุณสามารถใช้สำหรับเขียนบทความของคุณในขณะที่ได้ฝึกใช้ React และ GraphQL ไปด้วยพร้อม ๆ กัน

Tech Stack และ Features:

  • Gatsby
  • React
  • GraphQL
  • Plugins และ Themes
  • MDX/Markdown
  • Bootstrap CSS
  • Templates

หากคุณเคยต้องการเริ่มต้นทำ Blog นี่เป็นตัวอย่างที่ดีของการใช้ประโยชน์จาก React และ GraphQL

นี่ไม่ได้หมายความว่า WordPress จะเป็นตัวเลือกที่ไม่ดี แต่ด้วย Gatsby คุณจะสามารถสร้าง Website ที่มีประสิทธิภาพสูงได้ในขณะที่ได้ฝึกใช้ React ไปด้วย ซึ่งถือเป็นการผสมผสานที่ยอดเยี่ยม

8. สร้าง Blog ด้วย Gridsome

เมื่อพูดถึง Gridsome ก็ทำให้นึกถึง Vue และมันก็เช่นเดียวกันสำหรับ Gridsome และ Gatsby เพราะพวกมันทั้งคู่ใช้ GraphQL เป็น Data Layer แต่ Gridsome ใช้ VueJS นอกจากนี้มันยังเป็น Static-Site Generator ที่ยอดเยี่ยมซึ่งจะช่วยให้คุณสามารถสร้าง Blog ที่ยอดเยี่ยมได้:

สิ่งที่คุณจะได้เรียนรู้:

ใน Project นี้ จะสอนวิธีสร้าง Blog อย่างง่าย เพื่อเริ่มต้นในการใช้งานทั้ง Gridsome, GraphQL และ Markdown

นอกจากนี้มันยังครอบคลุมถึงวิธีการ Deploy Application ผ่าน Netlify

Tech Stack และ Features:

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

แน่นอนว่า นี่อาจจะไม่ใช่ Tutorial ที่ครอบคลุมมากที่สุด แต่มันก็ครอบคลุม Concept พื้นฐานของ Gridsome และ Markdown รวมทั้งมันอาจเป็นจุดเริ่มต้นที่ดีในการฝึกฝนทักษะของคุณ

9. สร้าง Audio-Player App ที่คล้ายกับ SoundCloud ด้วย Quasar

Quasar เป็นอีกหนึ่ง Vue Framework ที่สามารถใช้สร้าง Mobile Applications ได้เช่นกัน

ใน Project นี้ คุณจะสร้าง Audio-Player App ได้ดังนี้:

สิ่งที่คุณจะได้เรียนรู้:

ในขณะที่ Project อื่น ๆ จะมีการมุ่งเน้นไปที่ Web Applications เป็นหลัก แต่ Project นี้จะแสดงถึงวิธีสร้าง Mobile App โดยใช้ Vue ผ่าน Quasar Framework

คุณควรมีการตั้งค่า Cordova ที่ใช้งานได้พร้อมทั้งกำหนดค่าของ Android Studio/Xcode ไว้อยู่แล้ว แต่หากยังไม่มี จะมี Link ใน Tutorial ไปยัง Quasar Website ซึ่งจะแสดงวิธีการตั้งค่านี้ไว้ให้แล้ว

Tech Stack และ Features:

  • Quasar
  • Vue
  • Cordova
  • WaveSurfer
  • UI Components

นี่เป็น Project ขนาดเล็ก ที่จะแสดงถึงพลังของ Quasar สำหรับการสร้าง Mobile Apps

ที่มา: https://levelup.gitconnected.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ