Building a Modern E-commerce Platform with Next.js 15

Website: https://shopfake.joetohdjojo.com

Github Repository: https://github.com/joe-tohdjojo/shop-fake

Welcome to a comprehensive exploration of how I built SHPFK (Shop Fake), a modern e-commerce platform that prioritizes performance, accessibility, and developer experience. In this post, I'll walk you through the technical decisions, architecture patterns, and implementation details that make this project stand out.

The Tech Stack: Choosing Modern, Battle-tested Tools

Our foundation is built on cutting-edge technologies that provide a robust development experience:

• Next.js 15 - Leveraging the latest features including the App Router and Server Components
• React 19 - For building our interactive UI components
• TypeScript - Ensuring type safety across the entire codebase
• shadcn/ui - For beautiful, accessible component primitives
• Tailwind CSS - Enabling rapid UI development with utility-first CSS
• React Query v5 - Managing server state and data fetching
• React Hook Form - Handling form state and validation
• next-themes - For seamless dark mode implementation

Architecture Deep Dive

Authentication Flow

One of the most critical aspects of any e-commerce platform is user authentication. Here's how we've implemented a secure and seamless authentication system:

1. Cookie management across domains
2. Secure token storage
3. Refresh token rotation

Cookie Management Challenges

We faced several interesting challenges with cookie management, particularly when working with DummyJSON's API:

• DummyJSON's Set-Cookie headers lacked crucial attributes (Domain and SameSite)
• This created cross-origin access issues in modern browsers
• We solved this by implementing our own internal API route that:
  • Sets appropriate Domain attributes
  • Configures SameSite for security
  • Manages token refresh logic
  • Ensures httpOnly and secure flags

Performance Optimization with Server Components

The homepage showcases how we leverage Next.js 15's Server Components for optimal performance:

1. Featured Products Section

Server Component that fetches and renders featured products. This is done with Suspense boundary for better UX and the data is cached using Next.js's cache: 'force-cache' feature.

2. Categories Preview Section and Navigation Categories Component

Server Component that fetches and renders a preview of all categories. This is done with Suspense boundary for better UX and the data is not only cached using Next.js's cache: 'force-cache' feature, but also deduplicated to ensure only one fetch call happens.

Smart Data Fetching Patterns

I've implemented several patterns to optimize data fetching and state management:

The WithServerData Pattern

One of our most valuable abstractions is the WithServerData component:

<Suspense fallback={<div className="w-full space-y-6">Loading filter panel...</div>}>
  <WithServerData fetchFunction={fetchProductCategories}>
    {({ data, error }) => {
      if (error || !data) return null;
      return <FilterPanel.Desktop categories={data} />;
    }}
  </WithServerData>
</Suspense>

This pattern allows us to:

• Keep components client-side when needed
• Wrap them in Suspense for better UX
• Handle loading and error states elegantly

Shopping Cart Implementation

The cart system demonstrates advanced state management techniques:

1. Cart Context Management

• Uses React Query for server state
• Implements optimistic updates
• Handles offline scenarios

2. Add to Cart Flow

export function AddToCartButton({
  productId,
  productTitle,
  stock,
}: {
  productId: number;
  productTitle: string;
  stock: number;
}) {
  const router = useRouter();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const { data: user } = useUser();
  const { data: cart } = useCart();
  const { mutate } = useMutation({
    mutationKey: ['addToCart', productId],
    mutationFn: () => {
      if (!cart) {
        return addCart({
          products: [{ id: productId, quantity: 1 }],
          userId: user?.id,
        });
      }
      let productAdded = false;
      const products = cart.products.map(
        (product: Product & { quantity: number }) => {
          if (product.id === productId) productAdded = true;
          return {
            id: product.id,
            quantity: productAdded ? product.quantity + 1 : product.quantity,
          };
        },
      );

      if (!productAdded) products.push({ id: productId, quantity: 1 });

      return addCart({
        userId: user?.id,
        products,
      });
    },
    onSuccess: (data) => {
      if (!user || !data) return;
      queryClient.setQueryData(['cart'], (oldData: Cart) => {
        const newData = { ...data };
        newData.products = [
          ...((oldData || {}).products || []),
          data.products[data.products.length - 1],
        ];
        return newData;
      });
      toast({
        title: `${productTitle} has been added to your cart`,
      });
    },
  });

  const handleClick = () => {
    if (!user)
      return router.push(`${ROUTES.LOGIN.path}?redirect=${window.location}`);
    mutate();
  };

  return (
    <Button
      className="w-full"
      disabled={stock === 0}
      onClick={handleClick}
    >
      {stock === 0 ? 'Out of Stock' : 'Add to Cart'}
    </Button>
  );
}

Filter Panel and Product Grid

The shop page showcases several advanced patterns:

1. Filter Panel

• Client-side navigation with URL parameters
• Decoupled filter state management
• Responsive design considerations

2. Product Grid

• Server-side rendering with Suspense
• Efficient pagination implementation
• Dynamic query parameter handling

Lessons Learned and Best Practices

Throughout this project, several key principles emerged:

1. Performance First

• Server Components for static content
• Strategic client-side hydration
• Efficient data fetching patterns

2. Developer Experience

• Type safety across the stack
• Consistent code patterns
• Clear separation of concerns

3. User Experience

• Optimistic updates
• Skeleton loading states
• Smooth transitions

Future Improvements

While the current implementation serves its purpose well, here are some areas for future enhancement:

1. Backend Integration

• Replace DummyJSON with a real backend
• Implement proper cart persistence
• Add real-time inventory management

2. Performance Optimization

• Implement static path generation for products
• Add image optimization
• Implement proper caching strategies

Conclusion

Building SHPFK has been an exercise in applying modern web development practices to create a performant, maintainable e-commerce platform. The combination of Next.js 15's powerful features with carefully chosen patterns and abstractions has resulted in a codebase that's both powerful and pleasant to work with.

The source code is available on GitHub, and I welcome any feedback or contributions from the community.

Remember: while this implementation uses specific tools like Next.js and React Query, the patterns and principles discussed here can be applied to any modern web application.