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:
- https://jeffjadulco.com/
- https://zeller.io/
- https://www.danielballoch.com/
- https://www.thomasmaximini.com/
- https://chrisnager.com/
- https://www.lukyprimadani.com/
- https://www.crissyw.com/
Penilaian
Penilaian akan dilakukan dari beberapa hal:
- Kode React.js yang terorganisasi dengan baik
- Pemahaman dan implementasi component
- Pemahaman dan penggunaan terhadap functional component, props & state, styling pada react, react hooks, dan proptypes.
- Pemahaman dan penggunaan React Router 6
- Website sudah responsive
- Jumlah halaman website yang sesuai
- Konten yang sesuai dengan setiap peserta. Tidak boleh menggunakan konten dummy.
- Kemampuan peserta menggunakan Git & GitHub
- Kemampuan peserta dalam mendeploy aplikasi website
Good luck!