Akses Selamanya
Masuk /
Daftar
Kelas Online
Fullstack POS: Next.js, TypeScript, MongoDB & UIUX 2025
Released date September 2025
Last updated March 2026
Member
7 enrolled
Lesson Type
Video Only
Tingkatan
Sertifikat
Konsultasi
100 lessons (26.78 hours)
Develop Your Skills
Kelas Fullstack POS 2024 ini akan membimbing Anda membangun aplikasi kasir modern dari nol menggunakan stack teknologi terkini: Next.js (App Router), TypeScript, MongoDB, serta TailwindCSS untuk styling.
Peserta akan mempelajari cara merancang dan mengembangkan fitur utama seperti manajemen inventory produk, sistem kupon, riwayat pesanan, dan sistem transaksi kasir yang bisa digunakan untuk usaha ritel atau UMKM.
Selain itu, Anda juga akan belajar desain UI/UX mulai dari tahap awal brainstorming, merancang wireframe, membuat style guide, mengatur component, dan juga membuat high fidelity design dengan figma auto layout sehingga design jadi lebih cepat dan efisien.
Proyek dikerjakan langsung dari awal tanpa banyak ketergantungan library eksternal, agar Anda benar-benar memahami arsitektur aplikasi, alur kerja fullstack modern, serta cara menulis kode yang aman dan scalable dengan TypeScript.
Tools yang digunakan dalam kelas ini mencakup VSCode, Node.js, Figma, dan software gratis lainnya, sehingga Anda bisa langsung praktek dari komputer pribadi tanpa biaya tambahan.
Disarankan memiliki pengetahuan dasar HTML, CSS, dan JavaScript. Hasil proyek dapat digunakan sebagai portofolio kerja atau produk digital pribadi.
Silakan bergabung — dan sampai jumpa di kelas!
Sneak Peek
Key Points
Membangun aplikasi POS fullstack menggunakan Next.js (app router), TypeScript, MongoDB, dan TailwindCSS
Menulis kode scalable dan aman dengan pendekatan TypeScript yang ketat namun fleksibel
Merancang UI/UX modern di Figma sesuai kebutuhan real-world sistem kasir
Mengelola fitur utama POS, seperti product inventory, order history, kupon, dan transaksi kasir
Memahami alur pengembangan aplikasi dari awal, tanpa ketergantungan library berat — fokus ke pemahaman konsep dasar
Menambahkan ilustrasi pendukung UI untuk tampilan yang profesional dan fungsional
Designed For
Junior Developer yang ingin naik level dengan belajar TypeScript dan arsitektur fullstack modern
Mahasiswa IT atau Desain Digital yang ingin membangun portfolio nyata aplikasi kasir
Calon Freelancer atau Startup Founder yang ingin merancang produk kasir sederhana untuk UMKM
UI/UX Designer yang ingin melihat bagaimana desain mereka diimplementasikan langsung ke kode
Pemilik Bisnis Kecil/Menengah yang tertarik memahami cara kerja sistem POS yang mereka gunakan
Course Lessons
Videos language: Bahasa Indonesia (Auto-translation available)
Learn With Expert
Dhimas Prio
Product Designer
(56.8K)
Yein Narayana
Full-Stack Developer
(60K)
Tools Pendukung
Lengkapi semua pendukung di bawah sebelum belajar
React JS
Software
Figma
Software
Tailwind CSS
Software
Whimsical
Software
MongoDB
Software
Next JS
Software
NodeJs
Software
Low Risk, High Return
Investasi kepada diri kita sendiri memberikan
leverage kuat untuk
masa depan karir kita
Selamanya
Rp 980,000
Rp 329,000
Miliki kelas Premium secara permanen dan bangun sebuah projek nyata
Akses kelas selamanya
Premium rewards
Career consultation
Assets & group konsultasi
Sertifikat kelulusan
Lowongan magang dan kerja
Recommended for You
.png)
Pertanyaan Umum
Langkah yang tepat untuk berinvestasi kepada
ilmu
pengetahuan yang baru di bidang IT
Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels
yang memberartikan bahwa cocok untuk seluruh
tingkatan. Kami juga menyarankan calon member untuk
mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.
Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan
untuk mendapatkannya, para member diwajibkan untuk
menyelesaikan seluruh materi kelas dan juga Quiz
yang telah disediakan oleh mentor.
Salah satu benefit unggulan kami adalah group
konsultasi yang diberikan sebagai bonus untuk member
yang telah mengikuti kelas Premium di platform BuildWithAngga.
Silakan menghubungi Admin untk mendapatkan akses pada group
tersebut.
Kami mengizinkan member yang telah mengikuti kelas Premium untuk
menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat
utamanya adalah dengan memodifikasi sedikitnya yaitu
30% dari original project buatan mentor kelas tersebut.
Kami melarang member menjual atau membagikan hak akses kelas Premium
kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari
kita support creators Indonesia dengan cara membeli
kelas secara resmi dan satu akun hanya untuk satu pengguna saja.
Kami tidak memperbolehkan member menjual kembali materi kelas di
BuildWithAngga. Kami siap melanjutkan kepada proses
hukum apabila Anda terbukti benar memperjualbelikan kelas
kami secara ilegal.
Fullstack POS: Next.js, TypeScript, MongoDB & UIUX 2025
Videos language: Bahasa Indonesia (Auto-translation available)
-
Flow UIUX DesignVideo 8 minutes -
Collecting ReferencesVideo 6 minutes
-
Ideation FunctionVideo 14 minutes
-
References Color and FontVideo 4 minutes
-
Wireframe AuthenticationVideo 7 minutes
-
Wireframe On BoardingVideo 9 minutes
-
Wireframe POS Side BarVideo 6 minutes
-
Wireframe POS Card ProductVideo 7 minutes
-
Wireframe POS Cart and SummaryVideo 7 minutes
-
Wireframe POS Payment SummaryVideo 7 minutes
-
Wireframe POS Use CouponVideo 7 minutes
-
Wireframe Inventory Product ListVideo 9 minutes
-
Wireframe Inventory Filter DataVideo 9 minutes
-
Wireframe Inventory Opened VariantVideo 6 minutes
-
Wireframe Add ProductVideo 12 minutes
-
Wireframe Coupon ListVideo 9 minutes
-
Wireframe Add CouponVideo 10 minutes
-
Wireframe Order HistoryVideo 10 minutes
-
Wireframe Detail OrderVideo 6 minutes
-
Text Style GuideVideo 16 minutes
-
Color Style GuideVideo 11 minutes
-
[PENTING!] Perubahan Layout Pada FigmaVideo 2 minutes
-
Penjelasan Auto LayoutVideo 5 minutes
-
Intro to Figma Auto LayoutVideo 11 minutes
-
Figma Playground Auto LayoutVideo 20 minutes
-
Import AssetVideo 1 minutes
-
Component IconsVideo 6 minutes
-
Component Illustration IconsVideo 2 minutes
-
Component ButtonVideo 24 minutes
-
Component InputVideo 18 minutes
-
Component ToggleVideo 8 minutes
-
Component Radio ButtonVideo 5 minutes
-
Component BadgeVideo 14 minutes
-
Log In UIVideo 8 minutes
-
Register Up UIVideo 2 minutes
-
On Boarding Greeting UIVideo 12 minutes
-
On Boarding Create Shop UIVideo 3 minutes
-
On Boarding Upload Logo and Success UIVideo 6 minutes
-
Sidebar UIVideo 14 minutes
-
Empty State UIVideo 5 minutes
-
Empty State Cart UIVideo 15 minutes
-
Search Menu UIVideo 7 minutes
-
Product List Menu UIVideo 18 minutes
-
Select Variant Pop Up UIVideo 11 minutes
-
Cart Added Filled UIVideo 15 minutes
-
Coupon Popup and Selected UIVideo 12 minutes
-
Input Amount Transaction UIVideo 12 minutes
-
Empty State UIVideo 15 minutes
-
Empty State Filtering UIVideo 8 minutes
-
Product List UIVideo 11 minutes
-
Category List UIVideo 5 minutes
-
Expand Variant UIVideo 8 minutes
-
Input Data UIVideo 14 minutes
-
Data Validation Check UIVideo 9 minutes
-
Filled Data UIVideo 14 minutes
-
Empty State UIVideo 12 minutes
-
Filled Data Order UIVideo 10 minutes
-
Detail Order Popup UIVideo 20 minutes
-
Coupon List and Empty State UIVideo 15 minutes
-
Add Coupons UIVideo 14 minutes
-
Create State All ScreenVideo 13 minutes
-
Connecting All ScreenVideo 12 minutes
-
Handoff Design to DeveloperVideo 5 minutes
-
Walkthrough AppVideo 10 minutes
-
A02 ToolsVideo 5 minutes
-
A03 Install NextjsVideo 8 minutes
-
A04 mongodbVideo 12 minutes
-
A05 workspaceVideo 22 minutes
-
B01 Slicing Auth LoginVideo 44 minutes
-
B02 Setup Git First CommitVideo 3 minutes
-
B03 Model UserVideo 15 minutes
-
B04 Service UserVideo 31 minutes
-
B05 Auth LoginVideo 28 minutes
-
B06 Register FormVideo 8 minutes
-
B07 Service Create New AccountVideo 24 minutes
-
C01 Onboarding StartVideo 30 minutes
-
C02 Onboarding create shopVideo 25 minutes
-
C03 Upload Shop LogoVideo 34 minutes
-
C04 Finished OnboardingVideo 6 minutes
-
D01 sidebar main pageVideo 61 minutes
-
D02 MiddlewareVideo 14 minutes
-
E01 Inventories PageVideo 44 minutes
-
E02 Create Inventory part IVideo 40 minutes
-
E03 Create Inventory part IIVideo 43 minutes
-
E04 Create Inventory part IIIVideo 24 minutes
-
E05 Create Inventory part IVVideo 25 minutes
-
E06 Create Inventory part VVideo 22 minutes
-
E07 Create Inventory part VIVideo 34 minutes
-
E08 List Inventories part IVideo 55 minutes
-
E09 List Inventories part IIVideo 32 minutes
-
E10 List Inventories part IIIVideo 17 minutes
-
E11 Update ProductVideo 36 minutes
-
F01 Error HandlingVideo 9 minutes
-
F02 Empty State POSVideo 9 minutes
-
F03 Pos List ProductVideo 60 minutes
-
F04 Pos CartVideo 22 minutes
-
F05 Add to CartVideo 27 minutes
-
F06 Manage qty in CartVideo 23 minutes
-
F07 Slicing Pay DialogVideo 24 minutes
-
F08 Save OrderVideo 60 minutes
Member
7
Lesson Type
Video Only
Tingkatan
Sertifikat
Konsultasi
Develop Your Skills
Kelas Fullstack POS 2024 ini akan membimbing Anda membangun aplikasi kasir modern dari nol menggunakan stack teknologi terkini: Next.js (App Router), TypeScript, MongoDB, serta TailwindCSS untuk styling.
Peserta akan mempelajari cara merancang dan mengembangkan fitur utama seperti manajemen inventory produk, sistem kupon, riwayat pesanan, dan sistem transaksi kasir yang bisa digunakan untuk usaha ritel atau UMKM.
Selain itu, Anda juga akan belajar desain UI/UX mulai dari tahap awal brainstorming, merancang wireframe, membuat style guide, mengatur component, dan juga membuat high fidelity design dengan figma auto layout sehingga design jadi lebih cepat dan efisien.
Proyek dikerjakan langsung dari awal tanpa banyak ketergantungan library eksternal, agar Anda benar-benar memahami arsitektur aplikasi, alur kerja fullstack modern, serta cara menulis kode yang aman dan scalable dengan TypeScript.
Tools yang digunakan dalam kelas ini mencakup VSCode, Node.js, Figma, dan software gratis lainnya, sehingga Anda bisa langsung praktek dari komputer pribadi tanpa biaya tambahan.
Disarankan memiliki pengetahuan dasar HTML, CSS, dan JavaScript. Hasil proyek dapat digunakan sebagai portofolio kerja atau produk digital pribadi.
Silakan bergabung — dan sampai jumpa di kelas!
read more
Learn With Expert
Key Points
-
Membangun aplikasi POS fullstack menggunakan Next.js (app router), TypeScript, MongoDB, dan TailwindCSS
-
Menulis kode scalable dan aman dengan pendekatan TypeScript yang ketat namun fleksibel
-
Merancang UI/UX modern di Figma sesuai kebutuhan real-world sistem kasir
-
Mengelola fitur utama POS, seperti product inventory, order history, kupon, dan transaksi kasir
-
Memahami alur pengembangan aplikasi dari awal, tanpa ketergantungan library berat — fokus ke pemahaman konsep dasar
-
Menambahkan ilustrasi pendukung UI untuk tampilan yang profesional dan fungsional
Created For
-
Junior Developer yang ingin naik level dengan belajar TypeScript dan arsitektur fullstack modern
-
Mahasiswa IT atau Desain Digital yang ingin membangun portfolio nyata aplikasi kasir
-
Calon Freelancer atau Startup Founder yang ingin merancang produk kasir sederhana untuk UMKM
-
UI/UX Designer yang ingin melihat bagaimana desain mereka diimplementasikan langsung ke kode
-
Pemilik Bisnis Kecil/Menengah yang tertarik memahami cara kerja sistem POS yang mereka gunakan
For Your Career
Akses Selamanya
Belajar lebih santai & produktif
Assets & Grup Private
Diskusi belajar agar lebih terarah
Sertifikat & Portfolio
Gunakan untuk modal bekerja
7
Happy Students
Happy Students
Belum ada review
Tools Pendukung
Pertanyaan Umum
Langkah yang tepat untuk berinvestasi kepada
ilmu
pengetahuan yang baru di bidang IT
Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels
yang memberartikan bahwa cocok untuk seluruh
tingkatan. Kami juga menyarankan calon member untuk
mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.
Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan
untuk mendapatkannya, para member diwajibkan untuk
menyelesaikan seluruh materi kelas dan juga Quiz
yang telah disediakan oleh mentor.
Salah satu benefit unggulan kami adalah group
konsultasi yang diberikan sebagai bonus untuk member
yang telah mengikuti kelas Premium di platform BuildWithAngga.
Silakan menghubungi Admin untk mendapatkan akses pada group
tersebut.
Kami mengizinkan member yang telah mengikuti kelas Premium untuk
menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat
utamanya adalah dengan memodifikasi sedikitnya yaitu
30% dari original project buatan mentor kelas tersebut.
Kami melarang member menjual atau membagikan hak akses kelas Premium
kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari
kita support creators Indonesia dengan cara membeli
kelas secara resmi dan satu akun hanya untuk satu pengguna saja.
Kami tidak memperbolehkan member menjual kembali materi kelas di
BuildWithAngga. Kami siap melanjutkan kepada proses
hukum apabila Anda terbukti benar memperjualbelikan kelas
kami secara ilegal.
Rp 329,000
Rp 980,000
