create-fsd-architecture 1.0.1 → 1.0.2

package/ashraf/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "mudular-structure-v2",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.15.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.72.1",
+    "react-router": "^7.13.1",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "shadcn": "^3.8.5",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

package/ashraf/src/app/App.tsx

@@ -0,0 +1,12 @@
+function App() {
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold underline">
+
+      </h1>
+    </div>
+  )
+}
+
+export default App;

package/ashraf/src/app/styles/index.css

@@ -0,0 +1,190 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/ashraf/src/entities/products/api/get-product-by-id.ts

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+import type { Product } from "../model/types";
+
+export const getProductById = async (id: string): Promise<Product> => {
+  const response = await axios.get(`/products/${id}`);
+  return response.data;
+};

package/ashraf/src/entities/products/api/get-products.ts

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+import type { Product } from "../model/types";
+
+export const getProducts = async (): Promise<Product[]> => {
+  const response = await axios.get("/products");
+  return response.data;
+};

package/ashraf/src/entities/products/index.ts

@@ -0,0 +1,5 @@
+export * from "./model/types";
+export * from "./model/query-keys";
+export * from "./api/get-products";
+export * from "./api/get-product-by-id";
+export * from "./ui/product-card";

package/ashraf/src/entities/products/model/query-keys.ts

@@ -0,0 +1,5 @@
+export const productQueryKeys = {
+  all: ["products"] as const,
+  lists: () => [...productQueryKeys.all, "list"] as const,
+  detail: (id: string) => [...productQueryKeys.all, "detail", id] as const,
+};

package/ashraf/src/entities/products/model/types.ts

@@ -0,0 +1,18 @@
+export type Product = {
+  id: string;
+  title: string;
+  description: string;
+  price: number;
+  imageUrl: string;
+  stock: number;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type ProductPayload = {
+  title: string;
+  description: string;
+  price: number;
+  imageUrl: string;
+  stock: number;
+};

package/ashraf/src/entities/products/ui/product-card.tsx

@@ -0,0 +1,25 @@
+import type { Product } from "../model/types";
+
+type ProductCardProps = {
+  product: Product;
+};
+
+export const ProductCard = ({ product }: ProductCardProps) => {
+  return (
+    <div className="rounded-2xl border p-4 shadow-sm">
+      <img
+        src={product.imageUrl}
+        alt={product.title}
+        className="mb-3 h-48 w-full rounded-xl object-cover"
+      />
+
+      <h3 className="text-lg font-bold">{product.title}</h3>
+      <p className="mt-2 text-sm text-gray-600">{product.description}</p>
+
+      <div className="mt-3 flex items-center justify-between">
+        <span className="font-semibold">{product.price} EGP</span>
+        <span className="text-sm text-gray-500">Stock: {product.stock}</span>
+      </div>
+    </div>
+  );
+};

package/ashraf/src/features/products/create-product/api/create-product.ts

@@ -0,0 +1,7 @@
+import type { Product, ProductPayload } from "@/entities/products";
+import axios from "axios";
+
+export const createProduct = async (payload: ProductPayload): Promise<Product> => {
+  const response = await axios.post("/products", payload);
+  return response.data;
+};

package/ashraf/src/features/products/create-product/index.ts

@@ -0,0 +1,2 @@
+export * from "./ui/create-product-form";
+export * from "./model/use-create-product";

package/ashraf/src/features/products/create-product/model/create-product-schema.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const createProductSchema = z.object({
+  title: z.string().min(2, "Title is required"),
+  description: z.string().min(5, "Description is required"),
+  price: z.coerce.number().min(1, "Price must be greater than 0"),
+  imageUrl: z.string().url("Invalid image url"),
+  stock: z.coerce.number().min(0, "Stock cannot be negative"),
+});
+
+export type CreateProductFormValues = z.infer<typeof createProductSchema>;

package/ashraf/src/features/products/create-product/model/use-create-product.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { productQueryKeys } from "@/entities/products";
+
+import { createProduct } from "../api/create-product";
+
+export const useCreateProduct = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createProduct,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: productQueryKeys.all });
+    },
+  });
+};

package/ashraf/src/features/products/create-product/ui/create-product-form.tsx

@@ -0,0 +1,85 @@
+import { useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createProductSchema, type CreateProductFormValues } from "../model/create-product-schema";
+import { useCreateProduct } from "../model/use-create-product";
+
+export const CreateProductForm = () => {
+    const { mutate, isPending } = useCreateProduct();
+
+    const form = useForm<CreateProductFormValues>({
+        resolver: zodResolver(createProductSchema),
+        defaultValues: {
+            title: "",
+            description: "",
+            price: 0,
+            imageUrl: "",
+            stock: 0,
+        },
+    });
+
+    const onSubmit = (values: CreateProductFormValues) => {
+        mutate(values, {
+            onSuccess: () => {
+                form.reset();
+            },
+        });
+    };
+
+    return (
+        <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 rounded-2xl border p-5"
+        >
+            <input
+                placeholder="Title"
+                className="w-full rounded-xl border p-3"
+                {...form.register("title")}
+            />
+            <p className="text-sm text-red-500">{form.formState.errors.title?.message}</p>
+
+            <textarea
+                placeholder="Description"
+                className="w-full rounded-xl border p-3"
+                {...form.register("description")}
+            />
+            <p className="text-sm text-red-500">
+                {form.formState.errors.description?.message}
+            </p>
+
+            <input
+                type="number"
+                placeholder="Price"
+                className="w-full rounded-xl border p-3"
+                {...form.register("price")}
+            />
+            <p className="text-sm text-red-500">{form.formState.errors.price?.message}</p>
+
+            <input
+                placeholder="Image URL"
+                className="w-full rounded-xl border p-3"
+                {...form.register("imageUrl")}
+            />
+            <p className="text-sm text-red-500">
+                {form.formState.errors.imageUrl?.message}
+            </p>
+
+            <input
+                type="number"
+                placeholder="Stock"
+                className="w-full rounded-xl border p-3"
+                {...form.register("stock")}
+            />
+            <p className="text-sm text-red-500">{form.formState.errors.stock?.message}</p>
+
+            <button
+                type="submit"
+                disabled={isPending}
+                className="rounded-xl bg-black px-4 py-2 text-white disabled:opacity-50"
+            >
+                {isPending ? "Creating..." : "Create Product"}
+            </button>
+        </form>
+    );
+};

package/ashraf/src/features/products/update-product/api/update-product.ts

@@ -0,0 +1,12 @@
+import type { Product, ProductPayload } from "@/entities/products";
+import axios from "axios";
+
+type UpdateProductParams = {
+  id: string;
+  payload: ProductPayload;
+};
+
+export const updateProduct = async ({ id, payload }: UpdateProductParams): Promise<Product> => {
+  const response = await axios.put(`/products/${id}`, payload);
+  return response.data;
+};

package/ashraf/src/features/products/update-product/index.ts

@@ -0,0 +1,2 @@
+export * from "./ui/update-product-form";
+export * from "./model/use-update-product";

package/ashraf/src/features/products/update-product/model/update-product.schema.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const updateProductSchema = z.object({
+  title: z.string().min(2, "Title is required"),
+  description: z.string().min(5, "Description is required"),
+  price: z.coerce.number().min(1, "Price must be greater than 0"),
+  imageUrl: z.string().url("Invalid image url"),
+  stock: z.coerce.number().min(0, "Stock cannot be negative"),
+});
+
+export type UpdateProductFormValues = z.infer<typeof updateProductSchema>;

package/ashraf/src/features/products/update-product/model/use-update-product.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { updateProduct } from "../api/update-product";
+import { productQueryKeys } from "@/entities/products";
+
+export const useUpdateProduct = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: updateProduct,
+        onSuccess: (updatedProduct) => {
+            queryClient.invalidateQueries({ queryKey: productQueryKeys.all });
+            queryClient.invalidateQueries({
+                queryKey: productQueryKeys.detail(updatedProduct.id),
+            });
+        },
+    });
+};

package/ashraf/src/features/products/update-product/ui/update-product-form.tsx

@@ -0,0 +1,69 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Product } from "@/entities/products";
+import {
+    updateProductSchema,
+    type UpdateProductFormValues,
+} from "../model/update-product.schema";
+import { useUpdateProduct } from "../model/use-update-product";
+
+type UpdateProductFormProps = {
+    product: Product;
+};
+
+export const UpdateProductForm = ({ product }: UpdateProductFormProps) => {
+    const { mutate, isPending } = useUpdateProduct();
+
+    const form = useForm<UpdateProductFormValues>({
+        resolver: zodResolver(updateProductSchema),
+        defaultValues: {
+            title: product.title,
+            description: product.description,
+            price: product.price,
+            imageUrl: product.imageUrl,
+            stock: product.stock,
+        },
+    });
+
+    const onSubmit = (values: UpdateProductFormValues) => {
+        mutate({
+            id: product.id,
+            payload: values,
+        });
+    };
+
+    return (
+        <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 rounded-2xl border p-5"
+        >
+            <input className="w-full rounded-xl border p-3" {...form.register("title")} />
+            <textarea
+                className="w-full rounded-xl border p-3"
+                {...form.register("description")}
+            />
+            <input
+                type="number"
+                className="w-full rounded-xl border p-3"
+                {...form.register("price")}
+            />
+            <input
+                className="w-full rounded-xl border p-3"
+                {...form.register("imageUrl")}
+            />
+            <input
+                type="number"
+                className="w-full rounded-xl border p-3"
+                {...form.register("stock")}
+            />
+
+            <button
+                type="submit"
+                disabled={isPending}
+                className="rounded-xl bg-black px-4 py-2 text-white disabled:opacity-50"
+            >
+                {isPending ? "Updating..." : "Update Product"}
+            </button>
+        </form>
+    );
+};

package/ashraf/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './app/App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/ashraf/src/pages/products/all-products.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import { getProducts, productQueryKeys, ProductCard, type Product } from "@/entities/products";
+
+export const AllProductsPage = () => {
+  const { data, isLoading, isError } = useQuery<Product[]>({
+    queryKey: productQueryKeys.lists(),
+    queryFn: getProducts,
+  });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (isError) return <p>Something went wrong</p>;
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+      {data?.map((product) => (
+        <div key={product.id} className="space-y-3">
+          <ProductCard product={product} />
+          {/* <DeleteProductButton productId={product.id} /> */}
+        </div>
+      ))}
+    </div>
+  );
+};

package/ashraf/src/pages/products/create-product-page.tsx

@@ -0,0 +1,10 @@
+import { CreateProductForm } from "@/features/products/create-product";
+
+export const CreateProductPage = () => {
+    return (
+        <div className="mx-auto max-w-2xl">
+            <h1 className="mb-4 text-2xl font-bold">Create Product</h1>
+            <CreateProductForm />
+        </div>
+    );
+};

package/ashraf/src/pages/products/update-product-page.tsx

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { getProductById, productQueryKeys } from "@/entities/products";
+import { UpdateProductForm } from "@/features/products/update-product";
+
+type UpdateProductPageProps = {
+    productId: string;
+};
+
+export const UpdateProductPage = ({ productId }: UpdateProductPageProps) => {
+    const { data, isLoading, isError } = useQuery({
+        queryKey: productQueryKeys.detail(productId),
+        queryFn: () => getProductById(productId),
+    });
+
+    if (isLoading) return <p>Loading...</p>;
+    if (isError || !data) return <p>Product not found</p>;
+
+    return (
+        <div className="mx-auto max-w-2xl">
+            <h1 className="mb-4 text-2xl font-bold">Update Product</h1>
+            <UpdateProductForm product={data} />
+        </div>
+    );
+};

package/ashraf/src/shared/config/env.ts

@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:3000";

package/ashraf/src/shared/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}