sadmann7 / skateshop Goto Github PK

View Code? Open in Web Editor NEW

5.0K 5.0K 703.0 172.49 MB

An open source e-commerce skateshop build with everything new in Next.js.

Home Page: https://skateshop.sadmn.com

License: MIT License

JavaScript 0.61% TypeScript 95.61% CSS 0.33% MDX 3.44%

drizzle-orm nextjs open-source shadcn-ui stripe

skateshop's People

Contributors

Stargazers

Watchers

Forkers

yasseralsaidi dharmikjagodana nilportugues sunny0183 avi7501 takudzwapnyamukuva its-satyajit jaysonobado aqib-rime sandeepreddyr12 majeed4u sachitsac the-name-romel robotvinay was-studio yudis10 hightower86 bredom tendaikatsande janaka4345 ajaxbo360 phxgg sagarmsraozil 101amolkadam aryan570 basics-school 8rxn joywhy dhawal-793 abdelrahman-essawy joelgar19 embgithub hunghoxuan carvalhomeo willscott085 ibqn ajlborges aditya007datta mandy9943 lobosan vette1123 bibhushankarki themehrankhan tomeczekstecc indraak leung100 ktellawi kitimborino caseydbrown erapote raqibnur sataylor7 vibeesarma julianarchila amani-joseph albiummid mb-x junaisbabu iamshgulati graphicowls msiksnis elvisdev187 sece15 tristcoil bernz322 gaedong2 re757575 dchavezp hungtp1996nd ayushkkkkkkk azemchap atlas700 junaidgehlot sajolsaha 21givenchy harisnewbie taos15 sohagmahin ujjwal-45 asifraja wongani02 learnin-fork sadandlonely amirxoder mtanash vergatan10 ali-khadembashi mirkoreichlin wolfwithcode sushimushi kitonyi yeondg sebastianmaculewicz kayode-adechinan panteliselef mdsalahuddin2001 myoaung99 mmaaaaz ehrro karanpal-dhillon

skateshop's Issues

first click on route is taking sometime

Dark mode not eneabled on cleck profile

Exploring a Fresh Style Inspired by Threads.com

I came across an exciting project called Threads.com (https://threads.com/) that features a youthful web3 style with stunning animations. This social software is currently gaining popularity, and I believe it could serve as a fantastic source of inspiration for your project.

Would you be interested in exploring this vibrant style for a new project? Looking forward to your response.

Creating product ERROR

Loading chunk 8434 failed. (error: https://skateshop.sadmn.com/_next/static/chunks/app/(dashboard)/dashboard/stores/%5BstoreId%5D/products/new/page-0812e6ff6b1c9231.js)

whenever i try to create the first product in a store

Product variants

Is it possible to create product variants? I think having variants is essential for an ecommerce.

It may be better to wrap a Hydration

If you wrap it in a layer of hydrate, the page will appear smoother when loading. :)

This is just a personal suggestion, or perhaps you have some other considerations.

// layout.tsx
 <html className={`${inter.variable} ${roboto.variable} ${lobster.variable}`} lang="en">
      <body className="">
        <Hydrate>
          {children}
        </Hydrate>
      </body>
      <Analytics />
      <Script src="https://assets.salesmartly.com/js/project_17337_17849_1685514262.js" strategy="afterInteractive" />
    </html>

// Hydrate.tsx
const Hydrate = ({ children }: { children: ReactNode }) => {
  const themeStore = useThemeStore();
  const [isHydrated, setIsHydrated] = useState(false);
  useEffect(() => {
    setIsHydrated(true);
  }, []);

  return (
    <Fragment>
      {isHydrated ? (
        <>{children}</>
      ) : (
        <>
          <Loading />
        </>
      )}
    </Fragment>
  );
};

export default Hydrate;

Error when manual input quantity

Hello guys, I try the demo website and find out that when we modify quantity input without arrow, there will be an error

Product checkout via stripe

This required to connect the stripe account to a bank.

A phone number and a bank account is required to connect the account.

Bangladesh is not available on the list.

So this is not be possible for me to do.

Application error: a server-side exception has occurred (see the server logs for more information). Digest: 2497555049

when on the production site and trying and access the dashboard or account a white page with the above error code appears. the console prints out the following error. Signed in with google sso.

8745-c1afa25a7b044c0f.js:1 Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

Can't get this to run

I've cloned the repo, set up the .env file properly and also downgraded the content layer. Yet the content layer is throwing issues:

I think the real root cause is that I cannot get the db:push to work. I keep getting ECONNREFUSED:

The strange part is the same '.env' file seems to work in other cases as I can see the app trying to query the database, but since the tables don't exist yet it fails of course. So why would it connect sometimes and sometimes fail?

Anyone have any suggestions or ideas? I really want to explore this code base - it looks awesome!!

Application error: client-side exception with digest 3976766164

when visiting the site, it shows that error message .

Application error: client-side exception with digest 3976766164

Argument of type '() => Promise<void>' is not assignable to parameter of type 'TransitionFunction'

I have recently discovered that the transition function can not be async according to the docs https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-as-a-transition

startTransition(async () => {
...
}

if you update your typing to the latest version i.e. @types/react": "18.2.14 you should observe this as well.

Argument of type '() => Promise<void>' is not assignable to parameter of type 'TransitionFunction'.
  Type 'Promise<void>' is not assignable to type 'VoidOrUndefinedOnly'

Populating Database

When I run the application locally I see no product. How can I do it?

Error while adding a product to cart

Add Loading Spinner for Server Component Pages

Currently, when navigating to pages with server components, there is no loading state displayed to the user. This results in a blank screen until the server data is fetched, leading to a poor user experience. To improve this, we should implement a loading spinner for each server component page where data retrieval takes some time.

PS: It would be great if you could assign me this task. I am willing to contribute to this amazing project. Thanks.

Cant add Store

Hello, ive installed the project and added all the env variables but changed the db to local mysql other than planetscale....im trying to add a store from the web app itself but i get this error : SyntaxError: await is only valid in async functions and the top level bodies of modules at (actionBrowser)/./src/db/index.ts (C:\Users\thams\Garage\skateshop\.next\server\app\(dashboard)\dashboard\stores\new\page.js:12791:1) at __webpack_require__ (C:\Users\thams\Garage\skateshop\.next\server\webpack-runtime.js:33:43) at eval (./src/app/_actions/store.ts:11:61) at (actionBrowser)/./src/app/_actions/store.ts (C:\Users\thams\Garage\skateshop\.next\server\app\(dashboard)\dashboard\stores\new\page.js:12089:1)

Any idea what might be wrong

https://skateshop.sadmn.com/ checkout doenst work

clicking on shopping cart then on "proceed to checkout" wont take user to stripe checkout page on https://skateshop.sadmn.com/

Add favicon

Build Error "Cannot get final name for export 'encodeXML'"

git clone the project
pnpm install
pnpm build
error occures

I just tried to build the project but it fails.

I did some googleing on the issue but was not able to resolve it.
I tried Node 18 and 21. Nextjs 14.0.3, 14.0.1 as well as 14.0.4-canary.18 and latest canary but no luck.

Starting in dev works but building/deployment doesn't. Any help is appreciated

Bad use of transition

skateshop/src/components/generate-button.tsx

Line 16 in aaa1b21

startTransition(async () => {

"The function you pass to startTransition must be synchronous."
https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-as-a-transition

Sign in on live web app

not an issue, but wondering if there is any default account that i can use to log in with to view how it works when someone is authenticated; as seems to have hit to sign up limit with clerk. (on live site)

cheers 👍

great project

Wrong URL when view product detail from store

Account -> View store -> Products -> View a product -> Not found!
ex: https://skateshop.sadmn.com/products/39
It should be: https://skateshop.sadmn.com/product/39

I have added newsletter via react-email. If anyone has any features requests let me know.

Contentlayer Error

Hi,

i did everythig in the readme but after running "pnpm run dev" i get this error:

./src/app/(lobby)/[...slug]/page.tsx:2:0
Module not found: Package path ./generated is not exported from package /Users/jannik/Projects/bytelanede/bytelanede/node_modules/contentlayer (see exports field in /Users/jannik/Projects/bytelanede/bytelanede/node_modules/contentlayer/package.json)
1 | import { notFound } from "next/navigation"

2 | import { allPages } from "contentlayer/generated"
3 |
4 | import "@/styles/mdx.css"
5 |

https://nextjs.org/docs/messages/module-not-found

ENV Variables are all set.

Adding a new product with the same [name] throws a different error than expected

When attempting to insert a product with a name that already exists, the error message displayed in the toast is:

An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance, which may provide additional details about the nature of the error.

Instead, the more user-friendly message should be:

Product name is already in use.

access to signin/signup pages even when authenticated

Am not sure if this is something you would want, but shouldn't access to the signin/signup pages be restricted when we are authenticated

[ACTION REQUIRED] CLERK

The Clerk team recently identified and patched a critical security vulnerability in the @clerk/nextjs SDK that allows malicious actors to gain privileged access or act-on-behalf-of other users.

If you use @clerk/nextjs, please upgrade immediately to 4.29.3.

NOTE : I PERSONALLY LOGGED IN TO SOMEONE ELSE ACCOUNT IN (https://skateshop.sadmn.com/) BUT I COULDNT DO ANYTHING ( I GOT 404 ) ..

Trigger page load on pagination click

Clicking on a different page number in the products page, takes a few seconds to change the search parameter, so the page is basically the same till that point (does not trigger the loading page)

I wonder if there is a way to do it more instantly

Cannot multiple filter

Step to reproduce

Go to Product Page Dashboard
Make 2 product with same category
Filter with that Category
Change the rows of that page to anything
Notice the query params didnt updated

Failed to load next.config.mjs | Named export not found

Hi,
I get this Error after running "pnpm run dev":

info Loaded env from /Users/jannik/Projects/feuerwehr-penzberg-website/skateshop/.env
error Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
file:///Users/jannik/Projects/feuerwehr-penzberg-website/skateshop/node_modules/.pnpm/@Effect-TS [email protected](@Effect-TS [email protected])(@op_bz4we2wpvc5dtwvz6ke3fnzjjy/node_modules/@effect-ts/otel/_mjs/Processor/Simple/index.mjs:7
import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ConsoleSpanExporter' not found. The requested module '@opentelemetry/sdk-trace-base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@opentelemetry/sdk-trace-base';
const { ConsoleSpanExporter, SimpleSpanProcessor } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
at async loadConfig (/Users/jannik/Projects/feuerwehr-penzberg-website/skateshop/node_modules/.pnpm/[email protected]([email protected])([email protected])/node_modules/next/dist/server/config.js:546:36)
at async NextServer.prepare (/Users/jannik/Projects/feuerwehr-penzberg-website/skateshop/node_modules/.pnpm/[email protected]([email protected])([email protected])/node_modules/next/dist/server/next.js:161:24)
at async Server.<anonymous> (/Users/jannik/Projects/feuerwehr-penzberg-website/skateshop/node_modules/.pnpm/[email protected]([email protected])([email protected])/node_modules/next/dist/server/lib/render-server.js:128:17) {

type: 'SyntaxError'
}

error Command failed with exit code 1.

error TypeError: fetch failed when running pnpm run dev

When running pnpm run dev, I got error:
error TypeError: fetch failed
`error TypeError: fetch failed

error src/lib/utils.ts (111:2) @ isMacOs
error ReferenceError: window is not defined
at isMacOs (./src/lib/utils.ts:115:5)
at Combobox (./src/components/combobox.tsx:102:91)
109 |
110 | export function isMacOs() {

111 | return window.navigator.userAgent.includes("Mac")
| ^
112 | }`

I'm use Apple M1 Pro.
Another error when I try pnpm run db:push .
Got an error: Error: self signed certificate in certificate chain
code: 'HANDSHAKE_SSL_ERROR',
errno: undefined,
sqlState: undefined

Please help. Many thanks!

[duplicated] POST request: Join newsletter

Why do u have server action and api route for join news letter ?? is it for demonstration purposes or ?

Email preferences are not working

When you enter into the email preferences route, you get the not found page because you don't have the token. I guess as there is no way to reach this route through the app, the email preferences feature is not implemented at all, but I just wanted to let you know.

Enhance Cart Quantity Update Functionality for Improved User Experience

When adding an item to the cart and attempting to update its quantity, the system lacks debounce functionality. This means users must adjust the quantity one by one, which creates a suboptimal user experience.

I would like to contribute a solution to this issue through a pull request. Please consider assigning it to me if that works for you.

Checkout

I am running it locally - http://localhost:3000/categories/clothing but proceed to checkout button doesn't work.

Is it really necessary to use loader?.

When form validation trigger on the add or update product, the cropped image disappear.

croppedImage doesn't generate path and preview so I do rewrite some code with better type guard using satisfies

const onCrop = React.useCallback(() => {
    if (!files || !cropperRef.current) return
    setCropData(cropperRef.current?.cropper.getCroppedCanvas().toDataURL())

    cropperRef.current?.cropper.getCroppedCanvas().toBlob((blob) => {
      if (!blob) return
      const croppedImage = new File([blob], file.name, {
        type: file.type,
        lastModified: Date.now(),
      })
      files.splice(i, 1, croppedImage as FileWithPreview)
      setValue(name, files as PathValue<TFieldValues, Path<TFieldValues>>)
    })
  }, [file.name, file.type, files, i, name, setValue])

const onCrop = React.useCallback(() => {
    if (!files || !cropperRef.current) return

    const croppedCanvas = cropperRef.current?.cropper.getCroppedCanvas()
    setCropData(croppedCanvas.toDataURL())

    croppedCanvas.toBlob((blob) => {
      if (!blob) {
        console.error("Blob creation failed")
        return
      }
      const croppedImage = new File([blob], file.name, {
        type: file.type,
        lastModified: Date.now(),
      })

      const croppedFile = Object.assign(croppedImage, {
        preview: URL.createObjectURL(croppedImage),
        path: file.name,
      }) satisfies FileWithPreview

      const newFiles = [...files]
      newFiles.splice(i, 1, croppedFile)
      setValue(name, newFiles as PathValue<TFieldValues, Path<TFieldValues>>)
    })
  }, [file.name, file.type, files, i, name, setValue])

changing subscription and adding multiple stores for non subscriber

Hi,
i was testing this for couple of days now , and this is first time i am opening issue. sorry for being noobs and if i missed some steps during setting up the environment for testing.
let me explain what i have done. after cloning the repo, i populate all the required env variables. download packages, pushed the database and run the app. then sign up and go straight to the dashboard. as described by default user can have one store and 20 products without need of any additional subscriptions. then i created the store connect to stripe added products as well. so far so good, now when i subscribed to any of the other subscriptions, i still can see my plan as Ollie (which is default i believe) and i can subscribe the same plan multiple times. so my point is once user subscribed for upgraded plan current plan should reflect in users dashboard not the default one. and if user try to subscribe same plan before expire then we should have some kind of information or alert system to the user that selected plan is already subscribed and if user still insist to go ahead and subscribe then we can allow else user can cancel the process. one more thing i noticed is user can add multiple store even user did not make any upgraded subscription. again sorry for the long message.

Zod validation errors

I'm facing these validation errors on localhost

When I create store:

when I navigate to path /categories/[category]/[subcategory]:

My planetscale is configured. What am I doing wrong?

error:"You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '('null')"

My mysql version is 5.7. How can I fix this problem

@opentelemetry error

Cloned repo, pnpm installed and changed .env variables and on running got the error:

> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /Users/thiagoleobons/jul/repos/skateshop/.env.local
- error Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
file:///Users/thiagoleobons/jul/repos/skateshop/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@opentelemetry+core@1._vak64uwhuw23bp45xj3whrz3hy/node_modules/@effect-ts/otel/_mjs/Processor/Simple/index.mjs:7
import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
         ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ConsoleSpanExporter' not found. The requested module '@opentelemetry/sdk-trace-base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@opentelemetry/sdk-trace-base';
const { ConsoleSpanExporter, SimpleSpanProcessor } = pkg;

Request to be updated on resolution of NextJS app router scroll reset by searchParam issue

I am following the progress on the following issue and pull request and would like to be updated when they are resolved:

Issue: [ref1]
Link: vercel/next.js#49087
PR: [ref2]
Link: vercel/next.js#52498

Please update or close this issue when the aforementioned issue and PR have been officially fixed and merged. Thank you!

> [email protected] dev
> next dev

   ▲ Next.js 14.0.4-canary.36
   - Local:        http://localhost:3000
   - Environments: .env
   - Experiments (use at your own risk):
     · esmExternals

Warning: Contentlayer might not work as expected on Windows
Contentlayer config change detected. Updating type definitions and data...
Generated 9 documents in .contentlayer
 ✓ Ready in 4.1s