akarshanxyz 1.0.0 → 1.0.1

package/a10/Pagination+FilteringwithReduxCache

@@ -0,0 +1,422 @@
+import express from "express";
+import mongoose from "mongoose";
+import cors from "cors";
+
+import React, { useEffect, useState } from "react";
+import {
+  configureStore,
+  createAsyncThunk,
+  createSlice,
+} from "@reduxjs/toolkit";
+
+import {
+  Provider,
+  useDispatch,
+  useSelector,
+} from "react-redux";
+
+/* ================= BACKEND ================= */
+
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+
+mongoose.connect("mongodb://127.0.0.1:27017/ecommerce");
+
+const productSchema = new mongoose.Schema({
+  title: String,
+  price: Number,
+  category: String,
+});
+
+const Product = mongoose.model(
+  "Product",
+  productSchema
+);
+
+const seedProducts = async () => {
+  const count = await Product.countDocuments();
+
+  if (count === 0) {
+    await Product.insertMany([
+      {
+        title: "Laptop",
+        price: 50000,
+        category: "electronics",
+      },
+      {
+        title: "Phone",
+        price: 20000,
+        category: "electronics",
+      },
+      {
+        title: "TV",
+        price: 40000,
+        category: "electronics",
+      },
+      {
+        title: "Speaker",
+        price: 5000,
+        category: "electronics",
+      },
+      {
+        title: "Camera",
+        price: 35000,
+        category: "electronics",
+      },
+
+      {
+        title: "Shirt",
+        price: 1500,
+        category: "fashion",
+      },
+      {
+        title: "Jeans",
+        price: 2500,
+        category: "fashion",
+      },
+      {
+        title: "Shoes",
+        price: 3000,
+        category: "fashion",
+      },
+      {
+        title: "Jacket",
+        price: 4500,
+        category: "fashion",
+      },
+      {
+        title: "Watch",
+        price: 5000,
+        category: "fashion",
+      },
+
+      {
+        title: "Rice",
+        price: 1200,
+        category: "grocery",
+      },
+      {
+        title: "Milk",
+        price: 60,
+        category: "grocery",
+      },
+      {
+        title: "Bread",
+        price: 40,
+        category: "grocery",
+      },
+      {
+        title: "Eggs",
+        price: 120,
+        category: "grocery",
+      },
+      {
+        title: "Sugar",
+        price: 50,
+        category: "grocery",
+      },
+
+      {
+        title: "Keyboard",
+        price: 1800,
+        category: "electronics",
+      },
+      {
+        title: "Mouse",
+        price: 700,
+        category: "electronics",
+      },
+      {
+        title: "Sneakers",
+        price: 3500,
+        category: "fashion",
+      },
+      {
+        title: "Oil",
+        price: 180,
+        category: "grocery",
+      },
+      {
+        title: "T-shirt",
+        price: 800,
+        category: "fashion",
+      },
+    ]);
+  }
+};
+
+seedProducts();
+
+app.get("/products", async (req, res) => {
+  const page = Number(req.query.page) || 1;
+  const limit = Number(req.query.limit) || 5;
+
+  const totalProducts =
+    await Product.countDocuments();
+
+  const totalPages = Math.ceil(
+    totalProducts / limit
+  );
+
+  const products = await Product.find()
+    .skip((page - 1) * limit)
+    .limit(limit);
+
+  res.json({
+    products,
+    currentPage: page,
+    totalPages,
+  });
+});
+
+app.get(
+  "/products/category/:category",
+  async (req, res) => {
+    const products = await Product.find({
+      category: req.params.category,
+    });
+
+    res.json({ products });
+  }
+);
+
+app.listen(5000, () => {
+  console.log("Server running on port 5000");
+});
+
+/* ================= FRONTEND ================= */
+
+type ProductType = {
+  _id: string;
+  title: string;
+  price: number;
+  category: string;
+};
+
+type ProductState = {
+  pages: {
+    [key: number]: ProductType[];
+  };
+
+  currentPage: number;
+  totalPages: number;
+  filteredProducts: ProductType[];
+};
+
+const fetchProducts = createAsyncThunk(
+  "products/fetchProducts",
+  async (page: number) => {
+    const response = await fetch(
+      `http://localhost:5000/products?page=${page}&limit=5`
+    );
+
+    return response.json();
+  }
+);
+
+const fetchCategoryProducts =
+  createAsyncThunk(
+    "products/fetchCategoryProducts",
+    async (category: string) => {
+      const response = await fetch(
+        `http://localhost:5000/products/category/${category}`
+      );
+
+      return response.json();
+    }
+  );
+
+const initialState: ProductState = {
+  pages: {},
+  currentPage: 1,
+  totalPages: 1,
+  filteredProducts: [],
+};
+
+const productSlice = createSlice({
+  name: "products",
+
+  initialState,
+
+  reducers: {
+    setCurrentPage: (state, action) => {
+      state.currentPage = action.payload;
+    },
+  },
+
+  extraReducers: (builder) => {
+    builder.addCase(
+      fetchProducts.fulfilled,
+      (state, action) => {
+        state.pages[action.payload.currentPage] =
+          action.payload.products;
+
+        state.currentPage =
+          action.payload.currentPage;
+
+        state.totalPages =
+          action.payload.totalPages;
+      }
+    );
+
+    builder.addCase(
+      fetchCategoryProducts.fulfilled,
+      (state, action) => {
+        state.filteredProducts =
+          action.payload.products;
+      }
+    );
+  },
+});
+
+const { setCurrentPage } =
+  productSlice.actions;
+
+const store = configureStore({
+  reducer: {
+    products: productSlice.reducer,
+  },
+});
+
+type RootState = ReturnType<
+  typeof store.getState
+>;
+
+type AppDispatch = typeof store.dispatch;
+
+const ProductList = () => {
+  const dispatch = useDispatch<AppDispatch>();
+
+  const {
+    pages,
+    currentPage,
+    totalPages,
+    filteredProducts,
+  } = useSelector(
+    (state: RootState) => state.products
+  );
+
+  const [category, setCategory] =
+    useState("");
+
+  useEffect(() => {
+    if (!pages[currentPage]) {
+      dispatch(fetchProducts(currentPage));
+    }
+  }, [currentPage]);
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      dispatch(
+        setCurrentPage(currentPage + 1)
+      );
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      dispatch(
+        setCurrentPage(currentPage - 1)
+      );
+    }
+  };
+
+  const handleCategory = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const value = e.target.value;
+
+    setCategory(value);
+
+    if (value) {
+      dispatch(fetchCategoryProducts(value));
+    }
+  };
+
+  const products = category
+    ? filteredProducts
+    : pages[currentPage] || [];
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Product Listing</h1>
+
+      <select
+        value={category}
+        onChange={handleCategory}
+      >
+        <option value="">All</option>
+
+        <option value="electronics">
+          Electronics
+        </option>
+
+        <option value="fashion">
+          Fashion
+        </option>
+
+        <option value="grocery">
+          Grocery
+        </option>
+      </select>
+
+      <div>
+        {products.map((product) => (
+          <div
+            key={product._id}
+            style={{
+              border: "1px solid gray",
+              margin: "10px 0",
+              padding: "10px",
+            }}
+          >
+            <h3>{product.title}</h3>
+
+            <p>₹{product.price}</p>
+
+            <p>{product.category}</p>
+          </div>
+        ))}
+      </div>
+
+      {!category && (
+        <div>
+          <button
+            onClick={handlePrevious}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </button>
+
+          <span
+            style={{ margin: "0 10px" }}
+          >
+            Page {currentPage} of{" "}
+            {totalPages}
+          </span>
+
+          <button
+            onClick={handleNext}
+            disabled={
+              currentPage === totalPages
+            }
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const App = () => {
+  return (
+    <Provider store={store}>
+      <ProductList />
+    </Provider>
+  );
+};
+
+export default App;

package/a7/Login&PaymentForm(Using Yup)

@@ -0,0 +1,132 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+type FormData = {
+  email: string;
+  phoneNumber: string;
+  paymentMethod: "Card" | "UPI";
+  cardNumber?: string;
+  cvv?: string;
+  upiId?: string;
+  terms: boolean;
+};
+
+const schema = yup.object({
+  email: yup
+    .string()
+    .email("Invalid email")
+    .required("Email is required"),
+
+  phoneNumber: yup
+    .string()
+    .matches(/^[0-9]{10}$/, "Phone number must be exactly 10 digits")
+    .required("Phone number is required"),
+
+  paymentMethod: yup
+    .string()
+    .oneOf(["Card", "UPI"])
+    .required("Payment method is required"),
+
+  cardNumber: yup.string().when("paymentMethod", {
+    is: "Card",
+    then: (schema) =>
+      schema
+        .required("Card number is required")
+        .matches(/^[0-9]{16}$/, "Card number must be 16 digits"),
+    otherwise: (schema) => schema.notRequired(),
+  }),
+
+  cvv: yup.string().when("paymentMethod", {
+    is: "Card",
+    then: (schema) =>
+      schema
+        .required("CVV is required")
+        .matches(/^[0-9]{3}$/, "CVV must be 3 digits"),
+    otherwise: (schema) => schema.notRequired(),
+  }),
+
+  upiId: yup.string().when("paymentMethod", {
+    is: "UPI",
+    then: (schema) =>
+      schema
+        .required("UPI ID is required")
+        .matches(
+          /^[a-zA-Z0-9._-]+@[a-zA-Z]+$/,
+          "Invalid UPI ID format"
+        ),
+    otherwise: (schema) => schema.notRequired(),
+  }),
+
+  terms: yup
+    .boolean()
+    .oneOf([true], "You must accept terms and conditions"),
+});
+
+export default function CheckoutForm() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+  });
+
+  const paymentMethod = watch("paymentMethod");
+
+  const onSubmit = (data: FormData) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input type="email" placeholder="Email" {...register("email")} />
+      <p>{errors.email?.message}</p>
+
+      <input
+        type="text"
+        placeholder="Phone Number"
+        {...register("phoneNumber")}
+      />
+      <p>{errors.phoneNumber?.message}</p>
+
+      <select {...register("paymentMethod")}>
+        <option value="">Select Payment Method</option>
+        <option value="Card">Card</option>
+        <option value="UPI">UPI</option>
+      </select>
+      <p>{errors.paymentMethod?.message}</p>
+
+      {paymentMethod === "Card" && (
+        <>
+          <input
+            type="text"
+            placeholder="Card Number"
+            {...register("cardNumber")}
+          />
+          <p>{errors.cardNumber?.message}</p>
+
+          <input type="text" placeholder="CVV" {...register("cvv")} />
+          <p>{errors.cvv?.message}</p>
+        </>
+      )}
+
+      {paymentMethod === "UPI" && (
+        <>
+          <input type="text" placeholder="UPI ID" {...register("upiId")} />
+          <p>{errors.upiId?.message}</p>
+        </>
+      )}
+
+      <label>
+        <input type="checkbox" {...register("terms")} />
+        Accept Terms & Conditions
+      </label>
+      <p>{errors.terms?.message}</p>
+
+      <button type="submit">Pay Now</button>
+    </form>
+  );
+}

package/a7/SellerRegistrationForm(zodschemavalidation)

@@ -0,0 +1,199 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const sellerSchema = z
+  .object({
+    firstName: z.string().min(2, "First name must be at least 2 characters"),
+    lastName: z.string().optional(),
+    email: z.string().email("Invalid email"),
+    phoneNumber: z
+      .string()
+      .regex(/^[0-9]{10}$/, "Phone number must be exactly 10 digits"),
+    age: z.number().min(18, "Age must be 18 or above"),
+
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    confirmPassword: z.string(),
+
+    accountType: z.enum(["Individual", "Business"]),
+
+    shopName: z.string().min(1, "Shop name is required"),
+    gstNumber: z
+      .string()
+      .regex(/^[A-Z0-9]{5,15}$/, "Invalid GST number"),
+    businessAddress: z
+      .string()
+      .min(1, "Business address is required"),
+
+    address: z.object({
+      street: z.string().min(1, "Street is required"),
+      city: z.string().min(1, "City is required"),
+      state: z.string().min(1, "State is required"),
+      pincode: z
+        .string()
+        .regex(/^[0-9]{6}$/, "Pincode must be exactly 6 digits"),
+    }),
+
+    categories: z
+      .array(z.string())
+      .min(1, "Select at least one category"),
+
+    profileImage: z.any().optional(),
+
+    idProof: z.any().refine((file) => file?.length > 0, {
+      message: "ID Proof is required",
+    }),
+
+    bankDetails: z.object({
+      accountNumber: z.string().min(1, "Account number is required"),
+      ifscCode: z
+        .string()
+        .regex(/^[A-Z]{4}0[A-Z0-9]{6}$/, "Invalid IFSC code"),
+      accountHolderName: z
+        .string()
+        .min(1, "Account holder name is required"),
+    }),
+
+    terms: z.literal(true, {
+      errorMap: () => ({
+        message: "You must accept terms and conditions",
+      }),
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    path: ["confirmPassword"],
+    message: "Passwords do not match",
+  });
+
+type SellerFormData = z.infer<typeof sellerSchema>;
+
+export default function SellerRegistrationForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SellerFormData>({
+    resolver: zodResolver(sellerSchema),
+  });
+
+  const onSubmit = (data: SellerFormData) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input placeholder="First Name" {...register("firstName")} />
+      <p>{errors.firstName?.message}</p>
+
+      <input placeholder="Last Name" {...register("lastName")} />
+      <p>{errors.lastName?.message}</p>
+
+      <input placeholder="Email" {...register("email")} />
+      <p>{errors.email?.message}</p>
+
+      <input placeholder="Phone Number" {...register("phoneNumber")} />
+      <p>{errors.phoneNumber?.message}</p>
+
+      <input
+        type="number"
+        placeholder="Age"
+        {...register("age", { valueAsNumber: true })}
+      />
+      <p>{errors.age?.message}</p>
+
+      <input
+        type="password"
+        placeholder="Password"
+        {...register("password")}
+      />
+      <p>{errors.password?.message}</p>
+
+      <input
+        type="password"
+        placeholder="Confirm Password"
+        {...register("confirmPassword")}
+      />
+      <p>{errors.confirmPassword?.message}</p>
+
+      <select {...register("accountType")}>
+        <option value="">Select Account Type</option>
+        <option value="Individual">Individual</option>
+        <option value="Business">Business</option>
+      </select>
+      <p>{errors.accountType?.message}</p>
+
+      <input placeholder="Shop Name" {...register("shopName")} />
+      <p>{errors.shopName?.message}</p>
+
+      <input placeholder="GST Number" {...register("gstNumber")} />
+      <p>{errors.gstNumber?.message}</p>
+
+      <input
+        placeholder="Business Address"
+        {...register("businessAddress")}
+      />
+      <p>{errors.businessAddress?.message}</p>
+
+      <input placeholder="Street" {...register("address.street")} />
+      <p>{errors.address?.street?.message}</p>
+
+      <input placeholder="City" {...register("address.city")} />
+      <p>{errors.address?.city?.message}</p>
+
+      <input placeholder="State" {...register("address.state")} />
+      <p>{errors.address?.state?.message}</p>
+
+      <input placeholder="Pincode" {...register("address.pincode")} />
+      <p>{errors.address?.pincode?.message}</p>
+
+      <label>
+        <input type="checkbox" value="Electronics" {...register("categories")} />
+        Electronics
+      </label>
+
+      <label>
+        <input type="checkbox" value="Fashion" {...register("categories")} />
+        Fashion
+      </label>
+
+      <label>
+        <input type="checkbox" value="Books" {...register("categories")} />
+        Books
+      </label>
+
+      <p>{errors.categories?.message}</p>
+
+      <input type="file" {...register("profileImage")} />
+
+      <input type="file" {...register("idProof")} />
+      <p>{errors.idProof?.message as string}</p>
+
+      <input
+        placeholder="Account Number"
+        {...register("bankDetails.accountNumber")}
+      />
+      <p>{errors.bankDetails?.accountNumber?.message}</p>
+
+      <input
+        placeholder="IFSC Code"
+        {...register("bankDetails.ifscCode")}
+      />
+      <p>{errors.bankDetails?.ifscCode?.message}</p>
+
+      <input
+        placeholder="Account Holder Name"
+        {...register("bankDetails.accountHolderName")}
+      />
+      <p>{errors.bankDetails?.accountHolderName?.message}</p>
+
+      <label>
+        <input type="checkbox" {...register("terms")} />
+        Accept Terms & Conditions
+      </label>
+      <p>{errors.terms?.message}</p>
+
+      <button type="submit">Register Seller</button>
+    </form>
+  );
+}

package/a7/UserRegistrationForm(zodschemavalidation)

@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+const registerSchema = z
+  .object({
+    fullName: z.string().min(2, "Full name must be at least 2 characters"),
+    email: z.string().email("Invalid email"),
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    confirmPassword: z.string(),
+    age: z.number().min(19, "Age must be above 18"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
+
+type RegisterFormData = z.infer<typeof registerSchema>;
+
+const formData: RegisterFormData = {
+  fullName: "Bharat",
+  email: "bharat@example.com",
+  password: "123456",
+  confirmPassword: "123456",
+  age: 20,
+};
+
+const result = registerSchema.safeParse(formData);
+
+if (!result.success) {
+  console.log(result.error.flatten().fieldErrors);
+} else {
+  console.log("Valid Data", result.data);
+}

package/a8/MiniE-commerceApp(using redux)

@@ -0,0 +1,49 @@
+// productSlice.js
+
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  products: [
+    {
+      id: 1,
+      title: "Handmade Vase",
+      price: 800,
+      stock: 5,
+    },
+    {
+      id: 2,
+      title: "Wooden Craft",
+      price: 1200,
+      stock: 3,
+    },
+  ],
+};
+
+const productSlice = createSlice({
+  name: "products",
+  initialState,
+  reducers: {
+    decreaseStock: (state, action) => {
+      const product = state.products.find(
+        (item) => item.id === action.payload
+      );
+
+      if (product && product.stock > 0) {
+        product.stock -= 1;
+      }
+    },
+
+    increaseStock: (state, action) => {
+      const product = state.products.find(
+        (item) => item.id === action.payload
+      );
+
+      if (product) {
+        product.stock += 1;
+      }
+    },
+  },
+});
+
+export const { decreaseStock, increaseStock } = productSlice.actions;
+export default productSlice.reducer;

package/a9/PerformanceOptimization

@@ -0,0 +1,141 @@
+import React, {
+  Suspense,
+  lazy,
+  useEffect,
+  useState,
+} from "react";
+
+type Product = {
+  id: number;
+  title: string;
+  price: number;
+  thumbnail: string;
+};
+
+type ProductCardProps = {
+  title: string;
+  price: number;
+  thumbnail: string;
+};
+
+const ProductCard = ({
+  title,
+  price,
+  thumbnail,
+}: ProductCardProps) => {
+  return (
+    <div
+      style={{
+        border: "1px solid gray",
+        padding: "10px",
+        marginBottom: "10px",
+        width: "250px",
+      }}
+    >
+      <img
+        src={thumbnail}
+        alt={title}
+        width="200"
+        height="150"
+      />
+
+      <h3>{title}</h3>
+
+      <p>${price}</p>
+    </div>
+  );
+};
+
+const ProductListComponent = () => {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [skip, setSkip] = useState(0);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    const fetchProducts = async () => {
+      try {
+        const response = await fetch(
+          `https://dummyjson.com/products?limit=5&skip=${skip}`,
+          {
+            signal: controller.signal,
+          }
+        );
+
+        const data = await response.json();
+
+        setProducts((prev) => [
+          ...prev,
+          ...data.products,
+        ]);
+      } catch (error: any) {
+        if (error.name === "AbortError") {
+          console.log("Request Cancelled");
+        }
+      }
+    };
+
+    fetchProducts();
+
+    return () => {
+      controller.abort();
+    };
+  }, [skip]);
+
+  return (
+    <div>
+      <h2>Products</h2>
+
+      {products.map((product) => (
+        <ProductCard
+          key={product.id}
+          title={product.title}
+          price={product.price}
+          thumbnail={product.thumbnail}
+        />
+      ))}
+
+      <button onClick={() => setSkip((prev) => prev + 5)}>
+        Load More
+      </button>
+    </div>
+  );
+};
+
+const ProductList = lazy(
+  () =>
+    new Promise<{ default: React.ComponentType }>(
+      (resolve) => {
+        setTimeout(() => {
+          resolve({
+            default: ProductListComponent,
+          });
+        }, 1000);
+      }
+    )
+);
+
+const App = () => {
+  const [showProducts, setShowProducts] =
+    useState(false);
+
+  return (
+    <div>
+      <h1>Performance Optimization Demo</h1>
+
+      <button onClick={() => setShowProducts(true)}>
+        Show Products
+      </button>
+
+      {showProducts && (
+        <Suspense
+          fallback={<h2>Loading Products...</h2>}
+        >
+          <ProductList />
+        </Suspense>
+      )}
+    </div>
+  );
+};
+
+export default App;

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "akarshanxyz",
-  "version": "1.0.0"
+  "version": "1.0.1"
 }