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"
  }
}

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!

can you make a video of how you start a new project from idea to a system like step by step what you do to make these system with this strong

Please help: My seeding script doesn't want to work. I even copied the package.json from here but I still get the same error. What am I doing wrong?

bun run db:seed

$ bun run src/seed.ts
38 | const ssrfFilterInterceptor = (dispatch)=>{
39 | return (opts, handler)=>{
40 | return dispatch(opts, handler);
41 | };
42 | };
43 | const safeDispatcher = new Agent().compose(ssrfFilterInterceptor);
^
TypeError: new Agent().compose is not a function. (In 'new Agent().compose(ssrfFilterInterceptor)', 'new Agent().compose' is undefined)
at C:\Projects********\node_modules\payload\dist\uploads\safeFetch.js:43:36

Bun v1.2.13 (Windows x64)
error: script "db:seed" exited with code 1

✅ [new Agent().compose] Error working Solution for Seeding the Database with Payload + Bun

Instead of running your seed script like this:

"scripts": {
 "db:seed": "bun run src/seed.ts"
}

🔁 Use this script in your package.json:

"scripts": {
  "db:seed": "payload run src/seed.ts"
}

Then run:

bun run db:seed

If that doesn't work due to environment or runtime differences, you can directly run the seed file using:

npx payload run src/seed.ts

---

💡 Why This Works

• payload run uses Payload's internal CLI, which sets up the correct Node.js runtime, environment variables, and TypeScript support automatically.
• Running bun run src/seed.ts directly fails because Bun does not yet fully support Node.js APIs like Agent().compose, which Payload internally uses (e.g., in safeFetch.js).
• Using payload run ensures that seeding is done through a Node-compatible layer, even if you use Bun for development elsewhere in your project.

So I installed tsx and dotenv as DevDependencies. Then added

import "dotenv/config";

at the beginning of my seed.ts

and changed my script to be

"db:seed": "tsx src/seed.ts"

It works well.

Payload didn't work for me either when doing the generate:types or db:refresh. I had to use

"generate:types": "bunx tsx ./node_modules/payload/bin.js generate:types",
"db:fresh": "bunx tsx ./node_modules/payload/bin.js migrate:refresh",

to work around that.

not loading seed instead of deleted all my node modules and see error everytime i run anything

✅ [new Agent().compose] Error working Solution for Seeding the Database with Payload + Bun

Instead of running your seed script like this:

"scripts": {
 "db:seed": "bun run src/seed.ts"
}

🔁 Use this script in your package.json:

"scripts": {
  "db:seed": "payload run src/seed.ts"
}

Then run:

bun run db:seed

If that doesn't work due to environment or runtime differences, you can directly run the seed file using:

npx payload run src/seed.ts

💡 Why This Works

• payload run uses Payload's internal CLI, which sets up the correct Node.js runtime, environment variables, and TypeScript support automatically.
• Running bun run src/seed.ts directly fails because Bun does not yet fully support Node.js APIs like Agent().compose, which Payload internally uses (e.g., in safeFetch.js).
• Using payload run ensures that seeding is done through a Node-compatible layer, even if you use Bun for development elsewhere in your project.

Try using this approach if you are using bun

This is built using nextjs 15 which is used to develop web apps that run in the browser, so you cannot add it to google play store, you need to deploy it to server like VPS, vercel, cloudflare etc.

payload.config.ts add
import { Categories } from './collections/Categories'
collections: [Users, Media, Categories],
but playload.types.ts cannot found collection Categories, why? what can I do?

bun run generate:types
$ payload generate:types

node:internal/process/promises:394
triggerUncaughtException(err, true /* fromPromise */);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/wuqiang/workspace/multitenant-ecommerce/src/collections/Users' imported from /home/wuqiang/workspace/multitenant-ecommerce/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 nextResolve (node:internal/modules/esm/hooks:748:28)
at resolve (file:///home/wuqiang/workspace/multitenant-ecommerce/node_modules/tsx/dist/esm/index.mjs?1756900476312:2:5346)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
at handleMessage (node:internal/modules/esm/worker:199:24)
at Immediate.checkForMessages (node:internal/modules/esm/worker:141:28)
at process.processImmediate (node:internal/timers:485:21) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:///home/wuqiang/workspace/multitenant-ecommerce/src/collections/Users'
}

Node.js v22.15.0
error: script "generate:types" exited with code 1

Anyone have the issue about send request create product but tenant is null.
When login the user's website and move to admin page via dashboard

bun run generate:types $ payload generate:types

node:internal/process/promises:394 triggerUncaughtException(err, true /* fromPromise */); ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/wuqiang/workspace/multitenant-ecommerce/src/collections/Users' imported from /home/wuqiang/workspace/multitenant-ecommerce/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 nextResolve (node:internal/modules/esm/hooks:748:28) at resolve (file:///home/wuqiang/workspace/multitenant-ecommerce/node_modules/tsx/dist/esm/index.mjs?1756900476312:2:5346) at nextResolve (node:internal/modules/esm/hooks:748:28) at Hooks.resolve (node:internal/modules/esm/hooks:240:30) at handleMessage (node:internal/modules/esm/worker:199:24) at Immediate.checkForMessages (node:internal/modules/esm/worker:141:28) at process.processImmediate (node:internal/timers:485:21) { code: 'ERR_MODULE_NOT_FOUND', url: 'file:///home/wuqiang/workspace/multitenant-ecommerce/src/collections/Users' }

Node.js v22.15.0 error: script "generate:types" exited with code 1

You can fix this issue by setting the type property in the package.json.

"type": "module"

Error: Transform failed with 1 error:
C:\Users\Sanga\OneDrive\Desktop\multivendor\multitenant\src\seed.ts:190:0: ERROR: Top-level await is currently not supported with the "cjs" output format
at failureErrorWithLog (C:\Users\Sanga\OneDrive\Desktop\multivendor\multitenant\node_modules\esbuild\lib\main.js:1467:15)
at C:\Users\Sanga\OneDrive\Desktop\multivendor\multitenant\node_modules\esbuild\lib\main.js:736:50
at responseCallbacks. (C:\Users\Sanga\OneDrive\Desktop\multivendor\multitenant\node_modules\esbuild\lib\main.js:603:9)
at handleIncomingPacket (C:\Users\Sanga\OneDrive\Desktop\multivendor\multitenant\node_modules\esbuild\lib\main.js:658:12)
at Socket.readFromStdout (C:\Users\Sanga\OneDrive\Desktop\multivendor\multitenant\node_modules\esbuild\lib\main.js:581:7)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:561:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:512:3)
at Readable.push (node:internal/streams/readable:392:5)
at Pipe.onStreamRead (node:internal/stream_base_commons:189:23) {
name: 'TransformError'
}
seeding is not complete, please help...

Have you added "type": module in package json?

Have you added "type": module in package json?

Yes, I added it

can you please specify when this error is coming...
Like after what code you wrote or where are you currently on the project tutorial
it would be more helpful to find the error