next tailwind amazona

Bangun situs web eCommerce selanjutnya seperti amazon

• Tech: NextJs 13, Next Auth 4
• UI: Tailwind, chart.js, react-chartjs
• DB: Mongodb, Mongoose
• Pembayaran: PayPal, Stripe
• Hosting Konten: Cloudinary
• Deploy: GitHub, Vercel, Mongodb Atlas

Sumber daya

• Video YouTube: https://youtu.be/_iblyr5mrza
• Situs web demo: https://next-tailwind-amazona.vercel.app
• Kode Sumber: https://github.com/basir/next-tailwind-amazona
• Kursus Lengkap: Basir.thinkific.com

Apa yang akan Anda pelajari

• Dasar -dasar NextJS seperti menyiapkan proyek, menavigasi antara halaman dan pengambilan data
• Topik lanjutan NextJS seperti routing dinamis, optimasi gambar, SSG dan SSR
• Kerangka kerja CSS Tailwind untuk Membangun Situs Web Responsif Menggunakan Tema Kustom, Animasi, dan Carousel
• ReactJs termasuk komponen terurai, API konteks dan kait
• Paket Auth Berikutnya Untuk Mengotentikasi Pelanggan dan Pengguna Admin
• MongoDB dan Mongoose untuk menyimpan dan mengambil data seperti produk, pesanan dan pengguna
• API Pengembang PayPal untuk melakukan pembayaran online
• Menerapkan aplikasi web di server seperti Vercel dan Netlify

Kursus penuh

Dapatkan kursus ini dengan diskon 90% untuk berpikir: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90

Jalankan secara lokal

1. Klon Repo

    $ git clone [email protected]:basir/next-tailwind-amazona.git
    $ cd next-tailwind-amazona

2. Buat file .env

   • duplikat .env.example dan ganti namanya menjadi .env

3. Pengaturan MongoDB

   • Mongodb lokal
   • Instal dari sini
   • Di .env pembaruan file mongodb_uri = mongodb: // localhost/amazona
   • Atau Atlas Cloud Mongodb
   • Buat database di https://cloud.mongodb.com
   • Dalam .Env File UPDATE MONGODB_URI = MONGODB+SRV: // Your-DB-Connection

4. Instal dan jalankan

     npm install
     npm run dev

5. Data benih

   • Jalankan ini di browser: http: // localhost: 5000/API/seed
   • Ini mengembalikan email dan kata sandi admin dan 6 produk sampel

6. Login Admin

   • Jalankan http: // localhost: 3000/login
   • Masukkan email dan kata sandi admin dan klik login

Pelajaran

1. Perkenalan
2. Instal alat
3. Buat aplikasi berikutnya
4. Publikasikan ke GitHub
5. Buat tata letak situs web
   1. Buat komponen tata letak
   2. Tambahkan header
   3. tambahkan bagian utama
   4. Tambahkan footer
   5. Tambahkan kelas Tailwind
6. Daftar produk
   1. Tambahkan data.js
   2. Tambahkan gambar
   3. Render Produk
7. Buat detail produk
   1. Buat halaman produk
   2. Buat 3 kolom
   3. Tampilkan gambar di kolom pertama
   4. Tampilkan info produk di kolom kedua
   5. Tampilkan Tambahkan ke Aksi Keranjang di Kolom Ketiga
   6. Tambahkan gaya
8. Tangani Tambahkan ke Keranjang
   1. Tentukan konteks Bereaksi
   2. Tentukan status item gerobak
   3. Buat Tindakan Addd ke Cart
   4. Tambahkan peredam
   5. Buat penyedia toko
   6. Tangani Tambahkan ke Tombol Keranjang
9. Buat halaman gerobak
   1. Buat cart.js
   2. Gunakan konteks untuk mendapatkan item gerobak
   3. daftar item dalam item kereta
   4. Redirect ke Layar Keranjang Setelah Tambahkan ke Keranjang
10. Perbarui kuantitas di kereta
    1. Tambahkan Kotak Pilih untuk Kuantitas
    2. Tangani Pilih Perubahan Kotak
11. Simpan item gerobak
    1. Instal Paket JS-Cookie
    2. Simpan dan retreive item gerobak dalam cookie
12. Buat formulir login
    1. Instal Formulir React Hook
    2. Buat kotak input
    3. Tambahkan tombol login
13. Terhubung ke MongoDB
    1. Instal Mongoose
    2. Instal MongoDB atau gunakan MongoDB Atlas
    3. Simpan URL koneksi di file .env
    4. Buat File Util DB
    5. Buat pengguna sampel
14. Buat API Login
    1. Instal Next-Auth
    2. Buat nextAuth.js
    3. Menerapkan SignIn
    4. Gunakan SIGNIN dalam Formulir Login
15. Tambahkan Menu Pengguna
    1. Periksa otentikasi pengguna
    2. Pasang headlessui
    3. Tampilkan menu pengguna
16. Buat layar pengiriman
    1. bidang alamat tampilan
    2. Simpan alamat dalam konteks
17. Buat Layar Metode Pembayaran
    1. Metode Pembayaran Berbeda
    2. Simpan metode pembayaran dalam konteks
18. Produk sampel benih
    1. Buat model produk di Mongoose
    2. Masukkan produk sampel ke MongoDB
19. Muat Produk MongoDB
    1. Muat Produk di Halaman Beranda dari MongoDB
    2. Memuat Produk di Halaman Produk dari MongoDB
    3. Gunakan API Produk untuk memeriksa jumlah stok di Tambah ke Keranjang
20. Buat Layar Pesanan Tempat
    1. Tampilkan alamat pengiriman
    2. Metode pembayaran tampilan
    3. Tampilkan item pesanan
    4. Implent Buat Pesanan
21. Buat layar pesanan
    1. Menerapkan API backend untuk detail pesanan
    2. memuat data pesanan dari backend
    3. Tampilkan detail pesanan
22. Buat Layar Register
    1. Tambahkan API pendaftaran
    2. Buat halaman register
    3. Hubungi API di Formulir Kirim
23. Bayar pesanan oleh Paypal
    1. Tambahkan tombol PayPal
    2. menangani pembayaran
    3. Buat API Backend
    4. Perbarui status pesanan
24. Buat Layar Sejarah Pesanan
    1. Buat API Pesanan Saya
    2. Buat komponen riwayat pesanan
    3. mengambilkan pesanan dan menampilkannya
25. Publikasikan di Vercel
    1. Buat akun Vercel
    2. terhubung ke GitHub
    3. Atur auth berikutnya dan mongoDB db di env vars
    4. Dorong kode ke GitHub
26. Perbarui profil pengguna
    1. Buat Layar Profil
    2. Tampilkan info pengguna
    3. menangani pembaruan info pengguna
27. Buat Dasbor Admin
    1. Buat menu admin
    2. Buat layar dasbor
    3. Menerapkan API Ringkasan Admin
28. Daftar pesanan untuk admin
    1. Buat halaman Pesanan
    2. Buat Pesanan API
    3. Gunakan API di halaman
29. Kirim Pesanan untuk Admin
    1. Buat Deliver API
    2. Tambahkan tombol Deliver
    3. Terapkan klik penangan
30. Daftar produk untuk admin
    1. Buat halaman produk
    2. Buat API Produk
    3. Gunakan API di halaman
31. Buat halaman Edit Produk
    1. Buat halaman Edit
    2. Buat API untuk Produk
    3. Tunjukkan data produk dalam bentuk
32. Unggah gambar produk
    1. Buat Akun Cloudinary
    2. Dapatkan kunci cloudinary
    3. Buat unggahan API
    4. Unggah file di halaman Edit
33. Buat dan hapus produk
    1. Tambahkan tombol Buat Produk
    2. Bangun API Produk Baru
    3. Tambahkan penangan untuk dihapus
    4. Menerapkan Delete API
34. Daftar pengguna untuk admin
    1. Buat halaman Pengguna
    2. Buat API Pengguna
    3. Gunakan API di halaman
35. Tambahkan korsel
    1. Buat produk unggulan
    2. Feed Carousel Data
    3. Tunjukkan produk populer
36. Buat halaman pencarian
    1. Buat filter
    2. daftar produk
    3. tunjukkan filter