Menu Close

skilvul-TPA-004

Front End Web Dev Stage

Technical Project Assignment (TPA) #4 – Personal Website with React.js

Pada TPA-001 kalian sudah diminta untuk membuat personal website dengan menggunakan HTML dan CSS. Pada TPA-004 kalian diminta untuk membuat personal website dengan menggunakan React.js.

Catatan: Refactor TPA-001 dengan React.js bukan berarti hanya mengubah HTML dan CSS menjadi React.js. Kalian harus memahami konsep React.js dan memanfaatkan fitur-fitur React.js yang ada seperti reusable component, state, props, dan lain-lain.

Specs

  • Buatlah website personal seperti yang telah kamu buat pada TPA-001 menggunakan React.js dan React Router 6
  • Wajib menggunakan functional component
  • Wajib menggunakan react hooks
  • Ubahlah layout atau tampilan menjadi component. Setiap UI yang akan digunakan pada page lain, wajib dijadikan component. Jika tidak ada, buatlah beberapa UI Component yang digunakan di beberapa halaman.
  • Component yang dibuat harus bervariasi dan salah satu/lebih harus memiliki props
  • Harus membuat section Layout sebagai component
  • Halaman website minimum terdiri dari 4 halaman yaitu:
    • Homepage
    • About Page
    • Portfolio Page/Skills Page
    • Blog/Articles Page
  • Konten dan desain bersifat fleksibel mengikuti kreatifitas dan kebutuhan peserta
  • Publish source code yang telah dibuat pada Repository GitHub
  • Deploy aplikasi website menggunakan Netlify atau Vercel dan integrasikan dengan Repository GitHub
  • Pastikan Repository GitHub dan Link Website dapat diakses secara publik

Referensi

Berikut beberapa referensi personal website yang dapat kamu jadikan contoh dalam tahap development:

Penilaian

Penilaian akan dilakukan dari beberapa hal:

  1. Kode React.js yang terorganisasi dengan baik
  2. Pemahaman dan implementasi component
  3. Pemahaman dan penggunaan terhadap functional component, props & state, styling pada react, react hooks, dan proptypes.
  4. Pemahaman dan penggunaan React Router 6
  5. Website sudah responsive
  6. Jumlah halaman website yang sesuai
  7. Konten yang sesuai dengan setiap peserta. Tidak boleh menggunakan konten dummy.
  8. Kemampuan peserta menggunakan Git & GitHub
  9. Kemampuan peserta dalam mendeploy aplikasi website

Good luck!

View Source Code
Posted in Development