next e commerce

eコマースウェブサイト

デモ：https：//next-e-commerce-example.vercel.app/

自己課題として1週間で作成したnext.jsで構築されたeコマースのウェブサイトの例。後で処理するいくつかの問題があります。 FireBaseをバックエンドとして使用します。

私に連絡してください・報告バグ・リクエスト機能

目次

• プロジェクトについて
  • で構築されています
• スクリーンショット
  • ホーム（ニュース）
  • カテゴリ
  • 製品
  • カート
  • アカウント
• はじめる
  • 前提条件
  • インストール
• 問題 /機能プラン
• 貢献
• 質問と回答
• ライセンス
• 接触

プロジェクトについて

Anton MikhaltsovによるDribbbleのUIデザインを見ました。そして、私はこのデザインをコーディングしたかったのです。そこで、私はそれをNextJSと一緒に完全に働くWebサイトにすることにしましたが、たった1週間で自分自身に挑戦しました。いくつかの問題はまだありますが、後でチェックアウトします。

• フィルターとソートボタンはまだ機能していません。
• Webサイトは、時間が十分ではなかったため、レスポンシブ％100ではありません。私は現在それに取り組んでいます。今、それは反応が良いです。
• Firebase関数の方が良い場合があります
• ホームページ（ニュースイン）カードにはリダイレクトがありません。彼らは単なるプレースホルダーです。

で構築されています

• 反応します
• Nextjs
• ファイアーベース
• 反応フックフォーム
• 日付fns
• サス

スクリーンショット

ニュース

• カードにはリンクがなく、静的であり、単なるプレースホルダーです。

カテゴリ

製品

カート

アカウント

はじめる

前提条件

• node.jsバージョン10.13以降
• git（2.20.1を使用しました）

インストール

1. FireBaseプロジェクトを作成する必要があります

2. リポジトリをクローンし、ディレクトリを変更します

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce

3. NPMパッケージをインストールします

npm install

4. このコンテンツを使用して、ルートフォルダー（Next-E-Commerce）に.env.localファイルを作成します。ファイアベースキーを置きます。

 NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id

5. 開発モードで実行します

npm run dev

問題 - 将来の計画

• ボタンをフィルターしてソートします
• Firestoreクエリ機能を最適化します
• カートページでは、アイテムボタンの減少が機能していません
• ウェブサイトは％100レスポンシブになります
• いくつかのHTMLタグをセマンティックタグに置き換えます

貢献

貢献は、オープンソースコミュニティを学び、インスピレーションを与え、創造するのに驚くべき場所にするものです。あなたがする貢献はどんな貢献も大歓迎です。

1. プロジェクトをフォークします
2. 機能ブランチを作成します（ git checkout -b feature/AmazingFeature ）
3. あなたの変更をコミットします（ git commit -m 'Add some AmazingFeature' ）
4. ブランチへのプッシュ（ git push origin feature/AmazingFeature ）
5. プルリクエストを開きます

Q＆A

• 質問：FireBaseプロジェクトを作成しましたが、それをよく知っていません。それではどうすればよいですか？回答：あなたはあなたのFireBaseプロジェクトの設定について私に連絡することができます、私は喜んであなたを助けます。

• 質問：FireBaseプロジェクトを作成しましたが、データベース構造はありません。それではどうすればよいですか？回答：私が作成したデータベース構造を取得するには、私に連絡してください。

• 質問：なぜデータベース構造を共有しなかったのですか？回答：誰かがこのプロジェクトに興味があるかどうかを知りたいだけです：D

• 質問：どうすれば貢献できますか？回答：あなたがこのプロジェクトを主演していても、それは私を幸せにします。コードの寄付については、変更後にリポジトリをフォークしてプルリクエストを開くことができます。フィードバックは私にとっても重要です。問題を開くか、メッセージを送信できます。

• 質問：UIをデザインしましたか？回答：いいえ、私は実際には設計しませんでした。 Anton MikhaltsovによるDribbbleのホームページデザインを見つけました。ホームページを除き、他のUIの選択肢が私のものです。私はこのウェブサイトを限られた時間で作りましたが、UI/UXについてはあまり考えませんでした。そのため、デザインについてフィードバックすることもできます。

ライセンス

GPLライセンスの下で配布されます。詳細については、 LICENSE参照してください。

接触

@anilsenay

プロジェクトリンク：https：//github.com/anilsenay/next-e-commerce