ไม่ว่าคุณจะเป็น Junior Developer หรือ Developer ที่อยากจะสร้าง Project ใหม่ ๆ ไว้ใน Portfolio เพื่อไว้สมัครงาน หรือเพื่อเรียนรู้และพัฒนาตนเอง บทความนี้ได้รวบรวม Tutorials สอนตั้งแต่เริ่มต้น และแนะนำเทคโนโลยีที่จะใช้ในการสร้าง ให้คุณแบบฟรี ๆ กับ 5 Free Project-Based Tutorials สำหรับ Developer มาเริ่มกันเลย
1. Portfolio Website
Portfolio Website เป็นหนึ่งใน Projects ที่มีประโยชน์และสำคัญมาก เป็นหนึ่งใน Website ที่คุณควรสร้างในขณะที่คุณกำลังเริ่มเรียนรู้ Web Development และ Portfolio Website ก็เปรียบเหมือน Projects ไว้เปิดเผยตัวตนของคุณสู่โลก Online อย่างแท้จริง
ข้อดี ของ Portfolio Website
- นายจ้างสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับคุณ Project ต่าง ๆ ของคุณ รวมถึง Skills และประสบการณ์การทำงาน เป็นต้
- บริษัทต่าง ๆ สามารถดู Profile ของคุณ เพื่อใช้ประกอบการพิจารณาว่าตรงกับ Job Role ที่กำลังเปิดรับสมัครอยู่ได้
- Developer คนอื่น ๆ สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับคุณ เพื่อตัดสินใจทำ Project หรือทำงานร่วมกันได้
ยังมีข้อดีอื่น ๆ อีกมากมาย
วิธีสร้าง Portfolio Website
วิดีโอนี้จะช่วยคุณในการสร้าง Portfolio Website และ Deploy มันใน AWS (Amazon Web Service)
- Build a Portfolio Website & Deploy คลิกดูวิดีโอ
เทคโนโลยีที่ใช้: HTML, CSS, JavaScript และ AWS
Source code: https://github.com/divanov11/portfolio-website
2. Blog Website
ในการสร้าง Blog มีเทคโนโลยีต่าง ๆ ให้เลือกใช้หลายตัว ไม่ว่าจะเป็น MERN (MongoDB, Express, React และ Node) Stack หรือ WordPress ซึ่งการสร้าง Blog Website ด้วย WordPress น่าจะเป็นตัวเลือกที่ง่าย แต่หากคุณต้องการเรียนรู้ตั้งแต่เริ่มต้น รวมถึงเรียนรู้การใช้งาน CRUD (Create, Read, Update และ Delete) จึงขอแนะนำ Lama Dev
วิธีสร้าง Blog Website
ที่ Lama Dev จะสอนคุณสร้าง Blog Website ด้วย MERN Stack และมี Tutorial แบ่งออกเป็น 3 ตอน ดังนี้
- วิธีสร้าง Front-end คลิกดูวิดีโอ
- วิธีสร้าง Back-end คลิกดูวิดีโอ
- การเชื่อมต่อ Front-end กับ Back-end คลิกดูวิดีโอ
เทคโนโลยีที่ใช้: React, Node, Express และ MongoDB
Source code: https://github.com/safak/youtube/tree/mern-blog-app
3. Amazon Clone with Firebase
การสร้าง E-commerce Store อย่าง Amazon คงเป็นสิ่งที่หลายคนอยากจะทำ และที่ Clever Programmer ก็เป็นแหล่งให้ความรู้ ที่จะสามารถช่วยคุณให้สร้างมันขึ้นมาได้
วิธีสร้าง Amazon Clone with Firebase
วิดีโอจะสอนคุณให้สร้าง E-commerce Functionality App แบบเต็มรูปแบบ ประกอบด้วย Accounts และ Login Page, Cart และ Checkout Page, Real Payments รวมถึง Order History Page
- วิดีโอสร้าง Amazon Clone คลิกดูวิดีโอ
- คู่มือสร้าง Amazon Clone คลิกอ่านบทความ
เทคโนโลยีที่ใช้: React และ Firebase
4. Social Media React App
จนถึงตรงนี้ คุณคงได้เรียนรู้การสร้าง Portfolio Website, Blog Website รวมถึง E-commerce Website ไปแล้ว
แต่ทุกวันนี้ เราทุกคนต่างก็ใช้ Social Media กันเป็นส่วนใหญ่ ดังนั้น จึงพลาดไม่ได้ที่จะสร้าง Social Media App ขึ้นมา
วิธีสร้าง Social Media React App
Login, Sign Up, Dashboard (สำหรับ View / Like / Comment) และ User Profiles ซึ่งคุณจะได้เรียนรู้วิธีการ Deploy ขึ้น Vercel
- Instagram Clone – React Tutorial คลิกดูวิดีโอ
เทคโนโลยีที่ใช้: React, Firebase, Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library และ Cypress E2E Testing
Source code: https://github.com/karlhadwen/instagram
5. React Admin Dashboard
หากคุณเคยมีประสบการณ์สร้าง Dashboard คุณอาจจะต้องเสียเวลาไปกับการเรียนรู้ Apex Chart, Chart.js และ Charts Documentation อื่น ๆ เพื่อที่จะนำไปสร้าง Chart ต่าง ๆ บน Dashboard
วิธีสร้าง React Admin Dashboard
Lama Dev จะช่วยให้คุณเข้าใจ Concepts ต่าง ๆ ในการสร้าง Admin Dashboard ได้
- React Admin Dashboard Tutorial คลิกดูวิดีโอ
เทคโนโลยีที่ใช้: React, Material-UI และ Chart
Source code: https://github.com/safak/youtube/tree/react-admin
และทั้งหมดนี้คือ 5 Free Project-Based Tutorials สำหรับ Developer ที่จะช่วยให้คุณได้เรียนรู้และพัฒนาตนเอง แถมได้มี Project ใหม่ ๆ ไว้ใส่ใน Portfolio อีกด้วย หวังว่าบทความนี้จะมีประโยชน์และช่วยให้คุณได้ทำงานที่ใช่กับบริษัทที่ชอบนะคะ
หากคุณกำลังหางานในสายงานไอที สามารถสมัครงานผ่านเว็บไซต์ ISM Technology Recruitment หรือสามารถส่ง Resume ของคุณ มาที่ https://www.ismtech.net/submit-your-resume แล้วคุณจะพบว่าอนาคตและโอกาสก้าวหน้ากำลังรอคุณอยู่
ISM เชี่ยวชาญในธุรกิจ IT Recruitment & IT Outsourcing โดยเฉพาะ เปิดทำการมากว่า 30 ปี มีพนักงานทุกสายและทุกระดับทางด้าน IT ที่ได้ร่วมงานกับลูกค้าองค์กรใหญ่ที่มีชื่อเสียงและบริษัทข้ามชาติมากมาย
Source: https://javascript.plainenglish.io/