Memuat portofolio

Selected work

Small experiments, real problems, and lessons that stick.

A collection of websites and product ideas built while learning how design, code, and useful functionality come together.

All Projects

2 projects found

Pratinjau project MyApp Belajar Next.js

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.

Next.jsTailwind CSSTypeScriptSupabase
Visit live project
Pratinjau project Manajemen Magang

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.

Next.jsTailwind CSSTypeScriptSupabase
Visit live project