sadmann7 / skateshop Goto Github PK
View Code? Open in Web Editor NEWAn open source e-commerce skateshop build with everything new in Next.js.
Home Page: https://skateshop.sadmn.com
License: MIT License
An open source e-commerce skateshop build with everything new in Next.js.
Home Page: https://skateshop.sadmn.com
License: MIT License
Hi,
first of all thank you for this project. I tried to implement Clerk into my Next.js app but I receive this error message:
Do you have an idea what that means? My implementation is equivalent to this part of your code:
https://github.com/sadmann7/skateshop/blob/main/src/components/auth/oauth-signin.tsx
Cheers,
Vintotan
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])
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
Is it possible to create product variants? I think having variants is essential for an ecommerce.
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.
When I run the application locally I see no product. How can I do it?
when visiting the site, it shows that error message .
Application error: client-side exception with digest 3976766164
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
Step to reproduce
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
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.
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;
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!!
"The function you pass to startTransition must be synchronous."
https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-as-a-transition
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.
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!
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.
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;
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
Why do u have server action and api route for join news letter ?? is it for demonstration purposes or ?
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'
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
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
clicking on shopping cart then on "proceed to checkout" wont take user to stripe checkout page on https://skateshop.sadmn.com/
When running pnpm run dev
, I got error:
error TypeError: fetch failed
`error TypeError: fetch failed
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!
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.
I am running it locally - http://localhost:3000/categories/clothing
but proceed to checkout button doesn't work.
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 ) ..
Hi,
I get this Error after running "pnpm run dev":
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'
}
When I execute npm run dev
> [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
nodejs version: 20.5.0
Did I make a mistake somewhere?
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.
Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "Ctrl" Client: "⌘"
See more info here: https://nextjs.org/docs/messages/react-hydration-error
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
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.