Funroad assets

categories.ts

const categories = [
  {
    name: "All",
    slug: "all",
  },
  {
    name: "Business & Money",
    color: "#FFB347",
    slug: "business-money",
    subcategories: [
      { name: "Accounting", slug: "accounting" },
      {
        name: "Entrepreneurship",
        slug: "entrepreneurship",
      },
      { name: "Gigs & Side Projects", slug: "gigs-side-projects" },
      { name: "Investing", slug: "investing" },
      { name: "Management & Leadership", slug: "management-leadership" },
      {
        name: "Marketing & Sales",
        slug: "marketing-sales",
      },
      { name: "Networking, Careers & Jobs", slug: "networking-careers-jobs" },
      { name: "Personal Finance", slug: "personal-finance" },
      { name: "Real Estate", slug: "real-estate" },
    ],
  },
  {
    name: "Software Development",
    color: "#7EC8E3",
    slug: "software-development",
    subcategories: [
      { name: "Web Development", slug: "web-development" },
      { name: "Mobile Development", slug: "mobile-development" },
      { name: "Game Development", slug: "game-development" },
      { name: "Programming Languages", slug: "programming-languages" },
      { name: "DevOps", slug: "devops" },
    ],
  },
  {
    name: "Writing & Publishing",
    color: "#D8B5FF",
    slug: "writing-publishing",
    subcategories: [
      { name: "Fiction", slug: "fiction" },
      { name: "Non-Fiction", slug: "non-fiction" },
      { name: "Blogging", slug: "blogging" },
      { name: "Copywriting", slug: "copywriting" },
      { name: "Self-Publishing", slug: "self-publishing" },
    ],
  },
  {
    name: "Other",
    slug: "other",
  },
  {
    name: "Education",
    color: "#FFE066",
    slug: "education",
    subcategories: [
      { name: "Online Courses", slug: "online-courses" },
      { name: "Tutoring", slug: "tutoring" },
      { name: "Test Preparation", slug: "test-preparation" },
      { name: "Language Learning", slug: "language-learning" },
    ],
  },
  {
    name: "Self Improvement",
    color: "#96E6B3",
    slug: "self-improvement",
    subcategories: [
      { name: "Productivity", slug: "productivity" },
      { name: "Personal Development", slug: "personal-development" },
      { name: "Mindfulness", slug: "mindfulness" },
      { name: "Career Growth", slug: "career-growth" },
    ],
  },
  {
    name: "Fitness & Health",
    color: "#FF9AA2",
    slug: "fitness-health",
    subcategories: [
      { name: "Workout Plans", slug: "workout-plans" },
      { name: "Nutrition", slug: "nutrition" },
      { name: "Mental Health", slug: "mental-health" },
      { name: "Yoga", slug: "yoga" },
    ],
  },
  {
    name: "Design",
    color: "#B5B9FF",
    slug: "design",
    subcategories: [
      { name: "UI/UX", slug: "ui-ux" },
      { name: "Graphic Design", slug: "graphic-design" },
      { name: "3D Modeling", slug: "3d-modeling" },
      { name: "Typography", slug: "typography" },
    ],
  },
  {
    name: "Drawing & Painting",
    color: "#FFCAB0",
    slug: "drawing-painting",
    subcategories: [
      { name: "Watercolor", slug: "watercolor" },
      { name: "Acrylic", slug: "acrylic" },
      { name: "Oil", slug: "oil" },
      { name: "Pastel", slug: "pastel" },
      { name: "Charcoal", slug: "charcoal" },
    ],
  },
  {
    name: "Music",
    color: "#FFD700",
    slug: "music",
    subcategories: [
      { name: "Songwriting", slug: "songwriting" },
      { name: "Music Production", slug: "music-production" },
      { name: "Music Theory", slug: "music-theory" },
      { name: "Music History", slug: "music-history" },
    ],
  },
  {
    name: "Photography",
    color: "#FF6B6B",
    slug: "photography",
    subcategories: [
      { name: "Portrait", slug: "portrait" },
      { name: "Landscape", slug: "landscape" },
      { name: "Street Photography", slug: "street-photography" },
      { name: "Nature", slug: "nature" },
      { name: "Macro", slug: "macro" },
    ],
  },
]

package.json

{
  "name": "multitenant-ecommerce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate:types": "payload generate:types",
    "db:fresh": "payload migrate:fresh",
    "db:seed": "bun run src/seed.ts"
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
    "@payloadcms/db-mongodb": "3.34.0",
    "@payloadcms/next": "3.34.0",
    "@payloadcms/payload-cloud": "3.34.0",
    "@payloadcms/plugin-multi-tenant": "3.34.0",
    "@payloadcms/richtext-lexical": "3.34.0",
    "@payloadcms/storage-vercel-blob": "3.34.0",
    "@radix-ui/react-accordion": "^1.2.3",
    "@radix-ui/react-alert-dialog": "^1.1.6",
    "@radix-ui/react-aspect-ratio": "^1.1.2",
    "@radix-ui/react-avatar": "^1.1.3",
    "@radix-ui/react-checkbox": "^1.1.4",
    "@radix-ui/react-collapsible": "^1.1.3",
    "@radix-ui/react-context-menu": "^2.2.6",
    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-dropdown-menu": "^2.1.6",
    "@radix-ui/react-hover-card": "^1.1.6",
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-menubar": "^1.1.6",
    "@radix-ui/react-navigation-menu": "^1.2.5",
    "@radix-ui/react-popover": "^1.1.6",
    "@radix-ui/react-progress": "^1.1.2",
    "@radix-ui/react-radio-group": "^1.2.3",
    "@radix-ui/react-scroll-area": "^1.2.3",
    "@radix-ui/react-select": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slider": "^1.2.3",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-switch": "^1.1.3",
    "@radix-ui/react-tabs": "^1.1.3",
    "@radix-ui/react-toggle": "^1.1.2",
    "@radix-ui/react-toggle-group": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.8",
    "@tanstack/react-query": "5.72.1",
    "@trpc/client": "11.0.3",
    "@trpc/server": "11.0.3",
    "@trpc/tanstack-react-query": "11.0.3",
    "class-variance-authority": "^0.7.1",
    "client-only": "0.0.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "date-fns": "^4.1.0",
    "embla-carousel-react": "^8.6.0",
    "graphql": "^16.8.1",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.487.0",
    "next": "15.2.4",
    "next-themes": "^0.4.6",
    "nuqs": "^2.4.1",
    "payload": "^3.33.0",
    "react": "^19.0.0",
    "react-day-picker": "8.10.1",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.55.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "^2.15.2",
    "server-only": "0.0.1",
    "sonner": "^2.0.3",
    "stripe": "^18.0.0",
    "superjson": "^2.2.2",
    "tailwind-merge": "^3.1.0",
    "tw-animate-css": "^1.2.5",
    "vaul": "^1.1.2",
    "zod": "3.24.2",
    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
    "@eslint/eslintrc": "^3"
  }
}

Auth pages background

Auth username regex: /^[a-z0-9][a-z0-9-]*[a-z0-9]$/

Middleware matcher: "/((?!api/|_next/|_static/|_vercel|media/|[\w-]+\.\w+).*)"

@AntonioErdeljac Please also attach package.json file.

@Rohitrai12 added

my db:fresh script is not working; it is showing error bun run db:fresh
$ payload migrate:fresh
node:internal/modules/esm/resolve:275
throw new ERR_MODULE_NOT_FOUND(
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\91844\OneDrive\Desktop\e-com\ecom\src\collections\Users' imported from C:\Users\91844\OneDrive\Desktop\e-com\ecom\src\payload.config.ts
at finalizeResolution (node:internal/modules/esm/resolve:275:11)
at moduleResolve (node:internal/modules/esm/resolve:860:10)
at defaultResolve (node:internal/modules/esm/resolve:984:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:685:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:634:25)
at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:384:53)
at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:357:11)
at loadESMFromCJS (node:internal/modules/cjs/loader:1385:24)
at Module._compile (node:internal/modules/cjs/loader:1536:5) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:///C:/Users/91844/OneDrive/Desktop/e-com/ecom/src/collections/Users'
}

Node.js v22.14.0
error: script "db:fresh" exited with code 1

put type=module in your package.json that fixed it for me

throw new MongoServerError((object ??= document.toObject(bsonOptions)));
^

MongoServerError: user is not allowed to do action [dropDatabase] on [e-commerce.]
at Connection.sendCommand (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\cmap\connection.ts:545:17)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async Connection.command (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\cmap\connection.ts:617:22)
at async Server.command (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\sdam\server.ts:337:21)
at async DropDatabaseOperation.executeCommand (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\operations\command.ts:179:12)
at async DropDatabaseOperation.execute (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\operations\drop.ts:110:5)
at async tryOperation (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\operations\execute_operation.ts:278:14)
at async executeOperation (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\operations\execute_operation.ts:112:12)
at async Db.dropDatabase (E:\Code\NextJs\e-commerce\node_modules\mongodb\src\db.ts:422:12)
at async Object.migrateFresh (E:\Code\NextJs\e-commerce\node_modules@payloadcms\db-mongodb\src\migrateFresh.ts:39:3) {
errorResponse: {
ok: 0,
errmsg: 'user is not allowed to do action [dropDatabase] on [e-commerce.]',
code: 8000,
codeName: 'AtlasError'
},
ok: 0,
code: 8000,
codeName: 'AtlasError',
[Symbol(errorLabels)]: Set(0) {}
}

@Rua994 did you put admin priviledges for your mongodb database user?

When i am using the sidebar then the URL is being dispatched and showing 404 not found

…

On Wed, 23 Apr 2025, 00:13 Antonio Erdeljac, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @Rua994 <https://github.com/Rua994> did you put admin priviledges for your mongodb database user? — Reply to this email directly, view it on GitHub <https://gist.github.com/AntonioErdeljac/742df57011c55c365841daca78f53c1f#gistcomment-5551361> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCHULWFA2WNM7PQDN4RQH5T222C33BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTGNZTGAZTENRRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

please add the placeholder png i used another image intead of that but i can;t find the original image in the video i like that original image you used

@AntonioErdeljac can you please add the placeholder png.

My types for categories are not being inferred properly here
`
"use client"

import { useTRPC } from '@/trpc/client'
import { useQuery } from '@tanstack/react-query';
import React from 'react'

const page = () => {

const trpc = useTRPC();
const categories = useQuery(trpc.categories.getMany.queryOptions());

return (

{JSON.stringify(categories.data)}

)
}

export default page
`

It shows like this const categories: UseQueryResult<{ subcategories: { subcategories: undefined; id: number; name: string; slug: string; color?: string | null; parent?: (number | null) | Category; updatedAt: string; createdAt: string; }[]; ... 6 more ...; createdAt: string; }[], TRPCClientErrorLike<...>>

which is incorrect according to the tutorial
`import { baseProcedure, createTRPCRouter } from "@/trpc/init";
import { Category } from "@/payload-types";

export const categoriesRouter = createTRPCRouter({
getMany: baseProcedure.query(async ({ ctx }) => {
const data = await ctx.db.find({
collection: "categories",
depth: 1,
pagination: false,
where: {
parent: {
exists: false
}
},
sort: "name"
});

    const formattedData = data.docs.map((doc) => ({
        ...doc,
        subcategories: (doc.subcategories?.docs ?? []).map((subdoc) => ({
            ...(subdoc as Category),
            subcategories: undefined,
        })),
    }));
    return formattedData
}),

})`
this is how i am fetching, so what is the issuse i really cant catch it

this is the Category.ts if needed
`import { CollectionConfig } from "payload";

export const Categories: CollectionConfig = {
slug: "categories",
fields: [
{
type: "text",
name: "name",
required: true,
},
{
name: "slug",
type: "text",
required: true,
unique: true,
index: true,
},
{
name: "color",
type: "text"
},
{
name: "parent",
type: "relationship",
relationTo: "categories",
hasMany: false
},
{
name: "subcategories",
type: "join",
collection: "categories",
on: "parent",
hasMany: true
},
],
};`
@AntonioErdeljac please help

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: [["categories","getMany"],{"type":"query"}]
⨯ [Error: [["categories","getMany"],{"type":"query"}] data is undefined] {
digest: '51338876'
}

@AntonioErdeljac please help

placeholder.png

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: [["categories","getMany"],{"type":"query"}] ⨯ [Error: [["categories","getMany"],{"type":"query"}] data is undefined] { digest: '51338876' }

@AntonioErdeljac please help

did you get any help? i am stuck there also

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: [["categories","getMany"],{"type":"query"}] ⨯ [Error: [["categories","getMany"],{"type":"query"}] data is undefined] { digest: '51338876' }
@AntonioErdeljac please help

did you get any help? i am stuck there also
No help even no reply I have Pro membership but unfortunately no help from kind sir

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: [["categories","getMany"],{"type":"query"}] ⨯ [Error: [["categories","getMany"],{"type":"query"}] data is undefined] { digest: '51338876' }

@AntonioErdeljac please help

disable superjson and you are good to go

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: [["categories","getMany"],{"type":"query"}] ⨯ [Error: [["categories","getMany"],{"type":"query"}] data is undefined] { digest: '51338876' }
@AntonioErdeljac please help

disable superjson and you are good to go

This works but why this error comes ? what is purpose of superjson ?

//product-list.tsx

const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
useSuspenseInfiniteQuery(
trpc.products.getMany.infiniteQueryOptions(
{
...filters,
category,
limit: DEFAULT_LIMIT,
},
{
getNextPageParam: (lastPage) => {
return lastPage.docs.length > 0 ? lastPage.nextPage : undefined;
},
}
)
);

// error : on    trpc.products.getMany.infiniteQueryOptions line >>
Cannot invoke an object which is possibly 'undefined'.ts(2722)

@AntonioErdeljac  @AntonioErdeljac  please help

Provide full context of the error

Provide full context of the error

@Ashish1022 , resolved, thanks!