OneStopShop

Onestopshop

PERINGATAN Aplikasi ini sedang dalam proses dan tidak boleh dianggap siap untuk produksi. Ini menggunakan teknologi baru yang belum stabil seperti tindakan server dan gerimis ORM.

Tentang

Pasar online yang dibangun menggunakan router aplikasi selanjutnya.js, yang memungkinkan pengguna untuk membeli produk, mendaftar dan mendaftar produk mereka sendiri untuk dijual. Pengguna dapat membuat profil penjual, mengelola produk dan mengumpulkan pembayaran.

Fitur Utama:

• Router aplikasi next.js dengan komponen server bereaksi
• Rute yang dicegat (dengan perutean paralel) untuk tampilan cepat produk dan pembuatan produk baru di admin
• Tindakan server untuk mutasi
• Planetscale MySQL Database dengan gerimis orm
• Unggah untuk mengunggah file typeafe (misalnya, gambar produk)
• Otentikasi pengguna dengan petugas
• Integrasi Stripe Connect untuk Pembayaran Pasar (termasuk biaya platform dan pembayaran penjual)

Demo

Untuk mendemonstrasikan pengalaman checkout, checkout dengan nomor kartu uji seperti 4242 4242 4242 4242 dan gunakan tanggal masa depan untuk kedaluwarsa dan 3 digit untuk CVC. Anda hanya akan dapat checkout dengan produk dari penjual yang memiliki akun strip yang terhubung ke toko mereka (seperti Tim Mainan). Anda juga dapat membuat akun penjual Anda sendiri dan menghubungkannya ke Stripe untuk pengalaman penuh.

Halaman Beranda

Editor Halaman Produk Admin

Menjalankan aplikasi

Ikuti langkah -langkah di bawah ini untuk menjalankan aplikasi secara lokal:

1. Buat database MySQL.
2. Buat file .env lokal dengan variabel sesuai file .env.example .
3. Jalankan npm install .
4. Hasilkan migrasi dengan npx drizzle-kit generate:mysql . Ini membuat folder baru yang disebut migrations-folder di root yang berisi kueri SQL untuk membuat tabel database. Migrasi secara otomatis disinkronkan dengan database melalui fungsi migrasi di db.ts Atau, Anda dapat menjalankan kueri SQL yang dihasilkan dari migrasi secara manual melalui konsol skala planets dan menghapus fungsi migrasi di db.ts
5. Jalankan npm run dev untuk membuka aplikasi dalam mode pengembangan.

Itu saja. Anda sekarang harus dapat mengakses aplikasi di http://localhost:3000 .

Catatan

• Saat menghasilkan migrasi untuk pertama kalinya dengan gerimis, pastikan bahwa migrations-folder di akar kosong atau tidak ada.

Buku cerita

Storybook telah ditambahkan ke aplikasi ini, bagaimanapun, belum dikerjakan secara aktif sejak pembuatan aplikasi awal. Apapun, itu bisa dijalankan menggunakan perintah berikut:

1. Jalankan skrip build tailwind untuk membuat file output untuk kelas tailwind (setelah dijalankan dan selesai, Anda mungkin harus 'membunuh' terminal (yaitu ctrl + c ) untuk menghentikan proses jika tidak secara otomatis berhenti).

   Perintah: npm run tailwind

2. Jalankan Storybook (ini akan menggunakan file output tailwind yang dibuat pada langkah sebelumnya dan dijalankan di http://localhost:6006 ).

   Perintah: npm run storybook

Pemecahan masalah

Jika Anda melihat kesalahan yang berkaitan dengan tabel yang tidak ada di planetscale (kemungkinan dilemparkan ke dalam app/(storefront)/(main)/page.tsx karena ini adalah penggunaan database pertama), ini karena database tidak disinkronkan. Tinjau kembali langkah -langkah 'menjalankan aplikasi' di atas dan periksa tab 'Wawasan' di planetscale untuk memeriksa bahwa kueri pembuatan tabel telah dijalankan.

Berkontribusi

Jangan ragu untuk membuat masalah dan PR untuk fitur/perbaikan baru