idadhamz / gg-homework-2021

Repository Project Homework Pada Frontend Track Bisa Group, Generasi Gigih 2021 (Intermediate Class)

Spotify Web App Clone 👋

Apa deskripsi dari Spotify Web App Clone ini? 🤔

Website ini adalah website yang menyerupai fungsi dari platform layanan musik digital SPOTIFY dimana pengguna dapat menggunakan website ini untuk menghasilkan playlist musik sendiri. Playlist nya bisa disesuaikan dengan keinginan kalian sesuai dengan preferensi kegiatan yang dilakukan untuk meningkatkan mood dan perasaan senang ketika belajar, bekerja dan lainnya.

Ini adalah Hasil Web App dari proses perjalanan belajar saya di kegiatan Generasi Gigih 2021 yang diselenggarakan oleh Gojek dan Yayasan Anak Bangsa Bisa (YABB) dan bersyukur banget bisa mengikuti dan berpartisipasi secara maksimal di kelas teknikal, kelas bahasa inggris dan kelas soft skill (Melalui Seminar XL Future Leader)

Terima kasih banyak atas kesempatan kegiatannya, awesome experience for me Gojek dan Yayasan Anak Bangsa Bisa (YABB) 🙏🥰

Apa saja spesifikasi teknologi pada Spotify Web App Clone ini? 🤔

Website ini dibangun menggunakan React JS, Library Redux, Chakra UI dan lainnya. Berikut daftar detailnya yaa ⬇️

• React JS version 17.0.2 untuk membangun Web App ini
• React Redux version 7.2.4 library untuk pengelolaan data dan implementasi dari global state
• React Router DOM version 5.2.0 library untuk pengelolaan routing dan perpindahan page pada Web App
• Axios version 0.21.1 library untuk Promise-based HTTP client pada JavaScript ketika melakukan pemanggilan Endpoint API
• Chakra UI React version 1.6.5 UI Component Library untuk mempercepat dan mempersingkat proses development tampilan interface pada Web App
• Typescript version 4.3.5 library typed superset of JavaScript yang dapat dicompiles pada plain JavaScript untuk memperbaiki struktur, keamanan serta maintainable dari kode aplikasi yang kita buat
• React Hook Form version 7.12.2 library untuk memvalidasi masukan (input) pengguna ketika melakukan pembuatan Playlist

Problem yang dirasakan saat pengembangan Web App ini? 🤔

1. Sisi Teknikal
   1. Keterbatasan pengetahuan fundamental pada Javascript dan implementasi dari Typescript
   2. Pengalaman pertama membangun Web App dari scratch dan menggunakan API Public dari SPOTIFY
   3. Pengetahuan Typescript yang masih sangat terbatas jadi harus tambah semangat untuk mempelajarinya
2. Sisi Implementasi React JS
   1. Analisa struktur folder dan kode yang efisien dan tepat
   2. Penulisan (naming) variable, components dan function yang baik dan harus konsisten untuk memudahkan pengembangannya
   3. Fitur yang diberikan sangat challanging dan membutuhkan analisa yang baik dari implementasi UInya, proses perpindahan datanya dan components mana yang harus reusable
   4. Kesulitan ketika memulai implementasi Typescript karena banyak hal baru yang baru saya ketahui dan belum tahu implementasi yang baik dan tepat untuk studi kasus kode yang saya bangun
   5. Kesulitan melakukan testing dari sisi front end menggunakan React Testing Library, Mock API dan JEST. Karena kita harus membuat suatu test case dan menyerupai kondisi asli dari web app yang dibangun dalam file Testnya.

List Features pada Web App ini? 🤔

Main Features

• Fitur Login menggunakan akun Spotify sendiri yang akan menghasilkan Kode Akses
• Fitur Mencari Track Song dengan menuliskan kata atau kalimat yang berhubungan dengan Track Song tersebut
• Fitur Select dan Deselect Track Song sesuai dengan Preferensi Track yang kita inginkan.
• Fitur Membuat Playlist dari Track yang telah dipilih sebelumnya

Additional Features

• Fitur melihat daftar Playlist dari pengguna yang telah dibuat sebelumnya
• Fitur melihat daftar Track Song dari Playlist pengguna yang ingin dilihat, seperti data:
  • Judul
  • Album
  • Durasi Lagu
  • Button Play lagu ➡️ langsung mengakses Track lagu yang ingin dimainkan pada aplikasi SPOTIFY
• Fitur menampilkan data pengguna (Nama dan Foto Profil Pengguna)
• Fitur Unfollow (Hapus) Playlist Pengguna

How To Run Web App ini? 🤔

1. Pertama kalian bisa melakukan cloning Web App ini menggunakan URL berikut https://github.com/idadhamz/generasi-gigih-homework.git
2. Mengakses kode Web App di Visual Studio Code dan membuka Terminal (Command Prompt)
3. Lakukan installasi modules (akan muncul folder node_modules) yang digunakan pada Web App ini dengan menjalankan NPM INSTALL atau YARN ADD
4. Setelah melakukan installasi, buat file dengan nama .env.local sebagai lokasi environment SPOTIFY ID, SPOTIFY KEY dan BASE URL kemudian isi sesuai dengan SPOTIFY API ID, KEY akun DEVELOPER API SPOTIFY pengguna anda dan BASE URL contohnya domain anda atau localhost yaitu localhost:3000
5. Jalankan Web App pada server LOCAL dengan menjalankan NPM RUN START atau YARN START dan tunggu hingga proses running di server local berhasil. Kemudian akses localhost:3000 atau port lain sesuai dengan hasil runningnya.

dan taraa Web App berhasil dijalankan pada server local hingga tampil seperti contoh dibawah ini ⬇️

Hasil Web App Spotify Clone Link Website

The Last, Conclusion 🥰

Web App Spotify Clone ini masih terus dilakukan pengembangan dan tambahan tentang penulisan kode yang baik dan efektif juga penambahan fitur yang lebih lengkap dan kompleks.

Terbuka untuk pengembangan Open Source juga jika kalian ⬇️

• Menemukan error atau bugs
• Refactor code dengan menerapkan Clean Code yang lebih baik
• Atau ingin adanya tambahan feature yang kalian perlukan

Pertanyaan lebih lanjut terkait project Web App ini atau hal lain dapat contact saya melalui 🌐 Personal Website ya 🙌🙏

Feedback

Any feedback is welcome, you can sumbit issues/feedback here.

License

Licensed under MIT License, Copyright (c) 2021 Dadi Ilham S