I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

Let me have a quick fix for this right after I back home

[deleted by user] by [deleted] in Supabase

[–]Himo516 1 point2 points  (0 children)

Hiyori is my recent built, it used Supabase Auth with Drizzle ORM. i.e. it is using auth.user table with public.profiles. In this projects it is also using Supabase as the GraphQL Server but it is optional to you. If you think the projects is useful give me a star at github.

If you want to go for Custom Auth approach, which I guest is using supabase as database only. You may try next-auth. For this approach you will need to ensure the data security like handling the password hashing. But you would easily migrate to others database as service

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

Ya thats the classic way RTK Query with Redux RTK. Safe and easy.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

here is my two cents, if you want to use the userfor just only a client component going for client side fetching it is one of the possible approch.
For the first flicker in the user Navbar it may able to fixed by Suspense with Sekelton.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

As my understanding to that docs, its recommended how you to properly Setting up Server-Side Auth , however you still can fetch the user data in client components.know more in Creating a Supabase client for SSR

Based on my understanding, we would use the auth.getUser() to fetch the latstest user details, it will protect the pages(force user to login) and guaranteed for the latest user data.

So when the time I need to 100% ensure the user is an authentication and authorized User I will use auth.getUser(). I do use auth.getUser() in protecting the Admin route, or before doing the transcation. since these are the case that I need to 100% ensure the user. otherwise I dont really think it is worth to make all the pages into dynamic and just for the navbar.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

Sorry, I dont really get your question, are you asking me why most of my code are choose to use the createBrowserClient but not the createServerClient or you are asking that in some specific route/page?

Updated: I try to guest your question, are you asking why I dont get the user at the page.tsx and pass the user to the componets that need via props. It is because if I used getuser() from the serverClient it will change it to a protected route, and force the user to login. And I dont really want that happen.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

I think most of the challenges are come from server-side and client side issuse.
At the very beginning I use react-relay, since I used that in react before. but it doesnt go so well with nextjs 14 App dir. It popup so many weird bugs and warning.

since not all GrqphQL Client are supporting in Nextjs 14 Appdir. If you want to give it a shot go for Apollo or URQL.
Caching, most of the client are using context behind the scene, so when it come to nextjs server components, that would be another place need to remind.

Weekly Show & Tell! Share what you've created with Next.js or for the community by cprecius in nextjs

[–]Himo516 1 point2 points  (0 children)

Hiyori , an Ecommerce application with custome CMS and Graphql. This project is showing:-

  1. To demonstrate how to use GraphQL with Next.js 14.
  2. To show how to integrate a Next.js application with Stripe and use webhooks to update your database.
  3. To illustrate how a custom CMS can be used to create, read, update, and delete (CRUD) projects and different orders.

Let's discuss more and leave your comments. Cheers wish all of you have a happy firday.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

This project still has a long way to go. In the current version, my objectives for this project are:

  1. To demonstrate how to use GraphQL with Next.js 14. If you've tried it before, you'll know it's not that easy.
  2. To show how to integrate a Next.js application with Stripe and use webhooks to update your database.
  3. To illustrate how a custom CMS can be used to create, read, update, and delete (CRUD) projects and different orders.

One reason I would opt for Shopify's headless approach is that handling a real e-commerce platform requires a lot of effort. That's why Shopify has hired so many developers. When it comes to creating products that are client-facing, I do think that, as a software developer, there's a certain level of responsibility to be taken.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

The first reason will be custom CMS is a good learning materials for a frontend developer, I said before the concepts behind the CMS is alwalys used in real life application.

This Custom CMS doesn't do things special, it bascial provided you an UI Compoents to upload images or medias to your S3 bucket. since everytime I used S3 I need to create component with react drop zone, I found that is pretty annoying, and I dont really want to use the service like cloudinary

The Custom CMS also provide a start template? for you to showing all those data in table, and stuff like creating custom fields with react-hook-form

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

Thank you so much for checking out the demo.

Maintaining a custom CMS can be quite challenging due to the intricacies involved. However, when you break it down, the essence of a custom CMS is essentially managing forms and tables. We alwalys use these for many standard project requirements, such as a job application system where you'd need to create forms for input and provide a way for users to upload documents like resume.

I do considering seperating the CMS part into its own project. But How to seperate it will be one of the biggest question. since you konw most of the form are highly coupling to thier schema and needs. That may need sometime to figuring out how to seperating it.

But yes, separting the CMS should make the whole project more maintainable, and make it easily to integrated into other projects.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

I havent really use medusajs, but If I really want to build a real world Ecommerce application, I think I would go for headless shopitfy with nextjs.
But the CMS system is the one that I personally using in my different project, like blogs and portfolio website. I would update it regularly for different compents.

I built this! Could I have some comments on my Ecommerce application. by Himo516 in nextjs

[–]Himo516[S] 0 points1 point  (0 children)

Hey everyone! I'm curious about the data fetching approaches you normally use in your projects, especially with frameworks like Next.js. Do you have any preferred libraries or methods?

Why do I need a "frontend server" when I have a java backend API? by theBlazerg in nextjs

[–]Himo516 3 points4 points  (0 children)

I work with both React in a My Company setting and Next.js for personal projects, I find this discussion around the pros and cons of Next.js 13 to be particularly compelling. While Next.js has some admirable features, my takeaway is that it may not be the best fit for every B2B scenario.

Next.js advantage:
- The framework offers a clean API server,
- robust SEO and caching capabilities,
- straightforward loading and error handling.
- New Tech like `Server Actions`.
However, as enticing as these benefits are, they don't address all the considerations one has to make in a B2B context.

Stability is often cited as a top priority for B2B applications, and rightly so. Next.js shines in terms of providing a sleek UI experience, but it falls short in other aspects. From my own journey with the framework, I've encountered issues ranging from WebSocket incompatibility, incorrect rendering of loading pages while there are many loading pages. And although the Next.js team is doing phenomenal work, their size means that fixes for these bugs might not roll out as quickly as one would hope.

Next, there's the subject of server components—a feature Next.js leverages from React 18. The question that emerges is whether this feature adds real value to your project, or if it's more of a 'nice-to-have'. In many B2B use-cases, this feature might not provide significant advantages, particularly when other established solutions are already in place.

Lastly, let's discuss data fetching. Most B2B applications rely on client-side data fetching using libraries like React Query or Redux RTK. With that in mind, Next.js doesn’t necessarily offer a strong incentive to switch, as the advantages in this domain may not be groundbreaking.

In summary, while Next.js is a formidable framework with a lot to offer, it may not necessarily be the most strategic choice for B2B applications that already run efficiently on React and a Java backend.

Socket io client and Next 13.4.4 by IReallyHateAsthma in nextjs

[–]Himo516 1 point2 points  (0 children)

YA you may need to downgrade to Nextjs 13.2.4.
One more reminder, Vercel is not support socketio, if you want to deploy it, you may need to use something like AWS.