MyApp Belajar Next.js

MyApp — Next.js Learning & Feature Implementation MyApp adalah website pembelajaran dan implementasi berbagai fitur dalam pengembangan aplikasi web menggunakan Next.js. Website ini dibuat untuk mempelajari bagaimana berbagai teknologi dan fitur modern dapat diterapkan dalam satu aplikasi yang terintegrasi dan responsive. Website ini memiliki beberapa fitur utama, seperti Dashboard untuk menampilkan informasi dan statistik, Table Users untuk menampilkan data pengguna, serta fitur Image Process dan Sprite Image untuk mempelajari pengolahan dan optimasi gambar. Selain itu, terdapat Analytic Dashboard untuk menampilkan data secara lebih informatif, Penanganan Map untuk implementasi peta, serta beberapa fitur penyimpanan data seperti Web Storage, IndexedDB, dan Realtime Database. MyApp juga menerapkan optimasi media dengan gambar yang menggunakan lazy loading, konversi ke format WebP, serta penyesuaian ukuran gambar. Website ini mendukung galeri responsive, video YouTube dan video lokal dengan rasio 16:9, serta fitur Infinite Scroll Feed untuk menampilkan konten secara dinamis dan menarik.

Manajemen Magang

Manajemen Magang Manajemen Magang merupakan sebuah platform berbasis website yang dirancang untuk membantu sekolah dalam mengelola seluruh proses kegiatan Praktik Kerja Lapangan (PKL) atau magang siswa secara lebih terstruktur, terorganisir, dan efisien. Sistem ini dibuat untuk mengurangi proses pengelolaan data secara manual serta mempermudah pihak sekolah dalam memantau perkembangan kegiatan magang siswa. Website ini memiliki beberapa fitur utama yang mencakup pengelolaan data siswa, guru pembimbing, DUDI (Dunia Usaha dan Dunia Industri), data magang, serta logbook kegiatan siswa. Admin dapat mengelola dan memperbarui data yang berkaitan dengan kegiatan magang, mulai dari data pengguna hingga penempatan siswa di perusahaan atau instansi tempat mereka melaksanakan magang. Selain pengelolaan data, sistem ini juga menyediakan fitur pencatatan logbook yang memungkinkan aktivitas siswa selama melaksanakan magang dapat dicatat secara terstruktur. Data tersebut dapat digunakan sebagai bahan pemantauan oleh guru pembimbing sehingga perkembangan kegiatan siswa dapat diketahui dengan lebih mudah. Sistem ini juga menggunakan pembagian hak akses berdasarkan peran pengguna, seperti Admin, Guru, Siswa, dan DUDI, sehingga setiap pengguna dapat mengakses fitur sesuai dengan kebutuhan dan tanggung jawabnya. Dengan adanya pembagian akses tersebut, pengelolaan informasi menjadi lebih teratur dan keamanan data dapat lebih terjaga. Dari sisi antarmuka, website dibuat dengan desain yang modern, responsif, dan mudah digunakan pada berbagai ukuran perangkat. Sistem ini dikembangkan menggunakan Next.js dan React sebagai teknologi utama untuk membangun aplikasi, Tailwind CSS untuk tampilan antarmuka, serta Supabase sebagai backend dan database untuk menyimpan serta mengelola data aplikasi. Melalui Manajemen Magang, proses administrasi dan pemantauan kegiatan magang dapat dilakukan dalam satu sistem terintegrasi. Website ini menjadi solusi digital untuk membantu sekolah, guru, siswa, dan DUDI dalam mengelola kegiatan magang dengan lebih praktis, terstruktur, dan terdokumentasi.

IOT Pakan Ikan

IoT Pakan Ikan Otomatis IoT Pakan Ikan Otomatis merupakan sebuah project Internet of Things (IoT) yang dirancang untuk membantu memberikan pakan ikan secara otomatis dengan memanfaatkan mikrokontroler dan beberapa komponen elektronik. Project ini dibuat sebagai simulasi sistem pemberian pakan ikan yang dapat bekerja berdasarkan waktu yang telah ditentukan, sehingga proses pemberian pakan tidak harus dilakukan secara manual setiap saat. Pada project ini, mikrokontroler digunakan sebagai pusat pengendali yang mengatur proses kerja seluruh komponen. Sistem dapat menentukan waktu pemberian pakan dan mengaktifkan mekanisme pemberi pakan sesuai dengan jadwal yang telah ditentukan. Dengan konsep tersebut, pakan dapat diberikan secara lebih teratur dan membantu mengurangi risiko ikan terlambat mendapatkan makanan. Project ini juga dapat dilengkapi dengan motor servo sebagai mekanisme untuk membuka dan menutup tempat keluarnya pakan. Ketika jadwal pemberian pakan tiba, servo akan bergerak pada sudut tertentu sehingga pakan dapat keluar, kemudian kembali ke posisi awal setelah proses pemberian pakan selesai. Selain itu, sistem dapat menggunakan LCD untuk menampilkan informasi seperti waktu, status sistem, maupun informasi pemberian pakan. Beberapa komponen tambahan seperti LED dan buzzer juga dapat digunakan sebagai indikator untuk memberikan informasi ketika proses pemberian pakan sedang berlangsung. Project ini dibuat dan disimulasikan menggunakan Wokwi, sehingga rangkaian elektronik dan program dapat diuji secara virtual tanpa harus menggunakan perangkat keras secara langsung. Simulasi ini membantu dalam memahami bagaimana mikrokontroler berkomunikasi dengan berbagai komponen serta bagaimana program mengontrol perangkat elektronik berdasarkan kondisi tertentu. Dengan adanya project ini, konsep otomatisasi, mikrokontroler, sensor/aktuator, dan Internet of Things dapat diterapkan dalam sebuah sistem sederhana yang memiliki fungsi nyata. Project IoT Pakan Ikan Otomatis juga dapat dikembangkan lebih lanjut dengan menambahkan sensor, koneksi internet, monitoring melalui smartphone, pengaturan jadwal melalui aplikasi, serta sistem pemantauan jumlah pakan.

Design Smart Study

Smart Study Smart Study merupakan sebuah konsep desain aplikasi pembelajaran digital yang dirancang untuk membantu siswa dalam mengatur kegiatan belajar secara lebih terstruktur, praktis, dan interaktif. Desain ini dibuat dengan fokus pada pengalaman pengguna yang sederhana sehingga berbagai kebutuhan belajar dapat diakses dengan mudah dalam satu platform. Dalam desain Smart Study, pengguna dapat menemukan berbagai fitur yang mendukung aktivitas belajar, seperti dashboard pembelajaran, daftar materi, jadwal belajar, tugas, catatan, serta informasi perkembangan belajar. Setiap fitur dirancang dengan tata letak yang jelas dan penggunaan elemen visual yang konsisten agar pengguna dapat memahami fungsi setiap bagian tanpa merasa kesulitan. Konsep UI/UX Smart Study dibuat dengan memperhatikan kemudahan navigasi, hierarki informasi, konsistensi desain, serta kenyamanan pengguna. Penggunaan warna, tipografi, ikon, tombol, kartu informasi, dan berbagai komponen antarmuka disusun secara teratur untuk menciptakan tampilan yang modern dan tetap mudah digunakan. Desain ini dibuat menggunakan Figma sebagai tools utama untuk merancang antarmuka dan membuat prototype interaktif. Melalui prototype tersebut, pengguna dapat melihat gambaran alur aplikasi mulai dari halaman utama hingga berpindah ke berbagai fitur yang tersedia. Smart Study juga dirancang agar memiliki tampilan yang responsif dan fleksibel, sehingga konsep antarmukanya dapat dikembangkan untuk berbagai perangkat seperti smartphone, tablet, maupun desktop. Selain menjadi rancangan visual, project ini juga menjadi proses pembelajaran dalam menerapkan prinsip UI/UX Design, user flow, wireframing, prototyping, dan design system. Melalui project Smart Study, saya mencoba membuat sebuah konsep aplikasi pendidikan yang tidak hanya memiliki tampilan menarik, tetapi juga mengutamakan pengalaman pengguna dan kemudahan dalam mengakses informasi pembelajaran. Desain ini dapat dikembangkan lebih lanjut menjadi aplikasi pembelajaran yang memiliki fitur lebih lengkap dan terintegrasi.