first commit

Author: Subhash Kandhway

.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local Netlify folder
+.netlify

README.md

@@ -0,0 +1,78 @@
+# E-commerce Website - Detailed Functionality
+
+## Website Images
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/d7b3f457-b731-4f0f-8db1-d2284690a160)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/b85f4515-49d8-4edd-ba56-55d84720b856)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/3cc9feed-3dd2-4ade-b499-f4620fe4cd51)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/f5982a8b-d72f-488f-bcf9-7861ec4a2ba8)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/659129e3-8b6f-4847-adf7-9314eb303de1)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/e2f905ab-f35f-4a4d-9229-7a9aab93317d)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/94929f6c-14fb-4b01-a3dd-1e3b5a6babb1)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/4552cfab-0fc2-4f98-9625-5f0f4da4b1b3)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/e4b1fdac-dccf-4455-bc05-e4d82e48d535)
+![image](https://github.com/Subhash002/capstonecommerce/assets/29842088/68015fce-8cbe-43db-b7ee-602d929d04f0)
+
+
+
+
+This document provides a comprehensive description of the features and functionality of our e-commerce website. Our goal is to offer users a seamless shopping experience with secure payment processing, efficient state management, and interactive customer support.
+
+## State Management
+
+We leverage React's powerful Context API along with `useContext` and `useReducer` hooks to manage the application's state. This approach allows us to centralize and efficiently handle the state across various components. Custom hooks are implemented to maintain a single source of truth for data and enable smooth data retrieval and updates.
+
+## Routing
+
+For smooth and responsive navigation, we utilize the latest version of React Router. This ensures that users can move between different pages without experiencing full-page reloads, resulting in a more enjoyable user experience.
+
+## Contexts
+
+Our application employs four main contexts to manage different aspects of the app:
+
+1. **Cart Context**: The Cart Context effectively manages the user's shopping cart. It provides functionality to add, remove, and update items, ensuring a seamless shopping experience for customers.
+
+2. **Filter Context**: With the Filter Context, users can refine their product search based on various filters. This feature enhances usability and allows customers to find products that match their specific criteria.
+
+3. **Product Context**: The Product Context centralizes product data, providing a unified store for all product-related information. This helps streamline data management and ensures data consistency throughout the application.
+
+4. **Auth Context (Auth0)**: To ensure secure user authentication and account management, we implement the Auth Context using Auth0. This feature allows users to log in and log out securely and manage their accounts hassle-free.
+
+## Payment Processing
+
+We integrate Stripe, a widely used and reliable payment processing platform, to handle payments securely and efficiently. Stripe ensures that customer payment information is handled with the highest level of security and compliance.
+
+## Backend
+
+For backend management, we utilize Airtable as our Content Management System (CMS). Airtable simplifies product data management, enabling us to update and retrieve information with ease. This setup ensures that our backend operations are efficient and reliable.
+
+## Live Chatbot
+
+Our website boasts an interactive live chatbot that provides real-time assistance to users. This feature enhances customer support and allows users to get immediate answers to their queries.
+
+- **Agent Interaction**: The chatbot is designed to interact with customer service agents seamlessly. If the chatbot cannot resolve an issue, it transfers the conversation to a human agent, ensuring that customers receive the necessary support.
+
+## Notifications and Loading Handling
+
+- **React-Toastify**: To keep users informed about crucial events and display error messages, we use React-Toastify. These toaster notifications provide instant feedback to users during various interactions.
+
+- **Loading Component**: For improved user experience during loading processes, we implement a loading component that provides visual feedback when data is being fetched or operations are in progress. This ensures that users are aware of ongoing processes, reducing frustration.
+
+## Protected Routes
+
+To safeguard sensitive information and ensure privacy, we implement private routes for checkout and payment. These private routes can only be accessed by authenticated users, enhancing security throughout the transaction process.
+
+## End-to-End Features
+
+Our e-commerce website aims to provide a complete digital purchasing experience from product discovery to checkout and payment. We strive to deliver a user-friendly platform that simplifies the entire shopping journey for customers.
+
+## Product Filters
+
+Our website features multiple filters, allowing users to narrow down their search results based on their preferences. This feature enhances product discoverability and ensures that users can easily find products that meet their specific needs.
+
+## Deployment
+
+- **Netlify**: We deploy our application to Netlify, a reliable hosting and deployment platform. Netlify ensures accessibility, scalability, and high performance for our website.
+
+- **Netlify Serverless Functions**: We utilize Netlify's serverless functions to facilitate communication with the Stripe platform for secure and seamless payment processing. This setup ensures that payment operations are reliable and efficient.
+
+By incorporating these features into our e-commerce website, we provide users with a robust and enjoyable shopping experience. Our website focuses on security, efficiency, and user satisfaction, making it an ideal platform for digital purchases.

functions/create-payment-intent.js

@@ -0,0 +1,29 @@
+const dotenv = require("dotenv");
+dotenv.config();
+const stripe = require("stripe")(process.env.REACT_APP_STRIPE_API_KEY);
+exports.handler = async function (event, context) {
+  const { shipping_fee, total_amount } = JSON.parse(event.body);
+
+  const calculateOrderAmount = () => {
+    // Replace this constant with a calculation of the order's amount
+    // Calculate the order total on the server to prevent
+    // people from directly manipulating the amount on the client
+    return shipping_fee + total_amount;
+  };
+  try {
+    // Create a PaymentIntent with the order amount and currency
+    const paymentIntent = await stripe.paymentIntents.create({
+      amount: calculateOrderAmount(),
+      currency: "inr",
+    });
+    return {
+      statusCode: 200,
+      body: JSON.stringify({ clientSecret: paymentIntent.client_secret }),
+    };
+  } catch (error) {
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ error: error.message }),
+    };
+  }
+};

functions/hello.js

@@ -0,0 +1,6 @@
+exports.handler = async function (event, context) {
+  return {
+    statusCode: 200,
+    body: "Hello Js",
+  };
+};

functions/products.js

@@ -0,0 +1,57 @@
+const dotenv = require("dotenv");
+dotenv.config();
+
+let Airtable = require("airtable-node");
+const airtable = new Airtable({ apiKey: process.env.REACT_APP_AIRTABLE_KEY })
+  .base(process.env.REACT_APP_AIRTABLE_BASE)
+  .table(process.env.REACT_APP_AIRTABLE_TABLE);
+
+exports.handler = async (event, context, cb) => {
+  try {
+    const response = await airtable.list({ maxRecords: 200 });
+
+    const products = response.records.map((product) => {
+      const { id, fields } = product;
+      const {
+        name,
+        featured,
+        price,
+        colors,
+        company,
+        description,
+        category,
+        shipping,
+        images,
+      } = fields;
+      const { url } = images[0];
+
+      return {
+        id,
+        featured: featured === undefined ? false : true,
+        name,
+        price,
+        colors,
+        company,
+        description,
+        category,
+        shipping: shipping === undefined ? false : true,
+        image: url,
+      };
+    });
+    // console.log(products);
+    return {
+      statusCode: 200,
+      body: JSON.stringify(products),
+    };
+  } catch (error) {
+    console.log(error);
+    return {
+      statusCode: 500,
+      body: "There was an error processing",
+    };
+  }
+};
+
+// REACT_APP_AIRTABLE_KEY
+// REACT_APP_AIRTABLE_BASE
+// REACT_APP_AIRTABLE_TABLE

functions/single-product.js

@@ -0,0 +1,36 @@
+const dotenv = require("dotenv");
+dotenv.config();
+
+let Airtable = require("airtable-node");
+const airtable = new Airtable({ apiKey: process.env.REACT_APP_AIRTABLE_KEY })
+  .base(process.env.REACT_APP_AIRTABLE_BASE)
+  .table(process.env.REACT_APP_AIRTABLE_TABLE);
+
+exports.handler = async (event, context, cb) => {
+  const { id } = event.queryStringParameters;
+  if (id) {
+    try {
+      let product = await airtable.retrieve(id);
+      if (product.error) {
+        return {
+          statusCode: 404,
+          body: `No product with id: ${id}`,
+        };
+      }
+      product = { id: product.id, ...product.fields };
+      return {
+        statusCode: 200,
+        body: JSON.stringify(product),
+      };
+    } catch (error) {
+      return {
+        statusCode: 500,
+        body: `Server Error`,
+      };
+    }
+  }
+  return {
+    statusCode: 400,
+    body: "Please provide product id",
+  };
+};

netlify.toml

@@ -0,0 +1,2 @@
+[build]
+functions = "./functions"