c shopping
Minimum MVP Publishing
Halo semuanya! Selamat datang di C-Shopping, sebuah perjalanan ke dunia e-commerce meluncurkan keajaiban teknologi. Saya "Ji Xiaopeng," penulis open-source C-Shopping, dan hari ini, saya akan memperkenalkan Anda ke platform e-commerce open-source berdasarkan teknologi terbaru. Mari kita jelajahi bersama!
Project Live Demo Links:
Project Gateway: https://github.com/huanghanzhilian/c-shopping.
Bereaksi aplikasi aplikasi seluler asli:
Project Gateway: https://github.com/huanghanzhilian/c-shopping-rn.
Jika Anda menemukan ini bermanfaat, tolong beri saya bintang. Ini akan menjadi dorongan besar.
Latar belakang:
Maksud:
Mengatasi masalah yang disebutkan di latar belakang.
Tujuan:
Bangun ekosistem lengkap dan dirancang dengan baik yang cocok untuk web.
Pertama, mari kita mempelajari teknologi di balik c-shopping. Saya telah mengadopsi serangkaian teknologi mutakhir, termasuk Next.js, CSS tailwind, UI tanpa kepala, Redux-Toolkit-RTK Query, JWT, dan Docker, antara lain. Ini memastikan bahwa proyek ini tidak hanya efisien tetapi juga sangat terukur. Kami berkomitmen untuk mengatasi beberapa titik rasa sakit dari platform e-commerce tradisional: kurangnya estetika, adaptasi yang tidak memadai untuk berbagai perangkat, dan antarmuka yang monoton, antara lain. Dengan mengadopsi teknologi dan prinsip desain terbaru, c-shopping menciptakan pengalaman pengembangan teknis yang sepenuhnya responsif bagi pengguna.
C-shopping memprioritaskan pengalaman pengguna. Antarmuka kami tidak hanya indah tetapi juga responsif, memungkinkan pengguna untuk menikmati belanja dengan mudah di perangkat apa pun. Pusat pribadi dan fungsi manajemen pesanan juga membuat pengalaman berbelanja Anda lebih personal dan nyaman.
Salah satu yang menarik dari c-shopping adalah adopsi serangkaian teknologi canggih, termasuk Next.js, CSS tailwind, UI tanpa kepala, Redux-Toolkit-RTK Query, dll., Memberikan pengguna dengan kinerja dan pengalaman terbaik. Kami tidak hanya fokus pada estetika tetapi juga berusaha untuk keunggulan dalam teknologi.
Next.js Pengalaman Lightning-Fast yang Digerakkan
C-shopping menggunakan Next.js, yang berarti tidak hanya kecepatan pemuatan halaman web sangat cepat, tetapi juga mendukung rendering sisi server, memberikan tingkat kehalusan yang belum pernah terjadi sebelumnya.
? Desain gaya css css
Dengan menggunakan CSS Tailwind, C-Shopping menyuntikkan selera gaya. Setiap antarmuka sangat indah, menjadikan belanja sebagai pesta visual.
? Kebebasan dan fleksibilitas UI tanpa kepala
C-Shopping opts untuk gaya UI tanpa kepala, memberi pengguna lebih banyak kebebasan selama proses belanja. Tidak lagi terbatas pada kerangka kerja UI tradisional, ini membuka lebih banyak pintu untuk penyesuaian.
? JWT Security Tanpa Khawatir
Keamanan adalah yang terpenting! JWT digunakan untuk otentikasi pengguna, memberikan jaminan terkuat untuk perilaku belanja Anda, memungkinkan Anda berbelanja dengan percaya diri.
? Docker Penyebaran Perfect
C-shopping mencakup Docker, membuat penyebaran proyek sangat sederhana. Kontainerisasi memungkinkan seluruh proyek berjalan mulus di lingkungan yang berbeda.
Redux Toolkit dan RTK Query State Management Art
C-shopping menggunakan Redux Toolkit dan RTK Query, membuat manajemen negara lebih santai dan menyenangkan. Anda dapat melacak aliran data dengan lebih baik dalam aplikasi, memastikan stabilitas pengalaman berbelanja.
Sekarang, mari kita lihat beberapa fitur dasar c-shopping. Dari navigasi yang jelas dan tampilan produk hingga fitur pencarian dan keranjang belanja yang nyaman, setiap detail telah dirancang dengan cermat untuk memberi pengguna pengalaman berbelanja yang menyenangkan.
Sisi pengguna
| Modul | Perangkat desktop | Perangkat seluler |
|---|---|---|
| Rumah | ||
| Kategori sekunder | ||
| Kategori tingkat ketiga | ||
| Detail Produk | ||
| Login | ||
| Daftar | ||
| Mencari | ||
| Keranjang belanja | ||
| Check-out | ||
| Profil pengguna | ||
| Pesanan saya | ||
| Ulasan saya | ||
| Manajemen alamat | ||
| Kunjungan terbaru |
Sisi admin
| Modul | Perangkat desktop | Perangkat seluler |
|---|---|---|
| Login | ||
| Pusat Admin | ||
| Manajemen Pengguna | ||
| Manajemen kategori | ||
| Pohon manajemen kategori | ||
| Manajemen spesifikasi | ||
| Manajemen Produk | ||
| Manajemen pesanan | ||
| Manajemen ulasan | ||
| Manajemen Slider | ||
| Manajemen spanduk |
Struktur Proyek C-Shopping:
Penjelasan Struktur Utama:
? Aplikasi : Kode utama aplikasi
? Komponen : komponen bereaksi yang dapat digunakan kembali
? Pembantu : Fungsi dan Alat Pembantu
? Hooks : kait reaksi khusus
? Model : Definisi Model Data
? Publik : Sumber daya statis, seperti gambar, font, dll.
? Store : Konfigurasi Terkait dengan Manajemen Negara Redux
? Gaya : File Gaya
? utils : utilitas umum
...
Struktur ini dirancang untuk membuat proyek terorganisir, mudah dipelihara, dan dapat diskalakan. Setiap bagian dibagi berdasarkan
fungsionalitas dan tanggung jawab, memudahkan anggota tim untuk memahami dan berkolaborasi.
Lingkungan pengembangan
Klon atau unduh repositori dengan menjalankan perintah berikut di terminal:
git clone https://github.com/huanghanzhilian/c-shopping.git
Instal dependensi proyek menggunakan NPM atau benang:
npm install
atau
yarn
Harap buat file .env baru dari file .env.example di direktori root proyek untuk menentukan variabel lingkungan yang diperlukan. Langkah ini sangat penting (untuk mengunggah gambar ke OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
Instal MongoDB di mesin lokal Anda.
Jalankan proyek:
npm run dev
Daftarkan akun:
http://localhost:3000/register
Setelah membuat akun, temukan akun Anda di database dan ubah bidang root menjadi True dan bidang role ke admin. Ini memberi Anda akses ke semua fitur dasbor admin:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
Pintu masuk administrator: http: // localhost: 3000/admin
Di MongoDB, buat kategori root:
mongo
use choiceshop
db.categories.insert({
"name" : "Featured Items",
"slug" : "choiceshop",
"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
"colors" : {
"start" : "#EF394E",
"end" : "#EF3F55"
},
"level" : 0
})
Penyebaran Docker
Direktori Root Proyek sudah dikonfigurasi dengan Docker Compose. Setelah memasang Docker, cukup jalankan penempatan:
docker compose up -d --build
Saya seorang penjelajah teknologi, pelajar yang bersemangat, dan pemecah masalah.
我是一个技术的探索者 ， 一个渴望学习的人 ， 一个解决问题的人。
Ikuti akun resmi WeChat kami untuk informasi lebih lanjut. Jangan ragu untuk memberikan umpan balik atau saran dengan membuka masalah atau meninggalkan pesan di akun resmi. Anda juga dipersilakan untuk menambahkan saya di WeChat untuk komunikasi lebih lanjut.
| Akun Resmi WeChat saya | WeChat saya |
|---|---|
Mit
Hak Cipta (C) 2024 Jipeng Huang
C-Shopping adalah proyek open-source, dan kami menyambut lebih banyak pengembang untuk bergabung dengan komunitas kami. Anda dapat menemukan kode sumber proyek di repositori github kami, menyarankan perbaikan, atau berkontribusi pada pengembangan.
Jika Anda tertarik dengan proyek ini, silakan bergabung dengan komunitas kami dan berkontribusi pada pertumbuhan proyek.
