Creating a Zara-like e-commerce website using MedusaJS

4

Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to Creating a Zara-like e-commerce website using MedusaJS.

If you are new then you must check below two links:

• Medusajs Basic Tutorials
• Free Angular Admins

Now guys here is the complete code snippet and please follow carefully:

Creating a Zara-like e-commerce website using MedusaJS involves several steps. MedusaJS is an open-source headless commerce engine that allows developers to build flexible and scalable e-commerce platforms. Here’s a structured guide to build your project:

---

Step 1: Set Up Medusa Backend

1. Install Medusa CLI:

   npm install -g @medusajs/medusa-cli

2. Create a New Medusa Project:

   medusa new my-ecommerce-store
   cd my-ecommerce-store

3. Install Dependencies:
   Navigate to the project directory and install all dependencies.

   npm install

4. Run the Server:

   medusa develop

The default Medusa server runs on http://localhost:9000.

---

Step 2: Configure the Database

Medusa uses SQLite by default. For a production-grade setup, use PostgreSQL.

1. Update the database configuration in medusa-config.js:

   module.exports = {
     projectConfig: {
       database_type: "postgres",
       database_url: "postgres://user:password@localhost:5432/mydb",
     },
   };

2. Install PostgreSQL:

   npm install pg

---

Step 3: Add a Frontend

For a Zara-like frontend, you can use Next.js with Medusa’s REST or GraphQL APIs.

1. Initialize a Next.js Project:

   npx create-next-app@latest my-ecommerce-frontend
   cd my-ecommerce-frontend

2. Install Medusa Client:

   npm install @medusajs/medusa-js @medusajs/medusa-react

3. Set Up API Configuration:
   Create a context file to connect your frontend to the Medusa backend. Add a medusa.ts file:

   import { MedusaProvider } from "medusa-react";
   import { QueryClient, QueryClientProvider } from "react-query";

   const queryClient = new QueryClient();

   function MyApp({ Component, pageProps }) {
     return (
       <QueryClientProvider client={queryClient}>
         <MedusaProvider baseUrl="http://localhost:9000">
           <Component {...pageProps} />
         </MedusaProvider>
       </QueryClientProvider>
     );
   }

   export default MyApp;

4. Build Product Pages:
   Fetch products from the Medusa API and render them in a grid layout:

   import { useProducts } from "medusa-react";

   export default function Home() {
     const { products, isLoading } = useProducts();

     if (isLoading) return <p>Loading...</p>;

     return (
       <div className="grid grid-cols-3 gap-4">
         {products?.map((product) => (
           <div key={product.id}>
             <img src={product.thumbnail} alt={product.title} />
             <h3>{product.title}</h3>
             <p>{product.variants[0]?.prices[0]?.amount / 100} USD</p>
           </div>
         ))}
       </div>
     );
   }

---

Step 4: Customize the UI

1. Install Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init

2. Add Zara-Like Styling:
   Update tailwind.config.js and create styles resembling Zara’s minimalist design.
3. Enhance Product Pages:

• Add a Product Detail Page.
• Include filters for categories, sizes, and prices.
• Implement a cart and checkout flow.

---

Step 5: Deploy Your Application

1. Deploy the Medusa Backend:
   Use services like Heroku, DigitalOcean, or AWS.
2. Deploy the Frontend:
   Use platforms like Vercel or Netlify.

---

Step 6: Additional Features

• User Authentication: Add support for user accounts.
• Payment Gateway Integration: Use Medusa plugins for Stripe or other payment methods.
• Search Functionality: Use a service like Algolia.
• Multi-language Support: Localize your store for international audiences.

Let me know if you need help with any specific part!

---

Guys, you can design the UI of your MedusaJS-based e-commerce site to look like Zara’s minimalist and sleek design using a frontend framework like Next.js with Tailwind CSS or custom CSS.

Here’s how you can emulate Zara’s aesthetic:

---

Key UI Elements of Zara

1. Minimalist Design:

• Use lots of white space.
• Focus on clean lines and grids.
• Stick to a neutral color palette (white, black, gray).

1. Typography:

• Use bold, sans-serif fonts (e.g., Helvetica, Arial, or Google Fonts like Poppins or Inter).
• Large headings with small, concise body text.

1. Grid-Based Layouts:

• Showcase products in uniform, symmetrical grids.
• Use hover effects for product images (e.g., zoom-in or change image on hover).

1. Large Imagery:

• High-quality images dominate the screen.
• Full-width banners for promotions or new arrivals.

1. Responsive Design:

• Mobile-first approach.
• Easy navigation with a hamburger menu for mobile.

1. Subtle Animations:

• Smooth transitions on hover or when switching pages.
• Minimal but elegant effects.

---

Steps to Build the Zara-Like UI

1. Set Up Tailwind CSS for Minimalist Styling

Configure Tailwind CSS in your Next.js project and create a simple, clean design.

tailwind.config.js:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // Use a sleek font
      },
      colors: {
        gray: {
          100: '#f7f7f7',
          200: '#eaeaea',
          800: '#333333',
        },
      },
    },
  },
  plugins: [],
};

2. Homepage Layout

• Use a full-width banner for the hero section.
• Showcase categories or collections.
• Display a grid of products.

Example: pages/index.js:

export default function Home() {
  return (
    <div className="bg-white text-gray-800">
      {/* Hero Banner */}
      <section className="relative">
        <img
          src="/hero-image.jpg"
          alt="Hero"
          className="w-full h-[500px] object-cover"
        />
        <div className="absolute inset-0 flex items-center justify-center text-white">
          <h1 className="text-4xl font-bold">New Arrivals</h1>
        </div>
      </section>

      {/* Categories Section */}
      <section className="py-16 px-6">
        <h2 className="text-center text-3xl font-semibold mb-8">Shop by Category</h2>
        <div className="grid grid-cols-3 gap-4">
          {['Men', 'Women', 'Kids'].map((category) => (
            <div key={category} className="relative group">
              <img
                src={`/${category.toLowerCase()}.jpg`}
                alt={category}
                className="w-full h-80 object-cover"
              />
              <div className="absolute inset-0 bg-black bg-opacity-30 opacity-0 group-hover:opacity-100 flex items-center justify-center transition">
                <h3 className="text-white text-xl font-semibold">{category}</h3>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Product Grid */}
      <section className="px-6">
        <h2 className="text-center text-3xl font-semibold mb-8">Trending Now</h2>
        <div className="grid grid-cols-4 gap-6">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="group">
              <img
                src="/placeholder.jpg"
                alt="Product"
                className="w-full h-80 object-cover"
              />
              <h3 className="mt-2 text-lg font-medium">Product Name</h3>
              <p className="text-gray-500">$49.99</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

3. Navigation Bar

Zara has a simple navbar with:

• Logo in the center.
• Links (e.g., Men, Women, Kids).
• Hamburger menu for mobile.

Example Navbar:

export default function Navbar() {
  return (
    <nav className="fixed top-0 left-0 w-full bg-white shadow-md z-50">
      <div className="max-w-6xl mx-auto flex justify-between items-center p-4">
        <div className="text-lg font-semibold">Zara-Like</div>
        <div className="hidden md:flex space-x-6">
          <a href="#" className="text-gray-700 hover:underline">Men</a>
          <a href="#" className="text-gray-700 hover:underline">Women</a>
          <a href="#" className="text-gray-700 hover:underline">Kids</a>
        </div>
        <button className="md:hidden">
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4 6h16M4 12h16m-7 6h7"
            ></path>
          </svg>
        </button>
      </div>
    </nav>
  );
}

4. Product Page

The product page should include:

• A large product image.
• Details such as title, price, and description.
• Size and quantity selectors.

Example:

export default function ProductPage() {
  return (
    <div className="max-w-6xl mx-auto py-16 px-6">
      <div className="grid grid-cols-2 gap-8">
        <img src="/placeholder.jpg" alt="Product" className="w-full h-auto" />
        <div>
          <h1 className="text-2xl font-bold">Product Name</h1>
          <p className="text-lg text-gray-600 mt-4">$49.99</p>
          <p className="text-sm text-gray-500 mt-4">
            A detailed product description goes here. Include material, fit, and other specifics.
          </p>
          <button className="mt-6 bg-black text-white py-2 px-4">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}

---

Deploy and Iterate

Once your Zara-like design is ready:

1. Test the responsiveness.
2. Deploy the site (e.g., on Vercel).
3. Continuously tweak the design for better user experience.

Let me know if you face any issues during the setup! Please contact me I am full time freelancer.

Ajay

Thanks