c shopping
Minimum MVP Publishing
こんにちは、みんな！ C Shoppingへようこそ、電子商取引の世界への旅は技術的な不思議を発表します。私はCショッピングのオープンソースの著者である「Ji Xiaopeng」です。今日、最新のテクノロジーに基づいたオープンソースの電子商取引プラットフォームを紹介します。一緒に探検しましょう！
プロジェクトライブデモリンク：
プロジェクトゲートウェイ：https：//github.com/huanghanzhilian/c-shopping。
ネイティブモバイルアプリアプリケーションを反応する：
プロジェクトゲートウェイ：https：//github.com/huanghanzhilian/c-shopping-rn。
これが役立つと思う場合は、星をください。それは大きな励ましになるでしょう。
背景：
意図：
背景に記載されている問題に対処します。
客観的：
Webに適した完全で設計されたエコシステムを構築します。
まず、Cショッピングの背後にあるテクノロジーを掘り下げましょう。私は、次のような最先端のテクノロジーを採用しました。次のような最先端のテクノロジー、Tailwind CSS、Headless UI、Redux-Toolkit-RTKクエリ、JWT、Dockerなどを採用しています。これにより、このプロジェクトが効率的であるだけでなく、非常にスケーラブルであることが保証されます。私たちは、伝統的なeコマースプラットフォームのいくつかの問題点に取り組むことに取り組んでいます：美学の欠如、さまざまなデバイスへの不十分な適応、および単調なインターフェイスなど。最新のテクノロジーと設計原則を採用することにより、C-Shoppingはユーザーに完全に対応する技術開発エクスペリエンスを作成します。
Cショッピングはユーザーエクスペリエンスを優先します。私たちのインターフェイスは美しいだけでなく、応答性が高いため、ユーザーはどのデバイスでも簡単に買い物を楽しむことができます。パーソナルセンターと注文管理機能により、ショッピング体験がよりパーソナライズされ、便利になります。
Cショッピングのハイライトの1つは、Next.JS、Tailwind CSS、Headless UI、Redux-Toolkit-RTKクエリなどの一連の高度なテクノロジーの採用であり、ユーザーに究極のパフォーマンスとエクスペリエンスを提供します。私たちは美学に焦点を当てるだけでなく、テクノロジーの卓越性を目指しています。
next.js駆動型の稲妻エクスペリエンス
C-ShoppingはNext.jsを使用します。つまり、Webページの読み込み速度は非常に高速であるだけでなく、サーバー側のレンダリングもサポートし、前例のないレベルの滑らかさを提供します。
？ Tailwind CSSスタイリッシュなデザイン
Tailwind CSSを使用することにより、Cショッピングはスタイルの感覚を注入します。各インターフェイスは絶妙で、ショッピングを視覚的なごちそうにします。
？ヘッドレスUIの自由と柔軟性
CショッピングはヘッドレスUIスタイルを選択し、ショッピングプロセス中にユーザーがより多くの自由を提供します。従来のUIフレームワークに限定されなくなったため、カスタマイズのためのより多くのドアが開きます。
？心配することなくJWTセキュリティ
セキュリティが最重要です！ JWTはユーザー認証に使用され、ショッピング行動の最強の保証を提供し、自信を持って買い物をすることができます。
？ Docker完璧な展開
CショッピングはDockerを受け入れ、プロジェクトの展開を非常にシンプルにします。コンテナ化により、プロジェクト全体がさまざまな環境でシームレスに実行できます。
Redux ToolkitおよびRTK Query State Management Art
C-ShoppingはRedux ToolkitとRTKクエリを使用して、州の管理をよりリラックスして楽しいものにします。アプリケーションのデータフローをより適切に追跡し、ショッピングエクスペリエンスの安定性を確保できます。
それでは、Cショッピングの基本的な機能を見てみましょう。クリアナビゲーションや製品ディスプレイから便利な検索カート機能まで、すべての詳細は、ユーザーに快適なショッピング体験を提供するように慎重に設計されています。
ユーザー側
| モジュール | デスクトップデバイス | モバイルデバイス |
|---|---|---|
| 家 | ||
| 二次カテゴリ | ||
| サードレベルのカテゴリ | ||
| 製品の詳細 | ||
| ログイン | ||
| 登録する | ||
| 検索 | ||
| ショッピングカート | ||
| チェックアウト | ||
| ユーザープロファイル | ||
| 私の注文 | ||
| 私のレビュー | ||
| アドレス管理 | ||
| 最近の訪問 |
管理側
| モジュール | デスクトップデバイス | モバイルデバイス |
|---|---|---|
| ログイン | ||
| 管理センター | ||
| ユーザー管理 | ||
| カテゴリ管理 | ||
| カテゴリ管理ツリー | ||
| 仕様管理 | ||
| 製品管理 | ||
| 注文管理 | ||
| レビュー管理 | ||
| スライダー管理 | ||
| バナー管理 |
Cショッピングプロジェクト構造：
重要な構造説明：
？アプリ：アプリケーションのメインコード
？コンポーネント：再利用可能な反応コンポーネント
？ヘルパー：ヘルパー機能とツール
？フック：カスタム反応フック
？モデル：データモデルの定義
？パブリック：画像、フォントなどの静的リソース。
？ストア：Redux State Managementに関連する構成
？スタイル：スタイルファイル
？ Utils ：一般ユーティリティ
...
この構造は、プロジェクトを整理し、保守しやすく、スケーラブルにするように設計されています。各セクションはに基づいて分割されます
機能と責任により、チームメンバーが理解し、協力しやすくなります。
開発環境
端末で次のコマンドを実行して、リポジトリをクローンまたはダウンロードします。
git clone https://github.com/huanghanzhilian/c-shopping.git
NPMまたは糸を使用してプロジェクト依存関係をインストールします。
npm install
または
yarn
プロジェクトルートディレクトリに.env.exampleファイルから新しい.envファイルを作成して、必要な環境変数を定義してください。このステップは重要です（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>
地元のマシンにMongodbをインストールします。
プロジェクトを実行する：
npm run dev
アカウントを登録する：
http://localhost:3000/register
アカウントを作成した後、データベースでアカウントを見つけて、 rootフィールドをtrueに変更し、 roleフィールドを管理者に変更します。これにより、すべての管理ダッシュボード機能にアクセスできます。
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
管理者の入り口：http：// localhost：3000/admin
Mongodbで、ルートカテゴリを作成します。
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
})
Dockerの展開
Project Rootディレクトリは、docker Composeで既に構成されています。 Dockerをインストールした後、展開を実行するだけです。
docker compose up -d --build
私はテクノロジーエクスプローラー、熱心な学習者、問題解決者です。
我是一个技术的探索者、一个渴望学习的人、一个解决问题的人。
詳細については、WeChatの公式アカウントをフォローしてください。問題を開いたり、公式アカウントにメッセージを残したりすることにより、フィードバックや提案を自由に提供してください。また、さらなるコミュニケーションのためにWeChatに私を追加することもできます。
| 私のWeChatの公式アカウント | 私のwechat |
|---|---|
mit
Copyright（c）2024 Jipeng Huang
C-Shoppingはオープンソースプロジェクトであり、コミュニティに参加するための開発者を増やすことを歓迎します。 GitHubリポジトリでプロジェクトソースコードを見つけたり、改善を提案したり、開発に貢献したりできます。
プロジェクトに興味がある場合は、自由にコミュニティに参加して、プロジェクトの成長に貢献してください。
